JavaScript-taulukon iteraatiot

Taulukon iteraatiomenetelmät suorittavat toiminnon jokaiselle taulukon kohteelle.

Array.forEach()

forEach() Menetelmä kutsuu funktiota (paluufunktiota) kerran jokaiselle taulukon elementille.

Esimerkki

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

Kokeile itse

Huomautus:Funktio hyväksyy 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Yllä olevassa esimerkissä käytettiin vain value-parametria. Tämä esimerkki voidaan kirjoittaa uudelleen seuraavasti:

Esimerkki

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.forEach()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.map()

map() Menetelmä luo uuden taulukon suorittamalla funktion jokaiselle taulukon elementille.

map() Menetelmä ei suorita funktiota ilman arvoa oleville taulukon elementeille.

map() Menetelmä ei muuta alkuperäistä taulukkoa.

Tämä esimerkki kertoo jokaisen taulukon arvon kaksinkertaiseksi:

Esimerkki

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

Kokeile itse

Huomaa, että funktioilla on 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Kun paluufunktio käyttää vain value-parametria, indeksi- ja array-parametrit voidaan jättää pois:

Esimerkki

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.map()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.filter()

filter() Menetelmä luo uuden taulukon, joka sisältää testin läpikäyneet taulukon elementit.

Tämä esimerkki luo uuden taulukon arvojen yli 18 elementeistä:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio ottaa 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Yllä olevassa esimerkissä paluufunktio ei käytä index- ja array-parametreja, joten ne voidaan jättää pois:

Esimerkki

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.filter()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.reduce()

reduce() Menetelmä suorittaa funktion jokaisella taulukon elementillä, jotta voidaan luoda (vähentää sitä) yksittäinen arvo.

reduce() Menetelmä työskentelee taulukossa oikealta vasemmalle. Katso myös reduceRight().

reduce() Menetelmä ei vähennä alkuperäistä taulukkoa.

Tämä esimerkki määrittää taulukon kaikkien lukujen summan:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio hyväksyy 4 parametria:

  • Yhteensä (alkuperäinen arvo tai edellisen palautetun arvon)
  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Edellisessä esimerkissä ei käytetty index- ja array-parametreja. Voit muokata sitä seuraavasti:

Esimerkki

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

Kokeile itse

reduce() Menetelmä voi hyväksyä alkuperäisen arvon:

Esimerkki

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.reduce()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.reduceRight()

reduceRight() Menetelmä suorittaa funktion jokaisella taulukon elementillä, jotta voidaan luoda (vähentää sitä) yksittäinen arvo.

reduceRight() Menetelmä työskentelee taulukossa vasemmalta oikealle. Katso myös reduce().

reduceRight() Menetelmä ei vähennä alkuperäistä taulukkoa.

Tämä esimerkki määrittää taulukon kaikkien lukujen summan:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio hyväksyy 4 parametria:

  • Yhteensä (alkuperäinen arvo tai edellisen palautetun arvon)
  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Edellisessä esimerkissä ei käytetty index- ja array-parametreja. Voit muokata sitä seuraavasti:

Esimerkki

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.reduceRight()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.every()

every() Metodi tarkistaa, ovatko kaikki taulukon arvot läpäisseet testin.

Tämä esimerkki tarkistaa, ovatko kaikki taulukon arvot suurempia kuin 18:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio ottaa 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Jos paluufunktiota käytetään vain ensimmäisellä parametrilla (arvo) voidaan jättää pois muut parametrit:

Esimerkki

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.every()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.some()

some() Metodi tarkistaa, ovatko jotkut taulukon arvot läpäisseet testin.

Tämä esimerkki tarkistaa, ovatko jotkut taulukon arvot suurempia kuin 18:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio ottaa 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Kaikki selaimet tukevat tätä. Array.some()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

Array.indexOf()

indexOf() Metodi etsii elementin arvoa taulukosta ja palauttaa sen sijainnin.

Huomautus:Ensimmäisen kohteen sijainti on 0, toisen kohteen sijainti on 1, ja niin edelleen.

Esimerkki

Etsi taulukosta kohtaa "Apple":

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.indexOf()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

syntaksi

array.indexOf(kohta, aloita)
kohta pakollinen. Haettava kohta.
aloita Valinnainen. Mistä aloittaa hakeminen. Negatiivinen arvo aloittaa annetusta sijainnista lopusta alkaen ja etsii loppuun asti.

Jos kohtaa ei löydy:Array.indexOf() Palauta -1.

Jos kohta esiintyy useita kertoja, palauta ensimmäisen esiintymän sijainti.

Array.lastIndexOf()

Array.lastIndexOf() ja Array.indexOf() Samankaltainen, mutta etsi taulukon lopusta alkaen.

Esimerkki

Etsi taulukosta kohtaa "Apple":

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

Kokeile itse

Kaikki selaimet tukevat tätä. Array.lastIndexOf()，paitsi Internet Explorer 8 tai aikaisemmat versiot:

Kyllä 9.0 Kyllä Kyllä Kyllä

syntaksi

array.lastIndexOf(kohta, aloita)
kohta pakollinen. Haettava kohta.
aloita Valinnainen. Mistä aloittaa hakeminen. Negatiiviset arvot alkavat etsimään lopusta annetusta sijainnista ja siirtyvät alkuun.

Array.find()

find() Metodi palauttaa ensimmäisen taulukon elementin arvon, joka täyttää testifunktion.

Tämä esimerkki etsii (palauttaa) ensimmäisen suuremman 18:n elementin arvon:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio ottaa 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Vanhat selaimet eivät tue Array.find()Alla luetellaan ensimmäiset selaimet, jotka tukivat tätä menetelmää:

45 12 25 8 32

Array.findIndex()

findIndex() Metodi palauttaa ensimmäisen taulukon elementin indeksin, joka täyttää testifunktion.

Tämä esimerkki etsii ensimmäisen suuremman 18:n elementin indeksin:

Esimerkki

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

Kokeile itse

Huomaa, että tämä funktio ottaa 3 parametria:

  • Kohteen arvo
  • Kohteen indeksi
  • Taulukko itsessään

Vanhat selaimet eivät tue Array.findIndex()Alla luetellaan ensimmäiset selaimet, jotka tukivat tätä menetelmää:

45 12 25 8 32