ES6 new features array, Math and extended operator usage example, es6math

ES6 new features array, Math and extended operator usage example, es6math

This article describes the new features of ES6, including array, Math, and extended operator usage. We will share this with you for your reference. The details are as follows:

I. Array

Some new static methods are added to the Array object, and some new methods are also added to the Array prototype.

1. Array. from create an Array instance from the class Array and the traversal object

Class array objects include: arguments in the function, nodeList object returned by document. getElementsByTagName (), newly added Map and Set data structure.

// Let itemElements = document. querySelectorAll ('. item '); let items = Array. from (itemElements); items. forEach (function (item) {console. log (item. nodeType) ;}); // in ES5 Array conversion Array method var items = Array. prototype. slice. call (itemElements );

In the above example, the itemElements object of the class Array object does not have the Array method forEach (), but can be converted to Array through the Array. from () method.

Another feature of Array. from () is its second optional parameter mapFunction. This parameter allows you to create a new ing Array through a single call:

let navElements=document.querySelectorAll("nav li");let navTitles=Array.from(navElements,el=>el.textContent);

2. Array. of Method

This method is similar to an Array constructor. It is suitable for passing only one parameter. Therefore, Array. of is a better choice for new Array (). Therefore, there are three ways to build an Array:

let x=new Array(3);// [undefined,undefined,undefined]let y=Array.of(8);//[8]let z=[1,2,3];

3. find, findIndex, and fill methods of Array

1) find returns the first element of true returned by the callback.
2) findIndex returns the subscript of the first element of true returned by the callback function
3) fill overwrites the array element with the given parameter'

[5,3,4,10,1].find(n=>n===10);//10[5,3,4,10,1].findIndex(n=>n===10);//2[5,3,4,10,1].fill(7);//[7,7,7,7,7][5,3,4,10,1].fill(7,1,3);//[5,7,7,7,1]

Ii. Math

Several new methods are added to the Math object:

// Math. sign returns the digit. The result is 1,-1, or 0 Math. sign (5); // 1 Math. sign (-9) //-1 // Math. trunc returns the number Math without decimal places. trunc (5.9); // 5 Math. trunc (6.8908); // 6 // Math. cbrt returns the cube root Math of the number. cbrt (64); // 4

Iii. extension operators

The extension operator is used to extend elements in a specific place. For example, to extend an array element in an array.

let values=[1,2,4];let some=[...values,8];//[1,2,4,8]let more=[...values,8,...values];//[1,2,4,8,1,2,4]

Another example is the application of parameters in function calls:

Let values = [1, 2, 4]; doSomething (... values); function doSomething (x, y, z) {// x = 1.y= 2, z = 4} // call method doSomething in ES5. apply (null, values );

As we can see, this syntax frees us from the trouble of using fn. apply (). It is flexible because the extension operators can be used anywhere in the parameter list.

We have seen that the extension operator is applied to arrays and parameters. In fact, we can use it in all objects in comparable cases:

let form = document.querySelectorAll('#my-form').  inputs=form.querySelectorAll('input');  selects=form.qurySelectorAll('select');let allTheThings=[form,...inputs,...selects];

Now, allTheThings is a two-dimensional array containing <form> nodes, <input> subnodes, and <select> subnodes.

I hope this article will help you design the ECMAscript program.