JavaScript 배열에서 중복을 제거하는 12가지 방법(요약)
- 青灯夜游앞으로
- 2020-06-13 09:55:004954검색
어레이 중복 제거는 일반적으로 인터뷰 중에 접하게 되며, 일반적으로 어레이 중복 제거 방법의 코드를 직접 작성해야 합니다. 질문이 있는 경우 어레이 중복 제거 방법은 무엇입니까? 그 중 10가지에 답할 수 있다면 면접관은 당신에게 깊은 인상을 받을 가능성이 높습니다.
실제 프로젝트에서 접하게 되는 어레이 중복 제거는 일반적으로 백그라운드에서 처리되며 프런트 엔드에서는 어레이 중복 제거를 처리하는 경우가 거의 없습니다. 일상 프로젝트에서 사용할 확률은 상대적으로 낮지만, 인터뷰 중에 질문을 받을 경우를 대비해 알아야 합니다.
참고: 급하게 썼고, 요즘 좀 바빠서 자세히 확인하지는 못했지만 아이디어에는 문제가 없고, 자잘한 디테일이 틀릴 수도 있습니다.
배열 중복 제거 방법
1. ES6 Set을 사용하여 중복 제거(ES6에서 가장 일반적으로 사용됨)
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]호환성에 관계없이 이 중복 제거 방법은 코드가 가장 적습니다. 이 메서드는 "{}" 빈 개체를 제거할 수 없으며 이후의 상위 메서드에서는 반복되는 "{}"를 제거하는 메서드를 추가합니다.
두 번째, for를 사용하여 중첩한 다음 splice를 사용하여 중복 제거(ES5에서 가장 일반적으로 사용됨)
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了이중 레이어 루프, 외부 루프 요소, 내부 루프 비교 값. 값이 동일하면 이 값은 삭제됩니다.
일반적으로 사용되는 ES6 구문을 더 빨리 배우고 싶다면 이전 기사 "ES6 참고 사항 학습 - 업무에서 일반적으로 사용되는 ES6 구문"을 읽어보세요.
3. indexOf를 사용하여 중복 항목을 제거하세요.
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重원래 배열을 반복하고, 동일한 값이 있으면 건너뛰세요. 동일하지 않은 경우 배열로 푸시합니다.
4. sort()를 사용하세요
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN、{}没有去重sort() 정렬 방법을 사용한 다음 정렬된 결과를 기준으로 인접한 요소를 순회하고 비교하세요.
다섯째, 객체의 속성이 동일할 수 없다는 특성을 활용하여 중복제거(이 배열 중복제거 방법은 문제가 있어 권장하지 않으며 개선이 필요합니다)
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var arrry= [];
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
arrry.push(arr[i])
obj[arr[i]] = 1
} else {
obj[arr[i]]++
}
}
return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] //两个true直接去掉了，NaN和{}去重여섯째, include를 사용하세요
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重 Seven. hasOwnProperty를 사용하세요
function unique(arr) {
var obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了hasOwnProperty를 사용하여 객체 속성이 있는지 확인하세요
8. 필터를 사용하세요
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]9. 재귀를 사용하여 중복 항목을 제거하세요
function unique(arr) {
var array= arr;
var len = array.length;
array.sort(function(a,b){ //排序后更加方便去重
return a - b;
})
function loop(index){
if(index >= 1){
if(array[index] === array[index-1]){
array.splice(index,1);
}
loop(index - 1); //递归loop，然后数组去重
}
}
loop(len-1);
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]10. 사용하세요 데이터 구조를 다음으로 매핑 중복 제거
function arrayNonRepeatfy(arr) {
let map = new Map();
let array = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map .has(arr[i])) { // 如果有该key值
map .set(arr[i], true);
} else {
map .set(arr[i], false); // 如果没有该key值
array .push(arr[i]);
}
}
return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]하나의 빈 맵 데이터 구조를 생성하고, 중복 제거가 필요한 배열을 순회하고, 배열의 각 요소를 맵에 키로 저장합니다. 동일한 키 값이 Map에 나타나지 않으므로 최종 결과는 중복 제거 후의 결과입니다.
Eleven, Reduce+includes 사용
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]Twelve, [...new Set(arr)]
[...new Set(arr)]
//코드는 다음과 같습니다. ---- (사실 엄밀히 말하면 일종의 방법은 아닙니다. 첫 번째 방법에 비하면 코드가 단순해질 뿐입니다.)
function distinct(a, b) {
return Array.from(new Set([...a, ...b]))
}PS: 개인적으로 일부 기사에서 foreach+indexOf 배열 중복 제거 방법을 언급한 것 같습니다. 다 비슷해서 따로 적지는 않았어요.
사용할 코드에 대한 제안 사항은 JavaScript 고성능 배열 중복 제거 문서를 확인하세요.
추천 튜토리얼: "JS Tutorial"
위 내용은 JavaScript 배열에서 중복을 제거하는 12가지 방법(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!