首页 > 网络编程 > JavaScript > javascript技巧 > js数组常用方法

JavaScript数组常用方法总结和案例详解

2025-08-22 11:23:20 作者：Yvette-W

文章总结了JavaScript数组常用方法,详细对比参数、返回值、是否改变原数组及适用场景,帮助开发者高效选择方法提升代码可读性和性能,感兴趣的朋友跟随小编一起看看吧

includes()

includes 方法用于判断数组是否包含某个指定的元素，它返回一个布尔值（true 或 false）。

1.接收参数

includes 方法接收两个参数：

要查找的元素：这是需要在数组中查找的值（必选）。
从哪里开始查找（可选）：指定开始查找的位置，默认为 0。

2.返回值

返回 true 或 false，表示数组是否包含指定的元素。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

includes 方法用于检查数组是否包含某个元素，适用于需要快速判断某个值是否存在的情况，比 indexOf 更直观。

5.代码示例

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

6.额外信息

includes 可以接受 第二个参数，指定从哪个索引开始搜索：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, 2)); // false（从索引2开始找，跳过了2）

可以检查 NaN，而 indexOf 不能：

const arr = [NaN, 2, 3];
console.log(arr.includes(NaN)); // true
console.log(arr.indexOf(NaN));  // -1 (无法找到NaN)

对于对象引用，includes 只会匹配 同一个对象的引用：

const obj = { a: 1 };
const arr = [obj, { b: 2 }];

console.log(arr.includes(obj)); // true
console.log(arr.includes({ b: 2 })); // false（不同的对象引用）

forEach()

forEach 是 JavaScript 数组的一个遍历方法，主要用于对数组的每个元素执行指定的回调函数。

1.接收参数

forEach 方法接收一个回调函数作为参数，回调函数本身接收三个参数：

当前元素（必选）：当前遍历到的元素。
当前索引（可选）：当前元素在数组中的索引。
原数组（可选）：调用 forEach 方法的数组。

2.返回值

返回值是 undefined，即 forEach 不会返回新数组，只是对数组中的每个元素执行回调函数。

3.是否改变原数组

❌ 不会直接改变原数组，但如果回调函数内部修改了原数组的元素，数组内容会被修改。

4.意义

forEach 用于 遍历数组并执行回调函数，适用于需要对数组元素进行操作但不需要返回新数组的场景。

5.代码示例

1. 基础用法

const arr = [1, 2, 3];
arr.forEach((item) => {
  console.log(item * 2); 
});
// 输出：
// 2
// 4
// 6

2. 修改原数组（副作用）

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  array[index] = item * 2;
});
console.log(arr); // [2, 4, 6] （原数组被修改）

3. forEach 不能用 return 终止循环，如果要提前终止循环，建议用 for...of 或 some / every。

const arr = [1, 2, 3];
arr.forEach((item) => {
  if (item === 2) return; // 只会跳过当前这次迭代，不会终止整个循环
  console.log(item);
});
// 输出：
// 1
// 3

6.额外信息

forEach 不会返回新数组，如果想要返回一个新数组，可以使用 map 代替。
因为 forEach 不返回新数组，所以它更适合执行某些操作，而不是计算新数据。适用于 副作用操作（如打印日志、修改 DOM），但不适用于需要返回新数组的情况。

map()

map 是 JavaScript 数组的一个常用方法，主要用于 创建一个新数组，新数组中的每个元素都是由回调函数返回的值。

1.接收参数

map 方法接收一个回调函数作为参数，回调函数本身接收三个参数：

当前元素（必选）：当前遍历到的元素。
当前索引（可选）：当前元素在数组中的索引。
原数组（可选）：调用 map 方法的数组。

2.返回值

返回一个 新的数组，数组的长度和原数组相同，每个元素都是回调函数的返回值。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

map 适用于 基于原数组生成一个新数组 的情况，比如：

数据转换（如把数字数组转换为字符串数组）
提取对象的某个属性
对数组元素进行某种运算

5.代码示例

1. 基础用法（返回新的数组，不影响原数组）

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]
console.log(numbers); // [1, 2, 3] （原数组不变）

2. 处理字符串数组（把字符串转换成大写）

const words = ["hello", "world"];
const upperCaseWords = words.map(word => word.toUpperCase());
console.log(upperCaseWords); // ["HELLO", "WORLD"]

3. 提取对象的某个属性

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

4. 生成新对象数组

const products = [
  { name: "Laptop", price: 1000 },
  { name: "Phone", price: 500 }
];
const withTax = products.map(product => ({
  name: product.name,
  priceWithTax: product.price * 1.2
}));
console.log(withTax);
// [
//   { name: "Laptop", priceWithTax: 1200 },
//   { name: "Phone", priceWithTax: 600 }
// ]

5. 如果回调函数没有显式返回值，map 会返回包含 undefined 的新数组（在新数组的相应位置插入 undefined）

const arr = [1, 2, 3];
// 回调函数没有显式返回值，map 会返回一个包含 `undefined` 的新数组
const result = arr.map((num) => {
  // 没有返回值
});
console.log(result); // [undefined, undefined, undefined]

6. map 不能用 return 终止循环。map 的 return 只影响当前元素的返回值变成undefined，不会影响整个遍历过程。如果想要提前终止遍历，考虑使用 some、every、for...of 或 for 循环。

const arr = [1, 2, 3, 4, 5];
const result = arr.map(num => {
  if (num > 3) return; // 这里的 return 只会导致当前元素变成 undefined
  return num * 2;
});
console.log(result); // [2, 4, 6, undefined, undefined]

如何终止遍历？

遍历数组时遇到某个条件就提前停止：

some：遇到 return true 时停止遍历。
every：遇到 return false 时停止遍历。
for...of 或 for 循环，可以用 break 退出。

const arr = [1, 2, 3, 4, 5];
// some 方法终止遍历
arr.some(num => {
  console.log(num);
  return num > 3; // 当 num > 3 时，some 终止遍历
});
// 输出: 1 2 3 4

6.额外信息

