Una matriu en JavaScript és una estructura de dades utilitzada per emmagatzemar diversos valors en una sola variable. Pot contenir diversos tipus de dades i permet un redimensionament dinàmic. S'accedeix als elements pel seu índex, començant per 0.

Matriu JavaScript

Teniu dues maneres de crear matrius de JavaScript: utilitzant el constructor Array o el sintaxi literal de matriu taquigràfica , que només són claudàtors. Les matrius són de mida flexible, de manera que poden créixer o reduir-se a mesura que afegiu o elimineu elements.

Taula de contingut

• Què és Array en JavaScript?
• Terminologies bàsiques de JavaScript Array
• Declaració d'una matriu
• Operacions bàsiques sobre matrius JavaScript
• Diferència entre matrius de JavaScript i objectes
• Quan utilitzar matrius i objectes JavaScript?
• Reconeixement d'una matriu JavaScript
• Referència completa de la matriu de JavaScript
• Exemples de matriu de JavaScript
• Full de trucs de JavaScript

Terminologies bàsiques de JavaScript Array

• Matriu: Una estructura de dades en JavaScript que us permet emmagatzemar diversos valors en una sola variable.
• Element de matriu: Cada valor d'una matriu s'anomena element. S'accedeix als elements mitjançant el seu índex.
• Índex de matriu: Una representació numèrica que indica la posició d'un element a la matriu. Les matrius de JavaScript estan indexades zero, és a dir, el primer element es troba a l'índex 0.
• Longitud de la matriu: El nombre d'elements d'una matriu. Es pot recuperar mitjançant la propietat length.

Declaració d'una matriu

Bàsicament hi ha dues maneres de declarar una matriu, és a dir, Array Literal i Array Constructor.

1. Creació d'una matriu utilitzant Array Literal

La creació d'una matriu amb un literal de matriu implica l'ús de claudàtors [] per definir i inicialitzar la matriu. Aquest mètode és concís i àmpliament preferit per la seva senzillesa.

substituir tot java

Sintaxi:

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

Exemple:

// 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. Creació d'una matriu mitjançant el constructor de matrius (nova paraula clau de JavaScript)

El constructor de matrius fa referència a un mètode per crear matrius invocant la funció del constructor de matrius. Aquest enfocament permet la inicialització dinàmica i es pot utilitzar per crear matrius amb una longitud o elements especificats.

Sintaxi:

let arrayName = new Array();>

Exemple:

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

Nota: Els dos mètodes anteriors fan exactament el mateix. Utilitzeu el mètode literal de matriu per obtenir eficiència, llegibilitat i velocitat.

Operacions bàsiques sobre matrius JavaScript

1. Accés als elements d'una matriu

Es pot accedir a qualsevol element de la matriu mitjançant el número d'índex. L'índex de les matrius comença amb 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. Accés al primer element d'una matriu

La indexació de la matriu comença des de 0, de manera que podem accedir al primer element de la matriu mitjançant el número d'índex.

emojis d'iphone a Android

// 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. Accés a l'últim element d'una matriu

Podem accedir a l'últim element de la matriu mitjançant el número d'índex [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. Modificació dels elements de la matriu

Els elements d'una matriu es poden modificar assignant un nou valor al seu índex corresponent.

// 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. Afegir elements a la matriu

Els elements es poden afegir a la matriu utilitzant mètodes com push() i 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. Eliminació d'elements d'una matriu

Elimineu elements utilitzant mètodes com pop(), shift() o splice().

què és l'exportació a linux

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

Sortida

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. Longitud de la matriu

Obteniu la longitud d'una matriu utilitzant la propietat 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. Augmenta i redueix la longitud de la matriu

Podem augmentar i disminuir la longitud de la matriu utilitzant la propietat de longitud de JavaScript.

// 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. Iteració a través d'elements de matriu

Podem iterar la matriu i accedir als elements de la matriu mitjançant el bucle for i forEach.

Exemple: És un exemple de bucle 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>

Exemple: És l'exemple de Array.forEach() bucle.

// 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. Concatenació de matrius

Combina dues o més matrius utilitzant el mètode concat(). Ir retorna una matriu nova que conté elements de matriu units.

// 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. Conversió d'una matriu a cadena

Tenim un mètode integrat toString() to converteix una matriu en una cadena.

// 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. Comproveu el tipus d'una matriu

El JavaScript tipus de s'utilitza l'operador per comprovar el tipus d'una matriu. Retorna un objecte per a matrius.

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

object>

Diferència entre matrius de JavaScript i objectes

• Les matrius de JavaScript utilitzen índexs com a números.
• els objectes utilitzen índexs com a noms.

Quan utilitzar matrius i objectes JavaScript?

• Les matrius s'utilitzen quan volem que els noms dels elements siguin numèrics.
• Els objectes s'utilitzen quan volem que els noms dels elements siguin cadenes.

Reconeixement d'una matriu JavaScript

Hi ha dos mètodes pels quals podem reconèixer una matriu JavaScript:

autòmats finits no deterministes

• Mitjançant l'ús de Array.isArray() mètode
• Mitjançant l'ús de en lloc de mètode

A continuació es mostra un exemple que mostra els dos enfocaments:

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>

Nota: S'enfronta un error comú en escriure les matrius:

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

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

Les dues afirmacions anteriors no són iguals.

Sortida: Aquesta declaració crea una matriu amb un element [5] .

convertir de char a int java

[5]>

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

[ ]>

Referència completa de la matriu de JavaScript

Tenim una llista completa de Javascript Array, per comprovar-les, si us plau, passeu-ho Referència de matriu de JavaScript article. Conté una descripció detallada i exemples de totes les propietats i mètodes de la matriu.

Exemples de matriu de JavaScript

Els exemples de JavaScript Array contenen una llista de preguntes que es fan principalment a les entrevistes. Si us plau, comproveu aquest article Exemples de matriu de JavaScript per a més detalls.

Full de trucs de JavaScript

Tenim un full de trucs sobre Javascript on hem tractat tots els temes importants de Javascript per comprovar-los, si us plau. Full de trucs de Javascript: una guia bàsica de JavaScript .