掌握JavaScript数组去重之诀窍，让数据井然有序

2023-12-09 07:45:44

JavaScript 数组去重：整理您的数据，告别重复

在编程世界中，数组是一种常见的数据结构，用于存储一系列有序元素。然而，在实际应用中，我们经常遇到包含重复元素的数组。重复数据会使数组变得杂乱无章，难以管理。为了解决这个问题，我们需要进行数组去重操作，即从数组中删除重复元素，只保留唯一的元素。

JavaScript 提供了几种巧妙的方法来实现数组去重，每种方法都有其独到的优势和适用场景。

使用 indexOf() 进行数组去重

indexOf() 方法是 JavaScript 数组的一个内置方法，用于查找指定元素在数组中的索引位置。我们可以利用这一特性来进行数组去重。

// 1. 创建一个包含重复元素的数组
const arr = [1, 2, 3, 4, 5, 1, 2, 3];

// 2. 使用 indexOf() 方法查找重复元素的索引位置
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (arr.indexOf(arr[i]) === i) {
    uniqueArr.push(arr[i]);
  }
}

// 3. 输出去重后的数组
console.log(uniqueArr); // [1, 2, 3, 4, 5]

在这个代码示例中：

我们首先创建一个包含重复元素的数组 arr。
然后，我们使用一个 for 循环迭代数组 arr 中的每个元素。
对于每个元素，我们使用 indexOf() 方法检查该元素在数组 arr 中的索引位置。
如果该元素的索引位置等于循环变量 i，则说明该元素是第一次出现，我们将其添加到 uniqueArr 数组中。
最后，我们打印出 uniqueArr 数组，得到去重后的数组。

使用 filter() 进行数组去重

filter() 方法也是 JavaScript 数组的一个内置方法，用于创建一个新数组，其中只包含满足指定条件的元素。我们可以利用这一特性来进行数组去重。

// 1. 创建一个包含重复元素的数组
const arr = [1, 2, 3, 4, 5, 1, 2, 3];

// 2. 使用 filter() 方法进行数组去重
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

// 3. 输出去重后的数组
console.log(uniqueArr); // [1, 2, 3, 4, 5]

在这个代码示例中：

我们首先创建一个包含重复元素的数组 arr。
然后，我们使用 filter() 方法创建一个新数组 uniqueArr。
在 filter() 方法的回调函数中，我们使用 indexOf() 方法检查每个元素在数组 arr 中的索引位置。
如果该元素的索引位置等于循环变量 index，则说明该元素是第一次出现，我们将其添加到 uniqueArr 数组中。
最后，我们打印出 uniqueArr 数组，得到去重后的数组。

使用 Set() 进行数组去重

Set() 是 JavaScript 的一个内置数据结构，它可以存储唯一的值。我们可以利用 Set() 来进行数组去重。

// 1. 创建一个包含重复元素的数组
const arr = [1, 2, 3, 4, 5, 1, 2, 3];

// 2. 使用 Set() 进行数组去重
const uniqueArr = [...new Set(arr)];

// 3. 输出去重后的数组
console.log(uniqueArr); // [1, 2, 3, 4, 5]

在这个代码示例中：

我们首先创建一个包含重复元素的数组 arr。
然后，我们使用 Set() 创建一个新的 Set 对象，并将其与数组 arr 进行扩展运算符 (...) 连接。
这将把数组 arr 中的所有元素添加到 Set 对象中，由于 Set 对象只能存储唯一的值，因此重复的元素将被自动过滤掉。
最后，我们使用扩展运算符 (...) 将 Set 对象转换为数组，并打印出 uniqueArr 数组，得到去重后的数组。

使用 reduce() 进行数组去重

reduce() 方法是 JavaScript 数组的一个内置方法，用于将数组中的元素累积成一个单一的值。我们可以利用 reduce() 方法来进行数组去重。

// 1. 创建一个包含重复元素的数组
const arr = [1, 2, 3, 4, 5, 1, 2, 3];

// 2. 使用 reduce() 方法进行数组去重
const uniqueArr = arr.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);

// 3. 输出去重后的数组
console.log(uniqueArr); // [1, 2, 3, 4, 5]

在这个代码示例中：

我们首先创建一个包含重复元素的数组 arr。
然后，我们使用 reduce() 方法创建一个新数组 uniqueArr。
在 reduce() 方法的回调函数中，我们检查当前元素是否已经存在于 uniqueArr 数组中。
如果不存在，我们将当前元素添加到 uniqueArr 数组中。
最后，我们打印出 uniqueArr 数组，得到去重后的数组。

使用 ES6 新增的 Set() 方法进行数组去重

在 ES6 中，新增了 Set() 方法，我们可以直接使用 Set() 方法进行数组去重。

// 1. 创建一个包含重复元素的数组
const arr = [1, 2, 3, 4, 5, 1, 2, 3];

// 2. 使用 Set() 方法进行数组去重
const uniqueArr = [...new Set(arr)];

// 3. 输出去重后的数组
console.log(uniqueArr); // [1, 2, 3, 4, 5]