✅ 适合数据转换，但不适合修改原数组内容。
❌ 不能提前终止循环，如果需要提前终止，考虑使用 some 或 every。
✅ 不会跳过 undefined 的元素（区别于 forEach）。

mapvsforEach对比

特性	map	forEach
返回值	返回新数组	返回 `undefined`
修改原数组	不修改	不修改（但可以影响原数组）
适用场景	数据转换	副作用操作（如打印、修改DOM）

示例对比：

const numbers = [1, 2, 3];
// ❌ 不推荐用 forEach 生成新数组
const doubled1 = [];
numbers.forEach(num => doubled1.push(num * 2));
console.log(doubled1); // [2, 4, 6]
// ✅ 推荐用 map 生成新数组
const doubled2 = numbers.map(num => num * 2);
console.log(doubled2); // [2, 4, 6]

find()

find 是 JavaScript 数组的一个方法，用于查找并返回数组中 第一个满足条件的元素，如果没有找到，则返回 undefined。

1.接收参数

都是 接收一个回调函数 作为参数，并且该回调函数会被调用以处理数组中的每个元素。

回调函数 接受三个参数：
- 当前元素（必选）
- 当前索引（可选）
- 原数组（可选）

2.返回值

返回值是第一个满足条件的元素，如果没有找到满足条件的元素，则返回 undefined。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

find 用于 查找数组中的某个元素，它会遍历数组，找到第一个符合条件的元素并返回，适用于需要根据某些条件快速查找某个元素的情况。

5.代码示例

1. 基本用法

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
console.log(found); // 4（第一个满足 num > 3 的元素）

2. 找对象数组中的元素

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];
const foundUser = users.find(user => user.name === "Bob");
console.log(foundUser); // { name: "Bob", age: 30 }

3. 找不到满足条件的元素

const numbers = [1, 2, 3];
const notFound = numbers.find(num => num > 5);
console.log(notFound); // undefined（没有满足条件的元素）

4. find 方法回调函数的三个参数

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find((num, index, array) => {
  console.log(`当前元素：${num}, 当前索引：${index}, 原数组：${array}`);
  return num > 3;
});
console.log(found); 
// 当前元素：1, 当前索引：0, 原数组：[1, 2, 3, 4, 5]
// 当前元素：2, 当前索引：1, 原数组：[1, 2, 3, 4, 5]
// 当前元素：3, 当前索引：2, 原数组：[1, 2, 3, 4, 5]
// 当前元素：4, 当前索引：3, 原数组：[1, 2, 3, 4, 5]
// 4

6.额外信息

find 只会返回 第一个符合条件的元素，如果你需要所有符合条件的元素，应该使用 filter。
find 一旦找到符合条件的元素，就会 立即停止遍历，这与 filter 不同，filter 会遍历整个数组。

findIndex()

findIndex 是 JavaScript 数组的一个方法，它用于 查找数组中第一个满足条件的元素的索引，如果没有找到，则返回 -1。

1.接收参数

接收一个回调函数 作为参数，并且该回调函数会被调用以处理数组中的每个元素。

回调函数 接受三个参数：
- 当前元素（必选）
- 当前索引（可选）
- 原数组（可选）

2.返回值

返回值是第一个满足条件的元素的索引，如果没有找到，返回 -1。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

findIndex 用于 查找数组中某个元素的索引，当你需要知道元素的位置时，可以使用 findIndex，而不是直接使用 indexOf 或遍历数组。它适用于 查找符合特定条件的元素的索引。

5.代码示例

1. 基本用法

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex(num => num > 3);
console.log(index); // 3（第一个满足 num > 3 的元素索引）

2. 找对象数组中的元素的索引

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];
const index = users.findIndex(user => user.name === "Bob");
console.log(index); // 1（"Bob" 是第一个符合条件的元素）

3. 找不到满足条件的元素

const numbers = [1, 2, 3];
const index = numbers.findIndex(num => num > 5);
console.log(index); // -1（没有符合条件的元素）

4. 使用回调函数的三个参数

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex((num, index, array) => {
  console.log(`当前元素：${num}, 当前索引：${index}, 原数组：${array}`);
  return num > 3;
});
console.log(index); 
// 当前元素：1, 当前索引：0, 原数组：[1, 2, 3, 4, 5]
// 当前元素：2, 当前索引：1, 原数组：[1, 2, 3, 4, 5]
// 当前元素：3, 当前索引：2, 原数组：[1, 2, 3, 4, 5]
// 当前元素：4, 当前索引：3, 原数组：[1, 2, 3, 4, 5]
// 3

6.额外信息

findIndex 只会返回第一个符合条件的元素的索引，如果你需要所有符合条件的元素的索引，应该使用 map 配合 filter ，map生成新索引数组，不符合条件的索引设为undefined，filter过滤掉undefined，最终返回符合条件的元素的索引数组。
findIndex 一旦找到符合条件的元素，就会 立即停止遍历，和 find 类似。

filter()

filter 是 JavaScript 数组的一个方法，它用于 过滤数组中的元素，返回符合特定条件的新数组，如果没有任何元素符合条件，则返回一个空数组。

1.接收参数

filter 方法接收一个回调函数作为参数，该回调函数会对数组中的每个元素进行测试。回调函数本身接收三个参数：

当前元素（必选）：当前遍历到的元素。
当前索引（可选）：当前元素在数组中的索引。
原数组（可选）：调用 filter 方法的数组。

2.返回值

filter 返回一个新数组，包含所有通过回调函数条件测试的元素。如果没有任何元素通过测试，返回一个空数组。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

filter 方法用于过滤数组中的元素，返回符合特定条件的元素组成的新数组。它常用于筛选出符合某些标准的元素。

5.代码示例

const arr = [1, 2, 3, 4, 5];
// 筛选出大于3的元素
const filteredArr = arr.filter(num => num > 3);
console.log(filteredArr); // [4, 5]
// 使用当前索引
const arrWithIndex = arr.filter((num, index) => index % 2 === 0);
console.log(arrWithIndex); // [1, 3, 5]
// 过滤出偶数
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

