Iteracja tablicy JavaScript
Metody iteracji tablicy działają na każdym elemencie tablicy.
Tablica JavaScript dla każdego()
Metoda forEach()wywołuje funkcję (funkcję zwrotną) raz dla każdego elementu tablicy.
Przykład
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Powyższy przykład używa tylko parametru wartości. Przykład można przepisać na:
Przykład
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Mapa tablicy JavaScript()
Metoda map()tworzy nową tablicę, wykonując funkcję na każdym elemencie tablicy.
Metoda map()nie wykonuje funkcji dla elementów tablicy bez wartości.
Metoda map()nie zmienia oryginalnej tablicy.
W tym przykładzie każda wartość tablicy mnoży się przez 2:
Przykład
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Gdy funkcja zwrotna używa tylko parametru wartości, parametry indeksu i tablicy można pominąć:
Przykład
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Filtr tablicy JavaScript
Metoda filter()tworzy nową tablicę z elementami tablicy, która przechodzi test.
Ten przykład tworzy nową tablicę z elementów o wartości większej niż 18:
Przykład
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
W powyższym przykładzie funkcja callback nie korzysta z parametrów index i array, więc można je pominąć:
Przykład
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Zmniejsz tablicę JavaScript()
Metoda reduce()uruchamia funkcję na każdym elemencie tablicy, aby wytworzyć (zredukować ją do) pojedynczą wartość.
Metoda reduce()działa od lewej do prawej w tablicy. Zobacz także reduceRight().
Metoda reduce()nie zmniejsza oryginalnej tablicy.
Ten przykład znajduje sumę wszystkich liczb w tablicy:
Przykład
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Zauważ, że funkcja przyjmuje 4 argumenty:
- Suma (wartość początkowa / poprzednio zwrócona wartość)
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Powyższy przykład nie używa parametrów indeksu i tablicy. Można go przepisać na:
Przykład
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Metoda reduce()może przyjąć wartość początkową:
Przykład
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
JavaScript Tablica redukowaniePrawo()
Metoda reduceRight()uruchamia funkcję na każdym elemencie tablicy, aby wytworzyć (zredukować ją do) pojedynczą wartość.
Prace reduceRight()w tablicy od prawej do lewej. Zobacz także reduce().
Metoda reduceRight()nie zmniejsza oryginalnej tablicy.
Ten przykład znajduje sumę wszystkich liczb w tablicy:
Przykład
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Zauważ, że funkcja przyjmuje 4 argumenty:
- Suma (wartość początkowa / poprzednio zwrócona wartość)
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Powyższy przykład nie używa parametrów indeksu i tablicy. Można go przepisać na:
Przykład
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Tablica JavaScript co()
Metoda every()sprawdza, czy wszystkie wartości tablicy przechodzą test.
W tym przykładzie sprawdź, czy wszystkie wartości tablicy są większe niż 18:
Przykład
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Gdy funkcja zwrotna używa tylko pierwszego parametru (wartości), pozostałe parametry można pominąć:
Przykład
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Tablica JavaScript niektóre()
Metoda some()sprawdza, czy niektóre wartości tablicy przechodzą test.
W tym przykładzie sprawdź, czy niektóre wartości tablicy są większe niż 18:
Przykład
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Indeks tablicy JavaScript()
Metoda indexOf()przeszukuje tablicę pod kątem wartości elementu i zwraca jego pozycję.
Uwaga: Pierwsza pozycja ma pozycję 0, druga pozycja 1 i tak dalej.
Przykład
Wyszukaj w tablicy element „Jabłko”:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Składnia
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() zwraca -1, jeśli pozycja nie została znaleziona.
Jeśli element występuje więcej niż jeden raz, zwraca pozycję pierwszego wystąpienia.
Tablica JavaScript lastIndexOf()
Array.lastIndexOf()jest taki sam jak Array.indexOf(), ale zwraca pozycję ostatniego wystąpienia określonego elementu.
Przykład
Wyszukaj w tablicy element „Jabłko”:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Składnia
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
Znajdź tablicę JavaScript()
Metoda find()zwraca wartość pierwszego elementu tablicy, który przekazuje funkcję testową.
W tym przykładzie znajduje (zwraca wartość) pierwszy element, który jest większy niż 18:
Przykład
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Obsługa przeglądarki
find() to funkcja ES6 (JavaScript 2015).
Jest obsługiwany we wszystkich nowoczesnych przeglądarkach:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() nie jest obsługiwany w przeglądarce Internet Explorer.
Tablica JavaScript findIndex()
Metoda findIndex()zwraca indeks pierwszego elementu tablicy, który przekazuje funkcję testową.
W tym przykładzie znajdujemy indeks pierwszego elementu, który jest większy niż 18:
Przykład
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zauważ, że funkcja przyjmuje 3 argumenty:
- Wartość przedmiotu
- Indeks pozycji
- Sama tablica
Obsługa przeglądarki
findIndex() to funkcja ES6 (JavaScript 2015).
Jest obsługiwany we wszystkich nowoczesnych przeglądarkach:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() nie jest obsługiwany w przeglądarce Internet Explorer.
JavaScript Array.from()
Metoda Array.from()zwraca obiekt Array z dowolnego obiektu z właściwością length lub dowolnego obiektu iterowalnego.
Przykład
Utwórz tablicę z ciągu:
Array.from("ABCDEFG");
Obsługa przeglądarki
from() to funkcja ES6 (JavaScript 2015).
Jest obsługiwany we wszystkich nowoczesnych przeglądarkach:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() nie jest obsługiwany w przeglądarce Internet Explorer.
Klawisze tablicy JavaScript()
Metoda Array.keys()zwraca obiekt Array Iterator z kluczami tablicy.
Przykład
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.