先看最基础的技巧

示例一：

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. mac下mysql 1045 (28000): Access denied for user 'root'@'localhost' (using password:

    新入了mac pro,安装好mysql后,用终端进入mysql遇到个问题: 1045 (28000): Access denied for user 'root'@'localhost' (using ...

  2. LINUX系统下CIFS文件系统

    一.什么是CIFS CIFS(Common  Internet  File  System)文件系统,也叫通用网络文件系统:它可以使一台主机访问远程主机上共享出去的文件.CIFS使用的C/S模式(客户 ...

  3. Linux:grub密码设置与修改

    grub密码设置与修改 默认GRUB启动参数可以的进入单用户模式从而修改root密码,如果想要给GRUB菜单设置密码,可以修改/etc/grub.conf文件 (/boot/grub/grub.con ...

  4. 动态PIVOT行转列

    id name subject score remark1 l math 86 2 l eng 68 3 l phy 88 4 z chn 99 5 z math 92 6 z com 98 7 z ...

  5. 如何使用JFinal开发javaweb

    介绍开始: 编辑器:MyEclipse; 数据库:MySQL; 服务器:tomcat; 1 首先新建web项目 要强调的是Target runtime必须选择为None.然后点击两次Next,选中创建 ...

  6. visual studio 调试时提示 已加载“C:\Windows\SysWOW64\ntdll.dll”。无法查找或打开 PDB 文件。

    问题描述 “Win32Project3.exe”(Win32): 已加载“D:\software\VS2013\VS2013 文档\Win32Project3\Debug\Win32Project3. ...

  7. Vim技能修炼教程(2) - 语法高亮速成

    语法高亮速成 我们继续在人间修行Vim技能之旅.上一次我们学习了如何通过vundle安装插件,这次我们迅速向写插件的方向挺进. 我们先学习一个最简单的语法高亮插件的写法. 语法高亮基本上是由三部分组成 ...

  8. $timeout

    $timeout 会在执行后刷新页面上 与angular 相关的变量,在于jQuery共用修改页面变量时,这很可能会导致刷新跳动的现象:

  9. iOS下简单实现滑动导航条

    功能介绍 最近在做一款ios的app,其中有一个页面需要分成三个版块,版块之间可以通过左右滑动来进行切换,也可以通过点击上方的按钮来切换,好像在android中可以用过ViewPager + Frag ...

  10. nodejs返回接口给前端

    1.修改app.js文件,将其中的user路由去掉. 2.在index路由中配置如下:   router.all('*', function(req, res, next) { res.header( ...