先看最基础的技巧

示例一：

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. C++ 各种继承方式的类内存布局

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. Webstorm常用快捷键大全

    webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目.今天整理了一些webstorm比较实用的快捷键: Ctrl+/ 或 Ctrl+Shift+/ 注释(// ...

  3. Datastage8.5导入导出DS作业例子

    以下为Datastage8.5的命令行方式的导入和导出,直接登陆服务器执行如下命令即可.不是Datastage客户端的导入和导出,使用命令行方式的好处是:可以将该命令使用shell脚本进行调用导入和导 ...

  4. 2017.10.23 Arduino Atmel EFM32低功耗监测

    mark:因为最近一直调试(维护)客户的EFM32,和其他系列的Atmel芯片.对atmel不熟悉,做点功课. 1. 自建Arduino 最小系统(原来树莓派都是Atmel的芯片) http://ww ...

  5. 浅析Postgres中的并发控制(Concurrency Control)与事务特性(上)（转）

    这篇博客将MVCC讲的很透彻,以前自己懂了,很难给别人讲出来,但是这篇文章给的例子就让人很容易的复述出来,因此想记录一下,转载给更多的人 转自:https://www.cnblogs.com/flyi ...

  6. Android 框架学习2：源码分析 EventBus 3.0 如何实现事件总线

    Go beyond yourself rather than beyond others. 上篇文章 深入理解 EventBus 3.0 之使用篇 我们了解了 EventBus 的特性以及如何使用,这 ...

  7. java List 学习

    要学习List<E>接口,首先,我知道它还有一个父接口Collection<E>.而Collection<E>又有一个超级接口Iterable<T>. ...

  8. 8.另类方法求1+2+...+n[AnotherMethodOfCalculateSumN]

    [题目] 求1+2+…+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字以及条件判断语句(A?B:C). [分析] 这道题没有多少实际意义,因为在软件开发中不 ...

  9. Debian 8 Jessie desktop on arm

    /********************************************************************* * Debian 8 Jessie desktop on ...

  10. Linux运行环境搭建（一）——安装JDK

    下载Linux版jdk 官网:http://www.oracle.com/technetwork/java/javase/downloads/index.html 解压并拷贝到指定目录 tar zxv ...