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

This article mainly introduces the relevant knowledge of "what are the common operation skills of JavaScript array". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what are the common operation skills of JavaScript array" can help you solve the problem.

First, create an array

Creating an array is a basic skill, and its main methods include the following:

Const arr = [1Jing 2jue 3] / / Array literals const arr = [,] / / three-element vacant array (hole array) const arr = new Array (4) / / [,] const arr = new Array (4Jing 2) / [4JEO 2] const arr = Array.of (1Jing 2pm 3) / / [1m 2pm 3]

Among them, the most commonly used method is the array literal quantity method.

Second, judge whether it is an array or not

The main ways to determine whether an array is an array are:

/ / method 1 [1 object Array 2 instanceof Array// method 2] .constructor = Array// method 3 Object.prototype.toString.Call ([1 Magne2 Magne3]) = ='[object Array]'/ / method 4 Array.isArray ([1 Magne2 Magne3]) / / method 5 (compatible writing) function isArray (arr) {return Array.isArray? Array.isArray (arr): Object.prototype.toString.call (arr) = ='[object Array]'}

Generally speaking, the most commonly used method is the isArray method.

III. Conversion of class array and array

The data structure we sometimes encounter is not a pure array, but is generally classified as a "class array", which can be converted to a pure array in the following ways:

Const x = document.querySelectorAll ('a'); / / method 1-Array.prototype.slice.call (x); / / method 2-Array.from (x); Array.from (xrem mapFnmathisArg) / / method three [... x] / method four function toArray (x) {let res = [] for (item of x) {res.push (item)} return res} / / method five Array.apply (null,x) / / method six [] .concat.apply ([], x)

Methods five and six essentially take advantage of the characteristics of apply, that is, the second parameter passed to apply (array or class array) is converted into a list of parameters, which are then sent to the calling method (new Array or concat).

4. Array deduplication

When the array is deduplicated, you essentially need to compare whether two elements are equal, and if so, discard one element. In order to judge accurately, Object.is is used for comparison here.

1. Weight removal by set

Set requires that the elements do not repeat, so you can de-duplicate the array after converting the array to set, and then convert it back to the array.

Function unique (arr) {return Array.from (new Set (arr)) / / return [... new Set (arr)]} 2. Double cycle + splice

The outer loop iterates through all the elements, and the inner loop iterates through all the elements that follow the current element, and if it is found to be equal, it uses splice to remove one. Remember to roll back one bar at a time in the inner loop, otherwise some elements will be left out.

Function unique (arr) {for (let I = 0 bori)

< arr.length;i++){ for(let j = i + 1;i < arr.length;j++){ if(Object.is(arr[i],arr[j])){ arr.splice(j,1) j-- } } } return arr}3.新建数组 + includes 新建数组，每次往数组中添加元素之前都检查数组中是否已有该元素： function unique(arr){ const res = [] arr.forEach((item,index) =>

{/ / it is also possible to if (res.indexOf (item) = =-1), but cannot correctly judge NaN if (! res,includes (item)) {res.push (item)})} 4.reduce + includesfunction unique (arr) {return arr.reduce ((acc,cur) = > {/ / return acc.includes (cur)? Acc: acc.concat (cur) return acc.includes (cur)? Acc: [... acc,cur]}, [])} 5. Create a new array + sort

According to sort's mechanism (toStrng is called on each element and then sorted at the string level), equal elements are grouped together. Create a new array and check whether the element is equal to the previous element each time you add an element to the array. Yes, it is a repeating element:

Function unique (arr) {arr.sort () const res = [arr [0]] for (let I = 1teri

< arr.length;i++){ if(!Object.is(arr[i],arr[i-1])){ res.push(arr[i]) } } return res}6.新建数组 + 利用对象属性 这种方法其实和"新建数组 + includes"一样。新建数组，每次往数组中添加元素之前都检查该元素是否已经作为对象的属性： // 对象属性值可以认为是元素重复的次数function unique(arr){ const res = [] const obj = {} arr.forEach((item,index) =>

{if (! obj [item]) {res.push (item) obj [item] = 1} else {obj [item] + +}}) return res}

The property name of the object is detected here, and the attribute name is essentially a string, so obj [true] and obj ["true"] are considered to be equal, resulting in the element true or element "true" not being put into the new array.

7. Using map

The method is essentially the same as above, but there is no need to create a new array:

Function unique (arr) {let map = new Map () for (item of arr) {if (! map.has (item)) {map.set (item,true)}} return [... map.keys ()]} 8.filter + indexOf

To remove duplicate elements, to put it another way, is to retain those elements whose index is equal to the index when it first appeared. Such elements can be filtered out with filter and put into an array:

Function unique (arr) {return arr.filter ((item,index) = > index = arr.indexOf (item))}

The disadvantage of using indexOf is that NaN cannot be judged correctly.

This is the end of the content about "what are the common operation skills of JavaScript array". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.