js篇-数组去重

数组去重

哈喽呀~ 小伙们呀，今天的知识又来啦。今天作者要讲的内容是数组去重。

数组：一组按顺序排列的数据的集合，数组中的每个成员被称为元素，每个元素在数组中都有编号，也就是我们所说的索引。

数组去重：顾名思义，数组去重，就是将一个数组中重复的数字去除，使得数组中每个元素只保留一次，不重复出现。

数组去重在工作中也是很常见的，接下来，我们就秉持着"实现功能不是目的，目的是实现功能的过程"的态度一起来看看有哪些实现方法吧。实现方法有很多，作者在这里就列出几种，有别的方法小伙伴们也可以留言评论，我们一起学习~

在实现功能之前，作者还是照常会带大家简单回顾一下用到的知识点~

1. 使用Set()

1. Set()

Set构造函数是用于创建一个Set对象，它可以存储任意类型的唯一值。

注释：Set()只能用new创建。如果在没有new的情况下调用它，就会抛出TypeError（因为Set是一个构造函数）。

小举一个例子

const needSet = new Set();
needSet.add(1); //[1]
needSet.add(2); //[1,2]
needSet.add(2); //[1,2]
needSet.add("zifuchuan"); //[1,2,'zifuchuan']
const obj = {a:1,b:2};
needSet.add(obj);//[1,2,'zifuchuan'，{{a:1,b:2}}]

实现功能

const arr = [1,3,5,5,6];
let arr1 = new Set(arr); //此时是一个Set对象
arr1 = [...arr1]; //使用展开运算符，将其变成一个数组
console.log(arr1); //[1,3,5,6]

2. 循环遍历并且配合indexOf()或者includes()

1. 循环遍历

循环遍历的方式有很多，这里就不展开说说了，相信小伙们对循环遍历的操作也很熟悉了。想要了解更多，可以看作者的下一篇文章~

1. for循环
2. forEach()
3. for...in...
4. for...of...
5. map()
6. some()
7. every()
8. filter()

2. indexOf

indexOf()：该方法返回数组中第一次出现给定元素的下标，如果不存在则返回-1。

小举一个例子

const arr = [1,2,3,5,1];
arr.indexOf(1); //0
arr.indexOf(2);//1
arr.indexOf(5); //3
arr.indecOf(10); //-1

注释：你没法使用 indexOf() 来搜索 NaN。

const array = [NaN];
array.indexOf(NaN); // -1

3. includes

判断数组是否包含某一个指定的值，如果包含则返回true，否则返回false

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, NaN].includes(NaN); // true
["1", "2", "3"].includes(3); // false

实现功能

const arr = [1,3,5,5,6];
let arr2 = [];
arr.forEach((items,i)=>{
    if (arr2.indexOf(items) === -1){
    // 如果新数组arr2里面没有找到arr的元素就往arr2里面添加这个arr的元素
        arr2.push(arr[i]);
    }
})
console.log(arr2); //[1,3,5,6]

实现功能

const arr = [1,3,5,5,6];
let arr3 = [];
for (let i = 0; i < arr.length; i++) {
    if(arr3.includes(arr[i]) === false){
    // 如果新数组arr3里面没有找到arr的元素就往arr3里面添加这个arr的元素
        arr3.push(arr[i]);
    }
}
console.log(arr3; //[1,3,5,6]

3. filter+indexOf

1. filter()

filter()：把数组的某些元素过滤掉,然后返回剩下的元素。

注释：filter() 不会对空数组进⾏检测；不会改变原始数组。

举个小例子

function isBigEnough(value) {
  return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filtered);// [12, 130, 44]

实现功能

const arr = [1,3,5,5,6];
let arr3 = arr.filter((items,i)=>{
    return arr.indexOf(items) === i;
})
console.log(arr3); //[1,3,5,6]

4. 双重循环配合splice()

这里所提到的splice()，可以看作者发表过的文章：将手机号的中间几位数改成*

const arr = [1,3,5,5,6];
for (let i = 0; i < arr.length; i++){
    for (let j = i + 1; j < arr.length; j++){
        if (arr[i] === arr[j]){
            arr.splice(j,1); //从第j项开始切割，切割一位
            j--;
        }
    }
}
console.log(arr);//[1,3,5,6]

小伙伴，今天的分享到此结束啦~ 还是那句话，有什么别的方法可以留言评论噢~ 请多多指教