JS进阶2 -- 数组API：map, flatMap, reduce

在 JS进阶1 – Promise原理及应用中我们学习了Promise的原理以及相关API的使用，本文将继续重点跟大家介绍JS中的第2个重点内容 – 数组API：map, flatMap, reduce。废话不多说，一起来看看吧！

2-数组API：map, flatMap, reduce

2-1 map

• map接收一个函数参数，这个函数可以按顺序接收三个参数，分别是item, index, arr, 其中：
  • item指的是从第0项元素到最后的所有元素
  • index指的是数组的下标
  • arr指的是整个数组
• 通过map遍历返回的数据形成新数组与原数组之间没有引用关系
• 通过map遍历返回的新数组长度和原数组的长度是完全相等的
• map和forEach的区别
  • map有返回值，forEach没有返回值

	// map
    let arr = [1, 2, 3, 4, 5];
    let arr1 = arr.map(function(item, index, arr) {
        console.log(item, index, arr);
        return item * 2;
    });
    arr[0] = 20;
    console.log(arr1);  // 2 4 6 8 10

2-2 flatMap

• flatMap接收一个函数参数，这个函数可以按顺序接收三个参数，分别是item, index, arr, 其中：
  • item指的是从第0项元素到最后的所有元素
  • index指的是数组的下标
  • arr指的是整个数组
• 通过flatMap遍历返回的数据形成新数组与原数组之间没有引用关系
• 与map相比，flatMap可以改变返回数组的长度

	// faltMap
    let arr2 = arr.flatMap(function(item, index,arr) {
        console.log(item, index, arr);
        return [item, item + 10];
    });
    arr[0] = 20;
    console.log(arr2);

2-3 reduce

• reduce接收一个函数参数，这个函数可以按顺序接收四个参数，分别是sum, item, index, arr, 其中：
  • sum: 指的是数组的第0项元素
  • item指的是从第1项元素到最后的所有元素
  • index指的是数组的下标
  • arr指的是整个数组
    注意：
    • return 将会把sum+item的结果重新赋值给sum,并且继续轮寻计算，最后完成的结果返回给变量
    • 如果给了初始值,sum就是初始值，item就不再从第1项开始了，而是从第0项开始

	// reduce
    let sum = arr.reduce(function(sum, item, index, arr) {
        console.log(sum, item);
        return sum + item;
    });
    console.log(sum);  // 15
    /*
        如果给了初始值(100),sum就是100，item就不再从第1项开始了，而是从第0项开始
    */
    let sum1 = arr.reduce(function(sum, item) {
        return sum + item;
    }, 100);
    console.log(sum1);  // 115
	// 应用：计算商品总价
    let productList = [
        {id: 1001, name: 'aaa', price: 30, num: 2, sum: 60},
        {id: 1002, name: 'bbb', price: 50, num: 2, sum: 100},
        {id: 1003, name: 'ccc', price: 40, num: 2, sum: 80},
        {id: 1004, name: 'ddd', price: 70, num: 2, sum: 140}
    ]

    let totalPrice = productList.reduce(function(sum, item) {
        return sum + item.sum;
    }, 0);
    console.log(totalPrice);  // 380 = 60 + 100 + 80 + 140