1. 程式人生 > >underscorejs之_.map(list, iteratee, [context])

underscorejs之_.map(list, iteratee, [context])

不變 abs 不執行 spa pan core ext 操作數 text

語法:

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

說明:

對集合的每個成員依次進行某種操作,將返回的值依次存入一個新的數組。接收3個參數。list可理解為數據源iteratee叠代器可理解為回調方法;context執行上下文。

  • list可以操作數組,對象,字符串和arguments
  • iteratee 會傳第三個參數(element, index, list)或(value, key, list)
  • iteratee裏面需要返回值。
  • context可以改變iteratee內部的this

代碼示例:

示例一:map對數組、對象、字符串和arguments進行操作並返回數組。

var result;

//操作數組
result =  _.map([1, 2, 3], function (element, index, list) {
    return element + 1;
});
console.log(result) //=> [2, 3, 4]

//操作對象
result = _.map({one: ‘一‘, two: ‘二‘, three: ‘三‘}, function(value, key, list){
    return value + 1;
});
console.log(result) //=> ["一1", "二1", "三1"]

//
操作字符串 result = _.map(‘123‘, function(element, index, list){ return element + 1; }); console.log(result) //=> ["11", "21", "31"] //操作arguments function abc(){ result = _.map(arguments, function(element, index, list){ return element + 1; }); console.log(result); //=> [2, 3, 4] } abc(
1, 2, 3);

示例二:iteratee傳遞的參數

var result;

//數組的情況
result = _.map([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]
});

//對象的情況
result = _.map({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: "三"}
});
示例三:iteratee內

示例三:iteratee內部需要有return值

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

var arr2 = _.map([1, 2, 3], function (element, index, list) {
    return element + 1;
});
console.log(arr1); //=> [undefined, undefined, undefined]
console.log(arr2); //=> [2, 3, 4]

示例四:context可以改變iteratee內部的this

var result = _.map([1, 2, 3], function (element, index, list) {
    return element + this.no; //this為{no : 10}
}, {no : 10});

console.log(result);//=> [11, 12, 13]

示例五:map方法執行後,list不變,返回新數組。

var list = [1, 2, 3];

var result = _.map(list,  function(element, index, list){
    return element + 1;
});

console.log(list); //=> [1, 2, 3]
console.log(result); //=> [2, 3, 4]

_.collect的功能和_.map是一樣的

var result = _.collect([1, 2, 3],  function(element, index, list){
    return element + 1;
});
console.log(result); //=> [2, 3, 4]

操作非集合,返回空數據

var arr1 = _.map(null, function (element, index, list) {
    console.log(element); //不執行
});

var arr2 = _.map(undefined, function (element, index, list) {
    console.log(element); //不執行
});

var arr3 = _.map(123, function (element, index, list) {
    console.log(element); //不執行
});

var arr4 = _.map(new Date(), function (element, index, list) {
    console.log(element); //不執行
});
console.log(arr1); //=> []
console.log(arr2); //=> []
console.log(arr3); //=> []
console.log(arr4); //=> []

iteratee還可以是全局的方法

var result = _.map([1, -2, -3], Math.abs);
console.log(result); //=> [1, 2, 3]

iteratee裏面用console.log需要bind(坑)

var result = _.map([1, -2, -3], console.log.bind(console));
//=> 1 0 [1, -2, -3]
//=> -2 1 [1, -2, -3]
//=> -3 2 [1, -2, -3]

underscorejs之_.map(list, iteratee, [context])