Jak mogę pętli przez wszystkie wpisy w tablicy za pomocą JavaScript?

Myślałem, że to coś takiego:

forEach(instance in theArray)

Gdzie theArray jest moją tablicą, ale wydaje się, że jest to nieprawidłowe.

4935
Dante1986 17 luty 2012, 17:51

23 odpowiedzi

Jeśli nie masz nic przeciwko opróżnianiu tablicy:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x będzie zawierać ostatnią wartość y i zostanie usunięty z tablicy. Możesz także użyć shift(), który da i usunie pierwszy element z y.

36
joeytwiddle 30 maj 2014, 18:37

Foreach Implementacja (Zobacz w JSFiddle):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);
33
nmoliveira 18 grudzień 2013, 12:22

Od ECMAScript 6:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

Gdzie of unika dziwacts związanych z in i sprawia, że działa jak pętla for dowolnego innego języka, a let wiążą i w pętli w zależności od funkcji.

Szelki ({}) można pominąć, gdy istnieje tylko jedno polecenie (np. W powyższym przykładzie).

32
Peter Mortensen 12 wrzesień 2019, 05:12

Prawdopodobnie pętla for(i = 0; i < array.length; i++) nie jest najlepszym wyborem. Dlaczego? Jeśli to masz:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

Metoda zadzwoni z array[0] do array[2]. Po pierwsze, będzie to pierwsze zmienne odniesienia, których nawet nie masz, po drugie, nie miałbyś zmiennych w tablicy, a trzeci to sprawi, że kodeks będzie odważny. Spójrz tutaj, czego używam:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

A jeśli chcesz, aby była funkcją, możesz to zrobić:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

Jeśli chcesz się złamać, trochę więcej logiki:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

Przykład:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

Zwraca:

//Hello
//World
//!!!
30
Peter Mortensen 8 marzec 2014, 10:49

Istnieją trzy implementacje foreach w jQuery w następujący sposób.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3
30
Peter Mortensen 8 marzec 2014, 10:50

Nie ma żadnego for each pętla w nativea javascript. Możesz użyć bibliotek, aby uzyskać tę funkcjonalność (polecam undercre.js.js), użyj a Proste for w pętli.

for (var instance in objects) {
   ...
}

Należy jednak pamiętać, że mogą istnieć powody, aby użyć jeszcze prostszego {x0}} pętla (patrz Pytanie o przepełnienie stosu Dlaczego używasz " ... w "z iteracji tablicy tak zły pomysł? )

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}
24
Community 23 maj 2017, 11:47

Jest kilka sposobów , aby pętli przez tablicę w JavaScript, jak poniżej:

dla - jest najczęstszy . Pełny blok kodu do pętli

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

While - pętla, podczas gdy stan jest. Wydaje się, że jest najszybsza pętla

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Zrób / gdy - także pętla przez blok kodu, gdy warunek jest prawdziwy, uruchomi się co najmniej raz

var text = ""
var i = 0;

do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);

document.getElementById("example").innerHTML = text;
<p id="example"></p>

Funkcjonalne pętle - forEach, map, filter, filter, również reduce (pętli przez funkcję, ale są używane, jeśli musisz to zrobić coś ze swoją tablicą itp.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

Aby uzyskać więcej informacji i przykłady dotyczące programowania funkcjonalnego w tabliczce, spójrz na posterunek blogu -map-filtr - Zmniejsz / "Rel =" NOFollow NefErr "> Programowanie funkcjonalne w JavaScript: Mapa, filtruj i zmniejsz .

22
Alireza 22 październik 2019, 23:32

ECMASCRIPT 5 (wersja na JavaScript) do pracy z tablicami:

foreach - iteruje każdy element w tablicy i robią wszystko, czego potrzebujesz z każdym przedmiotem.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is #" + (index+1) + " in the musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

W przypadku, bardziej zainteresowany operacją na tablicy przy użyciu niektórych wbudowanych funkcji.

Mapa - tworzy nową tablicę z wynikiem funkcji wywołania zwrotnego. Ta metoda jest dobra do użycia, gdy trzeba sformatować elementy tablicy.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

Zmniejsz - jak nazwa mówi, zmniejsza to tablicę do jednej wartości, wywołując podaną funkcję przechodzącą w bieżącym elemencie i wyniku poprzedniego wykonania.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

każdy - zwraca prawdziwy lub false, jeśli wszystkie elementy w tablicy przekazują test w funkcji wywołania zwrotnego.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];
ages.every(function(elem) {
  return elem >= 18;
});

