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

Editor to share with you what are the new methods of array in ES6, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Before ES6, there were two ways to create arrays:

One: literally through the array

Let array = [1JI 2jue 3]; console.log (array); / / [1JI 2pr 3]

Second: create an array through new Array ()

Let array = new Array; console.log (array); / / Array.find ((item,indexArr,arr) = > {})

Find the first qualified array member.

Its argument is a callback function, which is executed on all array members in turn.

Until the first member whose return value is true is found, and then the member is returned.

If there are no eligible members, undefined is returned.

-- find the first number greater than 15, let arr = [10,20,30] let firstItem= arr.find ((item, index, Arr) = > {return item > 15}) console.log ('firstItem== >', firstItem) / / output 20 console.log-find the value of this term of the first number greater than 19 let arr = [{age: 10}, {age: 20}, {age: 30}] let firstItem= arr.find ((item, index, Arr) = > {return item.age > 19}) console.log ('firstItem== >', firstItem); / / output {age: 20} Array.findIndex ((item, index, Arr) = > {}) master

The use of the findIndex method of an array instance is very similar to the find method

Returns the position of the first eligible array member, or-1 if none of the members meet the criteria.

Let arr = [{age: 10}, {age: 20}, {age: 30}] let a = arr.findIndex ((item, index, Arr) = > {return item.age > 15}) let b = arr.findIndex ((item, index, Arr) = > {return item.age > 45}) console.log ('a = >', a); / / output 1console.log ('baked = >', b) / / output-1 return item.id / find whether an item in the array has a value / / return the position of the first eligible array member const arr = [{id: 001}, {id: 002}, {id: 003}]; let index = arr.findIndex (item = > {return item.id = = '004'}) console.log (index); Array.flat () is used to flatten the nested array [recommended-Super useful]

The members of the array are sometimes arrays, and Array.flat () is used to "flatten" the nested array into an one-dimensional array.

