javascript - objeto - js for obj




Fazer um loop por uma matriz em JavaScript (20)

para (var s de myStringArray) {

(Respondendo diretamente a sua pergunta: agora você pode!)

A maioria das outras respostas está correta, mas elas não mencionam (no momento em que escrevo) que o ECMA Script 6 2015 está trazendo um novo mecanismo para fazer a iteração, o loop for..of .

Essa nova sintaxe é a maneira mais elegante de iterar uma matriz em javascript (contanto que você não precise do índice de iteração), mas ainda não é amplamente suportada pelos navegadores.

Atualmente funciona com o Firefox 13+, o Chrome 37+ e não funciona nativamente com outros navegadores (consulte a compatibilidade do navegador abaixo). Felizmente temos compiladores JS (como o Babel ) que nos permitem usar os recursos da próxima geração hoje.

Ele também funciona no nó (eu testei na versão 0.12.0).

Iterando um array

// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) { 
   console.log(letter); 
}

Iterando uma matriz de objetos

var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}

Iterando um gerador:

(exemplo extraído de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of )

function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

Tabela de compatibilidade: http://kangax.github.io/es5-compat-table/es6/#For..of loops

Especificações: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

Em Java, você pode usar um loop for para percorrer objetos em uma matriz da seguinte maneira:

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

Você pode fazer o mesmo em JavaScript?


A maneira mais elegante e rápida

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

http://jsperf.com/native-loop-performance/8

Editado (porque eu estava errado)

Comparar métodos de loop através de uma matriz de 100.000 itens e fazer uma operação mínima com o novo valor a cada vez.

Preparação:

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

Testes:

for (var i in array) if (array.hasOwnProperty(i)) {
    // do something with array[i]
}

Alguns casos de uso de loop através de um array na forma de programação funcional em JavaScript:

1. Basta percorrer uma matriz

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Nota: Array.prototype.forEach () não é uma maneira funcional, falando estritamente, já que a função que toma como o parâmetro de entrada não deve retornar um valor, o que, portanto, não pode ser considerado como uma função pura.

2. Verifique se algum dos elementos em uma matriz passa por um teste

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transforme-se em uma nova matriz

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Nota: O método map () cria uma nova matriz com os resultados da chamada de uma função fornecida em todos os elementos da matriz de chamada.

4. Resuma uma propriedade específica e calcule sua média

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Crie um novo array baseado no original mas sem modificá-lo

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Conte o número de cada categoria

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Recupere um subconjunto de uma matriz com base em critérios específicos

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Nota: O método filter () cria uma nova matriz com todos os elementos que passam no teste implementado pela função fornecida.

8. Classifique uma matriz

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9. Encontre um elemento em uma matriz

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

O método Array.prototype.find () retorna o valor do primeiro elemento na matriz que satisfaz a função de teste fornecida.

Referências


Em JavaScript não é aconselhável percorrer um Array com um loop de entrada, mas é melhor usar um loop for como:

for(var i=0, len=myArray.length; i < len; i++){}

Também é otimizado ("caching" o tamanho da matriz). Se você quiser saber mais, leia meu post sobre o assunto .


Existe uma maneira de fazer isso onde você tem muito pouco escopo implícito em seu loop e acabar com variáveis ​​extras.

var i = 0,
     item;

// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){ 
    item; // This is the string at the index.
}

Ou se você realmente quer pegar o id e ter um loop realmente clássico:

var i = 0,
    len = myStringArray.length; // cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

Todos os navegadores modernos suportam métodos iteradores para forEach , map , reduce , filter e hospedar vários outros métodos no protótipo Array .


Existem várias maneiras de fazer um loop por array em JavaScript.

Laço genérico:

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ES5's forEach:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

Dê uma olhada this para informações detalhadas ou você também pode verificar o for...in para loop através de uma matriz em JavaScript e usando jQuery check jQuery.each() .


Se você quer uma maneira concisa de escrever um loop rápido e você pode iterar ao contrário:

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

Isso tem o benefício de armazenar em cache o tamanho (semelhante a for (var i=0, len=myArray.length; i<len; ++i) e ao contrário for (var i=0; i<myArray.length; ++i) ) sendo menos caracteres para digitar.

Há até mesmo algumas vezes em que você deve repetir ao contrário, como quando iterar em um NodeList em tempo real, no qual você planeja remover itens do DOM durante a iteração.


Sim, mas somente se a sua implementação incluir o for ... of recurso introduzido no ECMAScript 2015 (a versão "Harmony").

Funciona assim:

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

Ou melhor ainda, já que o ECMAScript 2015 também fornece variáveis ​​com escopo de bloco via let e const :

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

Muitos desenvolvedores de JavaScript ainda estão trabalhando em um ambiente que ainda não está lá - especialmente se escrever código para ser executado em navegadores da Web, onde os desenvolvedores de sites geralmente não podem ter certeza sobre qual navegador / versão seus clientes usarão.

