forEach
forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.
let array = [1, 2, 3, 4]; array.forEach((item, index, arr) => { console.log(item); }); forEach()的用法大概就是这样的, 不过不知道各位发没发现一个问题, forEach()不能跳出循环, 我说的跳出循环是跳出整个循环而不是跳出当前的循环, 口说无凭, 直接上代码.
let array = [1, 2, 3, 4, 5]; array.forEach((item) => { if (item > 2) { return; } console.log(item); }); 各位, 上面的代码会输出啥呢?
答案是: 1 2
这时候有人就会说了, 这不是跳出循环了吗, 其实并不是, 它仍然把数组挨个遍历了一遍, 把输出换个位置我们就会发现了.
let array = [1, 2, 3, 4, 5]; array.forEach((item) => { console.log(item); if (item > 2) { return; } }); 这回怎么样, 输出了 1 2 3 4 5吧.
看过了上面两段代码之后, 不难发现, 在forEach()循环体里写return, 只是能跳出当前循环去执行下一次循环,并不能跳出整个循环.
再说说什么叫forEach()循环没有返回值, 这个问题在看过接下来的map循环之后就会明白了.
map
map()的主要作用, 其实是创建一个新的数组, map()的参数和forEach()是一样的, 这里就不在多说了, 直接上例子.
let array = [1, 2, 3, 4 ,5]; let temp = array.map((item, index, arr) => { return item + 1; }); console.log(temp); console.log(array); 猜猜输出的temp和arr的值都是什么
temp: [2, 3 ,4, 5, 6]
arr: [1, 2, 3, 4, 5]
各位, 到这里应该明白map()和forEach()有什么区别了吧, 使用map()遍历数组, 可以返回一个新数组, 并且不会改变原数组里的内容.
当然了, map()也可以这么用, 直接把数组里的元素都转成字符串.
let temp = array.map(String);
filter
接下来再说说filter(), filter()参数和forEach()也是一样的, filter()主要是过滤的, 用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组.
怎么用呢, 直接上代码.
let array = [1, 2, 3, 4, 5]; let temp = array.filter((item, index, arr) => { return item > 3; }); console.log(temp); console.log(array); 会输出什么呢, temp是4, 5, array没有变化, 清晰明了吧, 是不是比用for循环硬写方便多了.
every
every() 我就不解释入参了, 都一样的, 主要说说every()的作用, 它会遍历数组, 在循环体内写条件, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false, 下面看看实例代码.
let array = [1, 2, 3, 4, 5]; let bo = array.every((item, index, arr) => { return item > 2; }); console.log(bo); 这个输出不用我说了吧, 肯定是false啊, 不用再解释了吧.
some
some()又是做什么的呐, 同样, 遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.
let array = [1, 2, 3, 4, 5]; array.some((item, index, arr) => { console.log(item); return item > 3; }); 根据输出的item, 我们可以知道一共循环了多少次.
reduce
reduce(), 官方说明: 接收一个函数作为累加器, 数组中每个值(从左到右)开始缩减, 最终为一个值. 看完这句话, 心里莫名的想说一句 卧槽, '这什么玩意'. 其实说白了, reduce()接收的那个函数就是回调函数, 回调函数调用数组里的每一个元素, 直到循环结束.
reduce()跟其他几个方法不一样, 它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组. 参数介绍完毕, 直接看例子.
假如, 有一个数组, 里面的元素都是数字, 现在要计算数字的和, 正常情况就直接循环数组, 然后弄个中间变量挨个加了吧, 但是用了reduce()就省事儿多了
let array = [1, 2, 3, 4, 5]; let total = array.reduce((a, b) => { return a + b; }); console.log(total); // 15