前端进阶JS数组高级用法大全教程示例

基础知识

在讲解JavaScript数组的高级用法之前，我们需要了解一些JavaScript数组的基础知识。

JavaScript数组是一种存储有序数据集合的容器，可以包含任何类型的数据，包括数字、字符串、对象等。数组可以通过索引来访问包含在其中的元素，这些元素的索引从0开始。

在JavaScript数组中，有些方法是可以修改原数组的，而有些方法则不会修改原数组而是返回一个新的数组，这点需要注意。

常用方法

遍历数组

遍历数组的方法有很多，以下是常用的一些方法。

1. forEach

const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
  console.log(item);
});

1. map

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => {
  return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

1. filter

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(item => {
  return item > 3;
});
console.log(newArr); // [4, 5]

1. reduce

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, curr) => {
  return prev + curr;
}, 0);
console.log(sum); // 15

修改数组

以下是常用的一些修改数组的方法。

1. push / pop

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
arr.pop();
console.log(arr); // [1, 2, 3]

1. shift / unshift

const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
arr.shift();
console.log(arr); // [1, 2, 3]

1. splice

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

1. sort

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

进阶用法

数组去重

const arr = [1, 2, 1, 3, 4, 2];
const newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3, 4]

数组扁平化

const arr = [1, [2, 3], [4, [5]]];
const flatArr = arr.flat(2);
console.log(flatArr); // [1, 2, 3, 4, 5]

示例说明

示例1：从数组中随机获取一个元素

const arr = [1, 2, 3, 4, 5];
const randomIndex = Math.floor(Math.random() * arr.length);
const randomItem = arr[randomIndex];
console.log(randomItem);

上述代码中，首先生成一个随机索引randomIndex，然后通过数组的随机索引获取相应的随机元素。

示例2：使用reduce求出数组中的最大值

const arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10];
const max = arr.reduce((prev, curr) => {
  return prev > curr ? prev : curr;
});
console.log(max);

使用reduce方法可以遍历数组中的每个元素，并通过回调函数对元素进行操作。上述代码中，回调函数中通过比较prev和curr的大小，来决定返回较大的那个值。最后reduce方法返回的就是数组中的最大值。