JavaScript-taulukko on tietorakenne, jota käytetään tallentamaan useita arvoja yhteen muuttujaan. Se voi sisältää erilaisia ​​​​tietotyyppejä ja mahdollistaa dynaamisen koon muuttamisen. Elementteihin pääsee käsiksi niiden indeksin avulla, alkaen 0:sta.

JavaScript-taulukko

Sinulla on kaksi tapaa luoda JavaScript-taulukoita: käyttämällä Array-konstruktoria tai shorthand array literaalinen syntaksi , joka on vain hakasulkuja. Taulukot ovat kooltaan joustavia, joten ne voivat kasvaa tai kutistua, kun lisäät tai poistat elementtejä.

Sisällysluettelo

• Mikä on Array JavaScriptissä?
• JavaScript-taulukon perusterminologiat
• Array-ilmoitus
• JavaScript-taulukoiden perustoiminnot
• Ero JavaScript-taulukoiden ja objektien välillä
• Milloin JavaScript-taulukoita ja -objekteja käytetään?
• JavaScript-taulukon tunnistaminen
• JavaScript Array täydellinen viite
• JavaScript-taulukon esimerkkejä
• JavaScript CheatSheet

JavaScript-taulukon perusterminologiat

• Taulukko: JavaScriptin tietorakenne, jonka avulla voit tallentaa useita arvoja yhteen muuttujaan.
• Array elementti: Jokaista taulukon arvoa kutsutaan elementiksi. Elementteihin pääsee käsiksi niiden hakemistosta.
• Taulukkoindeksi: Numeerinen esitys, joka ilmaisee elementin sijainnin taulukossa. JavaScript-taulukot ovat nolla-indeksoituja, mikä tarkoittaa, että ensimmäinen elementti on indeksissä 0.
• Taulukon pituus: Taulukon elementtien määrä. Se voidaan noutaa pituus-ominaisuuden avulla.

Array-ilmoitus

On periaatteessa kaksi tapaa ilmoittaa taulukko, eli Array Literal ja Array Constructor.

java-joukko

1. Taulukon luominen Array Literal -ohjelmalla

Taulukon luominen taulukkoliteraalilla edellyttää hakasulkeiden [] käyttämistä taulukon määrittämiseen ja alustamiseen. Tämä menetelmä on ytimekäs ja yleisesti suositeltu yksinkertaisuutensa vuoksi.

Syntaksi:

let arrayName = [value1, value2, ...];>

Esimerkki:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Taulukon luominen Array Constructorilla (JavaScriptin uusi avainsana)

Array Constructor viittaa menetelmään luoda taulukoita kutsumalla Array Constructor -funktiota. Tämä lähestymistapa mahdollistaa dynaamisen alustuksen, ja sitä voidaan käyttää luomaan taulukoita, joilla on määrätty pituus tai tietyt elementit.

Syntaksi:

let arrayName = new Array();>

Esimerkki:

piilotetut sovellukset

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Huomautus: Molemmat yllä olevat menetelmät toimivat täsmälleen samoin. Käytä array literal -menetelmää tehokkuuden, luettavuuden ja nopeuden parantamiseksi.

JavaScript-taulukoiden perustoiminnot

1. Matriisin elementtien käyttäminen

Mitä tahansa taulukon elementtiä voidaan käyttää indeksinumerolla. Taulukon indeksi alkaa 0:lla.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Matriisin ensimmäisen elementin käyttäminen

Matriisin indeksointi alkaa nollasta, joten voimme käyttää taulukon ensimmäistä elementtiä indeksinumerolla.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Matriisin viimeisen elementin käyttäminen

Pääsemme viimeiseen taulukon elementtiin käyttämällä indeksinumeroa [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. Matriisielementtien muokkaaminen

Matriisin elementtejä voidaan muokata antamalla niiden vastaavalle indeksille uusi arvo.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Elementtien lisääminen taulukkoon

Elementtejä voidaan lisätä taulukkoon käyttämällä menetelmiä, kuten push() ja unshift().

10/60

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Elementtien poistaminen taulukosta

Poista elementit käyttämällä menetelmiä, kuten pop(), shift() tai splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Lähtö

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Array Length

Hanki taulukon pituus pituus-ominaisuuden avulla.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Suurenna ja pienennä taulukon pituutta

Voimme kasvattaa ja pienentää taulukon pituutta JavaScript pituus -ominaisuuden avulla.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Iterointi taulukkoelementtien kautta

Voimme iteroida taulukkoa ja käyttää taulukon elementtejä käyttämällä for- ja forEach-silmukkaa.

Esimerkki: Se on esimerkki for-silmukasta.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

Esimerkki: Se on esimerkki Array.forEach() silmukka.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Array Concatenation

Yhdistä kaksi tai useampia taulukoita concat()-menetelmällä. Ir palauttaa uuden taulukon, joka sisältää yhdistettyjä taulukon elementtejä.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Taulukon muuntaminen merkkijonoksi

Meillä on sisäänrakennettu menetelmä toString() muuntaa taulukon merkkijonoksi.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Tarkista taulukoiden tyyppi

JavaScript tyyppi -operaattoria käytetään taulukon tyypin tarkistamiseen. Se palauttaa objektin taulukoille.

siemenet vs itiöt

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Ero JavaScript-taulukoiden ja objektien välillä

• JavaScript-taulukot käyttävät indeksejä numeroina.
• objektit käyttävät niminä indeksejä.

Milloin JavaScript-taulukoita ja -objekteja käytetään?

• Tauluja käytetään, kun halutaan elementtien nimien olevan numeerisia.
• Objekteja käytetään, kun haluamme elementtien nimien olevan merkkijonoja.

JavaScript-taulukon tunnistaminen

On kaksi tapaa, joilla voimme tunnistaa JavaScript-taulukon:

• Käyttämällä Array.isArray() menetelmä
• Käyttämällä esiintymä menetelmä

Alla on esimerkki molemmista lähestymistavoista:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Huomautus: Tauluja kirjoitettaessa tulee yleinen virhe:

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

Yllä olevat kaksi väitettä eivät ole sama asia.

Lähtö: Tämä lauseke luo taulukon elementillä [5] .

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

JavaScript Array täydellinen viite

Meillä on täydellinen luettelo Javascript Arraysta, tarkista ne käymällä läpi tämä JavaScript-taulukon viite artikla. Se sisältää yksityiskohtaisen kuvauksen ja esimerkkejä kaikista taulukon ominaisuuksista ja menetelmistä.

JavaScript-taulukon esimerkkejä

JavaScript Array -esimerkit sisältävät luettelon kysymyksistä, joita haastatteluissa kysytään. Tarkista tämä artikkeli JavaScript-taulukon esimerkkejä lisätietoja.

silmukoille java

JavaScript CheatSheet

Meillä on Javascript-huijauslehti, jossa olemme käsitelleet kaikki tärkeät Javascriptin aiheet tarkistaaksemme ne, käy läpi Javascript Cheat Sheet - JavaScriptin perusopas .