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

This article will explain in detail what are the seven ways to remove the weight of the array in JS. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Example: remove duplicate elements from the following array (take multiple data types as an example)

Const arr = [1,2,2, 'abc',' abc', true, true, false, false, undefined, undefined, NaN, NaN] 1. Using Set () + Array.from ()

Set object: a collection of values whose elements you can iterate through in the order in which they are inserted. Elements in Set appear only once, that is, elements in Set are unique.

The Array.from () method: creates a new, shallow-copy array instance of a similar array or iterable object.

Const result = Array.from (new Set (arr)) console.log (result) / / [1,2, 'abc', true, false, undefined, NaN]

Note: the above de-weighting method is also effective for NaN and undefined types, because both NaN and undefined can be stored in Set, and NaN is treated as the same value (although in js: NaN! = = NaN).

two。 Splice method using two-layer Loop + Array

The array elements are compared one by one through a two-layer loop, and then the duplicate elements are removed by the splice method. This method cannot de-duplicate NaN because NaN! = = NaN when comparing.

Function removeDuplicate (arr) {let len = arr.length for (let I = 0; I

< len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) len-- // 减少循环次数提高性能 j-- // 保证j的值自加后不变 } } } return arr} const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]3.利用数组的indexOf方法 新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。 indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。 function removeDuplicate(arr) { const newArr = [] arr.forEach(item =>

{if (newArr.indexOf (item) =-1) {newArr.push (item)}}) return newArr / / returns a new array} const result = removeDuplicate (arr) console.log (result) / / [1,2, 'abc', true, false, undefined, NaN, NaN] 4. Using the includes method of array

The logic of this method is the same as that of the indexOf method, except that the includes method is used to determine whether it contains repeating elements.

The includes () method is used to determine whether an array contains a specified value, returning true if it does, or false otherwise.

Function removeDuplicate (arr) {const newArr = [] arr.forEach (item = > {if (! newArr.includes (item)) {newArr.push (item)}}) return newArr} const result = removeDuplicate (arr) console.log (result) / / [1,2, 'abc', true, false, undefined, NaN]

Note: why includes can detect that the array contains NaN, which involves the underlying implementation of includes. The following figure shows part of the code implemented by includes. When determining whether an element is included, the sameValueZero method is called for comparison. If it is NaN, isNaN () is used for conversion.

Simply test includes ()'s judgment of NaN:

Const testArr = [1, 'asides, NaN] console.log (testArr.includes (NaN)) / / true5. Using the filter () + indexOf () of the array

The filter method stores the elements that meet the conditions in a new array, which is judged by the indexOf method.

The filter () method creates a new array that contains all the elements of the test implemented by the provided function.

Function removeDuplicate (arr) {return arr.filter ((item, index) = > {return arr.indexOf (item) = = index})} const result = removeDuplicate (arr) console.log (result) / / [1,2, 'abc', true, false, undefined]

Note: NaN is not included in the output here because indexOf () cannot judge NaN, that is, arr.indexOf (item) = index returns the result as false. The tests are as follows:

Const testArr = [1, 'asides, NaN] console.log (testArr.indexOf (NaN)) / /-16. Using Map ()

Map object is a data structure provided by JavaScript. The structure is in the form of key-value pairs. The array elements are stored as keys of map, and the front-end training is combined with has () and set () methods to determine whether the keys are duplicated.

Map object: used to save key-value pairs and remember the original insertion order of keys. Any value (object or original value) can be used as a key or a value.

Function removeDuplicate (arr) {const map = new Map () const newArr = [] arr.forEach (item = > {if (! map.has (item)) {/ / has () is used to determine whether the map package is the attribute value map.set (item, true) / / use set () to set item to map And set its attribute value to true newArr.push (item)}}) return newArr} const result = removeDuplicate (arr) console.log (result) / / [1,2, 'abc', true, false, undefined, NaN]

Note: you can also de-weight NaN with Map (), because Map judges that NaN is equal to NaN, and all other values are based on the result of the = = operator.

7. Make use of object

Its implementation idea is similar to Map (), mainly taking advantage of the non-repeatable property name of the object.

Function removeDuplicate (arr) {const newArr = [] const obj = {} arr.forEach (item = > {if (! obj [item]) {newArr.push (item) obj [item] = true}}) return newArr} const result = removeDuplicate (arr) console.log (result) / / [1,2, 'abc', true, false, undefined, NaN] that's all about how the seven JS arrays are deduplicated. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.