Se você puder assumir que o interpretador JavaScript é compatível com a edição anterior da especificação ECMAScript (que exclui, por exemplo, versões do Internet Explorer antes de 9), você poderá usar o método iterator forEach vez de um loop. Nesse caso, você passa uma função para ser chamada em cada item na matriz:

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

Mas se até isso é muito para assumir, e você quer algo que funciona em todas as versões do JavaScript, então você tem que usar um loop de contagem explícito. A versão mais segura, que lida corretamente com matrizes esparsas, é algo assim:

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

Atribuir o valor do comprimento à variável local (em vez de incluir a expressão completa myStringArray.length na condição de loop) pode fazer uma diferença significativa no desempenho, já que ele ignora uma pesquisa de propriedade a cada vez; usando o Rhino na minha máquina, a aceleração é de 43%.

Muitas vezes você verá o tamanho do cache feito na cláusula de inicialização do loop, assim:

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

O for ... in sintaxe mencionada por outros é para o loop sobre as propriedades de um objeto; já que uma Matriz em JavaScript é apenas um objeto com nomes de propriedades numéricas (e uma propriedade length atualizada automaticamente), você pode, teoricamente, fazer um loop sobre uma Matriz com ela. Mas o problema é que ele não se restringe aos valores das propriedades numéricas (lembre-se de que até os métodos são na verdade apenas propriedades cujo valor é um fechamento), nem itera sobre aqueles em ordem numérica. Portanto, a for ... in sintaxe não deve ser usada para loop através de matrizes.


Use um sequencial for loop:

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}

@zipcodeman sugere o uso da instrução for...in , mas para iterar as matrizes for-in deve ser evitada, essa instrução serve para enumerar as propriedades do objeto.

Não deve ser usado para objetos do tipo array porque:

  • A ordem de iteração não é garantida, os índices de matriz não podem ser visitados em ordem numérica.
  • Propriedades herdadas também são enumeradas.

O segundo ponto é que ele pode lhe causar muitos problemas, por exemplo, se você estender o objeto Array.prototype para incluir um método lá, essa propriedade também será enumerada.

Por exemplo:

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}

O código acima irá alertar, "a", "b", "c" e "foo!".

Isso é particularmente um problema se você usar alguma biblioteca que depende muito do aumento de protótipos nativos (como o MooTools, por exemplo).

A instrução for-in , como eu disse antes, está lá para enumerar as propriedades do objeto, por exemplo:

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

No exemplo acima, o método hasOwnProperty permite enumerar apenas propriedades próprias , ou seja, somente as propriedades que o objeto possui fisicamente, nenhuma propriedade herdada.

Eu recomendaria que você leia o seguinte artigo:


Você pode usar o map , que é uma técnica de programação funcional que também está disponível em outras linguagens como Python e Haskell .

[1,2,3,4].map( function(item) {
     alert(item);
})

A sintaxe geral é:

array.map(func)

Em geral func levaria um parâmetro, que é um item da matriz. Mas, no caso do JavaScript, ele pode ter um segundo parâmetro, que é o índice do item, e um terceiro parâmetro, que é o próprio array.

O valor de retorno de array.map é outro array, então você pode usá-lo assim:

var x = [1,2,3,4].map( function(item) {return item * 10;});

E agora x é [10,20,30,40] .

Você não precisa escrever a função inline. Pode ser uma função separada.

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

o que seria equivalente a:

 for (item in my_list) {item_processor(item);}

Exceto você não recebe o new_list .


Claro que é ineficiente e muitos desprezam, mas é um dos mais próximos do mencionado:

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})

Em JavaScript, existem muitas soluções para fazer um loop em um array.

O código abaixo é popular

/** Declare inputs */
const items = ['Hello', 'World']

/** Solution 1. Simple for */
console.log('solution 1. simple for')

for (let i = 0; i < items.length; i++) {
  console.log(items[i])
}

console.log()
console.log()

/** Solution 2. Simple while */
console.log('solution 2. simple while')

let i = 0
while (i < items.length) {
  console.log(items[i++])
}

console.log()
console.log()

/** Solution 3. forEach*/
console.log('solution 3. forEach')

items.forEach(item => {
  console.log(item)
})

console.log()
console.log()

/** Solution 4. for-of*/
console.log('solution 4. for-of')

for (const item of items) {
  console.log(item)
}

console.log()
console.log()


Há um método para iterar apenas as propriedades do próprio objeto, não incluindo as do protótipo:

let arr = [1,2,3,4,5];

for(let i=0, size=arr.length; i<size; i++){
    // do something
}

mas ainda vai iterar sobre propriedades personalizadas.

Em JavaScript, qualquer propriedade personalizada pode ser atribuída a qualquer objeto, incluindo matriz.

Se alguém quiser iterar sobre matriz sparsed, for (var i = 0; i < array.length; i++) if (i in array)ou array.forEachcom es5shimdeve ser usado.


Loop de matriz:

