Skip to content

迭代数组

迭代数组的方法有:简单 for 循环、for-of循环和forEach方法。

简单 for 循环

正向循环,从头到尾遍历数组。

ts
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

反向循环,从尾到头遍历数组。

ts
for (let i = arr.length - 1; i >= 0; i--) {
  console.log(arr[i]);
}

使用continue跳过某些元素。

ts
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) continue;
  console.log(arr[i]);
}

使用break提前结束循环。

ts
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) break;
  console.log(arr[i]);
}

for-of 循环

for-of循环是 ES6 新增的循环语法。

ts
for (const item of arr) {
  console.log(item);
}

for-of循环可以遍历数组的元素和索引。

ts
for (const [index, item] of arr.entries()) {
  console.log(index, item);
}

forEach 方法

forEach方法是数组的实例方法,可以遍历数组的元素。

forEach方法接收一个回调函数作为参数,回调函数接收三个参数:当前元素、当前索引和数组本身。

ts
arr.forEach((item, index, array) => {
  console.log(item, index, array);
});
forEach 循环如何提前中断

WARNING

通过异常来中断forEach循环是一个不推荐做法,如果确实需要在循环中提前中断,通常建议使用for-of循环或简单的for循环。

forEach方法没有提供提前中断的机制,但可以通过抛出异常来提前中断循环。

ts
try {
  arr.forEach((item) => {
    if (item % 2 === 0) throw new Error("Loop interrupted");
    console.log(item);
  });
} catch (e: any) {
  if (e.message !== "Loop interrupted") {
    // 如果异常不是预期中的中断循环异常,重新抛出
    throw e;
  }
}

map 方法

map 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

ts
const resOfMap = arr.map((item) => item * 2); // [2, 4, 6, 8, 10]

filter 方法

filter 方法创建给定数组一部分的浅拷贝,其中包含通过所提供函数实现的测试的所有元素。

ts
const resOfFilter = arr.filter((item) => item % 2 === 0); // [2, 4]

reduce 方法

reduce 方法对数组中的每个元素按序执行一个 reducer 函数,每一次运行 reducer 函数会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个值。

不存在“先前的计算结果”时

第一次执行 reducer 函数时,不存在“先前的计算结果”。

如果需要 reducer 函数从数组索引 0 的元素开始执行,则需要传递初始值。

否则,数组索引为 0 的元素将作为初始值,reducer 函数将从数组索引为 1 的元素开始执行。

ts
const resOfReduce = arr.reduce((acc, cur) => acc + cur, 0); // 15

every 方法

every 方法测试数组的所有元素是否都通过了指定函数的测试,并返回一个布尔值。

ts
const resOfEvery = arr.every((item) => item > 0); // true

some 方法

some 方法测试数组中的某些元素是否通过了指定函数的测试,并返回一个布尔值。

ts
const resOfSome = arr.some((item) => item > 3); // true