任性不用for

先看最基础的技巧

示例一：

function assign(value) {
    if (value) {
        return value;
    } else {
        return 0;
    }
}
console.log(assign(1)); // 1
console.log(assign());  // 0

改版：

function assign(value) {
    return value = value || 0 ;
}
console.log(assign(1)); // 1
console.log(assign());  // 0

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

示例二：

function addOne(value) {
    if (value > 5) {
        return (value + 1);
    } else {
        return value;
    }
}
console.log(addOne(1));     //1
console.log(addOne(10));    //11

改版：

function addOne(value) {
    var temp;
    return temp = (value > 5 && value + 1) || value;
}
console.log(addOne(1));     //1
console.log(addOne(10));    //11

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

示例三：

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);
    });

});

posted @ 2017-02-14 11:32 晨落梦公子阅读(124) 评论(0) 编辑收藏举报

晨落梦公子

任性不用for

公告