先看最基础的技巧

示例一：

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. 【LeetCode 88_数组】Merge Sorted Array

    void merge(vector<int>& nums1, int m, vector<int>& nums2, int n) { ; ; ; &&a ...

  2. New Concept English three（19）

    27w/m 76words Kidnappers are rarely interested in Animals, but they recently took considerable inter ...

  3. Python中函数练习

    练习1:编写一个函数,接收一个字符串参数,返回一个元组(第一个元素为大写字母的个数,第二个元素为小写字母的个数) 解析:  练习二:编写函数,计算字符串匹配的准确率(orginStr为原始内容,use ...

  4. Function.bind 方法

    this.num = 9; var mymodule = { num: 81, getNum: function() { return this.num; } }; module.getNum(); ...

  5. react 问题

    安装依赖报错问题                                           可能需要按顺序安装,  不能cnpm npm 混合安装, 参考react项目入门 react an ...

  6. $.ajax 的速度要快于 angular 里 $http (个别情况)

    $.ajax: $http:

  7. Python如何输出带颜色的文字

    print('\033[31m%s' % "这是前景色") 这是前景色 print('%s' % "这是前景色") 这是前景色 print('\033[1;31 ...

  8. Java面试题收集以及参考答案（100道）

    不积跬步无以至千里,这里会不断收集和更新Java基础相关的面试题,目前已收集100题. 1.什么是B/S架构?什么是C/S架构 B/S(Browser/Server),浏览器/服务器程序 C/S(Cl ...

  9. Ubuntu16.04 --> 14.04

    从16到14 自认为14是比较稳定的.从安装依赖上说. 14安装应用 更多参见[请直接拉到"华丽丽的分割线"下面] Java9 注意,添加源的时候先把lantern打开!!! 添加 ...

  10. lx 与cd 的计算方法

    Candela to lux calculation with distance in meters The illuminance Ev in lux (lx) is equal to the lu ...