JavaScript中的数组——迭代与归并方法

99 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 5 天,点击查看活动详情

迭代方法汇总

ECMAScript 为数组定义了 5 个迭代方法。

  • 每个方法接收 2 个参数:运行函数,this值(可选)
  • 运行函数可接收 3 个参数:数组元素、元素索引和数组本身
  • 这些方法都不会改变调用它们的数组。

1、every():对数组每一项都运行传入的函数,如果对每一项函数都返回 true,则这个方法返回 true

let arr1 = [1,3,4,5,6,7,8];
let a = arr1.every((item) => {
    return item > 1
})
console.log(a); // false

a = arr1.every((item) => {
    return item > 0
})
console.log(a); // true

2、filter():对数组每一项都运行传入的函数,函数返回 true 的每一项 组成数组之后返回。

let arr1 = [1,3,4,5,6,7,8];
let a = arr1.filter((item) => {
    return item > 2
})
console.log(a); // [3, 4, 5, 6, 7, 8]

3、forEach():对数组每一项都运行传入的函数,没有返回值。

let arr1 = [1,3,4,5,6,7,8];
arr1.forEach((item) => {
   // 操作数组每一项
})

4、map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。

let arr1 = [1,3,4,5,6,7,8];
let a = arr1.map((item) => {
    return item * 2
})
console.log(a); // [2, 6, 8, 10, 12, 14, 16]

5、some():对数组每一项都运行传入的函数,如果有一项函数返回 true,则这个方法返回 true

let arr1 = [1,3,4,5,6,7,8];
let a = arr1.some((item) => {
    return item == 8
})
console.log(a); // true

总结:

  • every()some()相似,every()是要数组所有元素都符合条件就返回true; some()是只要有一个元素符合条件就返回true;
  • filter()方法筛选出符合要求元素组成的新数组
  • map()方法用来修改原数组中每个元素,返回包含修改结果的新数组

归并方法

ECMAScript 为数组提供了两个归并方法:reduce()reduceRight()。这两个方法都会迭代数 组的所有项,并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。 而 reduceRight()从最后一项开始遍历至第一项。

  • 这两个方法接收 2 个参数:运行的归并函数,归并起点初始值
  • 归并函数接收 4 个参数:上一个归并值、当前项、当前项的索引和数组本身
  • 归并函数返回的任何值都会作为下一次调用同一个函数的第一个参数
  • 如果没有给reduce()方法传第二个参数(归并起点初始值),则第一次迭代将从数组的第二项开始,也就是说归并函数的第一个参数是数组第一个元素,第二个参数是数组第二个元素;
  • 如果给方法传了第二个参数,即归并起点初始值,则第一次迭代将拿着这个初始值从数组的第一项开始。
  • reduceRight()reduce() 使用相似,区别只是遍历数组元素的方向相反。
// reduce()
let arr1 = [1,3,4,5,6,7,8];
let sum = arr1.reduce((prev, cur, index, arr) => {
    console.log('prev: ' + prev + ' cur: ' + cur + ' index: ' + index + ' arr: ' + arr)
    return prev + cur
})
// 输出结果:
// prev: 1 cur: 3 index: 1 arr: 1,3,4,5,6,7,8
// prev: 4 cur: 4 index: 2 arr: 1,3,4,5,6,7,8
// prev: 8 cur: 5 index: 3 arr: 1,3,4,5,6,7,8
// prev: 13 cur: 6 index: 4 arr: 1,3,4,5,6,7,8
// prev: 19 cur: 7 index: 5 arr: 1,3,4,5,6,7,8
// prev: 26 cur: 8 index: 6 arr: 1,3,4,5,6,7,8


// 指定归并初始值
let sum = arr1.reduce((prev, cur, index, arr) => {
    console.log('prev: ' + prev + ' cur: ' + cur + ' index: ' + index + ' arr: ' + arr)
    return prev + cur
}, 2)

// prev: 2 cur: 1 index: 0 arr: 1,3,4,5,6,7,8
// prev: 3 cur: 3 index: 1 arr: 1,3,4,5,6,7,8
// prev: 6 cur: 4 index: 2 arr: 1,3,4,5,6,7,8
// prev: 10 cur: 5 index: 3 arr: 1,3,4,5,6,7,8
// prev: 15 cur: 6 index: 4 arr: 1,3,4,5,6,7,8
// prev: 21 cur: 7 index: 5 arr: 1,3,4,5,6,7,8
// prev: 28 cur: 8 index: 6 arr: 1,3,4,5,6,7,8
// reduceRight()

let arr1 = [1,3,4,5,6,7,8];
let sum = arr1.reduceRight((prev, cur, index, arr) => {
    console.log('prev: ' + prev + ' cur: ' + cur + ' index: ' + index + ' arr: ' + arr)
    return prev + cur
})
// 输出结果:
// prev: 8 cur: 7 index: 5 arr: 1,3,4,5,6,7,8
// prev: 15 cur: 6 index: 4 arr: 1,3,4,5,6,7,8
// prev: 21 cur: 5 index: 3 arr: 1,3,4,5,6,7,8
// prev: 26 cur: 4 index: 2 arr: 1,3,4,5,6,7,8
// prev: 30 cur: 3 index: 1 arr: 1,3,4,5,6,7,8
// prev: 33 cur: 1 index: 0 arr: 1,3,4,5,6,7,8

// 指定第二个参数:归并起点初始值
let sum = arr1.reduceRight((prev, cur, index, arr) => {
    console.log('prev: ' + prev + ' cur: ' + cur + ' index: ' + index + ' arr: ' + arr)
    return prev + cur
}, 2)
// prev: 2 cur: 8 index: 6 arr: 1,3,4,5,6,7,8
// prev: 10 cur: 7 index: 5 arr: 1,3,4,5,6,7,8
// prev: 17 cur: 6 index: 4 arr: 1,3,4,5,6,7,8
// prev: 23 cur: 5 index: 3 arr: 1,3,4,5,6,7,8
// prev: 28 cur: 4 index: 2 arr: 1,3,4,5,6,7,8
// prev: 32 cur: 3 index: 1 arr: 1,3,4,5,6,7,8
// prev: 35 cur: 1 index: 0 arr: 1,3,4,5,6,7,8