Iterace pole JavaScriptu


Obsah

    Zobrazit obsah


Metody iterace pole fungují na každé položce pole.


Pole JavaScript forEach()

Metoda forEach() volá funkci (funkci zpětného volání) jednou pro každý prvek pole.

Příklad

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:

Příklad

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>

Pole JavaScript 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:

Příklad

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:

Příklad

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>

JavaScript Array 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.

Příklad

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>

Podpora prohlížeče

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


Pole JavaScript 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:

Příklad

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:

Příklad

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>

Pole JavaScript 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:

Příklad

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:

Příklad

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:

Příklad

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>

Pole JavaScript 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:

Příklad

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:

Příklad

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>

Pole JavaScript 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:

Příklad

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:

Příklad

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>

Pole JavaScript 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:

Příklad

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


Pole JavaScript 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.

Příklad

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>

Syntax

array.indexOf(item, start)
item

Požadované. Položka, kterou chcete vyhledat.

start

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.


Pole JavaScript lastIndexOf()

Array.lastIndexOf() je stejný jako Array.indexOf(), ale vrátí pozici posledního výskytu zadaného prvku.

Příklad

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>

Syntax

array.lastIndexOf(item, start)
item

Požadované. Položka, kterou chcete vyhledat

start

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


Pole JavaScript 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:

Příklad

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

Podpora prohlížeče

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.


Pole JavaScript 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:

Příklad

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

Podpora prohlížeče

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.


JavaScript Array.from()

Metoda Array.from() vrací objekt Array z libovolného objektu s délkou vlastnost nebo jakýkoli iterovatelný objekt.

Příklad

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>

Podpora prohlížeče

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.


Pole JavaScript Klíče()

Metoda Array.keys() vrací objekt Array Iterator s klíči pole.

Příklad

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>

Podpora prohlížeče

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.


Pole JavaScript entries()

Příklad

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.

Podpora prohlížeče

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.


Pole JavaScript 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).

Příklad

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>

Syntax

array.includes(search-item)

Array.includes() umožňuje zkontrolovat hodnoty NaN. Na rozdíl od Array.indexOf().

Podpora prohlížeče

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.


JavaScript Array Spread (...)

Operátor ... rozšiřuje iterovatelný (jako pole) do více prvků:

Příklad

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>

Podpora prohlížeče

... 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.


Kompletní reference pole

Úplnou referenci Array naleznete na naší stránce:

Kompletní reference JavaScript Array.

Odkaz obsahuje popisy a příklady všech Array vlastnosti a metody.