迹忆客 专注技术分享

JavaScript 中要防止向数组添加重复项：

1. 使用 Array.includes() 方法检查数组中是否不存在该值。
2. 如果该值不存在，则使用 push() 方法将其添加到数组中。
3. 该数组将不包含任何重复值。

const arr = ['apple', 'pear', 'mango'];

const str = 'apple';

if (!arr.includes(str)) {
  // ✅ only runs if value not in array
  arr.push(str);
}

console.log(arr); // 👉️ ['apple', 'pear', 'mango']

我们传递给 Array.includes 方法的唯一参数是要在数组中搜索的值。

includes() 方法返回一个布尔结果：

• 如果值存在于数组中则为真
• 如果不是，则为假

我们使用逻辑 NOT ! 运算符来否定对 includes() 方法的调用，因为我们只想在数组中不存在该值时才添加该值。

以下是使用逻辑 NOT ! 运算符的更多示例。

console.log(!true); // 👉️ false
console.log(!false); // 👉️ true

console.log(!'hello'); // 👉️ false
console.log(!''); // 👉️ true
console.log(!null); // 👉️ true

我们可以想象逻辑 NOT ! 运算符首先将值转换为布尔值，然后翻转它。

当我们否定一个假值时，运算符返回真，在所有其他情况下它返回假。

Falsy 值为：null 、undefined 、空字符串 、NaN 、0 和 false。

使用 indexOf 防止将重复项添加到数组中

要防止向数组添加重复项：

1. 使用 indexOf() 方法检查该值是否不存在于数组中。
2. 如果该值不包含在数组中，则 indexOf 方法返回 -1。
3. 如果满足条件，则将值推送到数组。

const arr = ['apple', 'pear', 'mango'];

const str = 'apple';

if (arr.indexOf(str) === -1) {
  arr.push(str);
}

console.log(arr); // 👉️ ['apple', 'pear', 'mango']

Array.indexOf 方法返回值在数组中第一次出现的索引。

如果数组中不存在该值，则返回 -1。

if 语句检查 indexOf 方法是否返回 -1。 如果是，则该值不存在于数组中，因此我们使用 push() 方法。

另一种方法是使用 Set 对象而不是数组。

Set 对象存储唯一值的集合。 这使得不可能向 Set 添加重复值。

const str = 'apple';

const set1 = new Set(['apple', 'pear', 'mango']);
set1.add(str);

console.log(set1); // 👉️ {'apple', 'pear', 'mango'}

我们使用 Set.add 方法向 Set 添加一个值。

该值已包含在 Set 中，因此我们对 add 方法的调用没有执行任何操作。

Set 对象比数组更受限制，实现的方法也更少。 但是，它们有自己的用例，存储唯一值是主要的用例。