// Output: false

Filtr - Bardzo podobny do każdego z wyjątkiem tego, że filtr zwraca tablicę z elementami, które zwracają wierne dla danej funkcji.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]
20
Peter Mortensen 3 wrzesień 2019, 20:55

Nie ma wbudowanej zdolności do pęknięcia forEach. Aby przerwać wykonanie Użyj Array#some jak poniżej:

[1,2,3].some(function(number) {
    return number === 1;
});

Działa to, ponieważ some zwraca true, gdy tylko każda z wywołania zwrotnych, wykonywana w kolejności tablicy, zwraca prawdziwe, zwarcie wykonanie reszty. Oryginalna odpowiedź Patrz prototyp array dla niektóre

18
Community 23 maj 2017, 12:34

Chciałbym również dodać to jako skład odwrotnej pętli i odpowiedź powyżej dla kogoś, kto też chciałby tę składnię.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Zalety:

Korzyść dla tego: masz już referencję już w pierwszej kolejności, która nie musi zostać uznana później z inną linią. Jest przydatny, gdy zapętla się do tablicy obiektowej.

Wady:

Spowoduje to przerwanie, gdy odniesienie jest fałszywe - fałsz (niezdefiniowany itp.). Może być jednak używany jako zaletę. Jednak czyniłoby to trochę trudniej do czytania. A także w zależności od przeglądarki może być "nie" zoptymalizowany do pracy szybciej niż oryginalny.

16
VB_Dojnaz 28 marzec 2020, 16:08

Droga jQuery za pomocą $.map:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];
12
Daniel W. 1 kwiecień 2014, 11:15

Korzystanie z pętli z ECMAScript 6 destrukcjonowanie i Spread Operator .

Destructing i korzystanie z operatora Spread udowodnił całkiem przydatne dla przybronników do ECMASCRIPT 6 jako bardziej czytelne dla człowieka / estetyczne, chociaż niektórzy weterani JavaScript może rozważyć to bałagan. Juniorzy lub inni ludzie mogą go uznać za przydatne.

Poniższe przykłady będą korzystać z {{ X0}} oświadczenie i {{ X1}} Metoda.

Przykłady 6, 7 i 8 mogą być używane z dowolnymi funkcjonalnymi pętlami, takimi jak .map, .filter, .reduce, .sort, {{x4} }, .some. Aby uzyskać więcej informacji na temat tych metod, sprawdź Obiekt tablicy.

Przykład 1: NORMAL for...of Loop - Brak sztuczek tutaj.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Przykład 2: Split słowa do znaków

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);
}

Przykład 3: Zapętle za pomocą key i value

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type:
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on Internet Explorer  unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Przykład 4: Uzyskaj właściwości obiektu Inline

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Przykład 5: Uzyskaj głębokie właściwości obiektu tego, czego potrzebujesz

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Przykład 6: jest Przykład 3 Używany z .forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Przykład 7: jest Przykład 4 Używany z .forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions
// are required to be surrounded by parentheses
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Przykład 8: jest Przykład 5 Używany z .forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});
10
Community 20 czerwiec 2020, 09:12

Droga najbliżej twojego pomysłu byłoby użycie Array.forEach(), która akceptuje funkcję zamknięcia, która zostanie wykonana dla każdego elementu tablicy.

myArray.forEach(
  (item) => {
    // Do something
    console.log(item);
  }
);

Kolejny realny sposób byłby użycie Array.map(), który działa w ten sam sposób, ale zajmuje również wszystkie wartości, które powracasz i zwraca je w nowej tablicy (zasadniczo mapowanie każdego elementu do nowego), podobnie jak to:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]
8
CherryDT 4 wrzesień 2019, 17:51

