JS

Sissivic · 发表于 2020-10-25 17:34:52

reduce()

过去有很长一段时间，我一直很难理解 reduce() 这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中 reduce() 的用法。

一、语法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中，
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~

二、实例

先提供一个原始数组：

var arr = [3,9,4,3,6,0,9];

实现以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

1. 求数组项之和var sum = arr.reduce(function (prev, cur) { return prev + cur;},0);

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2. 求数组项最大值var max = arr.reduce(function (prev, cur) { return Math.max(prev,cur);});

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

3. 数组去重var newArr = arr.reduce(function (prev, cur) { prev.indexOf(cur) === -1 && prev.push(cur); return prev;},[]);

实现的基本原理如下：

① 初始化一个空数组
② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回

三、其他相关方法1. reduceRight()

该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

2. forEach()、map()、every()、some()和filter()

详情请戳→简述forEach()、map()、every()、some()和filter()的用法

重点总结：

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的

先看w3c语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue);/*  total: 必需。初始值, 或者计算结束后的返回值。  currentValue：必需。当前元素。  currentIndex：可选。当前元素的索引；                      arr：可选。当前元素所属的数组对象。  initialValue: 可选。传递给函数的初始值，相当于total的初始值。*/常见用法数组求和[url=][/url]
const arr = [12, 34, 23];const sum = arr.reduce((total, num) => total + num);const arr = [12, 34, 23];const sum = arr.reduce((total, num) => total + num, 10);  // 以10为初始值求和var result = [  { subject: 'math', score: 88 },  { subject: 'chinese', score: 95 },  { subject: 'english', score: 80 }];const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0); const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10);  // 总分扣除10分[url=][/url]

数组最大值const a = [23,123,342,12];const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342
进阶用法数组对象中的用法[url=][/url]
const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];const res = objArr.reduce((pre, cur, index, arr) => {  if (index === 0) { return cur.name;  }  else if (index === (arr.length - 1)) { return pre + '和' + cur.name;  }  else { return pre + '、' + cur.name;  }}, '');[url=][/url]

求字符串中字母出现的次数const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});
数组转数组var arr1 = [2, 3, 4, 5, 6]; // 每个值的平方var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);
数组转对象var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});
高级用法
https://www.cnblogs.com/amujoe/p/11376940.htmlhttps://www.jianshu.com/p/b728253c90b5

在Javascript中，如何处理数组中的每一项数据？

有人可能会说，这还不简单，直接一个for循环遍历一下就好了。
是的，确实，这是最常见的做法。
但是，除此之外，ES5还提供了处理数组更加方便的方法，如题。
接下来，我将通过几个简单的实例来具体讲解这几个方法。
一、forEach()，用于遍历数组，无返回值这里先给出一个数组（以下例子通用）：
var arr = [1,-2,3,4,-5];
然后我要做事情的就是，将数组中的每一项翻倍。
arr.forEach(function(item,index,array){ array[index] = item * 2;});console.log(arr); // [2,-4,6,8,-10]
可以看到，forEach()可以传入一个匿名函数作为参数，而该匿名函数有含有三个参数，其依次代表数组遍历时的当前元素item，数组遍历时的当前元素的索引index，以及正在遍历的数组array。有了这三个参数，可以方便我们做很多事情，比如说示例当中将每一项数组元素翻倍，这时需要用到第一个参数item。但是，仅仅只是将item乘以2可不行，我们还得将其赋值给原来的数组，这时我们就得用到后面两个参数index和array。
根据上述可知，array[index]是全等于item的。
arr.forEach(function(item,index,array){ console.log(array[index] === item); // true});
二、map()，用于遍历数组，返回处理之后的新数组var newArr = arr.map(function(item,index,array){ return item * 2;});console.log(newArr); // [2,-4,6,8,-10]
可以看到，该方法与forEach()的功能类似，只不过map()具有返回值，会返回一个新的数组，这样处理数组后也不会影响到原有数组。
三、every()，用于判断数组中的每一项元素是否都满足条件，返回一个布尔值var isEvery = arr.every(function(item,index,array){ return item > 0;});console.log(isEvery); // false
可以看到，示例中是要判断数组arr中的元素是否都为正数，很显然不是，所以该方法最终返回false。
四、some()，用于判断数组中的是否存在满足条件的元素，返回一个布尔值var isSome = arr.some(function(item,index,array){ return item < 0;});console.log(isSome); // true
可以看到，该方法与every()类似，示例中是要判断数组arr中是否存在负数元素，很显然存在，所以该方法最终返回true。
五、filter()，用于筛选数组中满足条件的元素，返回一个筛选后的新数组var minus = arr.filter(function(item,index,array){ return item < 0;});console.log(minus); // [-2, -5]
可以看到，示例中是要筛选出数组arr中的所有负数，所以该方法最终返回一个筛选后的新数组[-2, -5]。
补充： 以上五大方法除了传递一个匿名函数作为参数之外，还可以传第二个参数，该参数用于指定匿名函数内的this指向，例如：
// 只传一个匿名函数arr.forEach(function(item,index,array){ console.log(this); // window});
// 传两个参数arr.forEach(function(item,index,array){ console.log(this); // [1, -2, 3, 4, -5]},arr);
兼容性： 由于以上方法均属ES5方法，所以IE8及其以下浏览器均不兼容。
重点总结：

① forEach()无返回值，map()和filter()返回新数组，every()和some()返回布尔值
② 匿名函数中this指向默认为window，可通过传第二参数来更改之
③ 五种遍历方法均为ES5方法

珍妮王小钰 · 发表于 2021-1-10 14:14:39

”當你真心渴望某樣東西時，整個宇宙都會聯合起來幫你完成。” 也就是所謂的吸引力法則。於是，我上網找到了綠卡的樣本，把頭像PS成自己的，放大列印出來。我把它貼在臥室的天花板上，這樣每天早上一睜開眼睛就可以看到我的綠卡。當你有很強的意念，並相信會成真時，就會吸引夢想逐漸與你靠近。經歷了這奇蹟，我是相信了，你不彷一試。

顿时心里一惊，真的拿到了。不敢相信！突然发现，当你敢于对宇宙下订单时，连老天爷都会帮助你。

这件事情成功以后，让我对吸引力法则实际操作步骤有了一些总结。

1、做足准备

2、目标要足够清晰，别想要的太多，不然老天不知道你要什么。

3、不要有杂念，别去想能不能达成？想如何达成就可以了。

4、想想达成后的感觉是什么？

5、在这个过程中，去找可能达成的因素，尽可能促成这件事达成。

6、别犹豫，相信老天爷对你的暗示

JS

所属分类: 职业发展

正在浏览此版块的会员 ()