O matrice în JavaScript este o structură de date folosită pentru a stoca mai multe valori într-o singură variabilă. Poate conține diferite tipuri de date și permite redimensionarea dinamică. Elementele sunt accesate prin indexul lor, începând de la 0.

Matrice JavaScript

Aveți două moduri de a crea matrice JavaScript: folosind constructorul Array sau sintaxa literală a matricei scurte , care este doar paranteze drepte. Matricele au dimensiuni flexibile, astfel încât se pot crește sau micșora pe măsură ce adăugați sau eliminați elemente.

Cuprins

• Ce este Array în JavaScript?
• Terminologii de bază ale matricei JavaScript
• Declarația unui tablou
• Operații de bază pe matrice JavaScript
• Diferența dintre matrice și obiecte JavaScript
• Când să folosiți matrice și obiecte JavaScript?
• Recunoașterea unei matrice JavaScript
• Referință completă pentru matrice JavaScript
• Exemple de matrice JavaScript
• CheatSheet JavaScript

Terminologii de bază ale matricei JavaScript

• Matrice: O structură de date în JavaScript care vă permite să stocați mai multe valori într-o singură variabilă.
• Element de matrice: Fiecare valoare dintr-o matrice se numește element. Elementele sunt accesate prin indexul lor.
• Index de matrice: O reprezentare numerică care indică poziția unui element în matrice. Matricele JavaScript sunt indexate la zero, ceea ce înseamnă că primul element se află la indexul 0.
• Lungimea matricei: Numărul de elemente dintr-o matrice. Poate fi preluat folosind proprietatea length.

Declarația unui tablou

Există practic două moduri de a declara o matrice, adică Array Literal și Array Constructor.

1. Crearea unui Array folosind Array Literal

Crearea unei matrice folosind literalul matricei implică utilizarea parantezelor drepte [] pentru a defini și inițializa matricea. Această metodă este concisă și preferată pe scară largă pentru simplitatea ei.

Sintaxă:

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

Exemplu:

// 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. Crearea unei matrice folosind Array Constructor (JavaScript nou cuvânt cheie)

Array Constructor se referă la o metodă de a crea matrice prin invocarea funcției Array constructor. Această abordare permite inițializarea dinamică și poate fi folosită pentru a crea matrice cu o lungime sau elemente specificate.

Sintaxă:

let arrayName = new Array();>

Exemplu:

java convert int în șir

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

Notă: Ambele metode de mai sus fac exact același lucru. Utilizați metoda matrice literală pentru eficiență, lizibilitate și viteză.

Operații de bază pe matrice JavaScript

1. Accesarea elementelor unui tablou

Orice element din matrice poate fi accesat folosind numărul de index. Indicele din matrice începe cu 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. Accesarea primului element al unui tablou

Indexarea matricei începe de la 0, deci putem accesa primul element al matricei folosind numărul de index.

// 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. Accesarea ultimului element al unui tablou

Putem accesa ultimul element de matrice folosind numărul de index [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. Modificarea elementelor matricei

Elementele dintr-o matrice pot fi modificate prin atribuirea unei noi valori indexului corespunzător.

// 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. Adăugarea de elemente la matrice

Elementele pot fi adăugate la matrice folosind metode precum push() și unshift().

fizzbuzz java

// 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. Eliminarea elementelor dintr-o matrice

Eliminați elemente folosind metode precum pop(), shift() sau 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);>

Ieșire

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

Obțineți lungimea unui tablou folosind proprietatea length.

// 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. Măriți și micșorați lungimea matricei

Putem crește și micșora lungimea matricei folosind proprietatea JavaScript length.

// 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. Iterarea prin elemente de matrice

Putem repeta și accesa elemente de matrice folosind bucla for și forEach.

Exemplu: Este un exemplu de buclă for.

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

Exemplu: Este exemplul de Array.forEach() buclă.

// 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. Concatenare matrice

Combinați două sau mai multe tablouri folosind metoda concat(). Ir returnează o nouă matrice care conține elemente de matrice unite.

// 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. Conversia unui Array în String

Avem o metodă încorporată toString() to convertește o matrice într-un șir.

// 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. Verificați tipul unei matrice

JavaScript tip de operatorul este utilizat pentru a verifica tipul unui tablou. Returnează obiect pentru matrice.

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

object>

Diferența dintre matrice și obiecte JavaScript

• Matricele JavaScript folosesc indecși ca numere.
• obiectele folosesc indecși ca nume..

Când să utilizați matrice și obiecte JavaScript?

• Matricele sunt folosite atunci când dorim ca numele elementelor să fie numerice.
• Obiectele sunt folosite atunci când dorim ca numele elementelor să fie șiruri.

Recunoașterea unei matrice JavaScript

Există două metode prin care putem recunoaște o matrice JavaScript:

dacă și altfel în bash

• Prin utilizarea Array.isArray() metodă
• Prin utilizarea instanță de metodă

Mai jos este un exemplu care arată ambele abordări:

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>

Notă: O eroare comună se confruntă la scrierea matricelor:

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

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

Cele două afirmații de mai sus nu sunt aceleași.

Ieșire: Această instrucțiune creează un tablou cu un element [5] .

[5]>

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

[ ]>

Referință completă pentru matrice JavaScript

Avem o listă completă de Javascript Array, pentru a le verifica, vă rugăm să parcurgeți aceasta Referință pentru matrice JavaScript articol. Conține o descriere detaliată și exemple ale tuturor proprietăților și metodelor Array.

Exemple de matrice JavaScript

Exemplele de matrice JavaScript conțin o listă de întrebări care sunt puse în principal în interviuri. Vă rugăm să verificați acest articol Exemple de matrice JavaScript pentru mai multe detalii.

CheatSheet JavaScript

Avem o Cheat Sheet pe Javascript unde am acoperit toate subiectele importante despre Javascript pentru a le verifica, vă rugăm să le parcurgeți Javascript Cheat Sheet-Un ghid de bază pentru JavaScript .