Składnia Lambda zwykle nie działa w programie Internet Explorer 10 lub poniżej.

Zwykle używam

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

Jeśli jesteś jQuery wentylator i masz już uruchomiony plik jQuery, należy odwrócić pozycje parametrów indeksu i wartości

$("#ul>li").each(function(**index, value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});
7
Peter Mortensen 3 wrzesień 2019, 20:36

Możesz zadzwonić do foreach:

forEach Wystarczy w tablicy, którą zapewniasz, a dla każdej iteracji będzie miała element, która posiada wartość tej iteracji. Jeśli potrzebujesz indeksu, możesz uzyskać bieżący indeks, przekazując i jako drugi parametr w funkcji wywołania zwrotnego dla Foreach.

Foreach jest zasadniczo funkcją o wysokiej kolejności, która zajmuje inną funkcję jako jego parametr.

let theArray= [1,3,2];

theArray.forEach((element) => {
  // Use the element of the array
  console.log(element)
}

Wynik:

1
3
2

Możesz również iterować po tablicy takiej jak ta:

for (let i=0; i<theArray.length; i++) {
  console.log(i); // i will have the value of each index
}
7
Nouman Dilshad 25 styczeń 2020, 12:13

Jeśli chcesz użyć forEach(), będzie wyglądać -

theArray.forEach ( element => {
    console.log(element);
});

Jeśli chcesz użyć for(), będzie wyglądać -

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
6
cfnerd 4 styczeń 2019, 23:18

Jeśli chcesz pętlować się przez tablicę obiektów za pomocą funkcji strzałki:

let arr = [{name:'john', age:50}, {name:'clark', age:19}, {name:'mohan', age:26}];

arr.forEach((person)=>{
  console.log('I am ' + person.name + ' and I am ' + person.age + ' old');
})
6
Peter Mortensen 3 wrzesień 2019, 20:04

Jeśli masz ogromną tablicę, powinieneś użyć {{x0 }} , aby uzyskać pewną wydajność. Iteratorzy są własnością niektórych kolekcji JavaScript (takich jak {{x1 }}, Set , {x3}} < href = "https://developer.mozilla.org/en-us/docs/web/javascript/platerence/global_objects/array" rel = "NefErer"> Array ). Nawet, {{x5} } wykorzystuje iterator pod hasło.

Iteratory poprawiają wydajność, pozwalając spożywać elementy na liście pojedynczo, jak gdyby były strumieniem. Co sprawia, że Iterator jest tym, jak przemierza kolekcję. Inne pętle muszą załadować całą kolekcję z przodu, aby go iteratorowi, a Iterator musi znać bieżącą pozycję w kolekcji.

Uzyskaj dostęp do bieżącego elementu, wywołując metodę Iterator {X0}}. Następna metoda zwróci value bieżącego elementu i {x2}} , aby wskazać, kiedy osiągnąłeś koniec kolekcji. Poniżej znajduje się przykład tworzenia iteratora z tablicy.

Przekształć regularną tablicę do iteratora za pomocą {{x0} } metoda taka:

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Możesz także przekształcić regularną tablicę do iteratora za pomocą { {X0}} w ten sposób:

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Możesz także przekształcić regularny array do {{ X1}} LUB:

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

Uwaga :

  • Iteratory są wyczerpujące w przyrodzie.
  • Domyślnie obiekty nie są iterable. Użyj for..in W takim przypadku, ponieważ zamiast wartości działa z klucze.

Możesz przeczytać więcej o iteration protocol Oto.

5
BlackBeard 6 lipiec 2018, 11:32

Zgodnie z nową zaktualizowaną funkcją ECMAScript 6 (ES6) i ECMAScript 2015, możesz użyć następujących opcji z pętlami:

dla pętli

for(var i = 0; i < 5; i++){
  console.log(i);
}

// Output: 0,1,2,3,4

dla ... w pętlach