6.额外信息

filter 会遍历整个数组，即使回调函数的某些元素已经满足条件，它仍会继续检查整个数组。
如果回调函数返回的是 false 或 undefined，该元素会被过滤掉。

indexOf()

indexOf 是 JavaScript 数组的一个方法，它用于 查找数组中某个元素的第一次出现的索引，如果元素不存在，则返回 -1。

1.接收参数

indexOf 方法接收两个参数：

要查找的元素（必选）：要查找的值。
从哪里开始查找（可选）：指定从哪个索引位置开始查找，默认为 0。

2.返回值

indexOf 返回数组中第一个符合条件的元素的索引，如果没有找到该元素，则返回 -1。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

indexOf 方法用于查找数组中某个元素的第一次出现的索引。它常用于确定元素是否存在于数组中，并获取它的位置。

5.代码示例

const arr = [1, 2, 3, 4, 5];
// 查找元素 3 的索引
console.log(arr.indexOf(3)); // 2
// 查找元素 6 的索引（不存在）
console.log(arr.indexOf(6)); // -1
// 从索引 2 开始查找元素 4
console.log(arr.indexOf(4, 2)); // 3

6.额外信息

如果数组中有多个相同的元素，indexOf 只会返回第一个匹配的元素的索引。
indexOf 方法会严格比较元素的值（使用 ===），也就是说，如果数组中存在 1 和 '1'，它们会被认为是不相等的。

indexOfvsfindIndex对比

indexOf 和 findIndex 都是用于查找数组中元素索引的方法，但它们有一些关键的区别：

查找条件

indexOf：通过值来查找数组中的元素，要求元素完全匹配。
findIndex：通过回调函数来查找数组中的元素，回调函数可以定义更复杂的查找条件，可以对元素进行任意处理或测试。

参数

indexOf：接收一个要查找的元素和一个可选的起始索引。
findIndex：接收一个回调函数，回调函数的返回值决定是否找到匹配元素。回调函数接收三个参数：当前元素、当前索引和原数组。

查找范围

indexOf：只查找完全匹配的元素。
findIndex：可以进行自定义条件查找，回调函数可以定义任何逻辑来判断元素是否符合条件。

返回值

indexOf：返回元素的第一次出现的索引，若未找到返回 -1。
findIndex：返回第一个使回调函数返回 true 的元素的索引，若未找到返回 -1。

代码示例

const arr = [5, 3, 8, 3, 2];
// indexOf 查找值为 3 的元素
console.log(arr.indexOf(3)); // 1（返回第一个 3 的索引）
// findIndex 查找大于 4 的元素
console.log(arr.findIndex(num => num > 4)); // 0（返回第一个大于 4 的元素的索引）
// findIndex 查找第一个偶数元素
console.log(arr.findIndex(num => num % 2 === 0)); // 2（返回第一个偶数元素 8 的索引）

总结

indexOf 是基于值进行查找，并且只能找到完全匹配的元素。
findIndex 允许你通过回调函数提供复杂的查找条件，能更灵活地查找符合自定义条件的元素的索引。

lastIndexOf()

lastIndexOf 是 JavaScript 数组的一个方法，它用于 查找数组中某个元素的最后一次出现的索引，如果元素不存在，则返回 -1。

1.接收参数

lastIndexOf 方法接收两个参数：

要查找的元素（必选）：要查找的值。
从哪里开始查找（可选）：查找的起始位置，从该索引向左（即从右向左）查找，并包含该索引的元素。默认从数组的末尾开始查找。

2.返回值

lastIndexOf 返回数组中最后一个符合条件的元素的索引，如果没有找到该元素，则返回 -1。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

lastIndexOf 方法用于查找数组中某个元素的最后一次出现的索引。它常用于确定元素是否存在于数组的后半部分或查找元素的最后一次出现位置。

5.代码示例

const arr = [1, 2, 3, 4, 5, 3, 2];
// 查找元素 3 最后一次出现的索引
console.log(arr.lastIndexOf(3)); // 5
// 查找元素 6 的索引（不存在）
console.log(arr.lastIndexOf(6)); // -1
// 从索引 4（元素是 5）开始，向左查找元素 2
console.log(arr.lastIndexOf(2, 4)); // 1
// 从索引 6（元素 2）开始向左查找
console.log(arr.lastIndexOf(2, 6)); // 6

6.额外信息

lastIndexOf 从数组的末尾开始查找，返回的是最后一个符合条件的元素的索引。
lastIndexOf 是从 fromIndex 向左（从右向左）查找，并包含 fromIndex 位置的元素。
lastIndexOf 会严格比较元素的值（使用 ===），也就是说，如果数组中存在 1 和 '1'，它们会被认为是不相等的。

every()

every 是 JavaScript 数组的一个方法，它用于 检查数组中的所有元素是否都满足指定的条件。如果所有元素都符合条件，则返回 true，否则返回 false。一旦遇到第一个不满足条件的元素，就会停止遍历（短路机制）。

1.接收参数

every 方法接收一个回调函数作为参数，该回调函数会对数组中的每个元素进行测试。回调函数本身接收三个参数：

当前元素（必选）：当前遍历到的元素。
当前索引（可选）：当前元素在数组中的索引。
原数组（可选）：调用 every 方法的数组。

还可以接收一个 thisArg（可选），用于指定回调函数执行时的 this 值。

2.返回值

every 返回一个布尔值：

如果 所有元素 都满足回调函数的测试条件，返回 true。
如果 至少有一个元素 不满足条件，返回 false（并停止遍历）。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

every 主要用于判断数组中的所有元素是否都符合某个条件，适用于全体验证的场景。例如：

判断所有用户是否已成年
判断所有订单是否已支付
判断所有输入是否符合格式

5.代码示例

