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

Today, the editor will share with you the relevant knowledge points about how to create the ES6 array. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

ES6 is the next version of JavaScript, released in 2015.06. ES6 is mainly to solve the inherent shortcomings of ES5. For example, there is no concept of class in JavaScript, but at present, the JavaScript of browsers is the ES5 version, and most high-end browsers also support ES6, but only some of the features and functions of ES6 are implemented.

Array creation

Array.of ()

Forms an array of all values in the parameter as elements.

Console.log (Array.of (1, 2, 3, 4)); / / [1, 2, 3, 4] / / Parameter values can be different types of console.log (Array.of (1,'2, true)); / / [1,'2, true] / / returns an empty array console.log (Array.of ()) if the parameter is empty; / / []

Array.from ()

Converts a class array object or iterable object into an array.

/ / the parameter is an array and returns the same array console.log (Array.from ([1,2])) as the original array; / / [1,2] / / parameter with vacancy console.log (Array.from ([1, 3])); / / [1, undefined, 3] parameter Array.from (arrayLike [, mapFn [, thisArg]])

The return value is the converted array.

ArrayLike

The class array object or iteratable object you want to convert.

Console.log (Array.from ([1,2,3])); / / [1,2,3]

MapFn

Optionally, the map function is used to process each element, and what is put into the array is the processed element.

Console.log (Array.from ([1,2,3], (n) = > n * 2)); / / [2,4,6]

ThisArg

Optionally, to specify the this object when the map function executes.

Let map = {do: function (n) {return n * 2;}} let arrayLike = [1,2,3]; console.log (Array.from (arrayLike, function (n) {return this.do (n);}, map)); / / [2,4,6] class array object

A class array object must contain a length attribute, and the element attribute name must be a numeric value or a character that can be converted to a numeric value.

Let arr = Array.from ({0:'1, 1:'2, 2: 3, length: 3}); console.log (); / / ['1,'2, 3] / / if there is no length attribute, the empty array let array = Array.from ({0:'1, 1: 2, 2: 3,}) is returned; console.log (array) / / [] / element attribute name is not a numeric value and cannot be converted to a numeric value. An array of length length element value undefined let array1 = Array.from ({a: 1, b: 2, length: 2}) is returned; console.log (array1); / / [undefined, undefined] conversion iterated object

Convert map

Let map = new Map (); map.set ('key0',' value0'); map.set ('key1',' value1'); console.log (Array.from (map)); / / [['key0',' value0'], ['key1',//' value1']]

Convert set

Let arr = [1,2,3]; let set = new Set (arr); console.log (Array.from (set)); / / [1,2,3]

Convert string

Let str = 'abc';console.log (Array.from (str)); / / ["a", "b", "c"] extension method

Find

Find ()

Finds the eligible elements in the array, and returns the first element if there are multiple eligible elements.

Let arr = Array.of (1,2,3,4); console.log (arr.find (item = > item > 2)); / / 3Gap / array vacancy processing is undefinedconsole.log ([, 1] .find (n = > true)); / / undefined

FindIndex ()

Finds the index of eligible elements in the array, and returns the first element index if there are multiple eligible elements.

Let arr = Array.of (1, 2, 1, 3); / / Parameter 1: callback function / / Parameter 2 (optional): specify the this value console.log (arr.findIndex (item = > item = 1)) in the callback function; / / 0 prime / array vacancy is processed as undefinedconsole.log ([, 1] .findIndex (n = > true)); / / 0 fill

Fill ()

Populates the contents of array elements indexed in a range to a single specified value.

Let arr = Array.of (1jue 2,3,4); / / Parameter1: value / / Parameter2: populated start index / / Parameter3 (optional): populated ending index, defaults to console.log at the end of the array (arr.fill (0quotient 2); / / [1,0,3,4]

CopyWithin ()

Modifies the array elements of a certain range index to the elements of another specified range index for this array.

/ / Parameter 1: modified start index / / Parameter 2: start index of the data used to overwrite / / Parameter 3 (optional): the end index of the data used to be overwritten, defaults to the end of the array console.log ([1, 2, 3, 4] .copyWithin (0, 2, 3, 4)) / / [3,4,3,4] / / Parameter 1 represents reciprocal console.log ([1,2,3,4] .copyWithin (- 2,0)); / / [1,2,1,2] console.log ([1,2,4] .copyWithin (0,2,4)); / / [, 4,4] traversal

Entries ()

Traversing key-value pairs.

For (let [key, value] of ['await,' b'] .entries ()) {console.log (key, value);} / / 0 "a" / / 1 "b" / / do not use for... Of loop let entries = ['averse,' b'] .value (); console.log (entries.next () .value); / / [0, "a"] console.log (entries.next () .value); / / [1, "b"] / array with vacancy console.log ([... [,'a'] .value]); / / [[0, undefined], [1, "a"]]

Keys ()

Traversal key name.

For (let key of ['asides,' b'] .keys ()) {console.log (key);} / / 0 console.log / array with vacancies ([. [,'a'] .keys ()]); / / [0,1]

Values ()

Traverses the key value.

For (let value of ['asides,' b']. Values ()) {console.log (value);} / "a" / / "b" / / array with vacant console.log ([. [,'a'] .values ()]); / / [undefined, "a"] contains

Includes ()

Whether the array contains the specified value.

Note: distinguished from the has method of Set and Map; the has method of Set is used to look up the value; and the has method of Map is used to find the key name.

/ / Parameter 1: contains the specified value [1, 2, 3] .index (1); / / true// parameter 2: optional, the starting index of the search. Default is 0 [1, 2, 3] .index (1, 2); / / the inclusion judgment of false// NaN [1, NaN, 3] .contains (NaN); / / true nested array to one-dimensional array

Flat ()

Console.log ([1, [2,3]. Flat ()); / [1,2,3] / / specify the number of nested layers of the transformation console.log ([1, [2, [3, [4,5] .flat (2)); / / [1,2,3, [4,5]] / / No matter how many layers of console.log are nested ([1, [2, [3, [4,5] .flat (Infinity)) / / [1, 2, 3, 4, 5] / / automatically skip vacancies console.log ([1, [2, 3]] .flat ()); / / [1, 2, 3]

FlatMap () processes each element in the array and then executes the flat () method on the array.

/ / Parameter 1: traversal function, which accepts three parameters: current element, current element index, original array / / parameter 2: specify the console.log pointing to this in the traversal function ([1,2,3] .flatMap (n = > [n * 2])); / / [2,4,6] array buffer

An array buffer is an address in memory.

The basis of the stereotyped array.

The actual number of bytes is determined at the time of creation, and then only the data in it can be modified, not the size.

Create an array buffer

Create through the constructor:

Let buffer = new ArrayBuffer (10); console.log (buffer.byteLength); / 10 split existing array buffers let buffer = new ArrayBuffer (10); let buffer1 = buffer.slice (1,3); console.log (buffer1.byteLength); / / 2 view

The view is the interface used to manipulate memory.

Views can manipulate array buffers or a subset of buffer bytes and read and write data according to one of the numeric data types.

The DataView type is a generic array buffer view that supports all eight numeric data types.

Create:

/ / default DataView operable array buffer all contents let buffer = new ArrayBuffer (10); dataView = new DataView (buffer); dataView.setInt8 (0meme 1); console.log (dataView.getInt8 (0)); / / 1 stroke / specify DataView operable byte range let buffer1 = new ArrayBuffer (10) by setting offset (parameter 2) and length (parameter 3); dataView1 = new DataView (buffer1, 0,3); dataView1.setInt8 (5prime1); / / RangeError typed array

A specific type of view of the array buffer.

Instead of using generic DataView objects to manipulate array buffers, you can force the use of specific data types.

Create

Generated from array buffers

Let buffer = new ArrayBuffer (10), view = new Int8Array (buffer); console.log (view.byteLength); / / 10

Through the constructor

Let view = new Int32Array (10); console.log (view.byteLength); / / 40console.log (view.length); / / 10 view1.byteLength / the default length is 0 for no parameters / in this case the array buffer does not allocate space and the typed array created cannot be used to hold the data let view1 = new Int32Array (); console.log (view1.byteLength); / / 0console.log (view1.length) / / 0swap / acceptable parameters include typed array, iterable object, array, class array object let arr = Array.from ({0:'1, 1:'2, 2: 3, length: 3}); let view2 = new Int16Array ([1,2]), view3 = new Int32Array (view2), view4 = new Int16Array (new Set ([1,2,3])), view5 = new Int16Array ([1,2,3]), view6 = new Int16Array (arr) Console.log (view2 .buffer = view3.buffer); / / falseconsole.log (view4.byteLength); / / 6console.log (view5.byteLength); / / 6console.log (view6.byteLength); / / 6

Pay attention to the main points

The length property is not writable, and if you try to change this value, the operation will be ignored directly in non-strict mode and an error will be thrown in strict mode.

Let view = new Int16Array ([1,2]); view.length = 3holders console.log (view.length); / / 2

Stereotyped arrays can be iterated using entries (), keys (), and values ().

Let view = new Int16Array ([1,2]); for (let [k, v] of view.entries ()) {console.log (k, v);} / / 0 1max / 1 2

Methods such as find () can also be used for typed arrays, but the methods in the typed array additionally check whether the numeric type is safe, and confirm through Symbol.species that the return value of the method is a typed array rather than a normal array. The concat () method cannot be used for a typed array because the result of the merging of the two typed arrays is uncertain; in addition, because the size of the typed array cannot be changed, methods that can change the size of the array, such as splice (), do not apply to the typed array.

Let view = new Int16Array ([1,2]); view.find ((n) > 1); / / 2

All typed arrays contain static of () methods and from () methods, which are similar to the Array.of () method and Array.from () method, respectively, except that the method of the typed array returns the typed array, while the method of the normal array returns the normal array.

Let view = Int16Array.of (1,2); console.log (view instanceof Int16Array); / / true

A typed array is not an ordinary array and does not inherit from Array.

Let view = new Int16Array ([1,2]); console.log (Array.isArray (view)); / / false

The set () and subarray () methods are added to the stereotyped array. The set () method is used to copy other arrays to an existing typed array, and subarray () is used to extract a portion of the existing typed array to form a new typed array.

/ / set method / / Parameter 1: a stereotyped array or normal array / / Parameter 2: optional, offset, where to start inserting data, default is 0let view= new Int16Array (4); view.set ([1,2]); view.set ([3,4], 2); console.log (view) / / [1,2,3,4] / subarray method / / Parameter 1: optional, start position / / Parameter 2: optional, end position (excluding end position) let view= new Int16Array ([1,2,3,4]), subview1 = view.subarray (), subview2 = view.subarray (1), subview3 = view.subarray (1,3); console.log (subview1); / / [1,2,3,4] console.log (subview2) / / [2,3,4] console.log (subview3); / / [2,3] extension operator

Copy array

Let arr = [1,2], arr1 = [... arr]; console.log (arr1); / / [1,2] / / Array with vacancies let arr2 = [1, 3], arr3 = [... arr2]; console.log (arr3); [1, undefined, 3]

Merge array

Console.log ([... [1,2],... [3,4]]); / / [1,2,3,4] are all the contents of the article "how to create ES6 arrays". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.