Método de extensión de matriz en ES6

la forma se convierte en una matriz real

Hablemos primero sobre el escenario de uso. En JS, necesitamos operar el DOM con frecuencia, como obtener las etiquetas de entrada de todas las páginas y encontrar un elemento de botón de tipo, y luego registrar un evento de clic para este botón. Podemos hacer esto;

 var inputobjs = document.getElementsBytagName ('input'); for (var i = 0; i <inputObjs.length; i ++) {if (inputobjs [i] .type === '' Button ') {inputObjs [i] .Onclick = function () {return;}}

Definitivamente no hay problemas para escribir de esta manera, pero sabemos que muchos métodos de matrices operativos son mucho mejores que para los bucles, como el método foreach de ES5 es muy útil; ¿Pero se puede usar directamente? ¡no puedo! Debido a que la colección de objetos DOM no es un verdadero tipo de matriz de matriz, causará un error si la usa directamente;

 var inputobjs = document.getElementsBytagName ('input'); inputobjs.forEach (); //inputobjs.foreach no es una función

A pesar de esto, todavía podemos usarlo. No podemos usarlo directa o indirectamente. Solo use la poderosa función de suplantación de objeto JS;

 var inputobjs = document.getElementsBytagName ('input'); console.info (inputObJS); // [] Longitud: 0__proto__: htmlCollectionConsole.info ([]. slice.call (inputObjs)); // [] Longitud: 0__proto__: Array [0]

De esta manera, después de convertirlo en una matriz real, puede llamar al método de matriz a voluntad; Este método es ciertamente factible, pero no es fácil de entender y es demasiado "girar". ES6 nos proporciona un método más simple y más directo, Forma, que es muy simple de usar:

 var inputobjs = document.getElementsBytagName ('input'); console.info (inputObJS); // [] Longitud: 0__proto__: htmlCollectionConsole.info (array.from (inputObJS)); // [] Longitud: 0__proto__: Array [0]

El resultado es el mismo, pero es más semánticamente apropiado y más fácil de entender. ¿No es fácil de usar? Por supuesto que estos no son suficientes. No solo se puede convertir ningún tipo de datos de matriz de datos en una matriz utilizando este método, sino que los efectos de diferentes tipos son diferentes. La prueba es la siguiente:

 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)); Deje obj = {foo: 'foo', bar: 'bar'}; console.log (array.from (obj)); // [] Let superobj = {0: 'foo', 1: 'bar', longitud: 2}; console.log (array.from (superobj)); // ["foo", "bar"]

Aquí están los resultados de llamar a este método por diferentes tipos de datos. Vale la pena señalar que las cadenas y algunos objetos especiales se pueden convertir en matrices con contenido. Los objetos especiales se refieren a objetos cuyo contenido está organizado de acuerdo con los pares de valor de clave numérica y tienen atributos de longitud. Este tipo de objeto se puede usar para bucles, y las cadenas también pueden usarse para bucles para obtener cada personaje, por lo que se reduce a una oración. Usar el método FOY que puede usar el contenido para el bucle para la salida no es una matriz vacía; Aquí me gustaría recordarles que los amigos que han usado jQuery pueden prestar atención a qué estructura se devuelve el objeto jQuery cuando usa el selector para seleccionar elementos. De hecho, es la última estructura en nuestro ejemplo. Para obtener más detalles, consulte mis artículos de la serie de análisis de código fuente de JQuery.

de convertir valores en matrices

Hay dos formas de crear una matriz, uno es constructor:

 LET ARR = ARRAY (1,2,3);

Otro es la creación literal más utilizada:

 Sea arr = [1,2,3];

El método Array.Of es en realidad un suplemento del primer método, y el uso es el siguiente:

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

Parece tener el mismo efecto que el método de construcción, entonces, ¿por qué todavía es necesario este método? Mire los siguientes ejemplos para comprender:

 console.log (array ()); //+font>console.log(Array(1)); //=undefinedfontadoconsole.log(Array(1,2)); // [1,2]

En este ejemplo, el número de parámetros difiere en sus significados. Cuando solo hay un parámetro, el parámetro representa el elemento representado por la longitud. Si es mayor que 1 parámetro, causará confusión. Sin embargo, no tiene este problema con la matriz. Del método, porque los elementos representados por sus parámetros siempre están representados:

 console.log (array.of ()); //+font>console.log(array.of(1)); //§Font>console.log(array.of(1,2)); // [1,2]

Copywithin Array Reemplazo de copia de datos internos

La función principal del método de copia es reemplazar los valores internos de la matriz. Este método acepta tres parámetros, lo que indica la posición de copia de inicio, la posición de copia final y la posición de inserción. El ejemplo es el siguiente:

 [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] // Copiar bit 3 a bit 0 []. COPYWITHIN.CALL ({Longitud: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, longitud: 5} // bit 2 hasta el final de la matriz y copia a las 0 bit Var i32a = nueva INT32 3, 4, 5]); i32a.copywithin (0, 2); // int32Array [3, 4, 5, 4, 5] // para plataformas sin el método de copia de TypedArray // El siguiente método de escritura es necesario []. Copywithin.call (nuevo int32array ([1, 2, 3, 4, 5]), 0, 3, 4); 3, 4, 5]

Lo anterior es el método de extensión de matriz en ES6 introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!