const arr = [2, 4, 6, 8, 10];
// 判断所有元素是否大于 3
const allGreaterThanThree = arr.every(num => {
  console.log(num);  // 只会打印 2
  return num > 3;
});
console.log(allGreaterThanThree); // false (因为 2 不大于 3，遍历在遇到 2 时停止)
// 判断所有元素是否是偶数
const allEven = arr.every(num => num % 2 === 0);
console.log(allEven); // true (所有元素都是偶数)
// 使用当前索引
const allIndexEven = arr.every((num, index) => index % 2 === 0);
console.log(allIndexEven); // false (索引 1, 3, ... 是奇数)
// 使用 `thisArg`
const obj = { threshold: 5 };
const allGreaterThanThreshold = arr.every(function(num) {
  return num > this.threshold;
}, obj);
console.log(allGreaterThanThreshold); // false (因为 2 <= 5)

6.额外信息

短路行为：every 一旦遇到第一个不满足条件的元素，就会停止遍历，不会继续检查后面的元素，直接返回 false。
空数组：如果数组为空，every 直接返回 true，因为没有元素违反条件。
与 some 的区别：
- every 需要所有元素 满足条件才返回 true，否则返回 false。
- some 只要有一个元素 满足条件就返回 true，否则返回 false。

some()

some 是 JavaScript 数组的一个方法，它用于 检查数组中是否至少有一个元素满足指定的条件。如果有至少一个元素符合条件，则返回 true，否则返回 false。一旦找到满足条件的元素，就会停止遍历（短路机制）。

1.接收参数

some 方法接收一个回调函数作为参数，该回调函数会对数组中的每个元素进行测试。回调函数接收三个参数：

当前元素（必选）：当前遍历到的元素。
当前索引（可选）：当前元素在数组中的索引。
原数组（可选）：调用 some 方法的数组。

还可以接收一个 thisArg（可选），用于指定回调函数执行时的 this 值。

2.返回值

some 返回一个布尔值：

如果 至少有一个元素 满足回调函数的条件，返回 true（并立即停止遍历）。
如果 所有元素 都不满足条件，返回 false。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

some 主要用于检查数组中是否存在符合条件的元素，适用于局部验证的场景。例如：

判断用户列表中是否有 VIP 会员
检查订单列表中是否有未支付的订单
判断输入框列表中是否有未填项

5.代码示例

const arr = [1, 3, 5, 7, 9];
// 判断是否有偶数
const hasEven = arr.some(num => {
  console.log(num);  // 依次打印 1, 3, 5, 7, 9
  return num % 2 === 0;
});
console.log(hasEven); // false (数组中没有偶数)
// 判断是否有大于 5 的数字
const hasGreaterThanFive = arr.some(num => num > 5);
console.log(hasGreaterThanFive); // true (7 和 9 都大于 5)
// 使用当前索引
const hasIndexOdd = arr.some((num, index) => index % 2 === 1);
console.log(hasIndexOdd); // true (索引 1, 3, ... 是奇数)
// 使用 `thisArg`
const obj = { threshold: 8 };
const hasGreaterThanThreshold = arr.some(function(num) {
  return num > this.threshold;
}, obj);
console.log(hasGreaterThanThreshold); // true (9 > 8)

6.额外信息

短路行为：some 一旦找到满足条件的元素，就会停止遍历，不会继续检查后面的元素，直接返回 true。
空数组：如果数组为空，some 直接返回 false，因为没有元素满足条件。
与 every 的区别：
- some 只要有一个 元素满足条件就返回 true，否则返回 false。
- every 需要 所有元素 满足条件才返回 true，否则返回 false。

some和every在空数组时的行为

1. some 在空数组中的行为

[].some(num => num > 0); // false

为什么是 false？

some 的逻辑是 “是否至少有一个元素满足条件”。
但空数组里连一个元素都没有，自然不可能有元素满足条件，所以返回 false。

2. every 在空数组中的行为

[].every(num => num > 0); // true

为什么是 true？

every 的逻辑是 “是否所有元素都满足条件”。
但空数组里没有任何元素违反条件，所以从逻辑上讲，所有元素（零个元素）都满足了条件，因此返回 true。
这个现象叫做 “真空原则（Vacuous Truth）”，在数学和逻辑学里，如果对空集的所有元素做某种断言，那这个断言默认为 true。

3. 如何更直观理解？

可以用“考试及格率”来类比：

some 相当于问：“班级里至少有一个学生及格了吗？”
- 如果班级没人（空数组），答案当然是 false，因为连学生都没有，谈不上及格。
every 相当于问：“班级里所有学生都及格了吗？”
- 如果班级没人（空数组），那么没有不及格的学生，所以默认认为 所有人都及格，答案是 true。

4. 总结

方法	逻辑	空数组返回值	直观理解
`some`	至少有一个满足条件	`false`	没人能满足条件
`every`	所有都满足条件	`true`	没有人不满足条件

push()

push 是 JavaScript 数组的一个方法，它用于 向数组的末尾添加一个或多个元素，并返回新数组的长度。

1.接收参数

push(...items)

items（必选，1个或多个）：要添加到数组末尾的元素，可以是多个。

2.返回值

返回修改后的数组的新长度（即添加新元素后的 length）。

3.是否改变原数组

✅ 会改变原数组（在原数组末尾添加元素）。

4.意义

用于在数组末尾追加元素。
常见于构建列表或动态增加数据的场景。

5.代码示例

const arr = [1, 2, 3];
// 添加一个元素
const newLength1 = arr.push(4);
console.log(arr); // [1, 2, 3, 4]
console.log(newLength1); // 4
// 添加多个元素
const newLength2 = arr.push(5, 6, 7);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
console.log(newLength2); // 7
// 空数组使用 push
const emptyArr = [];
emptyArr.push('a', 'b', 'c');
console.log(emptyArr); // ['a', 'b', 'c']

6.额外信息

等价于 arr[arr.length] = value：

const arr = [1, 2, 3];
arr[arr.length] = 4; // 等价于 arr.push(4)
console.log(arr); // [1, 2, 3, 4]

push 适用于数组，但不能用于类数组对象（如 arguments），除非手动绑定：

function test() {
  console.log(arguments.push(4)); // TypeError: arguments.push is not a function
}
test(1, 2, 3);

