JavaScript Array Methods: Luo esimerkillä

Mikä on taulukko JavaKäsikirjoitus?

Taulukko on objekti, joka voi tallentaa a kokoelma kohteitaTaulukoista tulee todella hyödyllisiä, kun sinun on tallennettava suuria määriä saman tyyppistä dataa. Oletetaan, että haluat tallentaa 500 työntekijän tiedot. Jos käytät muuttujia, sinun on luotava 500 muuttujaa, kun taas voit tehdä saman yhdellä taulukolla. Voit käyttää taulukon alkioita viittaamalla sen indeksinumero, ja taulukon ensimmäisen alkion indeksi on nolla.

Toisin kuin tiukasti tyypitettyjen kielten taulukot, a JavaSkriptitaulukko on dynaaminen. Sen pituus kasvaa automaattisesti, kun uusi elementti lisätään, ja yksi taulukko voi sisältää merkkijonoja, numeroita, totuusarvoja, objekteja ja jopa muita taulukoita samanaikaisesti. Tämä joustavuus tekee taulukoista oletusarvoisen säilön listatiedoille sekä selainskripteissä että palvelinpuolen koodissa.

Kuinka luoda taulukko JavaKäsikirjoitus

Voit luoda taulukon sisään JavaKäsikirjoitus kuten alla on annettu.

var students = ["John", "Ann", "Kevin"];

Täällä olet alustamassa taulukkoa, kun se luodaan arvoilla "John", "Ann" ja "Kevin". "John", "Ann" ja "Kevin" on vastaavasti 0, 1 ja 2. Jos haluat lisätä elementtejä oppilaiden taulukkoon, voit tehdä sen seuraavasti:

students[3] = "Emma";
students[4] = "Rose";

Voit myös luoda taulukon käyttämällä taulukkokonstruktoria seuraavasti:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Taulukon elementtien käyttö ja muokkaaminen

Jokainen elementti sijaitsee numeroidulla paikalla. Hakasulkeissa oleva merkintätapa lukee arvon, antaa uuden arvon tai lisää uuden merkinnän, kun indeksi on yhtä suuri kuin nykyinen pituus.

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaScript Array Methods

Array-objektilla on monia ominaisuuksia ja menetelmiä, jotka auttavat kehittäjiä käsittelemään taulukoita helposti ja tehokkaasti. Voit saada ominaisuuden arvon määrittämällä taulukonnimi.ominaisuus ja menetelmän tulosteen määrittämällä taulukonnimi.method().

1. pituus omaisuutta –> Jos haluat tietää taulukon elementtien lukumäärän, voit käyttää pituus-ominaisuutta.
2. prototyypin ominaisuus –> Jos haluat lisätä uusia ominaisuuksia ja menetelmiä, voit käyttää prototyyppiominaisuutta.
3. käänteinen menetelmä –> Voit kääntää taulukon kohteiden järjestyksen käänteisellä menetelmällä.
4. lajittelumenetelmä –> Voit lajitella taulukon alkioita sort-metodilla.
5. pop menetelmä –> Voit poistaa taulukon viimeisen kohteen pop-menetelmällä.
6. siirtomenetelmä –> Voit poistaa taulukon ensimmäisen alkion käyttämällä shift-metodia.
7. työntömenetelmä –> Voit lisätä arvon taulukon viimeiseksi kohteeksi.

Alla oleva viitetaulukko ryhmittelee useimmin käytetyt metodit, jotta näet yhdellä silmäyksellä, mitkä niistä muuttavat alkuperäistä taulukkoa ja mitkä palauttavat uuden arvon.

Elementtien lisääminen ja poistaminen

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Hakeminen, kopioiminen ja liittyminen

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Iteraatiomenetelmät: forEach, map, filter ja reduce

Moderni JavaSkripti suosii callback-pohjaisia ​​metodeja manuaalisiin indeksointisilmukoihin verrattuna, koska operaation tarkoitus ilmaistaan ​​suoraan metodin nimessä.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaSkriptitaulukon esimerkki lähdekoodilla Code

Alla oleva skripti rakentaa opiskelijan taulukon, lisää mukautetun näyttömetodin prototype-ominaisuuden kautta ja esittelee sitten length-, sort-, reverse-, pop- ja push-funktioita järjestyksessä. Kokeile tätä itse:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Odotettu tuotos:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

Huomaa, että lajittelu asettaa ”Aaronin” ”Annin” edelle, koska isoja ja pieniä kirjaimia verrataan niiden merkkikoodien perusteella. Huomaa myös, että pop poisti ”Aaronin” käänteisestä taulukosta, mikä vahvistaa, että sekä lajittelu että käänteinen taulukko muuttivat alkuperäistä taulukkoa.

Kuinka silmukoida läpi JavaSkriptitaulukko

Neljä vessaaping tyylejä on saatavilla, ja jokainen sopii eri tilanteeseen. Klassinen for-silmukka antaa täyden hallinnan indeksiin, for…of lukee arvot suoraan, forEach ilmaisee tarkoituksen selvästi ja for…in tulisi varata objektin ominaisuuksille.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Silmukan syntaksin perusteellisempi käsittely, mukaan lukien while ja do…while, on artikkelissa aiheesta miten silmukoita käytetään JavaKäsikirjoitus.

Moniulotteiset taulukot JavaKäsikirjoitus

JavaSkriptillä ei ole erillistä matriisityyppiä. Ruudukko on yksinkertaisesti taulukko, jonka elementit ovat itse taulukoita, ja yksittäiseen soluun pääsemiseksi käytetään kahta indeksilauseketta.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

lähtö:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Taulukoita esiintyy lähes kaikissa käytännön skripteissä lomakkeiden validoinnista datan renderöintiin. Jatka käytännön JavaSkriptikoodiesimerkkejä, arvostelu JavaSkriptijonot tekstinkäsittelystä ja lue lisää sisäinen ja ulkoinen JavaKäsikirjoitus päättääkseen, mihin nämä skriptit kuuluvat sivulla. Kehittäjät, jotka haluavat staattisen tyyppitarkistuksen taulukon sisällölle, voivat siirtyä seuraavaan TypeScript oppitunti.

UKK