Kuinka lisätä elementti taulukkoon JavaScriptissä?

Elementin liittäminen taulukkoon JavaScriptissä tarkoittaa uuden kohteen lisäämistä taulukon loppuun. , tämä prosessi pidentää taulukon pituutta ja mahdollistaa uuden tiedon. JavaScript tarjoaa useita menetelmiä elementtien liittämiseen, mikä hyväksyy yhden tai useamman elementin argumentteina ja lisää ne taulukon loppuun.

Nämä ovat seuraavat keinot ratkaista ongelma:

Sisällysluettelo

1. JavaScript push() -menetelmän käyttäminen

JavaScript push() -menetelmä lisää elementin taulukon loppuun, kun taas sen kaksoisfunktio, the pop()-menetelmä , poistaa elementin taulukon lopusta. Jos haluat lisätä elementin tai useita elementtejä taulukon loppuun, push() -menetelmä on lähes aina yksinkertaisin ja nopein vaihtoehtosi.

Syntaksi:

array.push(item1, item2, ..., itemX) 

Esimerkki: Tässä esimerkissä lisäämme uusia elementtejä taulukon loppuun push()-menetelmällä.

javascript
// Input array  let Geeks = ['Geeks1', 'Geeks2', 'Geeks3', 'Geeks4']; // Display input array console.log('Original Array: ' + Geeks); // Pushing arrays Geeks.push('Geeks5', 'Geeks6'); // Display updated array console.log('Updated Array: ' + Geeks); 

Lähtö
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks1,Geeks2,Geeks3,Geeks4,Geeks5,Geeks6 

2. JavaScript unshift() -menetelmän käyttäminen

JavaScript unshift() -menetelmä lisää elementin taulukon alkuun, kun taas sen kaksoisfunktio shift() poistaa yhden elementin taulukon alusta.

Syntaksi:

array.unshift(item1, item2, ..., itemX) 

Esimerkki: Tässä esimerkissä lisäämme uusia elementtejä taulukon alkuun käyttämällä unshift()-menetelmää.

javascript
// Input array let Geeks = ['Geeks1', 'Geeks2', 'Geeks3', 'Geeks4']; // Display input array console.log('Original Array: ' + Geeks); // Adding element in begining Geeks.unshift('Geeks5', 'Geeks6'); // Display updated array console.log('Updated Array: ' + Geeks); 

Lähtö
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks5,Geeks6,Geeks1,Geeks2,Geeks3,Geeks4 

3. JavaScript splice() -menetelmän käyttäminen

JavaScript splice() -menetelmä muuttaa taulukon sisältöä poistamalla olemassa olevia elementtejä ja/tai lisäämällä uusia elementtejä.

Syntaksi:

array.splice(index, amount, item1, ....., itemX) 

Esimerkki: Tässä esimerkissä lisäämme uusia elementtejä taulukon 3. indeksiin käyttämällä splice()-menetelmää.

Javascript
// Input array let Geeks = ['Geeks1', 'Geeks2', 'Geeks3', 'Geeks4']; // Display input array console.log('Original Array: ' + Geeks); // Update array using slice Geeks.splice(2, 1, 'Geeks5', 'Geeks6'); // Display updated array console.log('Updated Array: ' + Geeks); 

Lähtö
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks1,Geeks2,Geeks5,Geeks6,Geeks4 

4. JavaScript concat() -menetelmän käyttäminen

JavaScript concat() -menetelmä palauttaa uuden yhdistetyn taulukon, joka koostuu taulukosta, johon sitä kutsutaan ja joka on yhdistetty argumenttinsa taulukkoon (tai matriisiin). Tätä menetelmää käytetään kahden tai useamman taulukon yhdistämiseen, ja tämä menetelmä ei muuta olemassa olevia taulukoita, vaan palauttaa uuden taulukon, joka sisältää yhdistettyjen taulukoiden arvot.

Syntaksi:

array1.concat(array2, array3, ..., arrayX) 

Esimerkki: Tässä esimerkissä yhdistämme kolme taulukkoa yhteen käyttämällä concat()-menetelmä JavaScriptistä.

Javascript
// Input arrays let g1 = ['Geeks1', 'Geeks2']; let g2 = ['Geeks3', 'Geeks4']; let g3 = ['GeeksForGeeks']; // Concate g1, g2 and g3 into g4 let g4 = g1.concat(g2, g3); //Display output console.log(g4); 

Lähtö
[ 'Geeks1', 'Geeks2', 'Geeks3', 'Geeks4', 'GeeksForGeeks' ] 

5. Javascriptin leviämisoperaattori

Javascriptin leviämisoperaattori mahdollistaa iterablen laajentumisen paikkoihin, joissa odotetaan yli 0 argumenttia. Sitä käytetään enimmäkseen muuttujataulukossa, jossa odotetaan enemmän kuin 1 arvoa. Se antaa meille oikeuden saada luettelo parametreista taulukosta.

Syntaksi:

let variablename1 = [...value]; 

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

Javascript
// Input arrays let Array1 = [2, 4, 6, 8]; let Array2 = [3, 5, 7] // Combine and create new array  // using spread operator newArray = [ ...Array1, ...Array2] // Display output console.log(newArray); 

Lähtö
[ 2, 4, 6, 8, 3, 5, 7 ] 

6. Lodash _.concat()-funktion käyttäminen

Yli 1 arvoa odotetaan. Sen avulla voimme yhdistää arvot taulukkoon.

Syntaksi:

_.concat(array, [values]); 

Esimerkki: Tämä esimerkki esittää yllä selitetyn lähestymistavan toteutusta.

Javascript
// Requiring the lodash library let lodash = require('lodash'); // Original array to be concatenated let array = [1, 2, 3]; // Values to be added to original array  let values = [0, 5, 'a', 'b'] let newArray = lodash.concat(array, values); console.log('Before concat: ' + array); // Printing newArray  console.log('After concat: ' + newArray); 

Lähtö:

Before concat: 1,2,3 After concat: 1,2,3,0,5,a,b 

7. Matriisin pituus -ominaisuuden käyttäminen

JavaScript-taulukoilla on pituusominaisuus, jota voidaan käyttää elementtien liittämiseen taulukon loppuun dynaamisesti. Määrittämällä indeksille arvon, joka on yhtä suuri kuin taulukon nykyinen pituus, voidaan lisätä uusi elementti.

Esimerkki:

JavaScript
// Input array let Geeks = ['Geeks1', 'Geeks2', 'Geeks3', 'Geeks4']; // Display input array console.log('Original Array: ' + Geeks); // Append element using the length property Geeks[Geeks.length] = 'Geeks5'; // Display updated array console.log('Updated Array: ' + Geeks); 

Lähtö
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks1,Geeks2,Geeks3,Geeks4,Geeks5