unshift()

unshift 是 JavaScript 数组的一个方法，它用于 在数组的开头添加一个或多个元素，并返回新数组的长度。

1.接收参数

unshift(...items)

items（必选，1个或多个）：要添加到数组开头的元素，可以是多个。

2.返回值

返回修改后的数组的新长度（即添加新元素后的 length）。

3.是否改变原数组

✅ 会改变原数组（在原数组开头添加元素）。

4.意义

用于在数组头部插入元素，与 push 类似，但作用在数组前端。
常用于队列（FIFO，先进先出），或者保持数据顺序的情况下插入新元素。

5.代码示例

const arr = [3, 4, 5];
// 在数组开头添加一个元素
const newLength1 = arr.unshift(2);
console.log(arr); // [2, 3, 4, 5]
console.log(newLength1); // 4
// 在数组开头添加多个元素
const newLength2 = arr.unshift(0, 1);
console.log(arr); // [0, 1, 2, 3, 4, 5]
console.log(newLength2); // 6
// 空数组使用 unshift
const emptyArr = [];
emptyArr.unshift('a', 'b', 'c');
console.log(emptyArr); // ['a', 'b', 'c']

6.额外信息

unshift 的性能比 push 差，因为它需要移动整个数组的元素：

const arr = [1, 2, 3, 4, 5];
arr.unshift(0); 
// 需要把 [1,2,3,4,5] 向后移动，才能插入 0

但 push 只是在数组末尾添加，不会移动已有元素，所以如果不需要保证顺序，push 更高效。

等价于 arr.splice(0, 0, ...items)，但 unshift 直接返回新长度，而 splice 返回被删除的元素（空数组）。

pop()

pop 是 JavaScript 数组的一个方法，它用于 移除并返回数组的最后一个元素。

1.接收参数

不接收任何参数。

2.返回值

返回被移除的元素。
如果数组为空，则返回 undefined。

3.是否改变原数组

✅ 会改变原数组（删除最后一个元素）。

4.意义

用于删除数组末尾的元素。
适用于**模拟栈（LIFO，后进先出）**的操作。

5.代码示例

const arr = [1, 2, 3, 4];
// 移除最后一个元素
const lastElement = arr.pop();
console.log(lastElement); // 4
console.log(arr); // [1, 2, 3]
// 继续使用 pop
arr.pop();
console.log(arr); // [1, 2]
// 空数组使用 pop
const emptyArr = [];
console.log(emptyArr.pop()); // undefined
console.log(emptyArr); // []

6.额外信息

pop 只能移除数组的最后一个元素，如果想要删除数组的其他位置的元素，应该使用 splice。

适用于构建栈结构：

const stack = [];
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // 3
console.log(stack.pop()); // 2
console.log(stack.pop()); // 1
console.log(stack.pop()); // undefined (空栈)

shift()

shift 是 JavaScript 数组的一个方法，它用于 移除并返回数组的第一个元素。

1.接收参数

shift()

不接收任何参数。

2.返回值

返回被移除的元素。
如果数组为空，则返回 undefined。

3.是否改变原数组

✅ 会改变原数组（删除第一个元素）。

4.意义

用于删除数组头部的元素，与 pop 作用相反。
适用于**模拟队列（FIFO，先进先出）**的操作。

5.代码示例

const arr = [1, 2, 3, 4];
// 移除第一个元素
const firstElement = arr.shift();
console.log(firstElement); // 1
console.log(arr); // [2, 3, 4]
// 继续使用 shift
arr.shift();
console.log(arr); // [3, 4]
// 空数组使用 shift
const emptyArr = [];
console.log(emptyArr.shift()); // undefined
console.log(emptyArr); // []

6.额外信息

shift 只能移除数组的第一个元素，如果想删除其他位置的元素，可以使用 splice。
shift 的性能比 pop 差，因为它需要移动整个数组：

const arr = [1, 2, 3, 4, 5];
arr.shift();
// 需要把 [2,3,4,5] 向前移动，才能删除 1

但 pop 只是删除最后一个元素，不需要移动其他元素，因此如果不要求删除第一个元素，pop 更高效。

splice()

splice 是 JavaScript 数组的一个方法，它用于 在数组中删除、替换或插入元素，并返回被删除的元素。

1.接收参数

splice(start, deleteCount, ...items)

start（必选）：表示从哪个索引开始操作。
deleteCount（可选）：表示删除多少个元素。如果为 0，则不删除任何元素。
...items（可选）：要插入的新元素（可以是多个）。

2.返回值

返回被删除的元素组成的数组。
如果 deleteCount 为 0，则返回空数组 []。

3.是否改变原数组

✅ 会改变原数组（删除、替换或插入元素）。

4.意义

删除元素：移除数组中的一个或多个元素。
替换元素：删除元素的同时，插入新元素。
插入元素：不删除任何元素，仅插入新元素。

5.代码示例

（1）删除元素

const arr = [1, 2, 3, 4, 5];
// 从索引 1 开始，删除 2 个元素
const deleted = arr.splice(1, 2);
console.log(arr); // [1, 4, 5]
console.log(deleted); // [2, 3]

（2）替换元素

const arr = [1, 2, 3, 4, 5];
// 替换索引 2 的元素（删除 1 个元素，并插入 'A'）
const replaced = arr.splice(2, 1, 'A');
console.log(arr); // [1, 2, 'A', 4, 5]
console.log(replaced); // [3]

（3）插入元素

const arr = [1, 2, 3, 4, 5];
// 在索引 2 处插入 'X', 'Y'（不删除任何元素）
arr.splice(2, 0, 'X', 'Y');
console.log(arr); // [1, 2, 'X', 'Y', 3, 4, 5]

（4）删除所有元素

const arr = [1, 2, 3, 4, 5];
// 从索引 0 开始删除所有元素
arr.splice(0, arr.length);
console.log(arr); // []

6.额外信息

