O padrão ECMAScript5 foi lançado em 3 de dezembro de 2009 e traz algumas maneiras novas de melhorar as operações de matriz de matriz existentes. No entanto, esses novos métodos de matriz não se tornaram realmente populares porque havia uma falta de navegadores habilitados para ES5 no mercado naquele momento.
Array "Extras"
Ninguém duvida da praticidade desses métodos, mas a escrita de polyfill (PS: Plugin compatível com navegadores mais antigos) não vale a pena para eles. Ele transforma "deve implementar" em "melhor implemento". Algumas pessoas realmente chamam esses métodos de matriz de "extras". Por que!
Mas os tempos estão mudando. Se você olhar para os populares projetos JS de código aberto no Github, verá que a tendência está mudando. Todo mundo quer reduzir muitas dependências (bibliotecas de terceiros) e implementá-las apenas com código local.
OK, vamos começar.
Minhas 5 matrizes
No ES5, existem 9 métodos de matriz no total http://kangax.github.io/compat-table/es5/
Nota* Nove métodos
Array.prototype.indexOf
Array.prototype.LastIndexOf
Array.prototype. Todos
Array.prototype.ansome
Array.prototype.foreach
Array.prototype.map
Array.prototype.Filter
Array.prototype.Reduce
Array.Prototype.Reduteright
Vou escolher 5 métodos, que eu pessoalmente acho que são os mais úteis e muitos desenvolvedores encontrarão.
1) Indexof
O método indexOf () retorna a posição do primeiro elemento encontrado na matriz e -1 se não existir.
Quando o indexOF não é usado
var arr = ['Apple', 'Orange', 'Pear'], encontrado = false; for (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] === 'Orange') {Found = true;}} console.log ("Found:", Found);Após o uso
var arr = ['Apple', 'Orange', 'Pear']; console.log ("encontrado:", arr.indexOf ("laranja")! = -1);2) filtro
O método filtro () cria uma nova matriz que corresponde aos critérios de filtro.
Quando o filtro () não é usado
var arr = [{"name": "Apple", "count": 2}, {"name": "laranja", "count": 5}, {"name": "pêra", "contagem": 3}, {"nome": "laranja", "contagem": 16},]; var newarr = []; para (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] .name === "Orange") {newarr.push (arr [i]);}} console.log ("Resultados do filtro:", newarr);Use filter ():
var arr = [{"name": "Apple", "count": 2}, {"name": "laranja", "count": 5}, {"name": "pêra", "contagem": 3}, {"nome": "laranja", "contagem": 16},]; var newarr = arr.filter (function (item) {return item.name === "Orange";}); console.log ("Resultados do filtro:", newarr);3) foreach ()
foreach executa o método correspondente para cada elemento
var arr = [1,2,3,4,5,6,7,8];// Uses the usual "for" loop to iteratefor(var i= 0, l = arr.length; i< l; i++){console.log(arr[i]);}console.log("========================");//Uses forEach to iteratearr.foreach (function (item, index) {console.log (item);});foreach é usado para substituir o loop for
4) mapa ()
Depois que o map () executa uma determinada operação (mapa) em cada elemento da matriz, uma nova matriz será devolvida.
Não use mapa
var Oldarr = [{First_Name: "Colin", Last_Name: "Toh"}, {First_Name: "addy", last_name: "Osmani"}, {First_Name: "yehuda", last_name: "Katz"]; função; for (var i = 0, l = Oldarr.Length; i <l; i ++) {var item = Oldarr [i]; item.full_name = [item.first_name, item.last_name] .join ("); newarr [i] = item;} retornar newarr;} console.log (getNewarr ());Depois de usar o mapa
var Oldarr = [{primeiro_name: "Colin", last_name: "toh"}, {primeiro_name: "addy", last_name: "Osmani"}, {primeiro_name: "yehuda", last_name: "katz"}]; função getNewarr () {return Oldarr.map (function (item, index) {item.full_name = [item.first_name, item.last_name] .join (""); retornar item;}); } console.log (getNewarr ());Map () é uma função muito prática ao processar os dados retornados pelo servidor.
5) Reduce ()
Reduce () pode implementar a função de um acumulador, reduzindo cada valor da matriz (da esquerda para a direita) para um valor.
Para ser sincero, foi um pouco difícil entender essa frase no início, era muito abstrato.
Cenário: Estatísticas quantas palavras não repetíveis estão em uma matriz
Quando não está usando redução
var arr = ["Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; function getWordCnt () {var obj = {}; for (var i = 0, l = arr.length; i <l; i ++) {var item = arr [i]; obj [item] = (obj [item] +1) || 1; } retornar obj;} console.log (getWordCnt ());Depois de usar Reduce ()
var Arr = ["Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; function getwordCnt () {return Arr.Reduce (function (prev, a seguir) {prev [a seguir] = (prev [a seguir] + 1) || 1; retornar prev;}, {});} console.Log (getCn);Deixe -me explicar minha própria compreensão de reduzir primeiro. Reduce (retorno de chamada, InitialValue) passará em duas variáveis. Função de retorno de chamada (retorno de chamada) e InitialValue. Suponha que a função possua um parâmetro recebido, Anterior e Next, índice e matriz. Você deve entender o Anterior e o próximo.
De um modo geral, o prev começa com o primeiro elemento da matriz e o próximo é o segundo elemento. Mas quando você passa no valor inicial (InitialValue), o primeiro prev é o InitialValue e o próximo será o primeiro elemento da matriz.
por exemplo:
/** A diferença entre os dois, execute -o no console e você saberá*/var arr = ["Apple", "Orange"]; function NoPassValue () {return arr.Reduce (function (prev, a seguir) {console.log ("prev:", prev); console.log ("seguinte:", a seguir); retorno + "" + " +"; arr.Reduce (function (prev, a seguir) {console.log ("prev:", prev); console.log ("Next:", próximo); prev [a seguir] = 1; retorna prev;}, {});} console.log ("nenhum parâmetro adicional:", nopassvalue (); console; parâmetro: ", passValue ());