Array extension method in ES6

form is converted into a real array

Let’s talk about the usage scenario first. In Js, we need to operate the DOM frequently, such as obtaining the input tags of all pages, and finding an element of type button, and then registering a click event for this button. We may do this;

 var inputObjs=document.getElementsByTagName('input');for(var i=0;i<inputObjs.length;i++){if(inputObjs[i].type==='button'){inputObjs[i].onclick=function(){return;}}}

There is definitely no problem writing this way, but we know that many methods of operating arrays are much better than for loops, such as the forEach method of es5 is very useful; but can it be used directly? cannot! Because the dom object collection is not a truly Array array type, it will cause an error if you use it directly;

 var inputObjs=document.getElementsByTagName('input');inputObjs.forEach(); //inputObjs.forEach is not a function

Despite this, we can still use it. We cannot use it directly or indirectly. Just use the powerful js object impersonation function;

 var inputObjs=document.getElementsByTagName('input');console.info(inputObjs); //[]length: 0__proto__: HTMLCollectionconsole.info([].slice.call(inputObjs)); //[]length: 0__proto__: Array[0]

In this way, after converting it into a real array, you can call the array method at will; this method is certainly feasible, but it is not easy to understand and is too "twirl". es6 provides us with a simpler and more direct method, form, which is very simple to use:

 var inputObjs=document.getElementsByTagName('input');console.info(inputObjs); //[]length: 0__proto__: HTMLCollectionconsole.info(Array.from(inputObjs)); //[]length: 0__proto__: Array[0]

The result is the same, but it is more semantically appropriate and easier to understand. Isn’t it easy to use? Of course these are not enough. Not only can any data type of class array be converted into an array using this method, but the effects of different types are different. The test is as follows:

 let str='google';console.log(Array.from(str)); //["g", "o", "o", "o", "g", "l", "e"]let num=234;console.log(Array.from(num)); //[]let bol=false;console.log(Array.from(bol)); let obj={foo:'foo',bar:'bar'};console.log(Array.from(obj)); //[]let superObj={0:'foo',1:'bar',length:2};console.log(Array.from(superObj)); //["foo", "bar"]

Here are the results of calling this method by different data types. It is worth noting that strings and some special objects can be converted into arrays with content. Special objects refer to objects whose content is arranged according to numeric key value pairs and have length attributes. This kind of object can be used for loops, and strings can also use for loops to get each character, so it boils down to one sentence. Using the from method that can use the for loop to output content is not an empty array; here I would like to remind you that friends who have used jQuery can pay attention to what structure is the jquery object returned when you use the selector to select elements? In fact, it is the last structure in our example. For details, please refer to my jQuery source code analysis series articles.

of Convert values to arrays

There are two ways to create an array, one is constructor:

 let arr=Array(1,2,3);

Another is the most commonly used literal creation:

 let arr=[1,2,3];

The Array.of method is actually a supplement to the first method, and the usage is as follows:

 console.log(Array.of(1,2,3)); //[1,2,3]

It seems to have the same effect as the construction method, so why is this method still necessary? Look at the following examples to understand:

 console.log(Array()); //[]console.log(Array(1)); //[undefined]console.log(Array(1,2)); //[1,2]

In this example, the number of parameters differs in their meanings. When there is only one parameter, the parameter represents the element represented by the length. If it is greater than 1 parameter, it will cause confusion. However, does not have this problem with the Array.of method, because the elements represented by its parameters are always represented:

 console.log(Array.of()); //[]console.log(Array.of(1)); //[1]console.log(Array.of(1,2)); //[1,2]

copyWithin array internal data copy replacement

The main function of the copyWithin method is to replace the internal values of the array. This method accepts three parameters, indicating the start copy position, the end copy position and the insertion position. The example is as follows:

 [1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]// Copy bit 3 to bit 0[1, 2, 3, 4, 5].copyWithin(0, 3, 4)// [4, 2, 3, 4, 5]// -2 is equivalent to bit 3, and -1 is equivalent to bit 4[1, 2, 3, 4, 5].copyWithin(0, -2, -1)// [4, 2, 3, 4, 5]// Copy bit 3 to bit 0[].copyWithin.call({length: 5, 3: 1}, 0, 3)// {0: 1, 3: 1, length: 5}// Copy bit 2 to the end of the array and copy to the 0 bit var i32a = new Int32Array([1, 2, 3, 4, 5]);i32a.copyWithin(0, 2);// Int32Array [3, 4, 5, 4, 5]// For platforms without the copyWithin method of TypedArray // The following writing method is required[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);// Int32Array [4, 2, 3, 4, 5]

The above is the array extension method in ES6 introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!