先看最基础的技巧

示例一：

function assign(value) {

    if (value) {

        return value;

    } else {

        return 0;

    }

}

console.log(assign(1)); //

console.log(assign());  //

改版：

function assign(value) {

    return value = value || 0 ;

}

console.log(assign(1)); //

console.log(assign());  //

多说一点，jQuery中$.extend()也是同样道理。

示例二：

function addOne(value) {

    if (value > 5) {

        return (value + 1);

    } else {

        return value;

    }

}

console.log(addOne(1));     //

console.log(addOne(10));    //

改版：

function addOne(value) {

    var temp;

    return temp = (value > 5 && value + 1) || value;

}

console.log(addOne(1));     //

console.log(addOne(10));    //

在提下缺点，上述两个示例的缺点：降低了代码的可读性。只能实现一句表达式。

示例三：

var cats=[

    {name:'a',month:2},

    {name:'b',month:3},

    {name:'c',month:12},

    {name:'d',month:10},

    {name:'e',month:5}

];

var lookForCats=[];

for (var i = 0; i < cats.length; i++) {

    var cat = cats[i];

    if(cat.month>5){

        lookForCats.push(cat.name);

    }

}

console.log(lookForCats); // ["c", "d"]

改版：

var cats=[

    {name:'a',month:2},

    {name:'b',month:3},

    {name:'c',month:12},

    {name:'d',month:10},

    {name:'e',month:5}

];

function lookForStandard(cat) {

    return cat.month>5;

}

function getName(cat) {

    return cat.name;

}

lookForCats=cats.filter(lookForStandard).map(getName);

console.log(lookForCats); // ["c", "d"]

缺点：新建了数组。

补充一点：关于filter和map

filter：

　　1、filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组；

　　2、参数为一个方法，该方法有3个参数，value(值),index(索引),array(被遍历的数组) ；

　　3、会生成新的数组。

map:

　　1、map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组；

　　2、参数同filter；

　　3、会生成新的数组。

两者区别：

　　map():返回一个新的Array，每个元素为调用func的结果。修改数组每一项

　　filter():返回一个符合func条件的元素数组。找出数组中符合标准的每一项

实际应用：

实现功能：点击按钮涮选出用户所选爱好的值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../base/jquery-3.1.0.js"></script>

</head>

<body>

<div>

    性别：

    <label>

        <input type="radio" value="boy" name="sex">男

    </label>

    <label>

        <input type="radio" value="girl" name="sex">女

    </label>

    <br>

    爱好：

    <label>

        <input type="checkbox" value="1" name="hobby">足球

    </label>

    <label>

        <input type="checkbox" value="2" name="hobby">篮球

    </label>

    <label>

        <input type="checkbox" value="3" name="hobby">乒乓球

    </label>

    <label>

        <input type="checkbox" value="4" name="hobby">橄榄球

    </label>

    <label>

        <input type="checkbox" value="5" name="hobby">游泳

    </label>

    <label>

        <input type="checkbox" value="6" name="hobby">游戏

    </label>

    <br>

    <button id="btn">提交</button>

</div>

<script src="main.js"></script>

</body>

</html>
$(function () {

    var $btn = $('#btn'),

        $checkBox = $('input[name="hobby"]');

    function isChecked(target) {

        return target.checked;

    }

    function getValue(target) {

        return target.value;

    }

    $btn.on('click', function () {

        var checkedItems = $checkBox.toArray().filter(isChecked).map(getValue);

        console.log(checkedItems);

    });

});

任性不用for的更多相关文章

  1. 任性，新建对象不用new

    先看最简单的一个例子: window.meng = window.meng || {}; (function () { /** * * @param {Number}width * @param {N ...

  2. 重大新闻：借贷宝不用绑卡了，借贷宝APP推出肖像识别新功能！

    动动手指,20元人民币立即到手:http://www.cnblogs.com/mfryf/p/4754384.html 滴滴打车烧钱十几个亿,狂送打车券,很多人天天免费坐车! 去年年初百度钱包注册奖励 ...

  3. 算法面试题：一个List<Student>，要求删除里面的男生，不用Linq和Lamda，求各种解，并说明优缺点！

    算法面试题:一个List,要求删除里面的男生,不用Linq和Lamda,求各种解,并说明优缺点! 解题思路 这是群里某位小伙伴去面试碰到的面试题,从题目本身来看,面试官应该是要考察面试者对泛型 Lis ...

  4. 为什么不用rxjava?

    rxjava等系列产品.思想是很好的,但是被大多数人用成了一坨屎! 就拿rx最经典的那个例子来说: 假设有这样一个需求:界面上有一个自定义的视图 imageCollectorView ,它的作用是显示 ...

  5. 52. 不用＋、－、×、÷做加法[add two numbers without arithmetic]

    [本文链接] http://www.cnblogs.com/hellogiser/p/add-two-numbers-without-arithmetic.html [题目] 写一个函数,求两个整数的 ...

  6. 用java PreparedStatement就不用担心sql注入了吗？

    先感慨下,好久没写博客了,一是工作太忙,二是身体不太给力,好在终于查清病因了,趁着今天闲下来,迫不及待与读者交流,最后忠告一句:身体是活着的本钱! 言归正传,对java有了解的同学基本上都体验过JDB ...

  7. 有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

    写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...

  8. 背水一战 Windows 10 (25) - MVVM: 通过 x:Bind 实现 MVVM（不用 Command）

    [源码下载] 背水一战 Windows 10 (25) - MVVM: 通过 x:Bind 实现 MVVM(不用 Command) 作者:webabcd 介绍背水一战 Windows 10 之 MVV ...

  9. JS中用new创建对象与不用new创建对象区别：

    function classA() { console.log(this); var that = this == window ? {} : this; that.name = "clas ...

随机推荐

  1. ElementUI组件Cascader级联选择器数据后台处理

    Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...

  2. Vundle简介安装

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  3. LeetCode OJ：Merge k Sorted Lists（归并k个链表）

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 类 ...

  4. 第1课：接口测试和jmeter总结

    接口测试 1. 接口的分类:webService和http api接口 1) webService接口:是按照soap协议通过http传输,请求报文和返回报文都是xml格式,一般要借助工具来测试接口: ...

  5. jinfo用法说明

    以下几种用法 -flags pid :打印当前VM的参数 -flag <name> pid:打印指定JVM的参数值 -flag [+|-]<name> pid:设置指定JVM参 ...

  6. 构建Uber端到端技术栈的十条经验(转载)

    好文章就得分享: 一.SOA 系统设计包括若干个层面.先说顶层的系统设计原则,如 REST.SOA.由于 Uber 之前一直算一个创业公司,所以开发速度至关重要,由于微服务能够极大地促进不同组件的平行 ...

  7. vue.js 源代码学习笔记 ----- instance proxy

    /* not type checking this file because flow doesn't play well with Proxy */ import config from 'core ...

  8. EasyDSS流媒体服务器Linux emerg getpwnam("xxx") failed解决办法

    本文转自EasyDarwin开源团队Alex的博客:http://blog.csdn.net/cai6811376/article/details/73770943 EasyDSS 流媒体服务器是什么 ...

  9. 解决h5py的FutureWarning问题

    h5py/__init__.py:: FutureWarning: Conversion of the second argument of issubdtype from `float` to `n ...

  10. C++Builder中的延时函数

    第一种方法: 使用 Sleep(1000) 函数 如果使用Sleep(1000);的时候提示如此错误   [C++ Error] supplierPayment_.cpp(321): E2015 Am ...