let obj = {"a":1, "b":2}

for(let k in obj){
  console.log(k)
}

// Output: a,b

array.Foreach ()

let array = [1,2,3,4]

array.forEach((x) => {
  console.log(x);
})

// Output: 1,2,3,4

dla ... pętli

let array = [1,2,3,4]

for(let x of array){
  console.log(x);
}

// Output: 1,2,3,4

podczas pętli

let x = 0

while(x < 5){
  console.log(x)
  x++
}

// Output: 1,2,3,4

do ... podczas pętli

let x = 0

do{
  console.log(x)
  x++
}while(x < 5)

// Output: 1,2,3,4
5
Peter Mortensen 8 marzec 2020, 14:51

Uwaga : Ta odpowiedź jest beznadziejnie nieaktualna. Aby uzyskać bardziej nowoczesne podejście, spójrz na Metody dostępne na Array. Metody zainteresowania mogą być:

  • dla każdego
  • mapa
  • filtr
  • zamek błyskawiczny
  • zmniejszyć
  • każdy
  • trochę

Standardowy sposób do iteracji tablicy w JavaScript to wanilia for - pętla:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Zauważ jednak, że podejście to jest dobre, jeśli masz gęstą tablicę, a każdy indeks jest zajęty przez element. Jeśli tablica jest rzadka, wówczas możesz wpłynąć na problemy z wydajnością dzięki temu podejściu, ponieważ przeanalizujesz wiele indeksów, które nie naprawdę istnieją w tablicy. W tym przypadku, pętla for .. in może być lepszym pomysłem. Jednak , musisz użyć odpowiednich zabezpieczeń, aby zapewnić, że tylko pożądane właściwości tablicy (to znaczy elementy tablicy) są również pełnione, ponieważ for..in - pętla zostanie również wyliczona W starszych przeglądarkach lub jeśli dodatkowe właściwości są zdefiniowane jako enumerable.

W ECMASCRIPT 5 Będą metodą foreach w prototypie tablicy, ale to jest nie jest obsługiwany w starszych przeglądarkach. Aby mieć możliwość użycia go konsekwentnie, musisz mieć środowisko, które obsługuje go (na przykład węzła. js dla serwera JavaScript) lub użyj "Polyfill". Poleflistów do tej funkcji jest jednak trywialny, a ponieważ sprawia, że kod jest łatwiejszy do odczytania, jest to dobry posiłek dołączyć.

535
Peter Mortensen 3 wrzesień 2019, 19:57

Jeśli używasz jQuery , możesz użyć jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

EDYTUJ:

Zgodnie z pytaniem, użytkownik chce kod w JavaScript zamiast jQuery, więc edycja jest

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}
251
Anik Islam Abhi 12 listopad 2015, 05:17

Niektóre C -style Języki Użyj foreach do pętli przez wyliczanie. W JavaScript odbywa się to z for..in Struktura pętli :

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Jest w tym jakiś haczyk. for..in będzie pętlować przez każdego elementu z niezliczalnych członków obiektu, a członkowie na jego prototypie. Aby uniknąć wartości odczytu odziedziczonych przez prototyp obiektu, po prostu sprawdzić, czy właściwość należy do obiektu:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Dodatkowo, ECMAScript 5 dodał {x0}} Metodę do Array.prototype, która może być używana do wyliczenia przez tablicę za pomocą Calback (Polyfill jest w dokumentach, dzięki czemu nadal można go używać dla starszych przeglądarek):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Ważne jest, aby pamiętać, że Array.prototype.forEach nie pęknie, gdy wywołanie zwrotne zwraca false. jQuery i Underscore.js podaj własne odmiany na each, aby zapewnić pętle, które mogą być zwrócone.

90
Peter Mortensen 13 lipiec 2013, 01:18

Jeśli chcesz pętlować się nad tablicą, użyj standardowej pętli for.

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

Możesz uzyskać pewne optymalizacje wydajności przez buforowanie {x0}} lub iteracji nad nim do tyłu.

48
Quentin 17 luty 2012, 13:55