Iteracje tablic JavaScript

Metody iteracyjne tablicy operują na każdym elemencie tablicy.

Array.forEach()

forEach() Metoda wywołuje funkcję (funkcję zwrotną) dla każdego elementu tablicy.

Przykład

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

Spróbuj sam

Komentarz:Funkcja przyjmuje 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

W powyższym przykładzie użyto tylko parametru value. Ten przykład można napisać ponownie jako:

Przykład

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.forEach()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.map()

map() Metoda tworzy nową tablicę, wykonując funkcję na każdym elemencie tablicy.

map() Metoda nie wykonuje funkcji na elementach tablicy bez wartości.

map() Metoda nie zmienia oryginalnej tablicy.

Ten przykład mnoży każdą wartość tablicy przez 2:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

Spróbuj sam

Proszę zauważyć, że funkcja ta ma 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

Gdy funkcja zwrotna używa tylko parametru value, można pominąć parametry index i array:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.map()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.filter()

filter() Metoda tworzy nową tablicę zawierającą elementy, które przeszły test.

Ten przykład tworzy nową tablicę z elementami o wartościach większych niż 18:

Przykład

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

W powyższym przykładzie, funkcja zwrotna nie używa parametrów index i array, więc mogą być pominięte:

Przykład

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.filter()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.reduce()

reduce() Metoda uruchamia funkcję na każdym elemencie tablicy, aby wygenerować (zredukować) pojedynczą wartość.

reduce() Metoda działa w tablicy od lewej do prawej. Zobacz również reduceRight().

reduce() Metoda nie zmniejsza oryginalnej tablicy.

Ten przykład określa sumę wszystkich liczb w tablicy:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 4 parametry:

  • Suma (wartość początkowa/poprzednio zwrócona wartość)
  • Wartość elementu
  • Indeks elementu
  • Sam array

W poprzednim przykładzie nie użyto parametrów index i array. Można to przekształcić na:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Spróbuj sam

reduce() Metoda może przyjąć wartość początkową:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.reduce()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.reduceRight()

reduceRight() Metoda uruchamia funkcję na każdym elemencie tablicy, aby wygenerować (zredukować) pojedynczą wartość.

reduceRight() Metoda działa w tablicy od prawej do lewej. Zobacz również reduce().

reduceRight() Metoda nie zmniejsza oryginalnej tablicy.

Ten przykład określa sumę wszystkich liczb w tablicy:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 4 parametry:

  • Suma (wartość początkowa/poprzednio zwrócona wartość)
  • Wartość elementu
  • Indeks elementu
  • Sam array

W poprzednim przykładzie nie użyto parametrów index i array. Można to przekształcić na:

Przykład

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.reduceRight()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.every()

every() Metoda sprawdza, czy wszystkie wartości tablicy przeszły test.

Ten przykład sprawdza, czy wszystkie wartości tablicy są większe niż 18:

Przykład

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

Jeśli funkcja zwrotna używa tylko pierwszego parametru (wartości), można pominąć inne parametry:

Przykład

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.every()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.some()

some() Metoda sprawdza, czy niektóre wartości tablicy przeszły test.

Ten przykład sprawdza, czy niektóre wartości tablicy są większe niż 18:

Przykład

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

Wszystkie przeglądarki obsługują to. Array.some()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Array.indexOf()

indexOf() Metoda szuka wartości elementu w tablicy i zwraca jego pozycję.

Komentarz:Pozycja pierwszego elementu to 0, pozycja drugiego elementu to 1, itd.

Przykład

Wyszukiwanie elementu "Apple" w tablicy:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.indexOf()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Gramatyka

array.indexOf(item, start)
item Wymagane. Element do wyszukiwania.
start Opcjonalnie. Gdzie zacząć wyszukiwanie. Wartości ujemne będą zaczynać od końca tablicy i przeszukiwać do końca.

Jeśli element nie został znaleziony:Array.indexOf() Zwraca -1.

Zwraca pozycję pierwszego wystąpienia elementu, jeśli występuje on wielokrotnie.

Array.lastIndexOf()

Array.lastIndexOf() z Array.indexOf() Podobnie, ale zaczynając od końca tablicy.

Przykład

Wyszukiwanie elementu "Apple" w tablicy:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Spróbuj sam

Wszystkie przeglądarki obsługują to. Array.lastIndexOf()oprócz Internet Explorer 8 lub wcześniejszych wersji:

Tak 9.0 Tak Tak Tak

Gramatyka

array.lastIndexOf(item, start)
item Wymagane. Element do wyszukiwania.
start Opcjonalnie. Od czego zacząć wyszukiwanie. Wartości ujemne będą zaczynać od końca podanego miejsca i przeszukiwać do początku.

Array.find()

find() Metoda zwraca wartość pierwszego elementu tablicy, który przeszło test funkcji.

Ten przykład znajduje (zwraca) wartość pierwszego elementu większego niż 18:

Przykład

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

Starsze przeglądarki nie wspierają Array.find()Poniżej znajduje się lista pierwszych wersji przeglądarek, które w pełni wspierają ten sposób:

45 12 25 8 32

Array.findIndex()

findIndex() Metoda zwraca indeks pierwszego elementu tablicy, który przeszło test funkcji.

Ten przykład znajduje indeks pierwszego elementu większego niż 18:

Przykład

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Spróbuj sam

Proszę zauważyć, że ta funkcja przyjmuje 3 parametry:

  • Wartość elementu
  • Indeks elementu
  • Sam array

Starsze przeglądarki nie wspierają Array.findIndex()Poniżej znajduje się lista pierwszych wersji przeglądarek, które w pełni wspierają ten sposób:

45 12 25 8 32