Análise aprofundada do método de travessia da matriz JS (recomendado)

Amigos que usaram o sublinhado sabem que ele tem uma API muito completa para chamar a travessia de matrizes (conjuntos) e _.each () é um deles. Aqui está um exemplo simples:

 var arr = [1, 2, 3, 4, 5]; _. cada (arr, função (el) {console.log (el);});

O código acima será lançado 1, 2, 3, 4, 5 por sua vez. Não é muito interessante? Você nem precisa escrever um loop para você mesmo. O método _.each () é muito útil para atravessar matrizes, mas sua implementação interna não é difícil. Vamos dar uma olhada em como _.each () é implementado. Antes disso, vamos dar uma olhada na API de _.each (). _.each () é geralmente chamado da seguinte forma:

_.each (arr, fn, contexto);

Recebe 3 parâmetros,

O primeiro é uma matriz que precisa ser atravessada (na verdade, também é possível ser um objeto, então vamos discutir isso mais tarde);

A segunda é a sua função de retorno de chamada (essa função de retorno de chamada pode passar em 3 parâmetros, como: função (el, i, arr), que são o elemento atual, o índice atual e a matriz original, respectivamente);

O terceiro é o contexto para o qual a função de retorno de chamada precisa estar ligada, ou seja, especificando esse valor da função de retorno de chamada FN.

OK, as necessidades são muito claras, vamos começar a funcionar!

Vamos primeiro implementar o mais simples _.each (), que não pode modificar o contexto isso e recebe dois parâmetros. O código é o seguinte:

 var _ = {}; // Suponha que esse seja o sublinhado // a implementação mais simples do _.EECH Metod_.each = function (arr, fn) {for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } retornar arr; // retorna a matriz original}

Que tal? Não é muito simples? Basta usar um loop para loop e continuar chamando a função de retorno de chamada. Isso pode ser feito em apenas algumas linhas de código. Eu acredito que nenhum amigo pode entender! Vamos testá -lo para ver se funciona normalmente:

 var arr = [1, 2, 3, 4, 5]; _. cada (arr, função (el, i, arr) {console.log (el);});

Abrir no navegador e o console verá a saída correta.

Um código tão simples não tem significado. Vamos dar uma olhada em um exemplo mais desafiador. Por exemplo, o Array Arr possui uma propriedade SUM. Precisamos somar todos os elementos da matriz e armazená -los na soma, como segue:

 var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // O atributo da soma é usado para armazenar a soma dos elementos da matriz_.Each (arr, function (el, i, arr) {this.sum += el;});

Neste momento, isso é usado na função de retorno de chamada. Se não estiver vinculado, esta é uma janela por padrão. Não é isso que queremos. Esperamos que esteja ligado à Array ARR. Chamada ou aplicação pode implementar esta função, o código é o seguinte:

 var _ = {}; // Suponha que este seja o sublinhado // vinte, receba dois parâmetros fn e context // ligam fn ao contexto var bind = function (fn, context) {context = context || nulo; Função de retorno (el, i, arr) {fn.call (contexto, el, i, arr); }} // _.each_.each = function (arr, fn, context) {// Chame o método de ligação e vincule Fn ao contexto fn = bind (fn, contexto); for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } retornar arr;} // Caso de teste: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // O atributo da soma é usado para armazenar a soma dos elementos da matriz_.Each (arr, function (el, i, arr) {this.sum += el;}, arr); console.log (arr.sum); // 15

OK, este _.each () já é poderoso o suficiente para iterar a matriz normalmente, e você também pode especificar esse valor à vontade para alterar o contexto da função de retorno de chamada. No entanto, como mencionamos anteriormente, o _.each () da subscore também pode atravessar objetos, e essa implementação não é difícil. Apenas julgue se o primeiro parâmetro passado é um objeto ou uma matriz. Se for uma matriz, itera como nós. Caso contrário, se for um objeto, use o objeto para ... na travessia do loop. Se você estiver interessado, pode experimentar você mesmo ou conferir o código -fonte do sublinhado.

NOTA: Como o padrão ES5, as matrizes nativas já têm métodos de travessia, como Array.prototype.ForEach, Array.prototype.map, etc., e os nativos podem ser usados ​​no projeto.

O exposto acima é a descrição completa da análise aprofundada do método de travessia da matriz JS (recomendado) introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!