JavascriptES6新特性之map和reduce详解

2022-04-17 04:10:13 来源：易采站长站作者：

说明

ES6中，数组新增了map和reduce方法。

1.map()

map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

代码示例：

有一个字符串数组，我们希望转为int数组

let arr = ['1', '20', '-5', '3'];console.log(arr)//传统写法let newArr = arr.map(function(s) {return parseInt(s);});console.log(newArr); //输出[1,20,-5,3]//箭头函数let newArr2 = arr.map(s => parseInt(s));console.log(newArr2) //输出[1,20,-5,3]

在这里插入图片描述

2.reduce()

reduce() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数。下面我们详细的来看一下：

;let result = arr.reduce((a, b) => { console.log('上一次计算结果值： '+a); console.log('当前数值： '+b);console.log('当前return的值(a+b)：'+(a+b)); return a+b;}, 100);console.log(result);

在这里插入图片描述

综CziDOi合案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ES易采站长站6新特性学习-(9)-扩展运算符</title></head><body><script>//ES6中，数组新增了map和reduce方法。//1.map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。 //举例：有一个字符串数组，我们希望转为int数组let arr = ['1', '20', '-5', '3'];console.log(arr)//传统写法let newArr = arr.map(function(s) {return parseInt(s);});console.log(newArr); //输出[1,20,-5,3]//箭头函数let newArr2 = arr.map(s => parseInt(s));console.log(newArr2) //输出[1,20,-5,3]// 2.reduce() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数： const arr = [1, 20, -5, 3]//此时a=1,b=20开始从左往右循环处理let result1 = arr.reduce((a, b) => {return a + b;});console.log(result1); //输出 19//当有初始值传入的时候， a=1,b=1，开始从左往右循环处理let result2 = arr.reduce((a, b) => {return a + b;}, 1)console.log(result2); //输出 20</script></body></html>