splice 会直接修改原数组，如果不想修改，可以用 slice() 复制数组后操作。
常见用法对比：
- arr.splice(0, 0, ...items) 等价于 arr.unshift(...items)（在开头插入元素）。
- arr.splice(arr.length, 0, ...items) 等价于 arr.push(...items)（在末尾插入元素）。
- arr.splice(-1, 1) 等价于 arr.pop()（删除最后一个元素）。
- arr.splice(0, 1) 等价于 arr.shift()（删除第一个元素）。

注：-1 是从数组的末尾开始计数，表示最后一个元素。负数索引非常方便，特别是在需要处理数组末尾的元素时，避免了手动计算数组的长度。

slice()

slice 是 JavaScript 数组的一个方法，它用于 返回数组的一个浅拷贝，并根据指定的开始和结束索引截取元素。

1.接收参数

slice(start, end)

start（可选）：表示截取的起始索引（包括该索引）。如果为负数，则表示从数组末尾开始计数。默认值是 0。
end（可选）：表示截取的结束索引（不包括该索引）。如果为负数，则表示从数组末尾开始计数。默认值是数组的长度。

2.返回值

返回一个新的数组，包含从 start 到 end（不包括 end）的元素。如果 start 或 end 超出了数组的范围，则会根据实际情况调整。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

slice 用于 从数组中截取部分元素，生成一个新的数组，而不修改原数组。
它适用于创建数组的浅拷贝，或者截取数组的一部分。

5.代码示例

（1）截取数组的一部分

const arr = [1, 2, 3, 4, 5];
// 从索引 1 截取到索引 3（不包括索引 3）
const newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5] （原数组不变）

（2）使用负数索引

const arr = [10, 20, 30, 40, 50];
// 从倒数第二个元素开始截取
const newArr = arr.slice(-2);
console.log(newArr); // [40, 50]
console.log(arr); // [10, 20, 30, 40, 50] （原数组不变）

（3）截取整个数组的浅拷贝

const arr = [1, 2, 3, 4, 5];
// 截取整个数组（即创建一个浅拷贝）
const newArr = arr.slice();
console.log(newArr); // [1, 2, 3, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] （原数组不变）

6.额外信息

slice 不修改原数组，因此是一个非破坏性的方法。
slice 也可以用来从字符串中截取字符，因为字符串也有类似于数组的索引。

slice和...浅拷贝对比

slice() 和展开运算符 (...) 在 浅拷贝数组时作用相同，都可以创建一个新数组，而不会修改原数组。

const arr = [1, 2, 3];
// 使用 slice() 进行浅拷贝
const copy1 = arr.slice();
// 使用展开运算符进行浅拷贝
const copy2 = [...arr];
console.log(copy1); // [1, 2, 3]
console.log(copy2); // [1, 2, 3]
console.log(copy1 === arr); // false （不是同一个数组）
console.log(copy2 === arr); // false （不是同一个数组）

特性	slice()	... 展开运算符
语法	`arr.slice()`	`[...arr]`
适用范围	只能用于数组	可以用于数组、对象、字符串、NodeList等
深度拷贝	浅拷贝（对象或嵌套数组仍然共享引用）	浅拷贝（对象或嵌套数组仍然共享引用）
可额外截取	`arr.slice(start, end)` 可用于提取部分数组	仅用于拷贝整个数组

slice() 可以提取部分数组：

const arr = [1, 2, 3, 4, 5];
const partial = arr.slice(1, 3); // 提取索引 1 到 2
console.log(partial); // [2, 3]

展开运算符可以合并数组（见concat 和 ... 合并数组对比）：

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]

无论使用 slice() 还是 ...，都不会深拷贝，如果数组中有对象，它们仍然共享引用：

const arr = [{ name: "Alice" }, { name: "Bob" }];
// 浅拷贝
const copy1 = arr.slice();
const copy2 = [...arr];
// 修改原数组中的对象
arr[0].name = "Charlie";
console.log(copy1[0].name); // "Charlie"
console.log(copy2[0].name); // "Charlie"

如果需要深拷贝，可以使用 structuredClone()（现代浏览器支持）或 JSON.parse(JSON.stringify(obj))。

总结

需求	建议用法
浅拷贝整个数组	`slice()` 或 `...`
提取部分数组	`slice(start, end)`
合并数组	`...`（展开运算符）
用于类数组对象（如 arguments, NodeList）	`Array.prototype.slice.call(obj)`
如果只是单纯拷贝数组，推荐用展开运算符 (`[...arr]`)，更简洁。

concat()

concat 是 JavaScript 数组的一个方法，它用于 合并两个或多个数组，并返回一个新数组，而不会修改原数组。

1.接收参数

valueN（可选）：要合并的数组或值，可以是多个。

2.返回值

返回一个新数组，包含原数组的元素，以及 concat 传入的所有参数的元素。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

concat 方法用于 合并数组 或 在数组中添加新元素，常用于需要保持原数组不变的场景。

5.代码示例

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 合并两个数组
const newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6]
// 原数组未改变
console.log(arr1); // [1, 2, 3]
// 也可以直接添加单个元素
const newArr2 = arr1.concat(7, 8);
console.log(newArr2); // [1, 2, 3, 7, 8]
// 可以合并多个数组
const combinedArr = arr1.concat(arr2, [7, 8, 9]);
console.log(combinedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 如果传入的是对象，数组会包含该对象的引用
const obj = { a: 1 };
const newArr3 = arr1.concat(obj);
console.log(newArr3); // [1, 2, 3, { a: 1 }]

6.额外信息

concat 不会修改原数组，而是返回一个新数组。
如果 concat 传入的是对象或嵌套数组，它们不会被深拷贝，而是按引用合并，即修改原对象会影响合并后的数组：

const arr = [1, 2];
const nestedArr = [3, [4, 5]];
const result = arr.concat(nestedArr);
console.log(result); // [1, 2, 3, [4, 5]]
// 修改嵌套数组
nestedArr[1].push(6);
console.log(result); // [1, 2, 3, [4, 5, 6]]

如上所示，nestedArr 内部的数组 [4, 5] 被 concat 进 result 后，仍然是引用，所以对 nestedArr[1] 的修改影响了 result。

concat和...合并数组对比

展开运算符（...）和 concat() 方法用于合并数组的效果是一样的，它们都可以合并数组，并返回一个新的数组，不修改原数组。它们都只会展开第一层，不会递归展开所有层级。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 使用 concat()
const result1 = arr1.concat(arr2);
console.log(result1); // [1, 2, 3, 4, 5, 6]
// 使用展开运算符
const result2 = [...arr1, ...arr2];
console.log(result2); // [1, 2, 3, 4, 5, 6]

处理非数组的情况

const arr = [1, 2, 3];
// 使用 concat() 合并单个值
const result1 = arr.concat(4);
console.log(result1); // [1, 2, 3, 4]
// 使用 ... 需要手动加入单个值
const result2 = [...arr, 4];
console.log(result2); // [1, 2, 3, 4]

只展开第一层，嵌套数组不会自动展开

const arr1 = [1, 2];
const arr2 = [3, [4, 5]];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, [4, 5]]
const result2 = [...arr1, ...arr2];
console.log(result2); // [1, 2, 3, [4, 5]]

