先看最基础的技巧

示例一：

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. docker 快速搭建 WordPress

    安装Docker 环境:阿里云服务器 镜像:CentOs 7.4 64 https://docs.docker.com/install/linux/docker-ce/centos/ 安装WordPr ...

  2. LeetCode OJ：Gas Station（加油站问题）

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  3. L153

    警言是指传达一般真理或某种言论的短小句子.An aphorism is a short witty sentence which expresses a general truth or commen ...

  4. Linux0.11信号处理详解

    之前在看操作系统信号这一章的时候,一直是云里雾里的,不知道信号到底是个啥玩意儿..比如在看<Unix环境高级编程>时,就感觉信号是个挺神奇的东西.比如看到下面这段代码: #include& ...

  5. Python中注释的添加

    1.Python中注释,有助于我们对程序的理解:但注释不需要每行都写,可以在方法前面注释该方法的功能 或重要的一行进行注释. 2.单行注释,使用#号: 3.多行注释,使用""&qu ...

  6. Eclipse下配置Maven

    1.修改maven根目录下的conf/setting.xml文件,主要修改localRepository属性,用于管理maven下载的jar文件存放的位置. 2.修改eclipse的maven配置,w ...

  7. flask 文件的上传下载和excel操作

    文件的下载 from flask import send_from_directory @excel_bp.route('/get_attachment/<path:filename>') ...

  8. IOS开发 CocoaPods 使用 pod Install 出现 Updating local specs repositories

    pod install 换成pod install --verbose --no-repo-update这个命令,前面的命令被墙了

  9. 【排序】插入排序，C++实现

    # 基本思想 每一步将一个待排序的记录,插入到前面已经排好序的有序序列中去,直到插完所有元素为止. # C++代码 #include<iostream> #include<vecto ...

  10. librec库

    固定初始化矩阵值 net.librec.math.structure -> class DenseMatrix -> void init()