underscorejs-each學習

2.1 each

2.1.1 語法:

_.each(list, iteratee, [context])

2.1.2 說明：

依次對集合的所有元素進行某種操作，原樣返回list。接收3個參數，list集合可以理解為數據源；iteratee即迭代器可以理解為回調方法;context執行上下文。

• list可以為數組，對象，字符串和arguments
• iteratee 會傳第三個參數(element, index, list)或(value, key, list)
• context可以改變iteratee內部的this

2.1.3 代碼示例：

示例一：each可以循環數組、對象、字符串和arguments

//遍歷數組
_.each([1, 2, 3], function (element, index, list) {
    console.log(element);
});

//遍歷對象
_.each({one: '一', two: '二', three: '三'}, function(value, key, list){
    console.log(value);
});

//遍歷字符串
_.each('123', function(element, index, list){
    console.log(element);
});

//遍歷arguments
function abc(){
    _.each(arguments, function(element, index, list){
       console.log(element);
    });
}
abc(1, 2, 3);

示例二：iteratee傳遞的參數

//數組的情況
_.each([1, 2, 3], function (element, index, list) {
    console.log(element, index, list);
    //1 0 [1, 2, 3]
    //2 1 [1, 2, 3]
    //3 2 [1, 2, 3]
});

//對象的情況
_.each({one: '一', two: '二', three: '三'}, function(value, key, list){
    console.log(value, key, list);
    //一 one Object {one: "一", two: "二", three: "三"}
    //二 two Object {one: "一", two: "二", three: "三"}
    //三 three Object {one: "一", two: "二", three: "三"}
});

示例三：context可以改變iteratee內部的this

_.each([1], function (element, index, list) {
    console.log(this); //window
});

_.each([1], function (element, index, list) {
    console.log(this); //{key: 1}
}, {key : 1});

示例四：each的返回值

var arr1 = _.each([1, 2, 3], function (element, index, list) {
});

var arr2 = _.each({one: '一', two: '二', three: '三'}, function(element, index, list){
});
console.log(arr1); //[1, 2, 3]
console.log(arr2); //Object {one: "一", two: "二", three: "三"}

2.1.4 _.forEach的功能和_.each是一樣的

_.forEach([1, 2, 3], function (element, index, list) {
    console.log(element);
});

2.1.5 遍歷非集合

_.each(null, function (element, index, list) {
    console.log(element); //不執行
});

_.each(undefined, function (element, index, list) {
    console.log(element); //不執行
});

_.each(123, function (element, index, list) {
    console.log(element); //不執行
});

_.each(new Date(), function (element, index, list) {
    console.log(element); //不執行
});

遍歷特殊值都不會報錯，但也不執行。在遍歷一個集合的時候，最好能先確定他是數組或對象等。

2.1.6 iteratee還可以是全局的方法

_.each([1, 2, 3], alert); //會彈三次

2.1.7 iteratee里面console.log為什么不行？(坑)

_.each([1, 2, 3], console.log); //Uncaught TypeError: Illegal invocation

gitbook地址：https://www.gitbook.com/book/niec-fe/underscorejs/details