underscorejs-map学习

时间:2022-01-28 22:53:38

2.2 map

2.2.1 语法:

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

2.2.2 说明:

对集合的每个成员依次进行某种操作,将返回的值依次存入一个新的数组。接收3个参数。list可理解为数据源iteratee迭代器可理解为回调方法;context执行上下文。

  • list可以操作数组,对象,字符串和arguments
  • iteratee 会传第三个参数(element, index, list)或(value, key, list)
  • iteratee里面需要返回值。
  • context可以改变iteratee内部的this

2.2.3 代码示例:

示例一: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内部需要有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]

2.1.4 _.collect的功能和_.map是一样的

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

2.1.5 操作非集合,返回空数据

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); //=> []

2.1.6 iteratee还可以是全局的方法

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

2.1.7 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]

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