前端面试手写代码——JS数组重复。

JavaScript中阵列重复数据消除类型总结，4种类型，8种基本编写方法。

1 测试用例

//测试用例

const a={ }；

const b={ c : 1 }；

常量数组=[

1, 1, '1', '1',

{}、{}、{ c: 1 }、{ c: 1}，

a，a，b，b，

[], [], [1], [1],

未定义，未定义，

空，空，

NaN，NaN，

];

2 JS 数组去重4大类型

2.1 元素比较型

通过数组元素之间的比较，此类型被复制。

2.1.1 双层 for 循环逐一比较（es5常用）

使用双层for循环逐个比较数组元素，使用拼接方法去除重复元素。

//双层用于循环。

函数uniq 1(arr){ 0

for(设I=0；一、长度；I){ 0

for(设j=I ^ 1；j arr.lengthj ) {

if (arr[i]===arr[j])

arr.splice(j，1)

j -

}

}

}

返回逮捕

}

//重复删除结果

//[1，' 1 '，{}，{}，{c:1}，{c:1}，{}，{c:1}，[]，[]，[1]，[1]，未定义，null，NaN，NaN]

通过比较重复数据消除前后的结果，不会删除重复的NaN，因为NaN===NaN为假。

2.1.2 排序相邻比较

使用sort()方法对数组元素进行排序，然后比较相邻的元素，并使用splice方法删除重复的元素。

函数uni2(arr){ 0

arr . sort()；

for(设I=0；I arr . length-1；I){ 0

arr[i]===arr[i 1] arr.splice(i 1，1)I-；

}

返回逮捕；

}

您还可以创建一个新数组，并将非重复元素放入新数组中。

函数uniq 3(arr){ 0

arr=arr.sort()

const newArr=[arr[0]]

for(设I=1；一、长度；I){ 0

如果！==arr[i - 1]) {

推(arr[i])

}

}

返回纽约

}

//重复删除结果

//[[]，[]，1，' 1 '，[1]，[1]，NaN，NaN，{}，{}，{c:1}，{c:1}，{}，{c:1}，null，未定义]

的重复NaN未被删除，因为NaN===NaN为假。

排序的默认排序顺序是将元素转换为字符串，所有从对象转换而来的字符串都是[object Object]，所以排序方法无法对数组中的对象进行排序，有可能重复的对象无法移除，除非重复的对象相邻。

2.2 查找元素位置型

通过查找元素的第一个匹配项来复制该类型。

2.2.1 indexOf

通过indexOf查找当前元素第一次出现的位置是否是当前位置，如果是，将其放入新数组中。

函数uniq 4(arr){ 0

让res=[]

for(设I=0；一、长度；I){ 0

if(arr . indexof(arr[I])===I){ 0

res.push(arr[i])

}

}

返回资源

}

//重复删除结果

//[1，' 1 '，{}，{}，{c:1}，{c:1}，{}，{c:1}，[]，[]，[1]，[1]，undefin

ed,null]

同样，因为NaN === NaN为false，所以用indexOf查找NaN结果总是-1，从而在新数组中不会有NaN

2.2.2 findIndex

通过findIndex查找当前元素第一次出现的位置是否为当前位置，若是，则放入新数组

function uniq5(arr) {
    let res = []
    for (let i = 0; i  arr.length; i++) {
        if (arr.findIndex(item = item === arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同样，因为NaN === NaN为false，所以用findIndex查找NaN结果总是-1，从而在新数组中不会有NaN

2.3 元素是否存在型

此类型通过判断在新数组中是否存在当前元素来去重

2.3.1 includes

includes方法用来判断一个数组是否包含一个指定的值

function uniq6(arr) {
    let res = []
    for (let i = 0; i  arr.length; i++) {
        if (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

includes使用零值相等算法来确定是否找到给定的元素，所以可以判断NaN是否在新数组中存在

2.3.2 some

some方法用来测试数组中是否至少有1个元素通过了被提供的函数测试

function uniq7(arr) {
    let res = []
    for (let i = 0; i  arr.length; i++) {
        if (!res.some(item = item === arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

同样，这里仍旧使用了===来比较元素，因为NaN === NaN为false，所以新数组中会有多个NaN

2.4 依托数据结构特性

此类型通过ES6提供的数据结构Map、Set本身不可重复特性来去重

2.4.1 Map

ES6提供的Map结构可以用各种类型的值（包括对象）当作键，且键是唯一的

function uniq8(arr) {
    const map = new Map()
    for (let i = 0; i  arr.length; i++) {
        !map.has(arr[i])  map.set(arr[i], true)
    }
    return [...map.keys()]
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

map.has方法对NaN也有效

2.4.2 Set（ES6 最常用）

Set结构的成员的值都是唯一的，没有重复的值。

function uniq9(arr) {
    return [...new Set(arr)]
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 补充

1. 上面所说的方法可以使用不同的Api进行改动，比如使用splice方法去除数组元素的地方，我们可以通过filter方法来过滤数组得到新数组；

   再比如includes的方法中不用for循环遍历数组，通过reduce方法来代替等等。

   总之，方法有很多，但是万变不离其宗

2. 有些去重方法对NaN无效，因为NaN === NaN为false，如果有需求，可以使用Object.is(NaN, NaN)为true来进行修改

3. 实际应用中，最常用的方法就是使用Set，也可以使用第三方库lodash来处理