This method returns a new array with no effect on the original data. [1, 2, [3, 4] .flat () pronunciation [fu lat] flat () will only "flatten" one layer by default, if you want to "flatten" a multi-layer nested array. You can write the parameters of the flat () method as an integer to indicate the number of layers you want to flatten, which defaults to 1. [1, 2, [3, [4, 5]] .flat () above code indicates the number of layers you want to flatten. The default is 1 move / [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5] .flat (2) in the above code, the parameter of flat () is 2, which means that you want to "flatten" the nested array of two layers. / / [1, 2, 3, 4, 5] if you want to convert to an one-dimensional array no matter how many layers are nested, you can use the Infinity keyword as a parameter. [1, [2, [3]] .flat (Infinity) / / [1,2,3] if there are spaces in the original array, the flat () method skips them. [1,2,4,5] .flat () / / [1,2,4,5] Array.at () returns the value of the corresponding subscript [super useful]

We all know that JavaScript does not support negative indexing of array indexes.

So if you want to represent the last member of the array, you can't write arr [- 1], you can only use arr [arr.length-1].

To solve the problem of negative index, the at () method is added to the array instance in es6, which accepts an integer as a parameter.

Returns the members of the corresponding position and supports negative indexes.

This method can be used not only for arrays but also for string and type arrays (TypedArray).

At () returns undefined if the parameter position is out of range of the array.

Const arr = [100,120,18,130,4]; console.log (arr.at (1)) / / 120console.log (arr.at (- 1)) / / 4console.log (arr.at (- 5)) / / 100console.log (arr.at (- 6)) / / undefinedArray.from () [master]

An array-like object that Array.from converts to a real array.

It is important to note that this array-like object must have the length property to convert to an array.

Otherwise, it will be converted to an empty array.

Let arrayLike = {'0forth:' asides, '1clients:' baked, '2percent:' cased, length: 3}; / / ES5 is written as var arr1 = [] .slice.call (arrayLike); / / ['averse,' baked,'c'] / / ES6 is written as let arr2 = Array.from (arrayLike) / / ['array,' breadth,'c'] when there is no object like an array, there is no length attribute let arrayLike = {'0arrays:' asides, '1codes:' baked, '2codes:' cations,}; / / an empty array let arr2 = Array.from (arrayLike) is returned at this time; / / [] Array.of () knows

The Array.of () method is used to convert a set of values into an array.

Simple to use:

Const a = Array.of (10,20,26,38); console.log (a); / / [10,20,26,38] const b = Array.of (1). Length;console.log (b); / / 1Array.of () can be simulated with the following code: function ArrayOf () {return [] .slice.call (arguments);} use of Array.includes

The Array.prototype.includes method returns a Boolean value indicating whether an array contains the given value.

Similar to the includes method of a string. ES2016 introduced this method.

Simple method of use

Const arr = [100,200,300]; console.log (arr.includes ('100')) / / falseconsole.log (arr.includes (100)) / / true

Before we have this method, we use the indexOf method of the array to check to see if it contains a value.

If (arr.indexOf (el)! =-1) {/ / have this value} indexOf method has two disadvantages, one is not semantic enough, it means to find the first occurrence position of the parameter value, so it is not intuitive to compare whether it is not equal to-1. Second, it uses the strict equality operator (=) internally to judge, which will lead to misjudgment of NaN. [NaN] .indexOf (NaN) / /-1includes uses a different judgment algorithm, so there is no problem. [NaN] .expand (NaN) / / true extension operator (...)

The extension operator is three dots (.)

Converts an array to a comma-separated sequence of parameters.

Console.log (. [1div' 2, 3]) / / 12 3console.log (1,... [2, 3, 4], 5) / / 1 2 3 45 [... document.querySelectorAll ('div')] / / [,] let arr1= [11 div' 22,]; let arr2= ["aa", "bb"]; / / es5 merge let arr=arr1.concat (arr2) Console.log (arr) / / [11,22, "aa", "bb"] / / es6let newarr= [... arr1,...arr2] console.log (newarr) / / [11,22,33,55, "aa", "bb", "cc", "dd"] / / there is an object inside the function, and arguments can get the arguments. But a pseudo array / / Array [hungry rei] function sun () {console.log (arguments) / / Arguments (8) [1, callee 2, 3, 4, 5, 6, 7, 9, callee: wow, Symbol (Symbol.iterator): Symbol.iterator] he is a pseudo array} sun (1, 2, 3, 4, 5, 6, 7, 7) / / how to change the pseudo array inside a function into a real array method 1function sun () {let ags=Array.prototype.slice.call (arguments); ags.push (150); console.log (ags); / / [1, let ags=, 3, 4, 5, 150]} sun; / / how to turn a pseudo array inside a function into a real array method, 2function sun () {let ags= [... arguments] / / the pseudo-array ags.push (150); console.log (ags); / / [1, 2, 3, 4, 5, 5, 6, 7, 150]} sun; / / summing up the extension operator is. An object that becomes a real array] an empty space in an array

The vacancy of an array means that there is no value at a certain position in the array.

For example, the array returned by the Array () constructor is empty.

Let arr = new Array (3) console.log (arr); / / [,] [null attribute × 3] will appear in Google browser

In the above code, Array (3) returns an array with three empty spaces.

ForEach (), filter (), reduce (), every (), and some () all skip spaces. Map () skips spaces, but preserves the values join () and toString () treat spaces as undefined, while undefined and null are treated as empty strings. On the other hand, ps:ES6 explicitly converts vacancies into undefined. Let arr = new Array (3) console.log (arr [0] = undefined); / / true

ES5's handling of vacancies is already very inconsistent, and vacancies are ignored in most cases.

On the other hand, ps:ES6 explicitly converts vacancies into undefined. The Array.from () method converts the empty space of the array to undefined, that is, this method does not ignore the empty space. The Array.from (['a', undefined, "b"] extension operator (...) also converts spaces to undefined. [...] / ["a", undefined, "b"] new Array (3) .fill ('a') / / ["a", "a", "a"] for...of loop also traverses empty spaces. Let arr = [,]; for (let i of arr) {console.log (1);} / / 1 in the code above, the array arr has two empty spaces, and for...of does not ignore them. If the map () method is changed to traverse, the empty space will be skipped. The above is all the content of the article "what are the new methods of arrays in ES6?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.