javascript中常用的数组遍历方法es6数组操作方法（1-map 2-forEach 3-filter 4-ev

es6数组操作方法

（1-map 2-forEach 3-filter 4-every 5-some 6-reduce 7-findIndex 8-find 9-splice）

var arr = [1, 2, 3, 4, 5, 4, 2]

1-map

a-返回值：有,返回一个新数组

b:有不有return:有，可以自定义返回值

c:你：" 老板，把每个土豆的泥土都擦一遍装在一个新口袋里 "

语法:arr.map((item, index,self) =>{ return item * 2}）

item： 回调函数的第一个参数，表示当前遍历到的数组元素的值。

index： 回调函数的第二个参数，表示当前遍历到的数组元素的索引。

self： 回调函数的第三个参数，表示调用 map 的数组。

js代码
let numbers = [1, 2, 3, 4, 5]; 
let doubled = numbers.map((item)=>{
 return item * 2;
}
); 
console.log(doubled); // 输出 [2, 4, 6, 8, 10]

2-forEach

a-返回值：没有

b:有不有return:没有

c: 老板把每个土豆都擦洗了一遍，就不卖给你

语法:arr.forEach((item, index,self) =>{ }）

item： 回调函数的第一个参数，表示当前遍历到的数组元素的值。

index： 回调函数的第二个参数，表示当前遍历到的数组元素的索引。

self： 回调函数的第三个参数，表示调用 map 的数组。

注意：有一些hh的面试官会问forEach如何跳出循环？

forEach方法本身并不提供直接的方式来跳出循环，但你可以使用一些技巧来跳出循环或模拟跳出循环的效果。

// throw new Error + catch 捕获的方式

//跳出循环
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
try {
  array.forEach((element) => {
    if (element === 6) throw new Error('End Loop!')
    // 其他操作
    console.log('Loop:', element)
  })
} catch (e) {
  console.log(e)
}
// 基本使用
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(item => { 
console.log(item); 
});

// 数组求和
let numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(item => {
    // 这里的 this 指向外部的上下文，而不是当前数组元素
    sum += item;
});

console.log(sum); // 输出 15

3-filter

a-返回值：有,返回一个新数组

b: return:有，返回满足条件的那一项数据

c : 你去买土豆：“ 老板，把一斤以上的土豆都装我这个袋子 ”

语法:arr.filter((item, index,self) =>{ return item > 2 }）

item： 回调函数的第一个参数，表示当前遍历到的数组元素的值。

index： 回调函数的第二个参数，表示当前遍历到的数组元素的索引。

self： 回调函数的第三个参数，表示调用 map 的数组。

//  ‘%’： 取余运算符； ‘/’：除号
//过滤出偶数
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(item => item % 2 === 0);

console.log(evenNumbers); // 输出 [2, 4]

// 求和 + 偶数
let numbers = [1, 2, 3, 4, 5];
let sum = 0;

let evenNumbers = numbers.filter(item => {
    // 这里的 this 指向外部的上下文，而不是当前数组元素
    sum += item;
    return item % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4]
console.log(sum); // 输出 15

4-every

a-返回值：有,返回一个bool

b:有不有return:有，只要有一个不满足就是一个false

c：你去买土豆：‘ 老板，你家都是一斤以上的土豆吗？’，老板：‘是’，你翻老半天找到一个八两的，直呼老板吹牛（只要有一项不满足就直接false）

let numbers = [1, 2, 3, 4, 5];

let allEven = numbers.every(function(element) {
    return element % 2 === 0;
});

console.log(allEven); // 输出 false，因为不是所有元素都是偶数

5-some

a-返回值：有,返回一个bool

b:有不有return:有，只要一项满足条件就立刻终止循环

c: 和every相反

let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(element) {
    return element % 2 === 0;
});

console.log(hasEvenNumber); // 输出 true，因为至少有一个元素是偶数

6-reduce

reduce ：是数组的高阶方法之一，用于对数组中的所有元素进行累加或者合并操作。reduce 方法接收一个回调函数和一个初始值作为参数，然后从数组的第一个元素开始，逐个将元素传入回调函数，最终得到一个累计的结果。

语法：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数解释：

callback：用于执行累计操作的函数，包括四个参数：
- accumulator：累计器，保存上一次调用回调函数的返回值，或者是初始值（如果提供了初始值）。
- currentValue：当前数组元素的值。
- index（可选）：当前数组元素的索引。
- array（可选）：调用 reduce 的数组。
initialValue（可选）：作为第一次调用 callback 函数时的第一个参数 accumulator 的初始值。

用法一：（数组求和）

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 输出 15，即 1 + 2 + 3 + 4 + 5

用法二：（数组去重）

let duplicateArray = [1, 2, 3, 4, 2, 5, 1, 6, 7, 8, 6];

let uniqueArray = duplicateArray.reduce(function(accumulator, currentValue) {
    if (!accumulator.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);

console.log(uniqueArray);

代码解释：`reduce` 方法遍历了 `duplicateArray` 数组中的每个元素，对每个元素执行了一个回调函数。在回调函数中，使用 `includes` 方法检查当前元素是否已经存在于累计结果数组 `accumulator` 中，如果不存在则将其添加到数组中。最终得到的 `uniqueArray` 就是去重后的数组。

这里使用了 `accumulator` 数组作为累计器，初始值是一个空数组 `[]`。这样，通过不断检查当前元素是否已经在 `accumulator` 中存在，就能够去重并构建新的数组。

7-findIndex

findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引。如果没有元素满足条件，则返回 -1。

语法：

array.findIndex(callback(element[, index[, array]])[, thisArg])

参数：

callback：用于测试每个元素的函数，包括三个参数：
- element：当前数组元素的值。
- index（可选）：当前数组元素的索引。
- array（可选）：调用 findIndex 的数组。
thisArg（可选）：在执行回调函数时，用作 this 的值。

返回值：

findIndex 方法返回满足条件的第一个元素的索引；如果没有找到匹配的元素，则返回 -1。

let numbers = [1, 2, 3, 4, 5];

let indexOfThree = numbers.findIndex(function(element) {
    return element === 3;
});

console.log(indexOfThree); // 输出 2，因为数字 3 在索引 2 处

8-find

find 用于查找数组中满足指定条件的第一个元素。如果找到匹配的元素，则返回该元素；如果没有找到匹配的元素，则返回 undefined。语法

语法：

javascriptCopy code
array.find(callback(element[, index[, array]])[, thisArg])

参数：

callback：用于测试每个元素的函数，包括三个参数：
- element：当前数组元素的值。
- index（可选）：当前数组元素的索引。
- array（可选）：调用 find 的数组。
thisArg（可选）：在执行回调函数时，用作 this 的值。

返回值：

find 方法返回数组中满足提供的测试函数的第一个元素的值。如果没有元素满足条件，则返回 undefined。

js
复制代码
var arr8 = [
  { id: 1, name: 'lining', price: 100, num: 1 },
  { id: 2, name: 'anta', price: 200, num: 2 },
  { id: 3, name: 'nike', price: 300, num: 3 },
  { id: 4, name: 'tebu', price: 400, num: 1 },
]
var obj = arr8.find((item) => {
  return item.id === 2
})
console.log(obj)

示例：

javascriptCopy code
let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(element) {
    return element > 2;
});

console.log(foundNumber); // 输出 3，因为它是第一个大于 2 的元素

9-splice

splice 是数组的方法之一，用于改变数组的内容，可以删除、插入或替换数组的元素。splice 方法接受多个参数，包括要开始修改的位置、要删除的元素数量和（可选）要插入到数组的新元素。

语法：

javascriptCopy code
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数：

start：指定修改的开始位置的索引。如果是负数，表示从数组末尾开始的位置。
deleteCount：要删除的元素数量。如果省略或为 0，则不删除元素。
item1, item2, ...：要插入到数组的新元素。

返回值：

一个包含被删除的元素的数组，如果没有被删除的元素则返回空数组。

示例：

javascriptCopy code
let fruits = ['apple', 'banana', 'cherry', 'date'];

// 删除 'banana' 元素
let removedElements = fruits.splice(1, 1);

console.log(fruits);          // 输出 ['apple', 'cherry', 'date']
console.log(removedElements); // 输出 ['banana']

// 在索引 1 处插入 'orange' 和 'grape' 元素，并删除 0 个元素
fruits.splice(1, 0, 'orange', 'grape');

console.log(fruits); // 输出 ['apple', 'orange', 'grape', 'cherry', 'date']

在这个例子中，splice 方法在 fruits 数组中的索引 1 处删除了一个元素（'banana'），然后在同一位置插入了 'orange' 和 'grape'。

javascript中常用的数组遍历方法

1-map

2-forEach

3-filter

4-every

5-some

6-reduce

参数解释：

7-findIndex

参数：

返回值：

8-find

语法：

参数：

返回值：

示例：

9-splice

语法：

参数：

返回值：

示例：

更多解释：