Masyvas „JavaScript“ yra duomenų struktūra, naudojama kelioms reikšmėms saugoti viename kintamajame. Jame gali būti įvairių tipų duomenys ir galima dinamiškai keisti dydį. Elementai pasiekiami pagal jų indeksą, pradedant nuo 0.

JavaScript masyvas

„JavaScript“ masyvus galite sukurti dviem būdais: naudojant masyvo konstruktorių arba stenogramos masyvo pažodinė sintaksė , kuris yra tik laužtiniuose skliaustuose. Masyvai yra lankstaus dydžio, todėl pridedant ar pašalinant elementus gali augti arba trauktis.

Turinys

• Kas yra „JavaScript“ masyvas?
• Pagrindinės „JavaScript“ masyvo terminijos
• Masyvo deklaracija
• Pagrindinės operacijos su „JavaScript“ masyvais
• Skirtumas tarp „JavaScript“ masyvų ir objektų
• Kada naudoti „JavaScript“ masyvus ir objektus?
• „JavaScript“ masyvo atpažinimas
• „JavaScript“ masyvo visa nuoroda
• „JavaScript“ masyvo pavyzdžiai
• JavaScript CheatSheet

Pagrindinės „JavaScript“ masyvo terminijos

• Masyvas: „JavaScript“ duomenų struktūra, leidžianti išsaugoti kelias reikšmes viename kintamajame.
• Masyvo elementas: Kiekviena masyvo reikšmė vadinama elementu. Elementai pasiekiami pagal jų indeksą.
• Masyvo indeksas: Skaitinis vaizdas, nurodantis elemento vietą masyve. „JavaScript“ masyvai yra nulinio indekso, o tai reiškia, kad pirmasis elementas yra 0 indekse.
• Masyvo ilgis: Elementų skaičius masyve. Jį galima gauti naudojant ilgio savybę.

Masyvo deklaracija

Iš esmės yra du masyvo deklaravimo būdai, ty „Array Literal“ ir „Array Constructor“.

1. Masyvo sukūrimas naudojant Array Literal

Kuriant masyvą naudojant masyvo literalą, reikia naudoti laužtinius skliaustus [] masyvui apibrėžti ir inicijuoti. Šis metodas yra glaustas ir plačiai naudojamas dėl savo paprastumo.

Sintaksė:

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

Pavyzdys:

// 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. Masyvo sukūrimas naudojant masyvo konstruktorių (naujas „JavaScript“ raktinis žodis)

Masyvo konstruktorius reiškia masyvų kūrimo metodą iškviečiant masyvo konstruktoriaus funkciją. Šis metodas leidžia dinamiškai inicijuoti ir gali būti naudojamas kuriant nurodyto ilgio arba elementų masyvus.

Sintaksė:

let arrayName = new Array(); 

Pavyzdys:

// 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 ] 

Pastaba: Abu aukščiau pateikti metodai veikia lygiai taip pat. Naudokite masyvo pažodinį metodą efektyvumui, skaitomumui ir greičiui užtikrinti.

Pagrindinės operacijos su „JavaScript“ masyvais

1. Prieiga prie masyvo elementų

Bet kurį masyvo elementą galima pasiekti naudojant indekso numerį. Masyvo indeksas prasideda 0.

// 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. Prieiga prie pirmojo masyvo elemento

Masyvo indeksavimas prasideda nuo 0, todėl pirmąjį masyvo elementą galime pasiekti naudodami indekso numerį.

// 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. Prieiga prie paskutinio masyvo elemento

Paskutinį masyvo elementą galime pasiekti naudodami [array.length – 1] indekso numerį.

// 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. Masyvo elementų keitimas

Masyvo elementus galima modifikuoti priskiriant naują reikšmę atitinkamam jų indeksui.

// 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. Elementų įtraukimas į masyvą

Elementai gali būti įtraukti į masyvą naudojant tokius metodus kaip push () ir unshift ().

// 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. Elementų pašalinimas iš masyvo

Pašalinkite elementus naudodami tokius metodus kaip pop(), shift() arba 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); 

Išvestis

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

Gaukite masyvo ilgį naudodami ilgio savybę.

// 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. Padidinkite ir sumažinkite masyvo ilgį

Masyvo ilgį galime padidinti ir sumažinti naudodami JavaScript ilgio savybę.

// 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. Iteravimas per masyvo elementus

Mes galime kartoti masyvą ir pasiekti masyvo elementus naudodami for ir forEach kilpą.

Pavyzdys: Tai for ciklo pavyzdys.

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

Pavyzdys: Tai pavyzdys Masyvas.forEach() kilpa.

// 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. Masyvo sujungimas

Sujunkite du ar daugiau masyvų naudodami concat() metodą. Ir grąžina naują masyvą, kuriame yra sujungtų masyvo elementų.

// 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. Masyvo konvertavimas į eilutę

Mes turime integruotą metodą toString() konvertuoti masyvą į eilutę.

// 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. Patikrinkite masyvo tipą

„JavaScript“. tipas masyvo tipui patikrinti naudojamas operatorius. Jis grąžina objektą masyvams.

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

object 

Skirtumas tarp „JavaScript“ masyvų ir objektų

• „JavaScript“ masyvai naudoja indeksus kaip skaičius.
• objektai naudoja indeksus kaip pavadinimus.

Kada naudoti „JavaScript“ masyvus ir objektus?

• Masyvai naudojami, kai norime, kad elementų pavadinimai būtų skaitiniai.
• Objektai naudojami, kai norime, kad elementų pavadinimai būtų eilutės.

„JavaScript“ masyvo atpažinimas

Yra du metodai, kuriais galime atpažinti „JavaScript“ masyvą:

• Naudojant Masyvas.isArray() metodas
• Naudojant pavyzdys metodas

Žemiau pateikiamas pavyzdys, rodantis abu metodus:

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 

Pastaba: Rašant masyvus susiduriama su įprasta klaida:

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

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

Du aukščiau pateikti teiginiai nėra vienodi.

Išvestis: Šis teiginys sukuria masyvą su elementu [5] .

[5] 

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

[ ] 

„JavaScript“ masyvo visa nuoroda

Turime visą „Javascript Array“ sąrašą. Norėdami juos patikrinti, perskaitykite jį JavaScript masyvo nuoroda straipsnis. Jame yra išsamus visų masyvo ypatybių ir metodų aprašymas ir pavyzdžiai.

„JavaScript“ masyvo pavyzdžiai

„JavaScript“ masyvo pavyzdžiuose yra klausimų, kurie dažniausiai užduodami interviu, sąrašas. Patikrinkite šį straipsnį „JavaScript“ masyvo pavyzdžiai Norėdami gauti daugiau informacijos.

JavaScript CheatSheet

Turime „Javascript“ kodų lapą, kuriame aptarėme visas svarbias „Javascript“ temas, kad patikrintume jas. „Javascript Cheat Sheet“ – pagrindinis „JavaScript“ vadovas .