📌  相关文章
📜  如何从javascript中的数组中获取唯一值而没有重复值 - Javascript(1)

📅  最后修改于: 2023-12-03 15:23:47.295000             🧑  作者: Mango

如何从Javascript中的数组中获取唯一值而没有重复值 - Javascript

在Javascript中,有时候我们需要从一个数组中获取唯一的值而没有重复的值。这可能会在很多场景中出现,例如在一个下拉框中,如果有重复的选项,会显得非常不专业。本文将介绍如何使用Javascript来获取唯一的值而没有重复的值。

1. 使用Set

在Javascript中,我们可以使用Set来获取唯一的值而没有重复的值。Set是ES6中新增的一个数据类型,它类似于数组,但是每个元素都是唯一的。

代码如下:

const arr = [1, 2, 2, 3, 3, 4, 5, 5, 6];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr);

输出结果:

[1, 2, 3, 4, 5, 6]

上面的代码中,我们使用了解构赋值的语法来将Set转换成数组。可以看到,输出结果中只有唯一的值而没有重复的值。

2. 使用filter和indexOf

除了使用Set之外,我们还可以使用filter和indexOf来获取唯一的值而没有重复的值。代码如下:

const arr = [1, 2, 2, 3, 3, 4, 5, 5, 6];
const uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
console.log(uniqueArr);

输出结果:

[1, 2, 3, 4, 5, 6]

上面的代码中,我们使用了filter方法来过滤出唯一的值。同时,我们使用了indexOf方法来判断当前元素的索引是否等于数组中第一次出现该元素的索引,如果是,则保留该元素,否则删除该元素。

3. 使用reduce和includes

除了使用filter和indexOf之外,我们还可以使用reduce和includes来获取唯一的值而没有重复的值。代码如下:

const arr = [1, 2, 2, 3, 3, 4, 5, 5, 6];
const uniqueArr = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueArr);

输出结果:

[1, 2, 3, 4, 5, 6]

上面的代码中,我们使用了reduce方法来遍历数组并去重。同时,我们使用了includes方法来判断当前元素是否已经存在于目标数组中,如果不存在,则将该元素添加到目标数组中。

4. 总结

本文介绍了如何使用Javascript来从一个数组中获取唯一值而没有重复值的方法。我们介绍了使用Set、filter和indexOf、reduce和includes三种方法。无论使用哪种方法,都可以很容易地实现从数组中获取唯一值而没有重复值的效果。