遍历七巧板，JS里的最简单的篇章

2024-02-07 01:16:00

前言
在编程中，遍历是一个非常基础的概念，它允许你循环访问某个数据结构中的每个元素。在JavaScript中，你可以通过for循环来遍历一个数组，但这并不是唯一的方法。还有一些内置的方法可以帮助你完成这个任务，比如find(), findIndex(), forEach(), splice()和slice()。

遍历方法详解

1. find()方法

find()方法用于在一个数组中查找第一个符合指定条件的元素，并返回该元素。如果没有找到符合条件的元素，则返回undefined。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const firstEvenNumber = numbers.find(number => number % 2 === 0);
console.log(firstEvenNumber); // 输出：2

2. findIndex()方法

findIndex()方法用于在一个数组中查找第一个符合指定条件的元素的索引，并返回该索引。如果没有找到符合条件的元素，则返回-1。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const firstEvenNumberIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenNumberIndex); // 输出：1

3. forEach()方法

forEach()方法用于对数组中的每个元素执行指定的回调函数。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach(number => {
  console.log(number);
});

// 输出：
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// 10

4. splice()方法

splice()方法用于向数组中添加、删除或替换元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 添加元素
numbers.splice(2, 0, 2.5);

// 删除元素
numbers.splice(4, 2);

// 替换元素
numbers.splice(6, 1, 6.5);

console.log(numbers); // 输出： [1, 2, 2.5, 3, 6.5, 8, 9, 10]

5. slice()方法

slice()方法用于从数组中提取一个子数组，并返回该子数组。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 从索引2开始提取子数组
const subArray1 = numbers.slice(2);

// 从索引2开始提取子数组，并提取两个元素
const subArray2 = numbers.slice(2, 4);

console.log(subArray1); // 输出： [3, 4, 5, 6, 7, 8, 9, 10]
console.log(subArray2); // 输出： [3, 4]

遍历方法比较

方法	功能	返回值
find()	查找第一个符合条件的元素	符合条件的元素
findIndex()	查找第一个符合条件的元素的索引	符合条件的元素的索引
forEach()	对数组中的每个元素执行指定的回调函数	undefined
splice()	向数组中添加、删除或替换元素	被修改的数组
slice()	从数组中提取一个子数组	子数组