for(var i = 0; i < things.length; i++){
    var thing = things[i];
    console.log(thing);
}

Loop de objeto:

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

Por exemplo, eu usei em um console do Firefox:

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

Se alguém estiver interessado no lado do desempenho dos vários mecanismos disponíveis para as iterações do Array, preparei os seguintes testes do JSPerf:

https://jsperf.com/fastest-array-iterator

Resultados :

O for()iterador tradicional é, de longe, o método mais rápido, especialmente quando usado com o tamanho da matriz armazenado em cache .

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

O Array.prototype.forEach()e os Array.prototype.map()métodos são as aproximações mais lentas, provavelmente como conseqüência da sobrecarga da chamada de função


Sim, você pode fazer o mesmo em JavaScript usando o loop, mas não se limitando a isso, muitas maneiras de fazer loop sobre matrizes no JavaScrip, imagine que você tenha esse array abaixo e gostaria de fazer um loop sobre ele:

var arr = [1, 2, 3, 4, 5];

Estas são as soluções:

1) para loop

For loop é uma maneira comum de passar por arrays em JavaScript, mas não é considerada como a solução mais rápida para grandes matrizes:

for (var i=0, l=arr.length; i<l; i++) { 
  console.log(arr[i]);
}

2) While loop

Enquanto loop considerado como o caminho mais rápido para percorrer longas matrizes, mas geralmente menos usado no JavaScript:

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3) Do while
While enquanto faz a mesma coisa que com alguma diferença de sintaxe como abaixo:

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

Estas são as principais maneiras de fazer loops de javascript, mas existem poucas maneiras de fazer isso.

Também usamos for inloop para loop em objetos no javascript.

Também olhar para map(), filter(), reduce()etc funções na matriz em JavaScript. Eles podem fazer coisas muito mais rápido e melhor do que usar whilee for.

Este é um bom artigo se você gosta de aprender mais sobre as funções assíncronas através de matrizes em JavaScript.

A programação funcional tem causado um grande impacto no mundo do desenvolvimento atualmente. E por um bom motivo: as técnicas funcionais podem ajudá-lo a escrever um código mais declarativo que seja mais fácil de entender rapidamente, refatorar e testar.

Um dos pilares da programação funcional é o uso especial de listas e operações de lista. E essas coisas são exatamente como os sons são: matrizes de coisas e coisas que você faz com elas. Mas a mentalidade funcional os trata de maneira um pouco diferente do que você poderia esperar.

Este artigo examinará de perto o que eu gosto de chamar de "três grandes" operações de lista: mapear, filtrar e reduzir. Envolver sua cabeça em torno dessas três funções é um passo importante para ser capaz de escrever código funcional limpo e abre as portas para as técnicas poderosas de programação funcional e reativa.

Isso também significa que você nunca terá que escrever um loop for novamente.

Leia mais >> here :


A melhor maneira na minha opinião é usar a função Array.forEach. Se você não pode usar isso eu sugiro para obter o polyfill do MDN para disponibilizá-lo, é certamente a maneira mais segura de iterar em um array em JavaScript.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Então, como outros sugeriram, isso é quase sempre o que você quer:

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

Isso garante que tudo o que você precisa no escopo do processamento da matriz permaneça dentro desse escopo e que você esteja processando apenas os valores da matriz, não as propriedades do objeto e outros membros, que é o que faz.

Usando um estilo c regular para loop funciona na maioria dos casos, é importante lembrar que tudo dentro do loop compartilha seu escopo com o resto do programa, o {} não cria um novo escopo.

Conseqüentemente:

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){ 
  sum += numbers[i];
}

alert(i);

irá produzir "11" - que pode ou não ser o que você deseja.

Exemplo de trabalho jsFiddle: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/


Resposta curta: sim Você pode fazer isso:

var myArray = ["element1", "element2", "element3", "element4"];

for (i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

Em um console do navegador, você pode ver algo como "element1", "element2", etc., impresso.


Se você estiver usando a biblioteca jQuery, considere o uso de http://api.jquery.com/jQuery.each/

Da documentação:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Retorna: Objeto

Descrição: uma função de iterador genérico, que pode ser usada para iterar continuamente sobre objetos e matrizes. Matrizes e objetos do tipo array com uma propriedade length (como o objeto arguments de uma função) são iterados por um índice numérico, de 0 a length-1. Outros objetos são iterados por meio de suas propriedades nomeadas.

A $.each()função não é a mesma $(selector).each()usada para iterar, exclusivamente, sobre um objeto jQuery. A $.each()função pode ser usada para iterar sobre qualquer coleção, seja um mapa (objeto JavaScript) ou uma matriz. No caso de uma matriz, o retorno de chamada é passado em um índice de matriz e um valor de matriz correspondente a cada vez. (O valor também pode ser acessado por meio da thispalavra - chave, mas o Javascript sempre envolverá o thisvalor como um valor de Objectstring ou número simples.) O método retorna seu primeiro argumento, o objeto que foi iterado.







for-loop