Metody iterace pole fungují na každé položce pole.
forEach()
Metoda forEach()
volá funkci (funkci zpětného volání) jednou pro každý prvek pole.
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
Výše uvedený příklad používá pouze parametr value. Příklad lze přepsat na:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";
}
</script>
</body>
</html>
map()
Metoda map()
vytvoří nové pole provedením funkce na každém prvku pole.
Metoda map()
neprovádí funkci pro pole prvky bez hodnot.
Metoda map()
nemění původní pole.
Tento příklad vynásobí každou hodnotu pole 2:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
Když funkce zpětného volání používá pouze parametr value, index a pole parametry lze vynechat:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
flatMap()
ES2019 přidal do JavaScriptu metodu Array flatMap()
.
Metoda flatMap()
nejprve mapuje všechny prvky pole a poté vytvoří nové pole sloučením pole.
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
JavaScript Array flatMap()
je podporován ve všech moderních prohlížečích od ledna 2020:
Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
filtr()
Metoda filter()
vytvoří nové pole s prvky pole, které projde testem.
Tento příklad vytvoří nové pole z prvků s hodnotou větší než 18:
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array from all array elements that passes a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
Ve výše uvedeném příkladu funkce zpětného volání nepoužívá index a pole parametry, takže je lze vynechat:
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
reduce()
Metoda reduce()
spustí funkci na každém prvku pole, aby vytvořila (redukovala na) jednu hodnotu.
Metoda reduce()
pracuje v poli zleva doprava. Viz také reduceRight()
.
Metoda reduce()
nezmenšuje původní pole.
Tento příklad najde součet všech čísel v poli:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Všimněte si, že funkce má 4 argumenty:
Celkem (počáteční hodnota/dříve vrácená hodnota)
Hodnota položky
Index položky
Samotné pole
Výše uvedený příklad nepoužívá parametry index a pole. To může být přepsáno na:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
Metoda reduce()
může přijmout počáteční hodnotu:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduceRight()
Metoda reduceRight()
spustí funkci na každém prvku pole, aby vytvořila (redukovala ji na) jednu hodnotu.
reduceRight()
pracuje v poli zprava doleva. Viz také reduce()
.
Metoda reduceRight()
nezmenšuje původní pole.
Tento příklad najde součet všech čísel v poli:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Všimněte si, že funkce má 4 argumenty:
Celkem (počáteční hodnota/dříve vrácená hodnota)
Hodnota položky
Index položky
Samotné pole
Výše uvedený příklad nepoužívá parametry index a pole. To může být přepsáno na:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
every()
Metoda every()
kontroluje, zda všechny hodnoty pole projdou testem.
Tento příklad kontroluje, zda jsou všechny hodnoty pole větší než 18:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
Když funkce zpětného volání používá pouze první parametr (hodnotu), druhý parametry lze vynechat:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
some()
Metoda some()
kontroluje, zda některé hodnoty pole projdou testem.
Tento příklad kontroluje, zda jsou některé hodnoty pole větší než 18:
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</h2>
<p>The some() method checks if some array values pass a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
indexOf()
Metoda indexOf()
hledá v poli hodnotu prvku a vrací její pozici.
Poznámka: První položka má pozici 0, druhá položka má pozici 1 atd.
Vyhledejte v poli položku „Apple“:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.indexOf(item, start)
Požadované. Položka, kterou chcete vyhledat.
Volitelný. Kde začít s hledáním. Záporné hodnoty začnou na dané pozici počítat od konce a hledat až do konce.
Array.indexOf()
vrátí -1, pokud položka není nalezena.
Pokud je položka přítomna více než jednou, vrátí pozici první výskyt.
lastIndexOf()
Array.lastIndexOf()
je stejný jako Array.indexOf()
, ale vrátí pozici posledního výskytu zadaného prvku.
Vyhledejte v poli položku „Apple“:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.lastIndexOf(item, start)
Požadované. Položka, kterou chcete vyhledat
Volitelný. Kde začít s hledáním. Záporné hodnoty začnou na dané pozici počítat od konce a hledat od začátku
find()
Metoda find()
vrací hodnotu prvního prvku pole, který předává testovací funkce.
Tento příklad najde (vrátí hodnotu) první prvek, který je větší než 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 is " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
find()
je funkce ES6 (JavaScript 2015).
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
find()
není v Internet Exploreru podporována.
findIndex()
Metoda findIndex()
vrací index prvního prvku pole, který projde testovací funkcí.
Tento příklad najde index prvního prvku, který je větší než 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Všimněte si, že funkce má 3 argumenty:
Hodnota položky
Index položky
Samotné pole
findIndex()
je funkce ES6 (JavaScript 2015).
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
findIndex()
není v Internet Exploreru podporována.
Array.from()
Metoda Array.from()
vrací objekt Array z libovolného objektu s délkou vlastnost nebo jakýkoli iterovatelný objekt.
Vytvořte pole z řetězce:
Array.from("ABCDEFG");
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>
<p>Return an array object from any object with a length property or any iterable object.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
from()
je funkce ES6 (JavaScript 2015).
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
from()
není v aplikaci Internet Explorer podporováno.
Klíče()
Metoda Array.keys()
vrací objekt Array Iterator s klíči pole.
Vytvořte objekt Array Iterator obsahující klíče pole:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>
<p>Return an Array Iterator object with the keys of the array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
keys()
je funkce ES6 (JavaScript 2015).
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
keys()
není v Internet Exploreru podporována.
entries()
Vytvořte Iterátor pole a poté iterujte přes páry klíč/hodnota:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>entries() returns an Array Iterator object with key/value pairs:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>
</body>
</html>
Metoda entries()
vrací objekt Array Iterator s páry klíč/hodnota:
[0, "Banán"]
[1, "Pomeranč"]
[2, "Jablko"]
[3, "Mango"]
Metoda entries()
nemění původní pole.
entries()
je funkce ES6 (JavaScript 2015).
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
entries()
není v Internet Exploreru podporována.
includes()
ECMAScript 2016 zavedl do polí Array.includes()
. To nám umožňuje zkontrolovat, zda je prvek přítomen v poli (včetně NaN, na rozdíl od indexOf).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The includes() Method</h2>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");
</script>
</body>
</html>
array.includes(search-item)
Array.includes() umožňuje zkontrolovat hodnoty NaN. Na rozdíl od Array.indexOf().
includes()
je funkce ECMAScript 2016.
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
includes()
není v Internet Exploreru podporována.
Operátor ... rozšiřuje iterovatelný (jako pole) do více prvků:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "spread" operator spreads elements of iterable objects:</p>
<p id="demo"></p>
<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>
...
je funkce ES6 (JavaScript 2015).
Je podporován ve všech moderních prohlížečích:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
...
není v aplikaci Internet Explorer podporován.
Úplnou referenci Array naleznete na naší stránce:
Kompletní reference JavaScript Array.
Odkaz obsahuje popisy a příklady všech Array vlastnosti a metody.