Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the JavaScript array deduplication problem", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to understand the JavaScript array to re-solve the problem"!

Catalogue

Preface?

Start working on ‍?

Primitive?

Using indexOf to optimize the original method ✍

Optimize again, filter method?

A different way of thinking? Into an ordered array ✨

Optimize again, filter?

ES6,Set attack?

Last?

Start working on ‍?

Primitive?

Array deduplication, at first my idea is this: define a new array, after two layers of for loop, if the data appears for the first time, push to the new array, if repeated, break off, using the value of j is equal to the length of res to determine the uniqueness of the data, and finally return the new array on the line.

Var arr = [1, var res, 2, 2, 3, 4, 5, 6, 6, 7, 7, 4, 3, 1, 8, 3, 3, 1, 1, 1, 1, 1, 1, 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 5, 5, 5, 5, 6, 6, 5, 6, 6, 6, 5, 6, 6, 6, 7, 6, 6, 7, 6, 7, 6, 6, 7, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 6, 6, 6, 6, 7, 6, 6, 7, 6, 7, 6, 7, 6, 7, 7, 6, 7, 5, 7, 6, 7, 7, 7, 7

< arr.length; i++){ for(var j = 0; j < res.length; j ++){ if(arr[i] === res[j]){ break } } // 如果数据第一次出现，那么执行完上面for语句后，j的值应该等于res的长度才对 if(j === res.length){ res.push(arr[i]) } } return res;}console.log(unique(arr));利用indexOf优化原始方法✍ 我们先来简单了解一下indexOf： indexOf(item,start) 方法可返回数组中某个指定的元素位置。 该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。 看到这大家都明白我们利用的是哪一点了吧，没错，就是加粗的那一句话：如果在数组中没找到指定元素则返回 -1。 var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ var res = [] for(var i = 0; i < arr.length; i++){ if(res.indexOf(arr[i]) === -1){ res.push(arr[i]) } } return res;}console.log(unique(arr));再次优化，filter方法? filter，顾名思义，过滤的意思，该方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 思路：用filter代替一层循环与indexOf配合，达到过滤效果，直接返回去重过后的数组。 var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ var res = arr.filter(function(item,index,arr){ return arr.indexOf(item) === index }) return res;}console.log(unique(arr));换种思路？变成有序数组✨ 不知道刷过几天力扣的小伙伴们有没有这种感觉，看见题目中出现数组，眼睛就立刻往前瞄了瞄，看看是有序数组还是无序数组~ 回到这个问题上，我们将要去重的数组变成有序，重复的数据肯定都挨着了，用一个变量存放上一个元素值，再循环判断当前值与上一个元素值是否相同，如果不相同，就将它添加到res中。 var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ var res = [] var pre arr = arr.sort() for(var i = 0; i < arr.length; i++){ if(!i || pre !== arr[i]){ res.push(arr[i]) } pre = arr[i] } return res;}console.log(unique(arr));再再次优化，filter? 刚刚悟了~，filter好像也可以把排序这里重写一下，变得更为简洁，我们直接看代码： var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ var res = arr.sort().filter(function(item,index,arr){ return !index || item !== arr[index - 1] }) return res;}console.log(unique(arr));ES6，Set来袭? ES6给我们带来了很多好处，其中，map、set尤为优秀。 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 所以我们可以利用Set的这一特性，来进行去重处理。 var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ return Array.from(new Set(arr))}console.log(unique(arr)); 注：Set是对象，所以要转成数组进行返回。 懂解构赋值的你，可以再简化一点? var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']function unique(arr){ return [...new Set(arr)]}console.log(unique(arr)); 想了解一下解构赋值的也可以先康康这个：解构运算符的理解与运用 之前学习，记录的笔记? 继续优秀下去（箭头函数）? var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']var unique = (arr) =>

[... new Set (arr)] console.log (unique (arr)); now that you have a better understanding of "how to understand the deduplication problem of JavaScript arrays", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.