如何扁平化数组，展开所有层级？
如果想要让 [4, 5] 也被展开，需要使用 flat()：

const result3 = [...arr1, ...arr2.flat()];
console.log(result3); // [1, 2, 3, 4, 5]
const result4 = arr1.concat(arr2.flat());
console.log(result4); // [1, 2, 3, 4, 5]

总结

concat() 和 ... 的行为完全一样，它们只会展开第一层，不会递归展开所有层级。
如果想要完全扁平化数组（展开所有层级），需要 flat()，无论是 concat() 还是 ...，都可以搭配 flat() 来完成。

reverse()

reverse 是 JavaScript 数组的一个方法，它用于 原地反转数组，即将数组的元素顺序颠倒，并返回修改后的数组。

1.接收参数

不接收任何参数。

2.返回值

返回反转后的原数组（已修改）。

3.是否改变原数组

✅ 会改变原数组。

4.意义

reverse 用于 原地反转数组，可以在需要倒序排列数组元素时使用。

5.代码示例

const arr = [1, 2, 3, 4, 5];
// 反转数组
const reversedArr = arr.reverse();
console.log(reversedArr); // [5, 4, 3, 2, 1]
// 注意：原数组也被修改
console.log(arr); // [5, 4, 3, 2, 1]

6.额外信息

reverse 是一个破坏性方法，会直接修改原数组。如果不想改变原数组，可以先使用 slice() 或 ... 复制一份数组：

const arr = [10, 20, 30, 40, 50];
// 使用 slice() 复制数组后再反转
const newArr1 = arr.slice().reverse();
console.log(newArr1); // [50, 40, 30, 20, 10]
// 使用展开运算符复制数组后再反转
const newArr2 = [...arr].reverse();
console.log(newArr2); // [50, 40, 30, 20, 10]

如果数组包含对象或引用类型，元素顺序会变，但对象的引用不会变：

const objArr = [{ a: 1 }, { b: 2 }, { c: 3 }];
const reversed = objArr.reverse();
console.log(reversed); 
// [{ c: 3 }, { b: 2 }, { a: 1 }]
console.log(objArr); 
// [{ c: 3 }, { b: 2 }, { a: 1 }]  // 原数组已修改
// 修改 reversed[0] 也会影响 objArr[0]
reversed[0].c = 99;
console.log(objArr); 
// [{ c: 99 }, { b: 2 }, { a: 1 }]

sort()

sort 是 JavaScript 数组的一个方法，它用于 对数组中的元素进行排序，并返回排序后的数组。默认情况下，它会将数组元素转为字符串后按字符的 Unicode 顺序进行升序排序。

1.接收参数

compareFunction（可选）：sort 方法接受一个可选的回调函数（compareFunction），一个用来定义排序顺序的函数。该回调函数接收两个参数 a 和 b，分别代表数组中的两个元素。
- 如果 compareFunction(a, b) 的返回值 小于 0，a 会排在 b 前面（即升序排列）。
- 如果 compareFunction(a, b) 的返回值 大于 0，b 会排在 a 前面（即降序排列）。
- 如果 compareFunction(a, b) 的返回值 等于 0，a 和 b 的位置不变。
如果没有提供，sort 默认按字符的 Unicode 编码顺序升序排序。

为什么 arr.sort((a, b) => b - a) 是降序？

在回调函数 (a, b) => b - a 中：

如果 b - a > 0，b 排在 a 前面。
如果 b - a < 0，a 排在 b 前面。
如果 b - a === 0，a 和 b 的位置保持不变。

因此，b - a 实现了降序排列，即较大的数字排在前面。

2.返回值

返回排序后的原数组（已修改）。

3.是否改变原数组

✅ 会改变原数组。

4.意义

sort 用于 对数组元素进行排序。它可以按照自定义的顺序对数组进行升序或降序排列，常用于对数据进行排序处理。

5.代码示例

(1) 默认排序（按字符 Unicode 编码值顺序升序排序）

const arr = [3, 1, 4, 5, 2];
// 默认排序：按字符的 Unicode 编码顺序排序
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
const arrUnicode = [10, 2, 33, 4];
// 注意：数字直接使用默认排序会出问题，因为数字会被转换成字符串后，按照字符的 Unicode 编码顺序进行排序，数字字符的排序是逐个字符比较的。
arr.sort();
console.log(arrUnicode); // [10, 2, 33, 4]

(2) 自定义排序（按数值升序排序）

const arr = [3, 1, 4, 5, 2];
// 自定义排序：升序排列
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4, 5]

(3) 自定义排序（按数值降序排序）

const arr = [3, 1, 4, 5, 2];
// 自定义排序：降序排列
arr.sort((a, b) => b - a);
console.log(arr); // [5, 4, 3, 2, 1]

(4) 排序字符串数组

