JavaScript之数组方法map详解（一）

1. map方法介绍

1.1 Array.prototype.map() 描述

• MDN描述：MDN关于map介绍及案例

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

• 菜鸟描述：菜鸟关于map介绍及案例

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
map() 方法按照原始数组元素顺序依次处理元素
map() 不会对空数组进行检测，同时也不会改变原数组，它将返回一个新数组

• W3School描述：W3School关于map介绍及案例

map()方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map()方法不会更改原始数组。

1.2 语法

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) 你没有从回调函数中返回值。

2. 范例及应用

2.1 对Number类型数组的处理

• 绝对值处理

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]

2.2 String 与 Number 类型互转

• String 转为 Number

let arr = ['4', '9', '25'];
let newArr = arr.map(Number);
console.log(newArr); //输出 [4, 9, 25]

• Number 转为 String

let arr = [4, 9, 25];
let newArr = arr.map(String);
console.log(newArr); // 输出 ['4', '9', '25']

2.3 取数组对象中某一属性组成新数组

let list = [
        { name: '张三', age: 18 },
        { name: '李四', age: 19 },
        { name: '王五', age: 20 },
        { name: '老六', age: 66 },
];
let newArr = list.map((obj) => obj.name);
console.log(newArr); // 输出 ['张三', '李四', '王五', '老六']

不仅仅于此，你也可以对这一属性或是新数组进行满足需求的一些操作，如：

• 年龄属性*2

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(','); //输出 张三,李四,王五,老六

2.4 提取数组对象的属性值组成新的数组对象

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

2.5 提取值，改变键值，组成新的数组对象

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

2.6 将字符串转化为数组

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的应用和范例

3. 注意点

1. map 支持链式调用 .map().filter().sort()
2. map 返回的数组可以包含 undefined

3. 通常情况下，map方法中的callback函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着map只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。例：
   ["1", "2", "3"].map(parseInt);我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN].
   解决：['1', '2', '3'].map( str => parseInt(str) );

本文是作者自己的经验以及从各博客论坛引用或收集的知识点，如有不足之处，还请见谅和指出。