map()
方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
map()
方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
map()
方法按照原始数组元素顺序依次处理元素
map()
不会对空数组进行检测,同时也不会改变原数组,它将返回一个新数组
map()
方法通过对每个数组元素执行函数来创建新数组。
map()
方法不会对没有值的数组元素执行函数。
map()
方法不会更改原始数组。
var new_array = arr.map((val,index,array)=> { //process })
<script>
var arr = [1, 2, 3];
var newArr = arr.map((val, index, array) => {
console.log(val); // 依次输出 1,2,3
console.log(index); // 依次输出 0,1,2
console.log(array); // 依次输出 [1,2,3],[1,2,3],[1,2,3]
});
</script>
与其它数组迭代方式一样,map的回调函数也有三个参数(可以单独使用val
,隐藏index
和array
):
val
index
array
注:因为
map
生成一个新数组,当你不打算使用返回的新数组却使用map
是违背设计初衷的,请用forEach
或者for-of
替代。你不该使用map
:
A) 你不打算使用返回的新数组,或/且
B) 你没有从回调函数中返回值。
let arr = [-1, 2, -3];
let newArr = arr.map(Math.abs);
console.log(newArr); // 输出 [1, 2, 3]
注:Math.abs(val)
返回 val 的绝对值
let arr = [4, 9, 25];
let newArr = arr.map(Math.sqrt);
console.log(newArr); // 输出 [2, 3, 5]
注:Math.sqrt(val)
返回 val 的平方根
let arr = [4, 9, 25];
let newArr = arr.map((val) => val * 2);
console.log(newArr);// 输出 [8, 18, 50]
let arr = ['4', '9', '25'];
let newArr = arr.map(Number);
console.log(newArr); //输出 [4, 9, 25]
let arr = [4, 9, 25];
let newArr = arr.map(String);
console.log(newArr); // 输出 ['4', '9', '25']
let list = [
{ name: '张三', age: 18 },
{ name: '李四', age: 19 },
{ name: '王五', age: 20 },
{ name: '老六', age: 66 },
];
let newArr = list.map((obj) => obj.name);
console.log(newArr); // 输出 ['张三', '李四', '王五', '老六']
不仅仅于此,你也可以对这一属性或是新数组进行满足需求的一些操作,如:
let newArr = list.map((obj) => obj.age * 2); //输出 [36, 38, 40, 132]
let newArr = list.map((obj) => obj.age).sort((a, b) => b - a); // 输出 [66, 20, 19, 18]
let newArr = list.map((obj) => obj.name).join(','); //输出 张三,李四,王五,老六
let list = [
{ name: '张三', age: 18 },
{ name: '李四', age: 19 },
{ name: '王五', age: 20 },
{ name: '老六', age: 66 },
];
let newArr = list.map((obj) => {
let arrObj = {};
arrObj[obj.name] = obj.age;
return arrObj;
});
console.log(newArr); // 输出 [{张三: 18}, {李四: 19}, {王五: 20}, {老六: 66}]
let list = [
{ name: '张三', age: 18 },
{ name: '李四', age: 19 },
{ name: '王五', age: 20 },
{ name: '老六', age: 66 },
];
let newArr = list.map((obj) => {
return {
username: obj.name,
birthYear: new Date().getFullYear() - obj.age,
};
});
console.log(newArr); // 输出 [{username: '张三', birthYear: 2004},
// {username: '李四', birthYear: 2003},
// {username: '王五', birthYear: 2002},
// {username: '老六', birthYear: 1956}]
var str = 'helloWorld';
var result = Array.prototype.map.call(str, (item) => item);
console.log(result); // 输出 ['h', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd']
后续还会不断更新map
的应用和范例
.map().filter().sort()
undefined
- 通常情况下,
map
方法中的callback
函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着map
只给callback
传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。例:
["1", "2", "3"].map(parseInt);
我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN].
解决:['1', '2', '3'].map( str => parseInt(str) );
本文是作者自己的经验以及从各博客论坛引用或收集的知识点,如有不足之处,还请见谅和指出。