为什么你需要清楚掌握数组对象重复处理的方法？

2023-09-29 18:08:52

在JavaScript中，数组对象是一种可以存储多个值的有序集合。数组对象中的值可以是任何类型，包括其他数组对象。数组对象可以使用方括号([])来创建，如下所示：

const fruits = ['apple', 'banana', 'cherry'];

数组对象可以使用length属性来获取数组中的元素数量，如下所示：

console.log(fruits.length); // 3

数组对象可以使用[]运算符来访问数组中的元素，如下所示：

console.log(fruits[0]); // apple

数组对象可以使用push()方法来向数组中添加元素，如下所示：

fruits.push('durian');

数组对象可以使用pop()方法来从数组中删除最后一个元素，如下所示：

fruits.pop();

数组对象可以使用shift()方法来从数组中删除第一个元素，如下所示：

fruits.shift();

数组对象可以使用unshift()方法来向数组中添加一个或多个元素，如下所示：

fruits.unshift('grape', 'honeydew');

数组对象可以使用slice()方法来从数组中截取一个子数组，如下所示：

const citrusFruits = fruits.slice(1, 3);

数组对象可以使用indexOf()方法来查找一个元素在数组中的索引，如下所示：

console.log(fruits.indexOf('banana')); // 1

数组对象可以使用lastIndexOf()方法来查找一个元素在数组中最后一次出现的索引，如下所示：

console.log(fruits.lastIndexOf('banana')); // 1

数组对象可以使用includes()方法来判断一个数组是否包含一个元素，如下所示：

console.log(fruits.includes('banana')); // true

数组对象可以使用sort()方法对数组中的元素进行排序，如下所示：

fruits.sort();

数组对象可以使用reverse()方法将数组中的元素倒序排列，如下所示：

fruits.reverse();

数组对象可以使用join()方法将数组中的元素连接成一个字符串，如下所示：

const fruitString = fruits.join(', ');

判断数组对象是否重复

在实际开发中，我们经常会遇到数组对象重复的问题。例如，在一个用户列表中，可能有重复的用户名或电子邮件地址。我们可以使用以下方法来判断数组对象是否重复：

使用Set数据结构

Set数据结构可以存储唯一的值。我们可以将数组对象中的元素添加到Set数据结构中，如果Set数据结构的长度小于数组对象的长度，则说明数组对象中存在重复的元素。

const fruitsSet = new Set(fruits);
if (fruitsSet.size < fruits.length) {
  console.log('数组对象中存在重复的元素');
}

使用indexOf()方法

我们可以使用indexOf()方法来查找一个元素在数组中的索引。如果一个元素在数组中出现多次，则indexOf()方法会返回第一个元素的索引。我们可以使用这个索引来判断数组对象是否重复。

for (let i = 0; i < fruits.length; i++) {
  const index = fruits.indexOf(fruits[i], i + 1);
  if (index !== -1) {
    console.log('数组对象中存在重复的元素');
    break;
  }
}

使用lastIndexOf()方法

我们可以使用lastIndexOf()方法来查找一个元素在数组中最后一次出现的索引。如果一个元素在数组中出现多次，则lastIndexOf()方法会返回最后一个元素的索引。我们可以使用这个索引来判断数组对象是否重复。

for (let i = fruits.length - 1; i >= 0; i--) {
  const index = fruits.lastIndexOf(fruits[i], i - 1);
  if (index !== -1) {
    console.log('数组对象中存在重复的元素');
    break;
  }
}

找出重复项

如果我们已经判断出数组对象中存在重复的元素，我们可以使用以下方法来找出重复项：

使用Set数据结构

我们可以将数组对象中的元素添加到Set数据结构中。Set数据结构可以存储唯一的值，因此，重复的元素会被自动过滤掉。我们可以将Set数据结构中的元素提取出来，就得到了重复项。

const fruitsSet = new Set(fruits);
const duplicateFruits = fruits.filter(fruit => !fruitsSet.has(fruit));
console.log(duplicateFruits);

使用indexOf()方法

我们可以使用indexOf()方法来查找一个元素在数组中的索引。如果一个元素在数组中出现多次，则indexOf()方法会返回第一个元素的索引。我们可以使用这个索引来找出重复项。

const duplicateFruits = [];
for (let i = 0; i < fruits.length; i++) {
  const index = fruits.indexOf(fruits[i], i + 1);
  if (index !== -1) {
    duplicateFruits.push(fruits[i]);
  }
}
console.log(duplicateFruits);

使用lastIndexOf()方法

我们可以使用lastIndexOf()方法来查找一个元素在数组中最后一次出现的索引。如果一个元素在数组中出现多次，则lastIndexOf()方法会返回最后一个元素的索引。我们可以使用这个索引来找出重复项。

const duplicateFruits = [];
for (let i = fruits.length - 1; i >= 0; i--) {
  const index = fruits.lastIndexOf(fruits[i], i - 1);
  if (index !== -1) {
    duplicateFruits.push(fruits[i]);
  }
}
console.log(duplicateFruits);

其他数组对象去重方法

除了以上方法之外，我们还可以使用以下方法来去除数组对象中的重复项：

使用Array.from()方法

我们可以使用Array.from()方法来创建一个新的数组对象。Array.from()方法可以将一个可迭代对象（例如，Set数据结构）转换成一个数组对象。我们可以将Set数据结构中的元素转换成一个数组对象，就得到了去重后的数组对象。

const uniqueFruits = Array.from(fruitsSet);
console.log(uniqueFruits);

使用filter()方法

我们可以使用filter()方法来创建一个新的数组对象。filter()方法可以将一个数组对象中的元素过滤出来，返回一个新的数组对象。我们可以使用filter()方法来过滤掉数组对象中的重复项，就得到了去重后的数组对象。

const uniqueFruits = fruits.filter((fruit, index) => fruits.indexOf(fruit) === index);
console.log(uniqueFruits);

使用reduce()方法

我们可以使用reduce()方法来创建一个新的数组对象。reduce()方法可以将一个数组对象中的元素归并成一个值。我们可以使用reduce()方法来将数组对象中的元素归并成一个Set数据结构，然后将Set数据结构中的元素提取出来，就得到了去重后的数组对象。

const uniqueFruits = fruits.reduce((acc, fruit) => {
  if (!acc.has(fruit)) {
    acc.add(fruit);
  }
  return acc;
}, new Set());
console.log(Array.from(uniqueFruits));