Método de extensão da matriz no ES6

o formulário é convertido em uma matriz real

Vamos falar sobre o cenário de uso primeiro. No JS, precisamos operar o DOM com frequência, como obter as tags de entrada de todas as páginas e encontrar um elemento do botão Tipo e, em seguida, registrar um evento de clique para este botão. Podemos fazer isso;

 var inputObjs = document.getElementsByTagName ('input'); para (var i = 0; i <inputObjs.length; i ++) {if (inputObjs [i] .Type === 'Button') {inputObjs [i] .onClick = function () {return}}

Definitivamente, não há problema em escrever dessa maneira, mas sabemos que muitos métodos de operação de matrizes são muito melhores do que para loops, como o método foreach de ES5 é muito útil; Mas pode ser usado diretamente? não pode! Como a coleção de objetos DOM não é um tipo de matriz verdadeiramente, causará um erro se você o usar diretamente;

 var inputObjs = document.getElementsByTagName ('input'); inputObjs.foreach (); //inputobjs.foreach não é uma função

Apesar disso, ainda podemos usá -lo. Não podemos usá -lo direta ou indiretamente. Basta usar a poderosa função de representação do objeto JS;

 var inputObjs = document.getElementsByTagName ('input'); console.info (inputObJS); // [] comprimento: 0__proto__: htmlcollectionConsole.info ([]. slice.call (inputobjs)); // [] Comprimento: 0__proto__: Array [0]

Dessa forma, depois de convertê -lo em uma matriz real, você pode chamar o método da matriz à vontade; Esse método é certamente viável, mas não é fácil de entender e é muito "giro". O ES6 nos fornece um método mais simples e direto, o formulário, que é muito simples de usar:

 var inputObjs = document.getElementsByTagName ('input'); console.info (inputObJS); // [] Comprimento: 0__proto__: htmlcollectionConsole.info (Array.From (inputObJS)); // [] Comprimento: 0__proto__: Array [0]

O resultado é o mesmo, mas é mais semanticamente apropriado e mais fácil de entender. Não é fácil de usar? Claro que isso não é suficiente. Não apenas qualquer tipo de dados de dados pode ser convertido em uma matriz usando esse método, mas os efeitos de diferentes tipos são diferentes. O teste é o seguinte:

 Seja str = 'google'; console.log (array.from (str)); // ["g", "o", "o", "o", "g", "l", "e"] deixe num = 234; console.log (array.from (num)); // [] deixe bol = false; console.log (array.from (bol)); Seja obj = {foo: 'foo', bar: 'bar'}; console.log (array.from (obj)); // [] deixe superobj = {0: 'foo', 1: 'bar', comprimento: 2}; console.log (array.from (superobj)); // ["foo", "bar"]

Aqui estão os resultados de chamar esse método por diferentes tipos de dados. Vale a pena notar que as cordas e alguns objetos especiais podem ser convertidos em matrizes com conteúdo. Objetos especiais se referem a objetos cujo conteúdo é organizado de acordo com os pares de valor de chave numérica e possui atributos de comprimento. Esse tipo de objeto pode ser usado para loops, e as strings também podem ser usadas para loops para obter cada caractere, por isso se resume a uma frase. Usar o método do método que pode usar o loop for em saída de conteúdo não é uma matriz vazia; Aqui, gostaria de lembrá -lo de que os amigos que usaram o jQuery podem prestar atenção em que estrutura o objeto jQuery retornou quando você usa o seletor para selecionar elementos? De fato, é a última estrutura em nosso exemplo. Para detalhes, consulte meus artigos da série de análise de código -fonte jQuery.

de valores convertidos em matrizes

Existem duas maneiras de criar uma matriz, uma é o construtor:

 deixe arr = matriz (1,2,3);

Outra é a criação literal mais usada:

 deixe arr = [1,2,3];

O método da matriz.Of é na verdade um suplemento ao primeiro método, e o uso é o seguinte:

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

Parece ter o mesmo efeito que o método de construção, então por que esse método ainda é necessário? Veja os seguintes exemplos para entender:

 console.log (Array ()); //OB- //OUNDEFINEIDATIONCONSOLE.LOG(Array(1,2)); // [1,2]

Neste exemplo, o número de parâmetros difere em seus significados. Quando existe apenas um parâmetro, o parâmetro representa o elemento representado pelo comprimento. Se for maior que 1 parâmetro, causará confusão. No entanto, não tem esse problema com o método da matriz, porque os elementos representados por seus parâmetros estão sempre representados:

 console.log (array.of ()); //OU deconsole.Log(Array.Of(1)); //−1 ]console.log(Array.Of(1,2)); // [1,2]

CopyWithin Array Substituição de cópia de dados interna

A principal função do método CopyWithin é substituir os valores internos da matriz. Este método aceita três parâmetros, indicando a posição de cópia inicial, a posição de cópia final e a posição de inserção. O exemplo é o seguinte:

 [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] // Copie o bit 3 para o bit 0 []. CopyWithin.Call ({Length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1: 5} // copiou 2 para a extremidade da ponta da ponta (3: 1, 3: 1, 1} // cópia 2 para a extremidade da extremidade da ponta (3: 3, 4, 5]); i32a.copywithin (0, 2); // Int32Array [3, 4, 5, 4, 5] // Para plataformas sem o método copywithin do typeDArray // é necessário o seguinte método de escrita []. 3, 4, 5]

O acima é o método de extensão da matriz no ES6 introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!