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

Source: Internet
Author: User
Tags root math

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.