const strArr = ['apple', 'banana', 'grape', 'kiwi'];
// 默认按字母升序排序
strArr.sort();
console.log(strArr); // ['apple', 'banana', 'grape', 'kiwi']
// 按字母降序排序
strArr.sort((a, b) => b.localeCompare(a));
console.log(strArr); // ['kiwi', 'grape', 'banana', 'apple']

6.额外信息

sort 是破坏性方法，会直接修改原数组。如果需要保留原数组，可以先使用 slice() 或 ... 创建一个副本。

const arr = [3, 1, 4, 5, 2];
const sortedArr = arr.slice().sort((a, b) => a - b);
console.log(sortedArr); // [1, 2, 3, 4, 5]
console.log(arr); // [3, 1, 4, 5, 2]  -- 原数组未改变

sort 对数组中的元素按字符 Unicode 顺序排序，对于数字来说，它是按字符的顺序排序，因此会出现一些问题。为了确保数字正确排序，可以通过自定义的 compareFunction 来指定排序规则。
如果数组中包含对象，可以根据对象的属性来进行排序：

const arr = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];
// 按照年龄升序排列
arr.sort((a, b) => a.age - b.age);
console.log(arr);
// [{ name: 'Charlie', age: 20 }, { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]

join()

join() 是 JavaScript 数组的方法之一，它将数组的所有元素通过指定的分隔符连接成一个字符串，并返回这个新的字符串。

1.接收参数

分隔符参数（可选）：

如果没有传入分隔符，默认使用逗号 , 作为分隔符。
如果传入了分隔符，那么每个数组元素之间将使用这个分隔符进行连接。

2.返回值

返回一个由数组元素连接成的字符串。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

join() 用于将数组中的所有元素连接成一个字符串。这对于将数组转换为格式化的字符串（例如 CSV 格式）非常有用。

5.代码示例

const arr = ['Apple', 'Banana', 'Cherry'];
// 使用逗号作为分隔符
const result = arr.join();
console.log(result); // "Apple,Banana,Cherry"
// 使用空格作为分隔符
const result2 = arr.join(' ');
console.log(result2); // "Apple Banana Cherry"
// 使用其他分隔符
const result3 = arr.join(' - ');
console.log(result3); // "Apple - Banana - Cherry"

6.额外信息

如果数组中包含 undefined 或 null，它们会被转换为字符串 "undefined" 和 "null"，而不是空字符串。
如果数组为空，join() 会返回一个空字符串。

const arr = [undefined, null, 5];
console.log(arr.join()); // "undefined,null,5"

new Array(n).join(str)生成重复字符串

在 JavaScript 中，new Array(n).join(str) 是一种常见的用法，用于生成一个由 str 重复 n - 1 次组成的字符串。

(1) 为什么是 n - 1 次？

当你使用 new Array(n) 创建一个数组时，它会创建一个长度为 n 的数组，但这个数组的元素是空的，即每个元素都未定义。然后，调用 join(str) 时，JavaScript 会将数组中的元素按 str 进行连接。由于数组中的每个元素是空的，因此它实际上会在 n - 1 次位置插入分隔符 str。

join() 是用来将数组中的元素连接成字符串的，而空数组元素并没有实际的值，所以它仅根据数组的长度插入相应数量的分隔符。

(2) 代码示例

const result = new Array(5).join('*');
console.log(result); // "****"

new Array(5) 创建了一个长度为 5 的空数组：[empty × 5]。
join('*') 将这个数组的元素连接成一个字符串，元素之间用 * 分隔。由于数组的元素是空的，因此只会插入 4 个 *（即 n - 1 次）。

(3) repeat()

如果生成一个由 str 重复的字符串，不想依赖 join()，可以直接通过 repeat() 方法，这个方法更直观。

const result = '*'.repeat(4);
console.log(result); // "****"

reduce()

reduce 是 JavaScript 数组的一个方法，它用于 对数组中的所有元素执行累积操作，最终计算出一个单一的值。

1.接收参数

reduce 方法接受两个参数：

回调函数 (必填)：用于处理数组的每个元素，它接受四个参数：
- accumulator：累积值，保存上一次迭代的返回值（初始值为 initialValue）。
- currentValue：当前遍历的元素。
- currentIndex（可选）：当前元素的索引。
- array（可选）：调用 reduce 的原数组。
初始值 initialValue（可选）：
- 如果提供，则 accumulator 的初始值为 initialValue，reduce 从索引 0 开始遍历数组。
- 如果省略，则 accumulator 默认初始值为数组的 第一个元素，遍历从索引 1 开始。

2.返回值是什么？

返回计算后的单一值，可以是 数字、字符串、对象、数组等，取决于 reduce 的逻辑。

3.是否改变原数组

❌ 不会改变原数组。

4.意义

reduce 主要用于 数组求和、计算平均值、对象数组归类、转换数据结构等。

5.代码示例

(1) 求数组元素的总和

计算数组的累加和时，不管是否提供初始值，结果是一样的。
在更复杂的场景中，提供初始值可以避免某些特殊情况，比如空数组的处理。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
const sum = numbers.reduce((acc, num) => acc + num);
console.log(sum); // 15

解析：

初始值 acc 为 0。
1 + 2 + 3 + 4 + 5 = 15，最终返回 15。

(2) 计算数组中的最大值

const nums = [10, 5, 8, 20, 3];
const maxNum = nums.reduce((max, num) => (num > max ? num : max), nums[0]);
console.log(maxNum); // 20

解析：

初始 max 设为数组第一个元素 10。
依次比较 10, 5, 8, 20, 3，最终返回 20。

(3) 统计数组元素出现次数

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); 
// { apple: 3, banana: 2, orange: 1 }

解析：

acc 是一个对象，记录每个水果的出现次数。

6.额外信息

如果数组是空的且未提供 initialValue，会抛出 TypeError：

[].reduce((acc, num) => acc + num); // TypeError

解决方案：提供 initialValue：

[].reduce((acc, num) => acc + num, 0); // 0

reduceRight() 与 reduce 类似，但 从数组的最后一个元素向前迭代。

到此这篇关于JavaScript数组常用方法总结和案例的文章就介绍到这了,更多相关js数组常用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！