logo

Hur lägger man till ett element i en array i JavaScript?

Lägga till ett element till en array i JavaScript innebär att lägga till ett nytt objekt i slutet av arrayen. , förlänger den här processen arrayens längd och rymmer nya data. JavaScript erbjuder flera metoder för att lägga till element som accepterar ett eller flera element som argument och lägger till dem i slutet av arrayen.

Det här är följande sätt att lösa problemet:

Innehållsförteckning



1. Använda JavaScript push()-metoden

JavaScript push() metod kommer att lägga till ett element i slutet av en array, medan dess tvillingfunktion, the pop() metod , tar bort ett element från slutet av arrayen. Om du behöver lägga till ett element eller flera element i slutet av en array, push() metod kommer nästan alltid att vara ditt enklaste och snabbaste alternativ.

Syntax:

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

Exempel: I det här exemplet kommer vi att lägga till nya element i slutet av arrayen med hjälp av push()-metoden.

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

Produktion
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks1,Geeks2,Geeks3,Geeks4,Geeks5,Geeks6>

2. Använda JavaScript unshift()-metoden

JavaScript unshift() Metod kommer att lägga till ett element i början av en array, medan dess tvillingfunktion, shift(), tar bort ett element från början av arrayen.

Syntax:

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

Exempel: I det här exemplet kommer vi att lägga till nya element i början av arrayen med metoden unshift() .

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

Produktion
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks5,Geeks6,Geeks1,Geeks2,Geeks3,Geeks4>

3. Använda JavaScript splice()-metoden

JavaScript splice() Metod ändrar innehållet i en array genom att ta bort befintliga element och/eller lägga till nya element.

Syntax:

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

Exempel: I det här exemplet kommer vi att lägga till nya element vid det tredje indexet av arrayen med metoden splice().

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

Produktion
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks1,Geeks2,Geeks5,Geeks6,Geeks4>

4. Använda JavaScript concat()-metoden

JavaScript concat() Metod returnerar en ny kombinerad array som består av arrayen som den anropas på, sammanfogad med arrayen (eller arrayerna) från dess argument. Den här metoden används för att sammanfoga två eller flera arrayer och den här metoden ändrar inte de befintliga arrayerna, utan returnerar en ny array som innehåller värdena för de sammanfogade arrayerna.

Syntax:

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

Exempel: I det här exemplet kommer vi att slå samman tre arrayer med hjälp av concat() metod av JavaScript.

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

Produktion
[ 'Geeks1', 'Geeks2', 'Geeks3', 'Geeks4', 'GeeksForGeeks' ]>

5. Javascript-spridningsoperatör

Javascript-spridningsoperatör tillåter en iterabel att expandera på platser där 0+ argument förväntas. Det används mest i den variabla arrayen där det finns mer än 1 värde förväntas. Det ger oss privilegiet att få en lista med parametrar från en array.

Syntax:

let variablename1 = [...value];>

Exempel: Detta exempel visar implementeringen av ovan förklarade tillvägagångssätt.

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

Produktion
[ 2, 4, 6, 8, 3, 5, 7 ]>

6. Använda Lodash _.concat()-funktionen

Mer än 1 värde förväntas. Det låter oss slå samman värden i arrayen.

Syntax:

_.concat(array, [values]);>

Exempel: Detta exempel visar implementeringen av ovan förklarade tillvägagångssätt.

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

Produktion:

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

7. Använda egenskapen array length

JavaScript-matriser har en length-egenskap som kan användas för att dynamiskt lägga till element i slutet av en matris. Genom att tilldela ett värde till ett index som är lika med den aktuella längden på arrayen kan ett nytt element läggas till.

Exempel:

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

Produktion
Original Array: Geeks1,Geeks2,Geeks3,Geeks4 Updated Array: Geeks1,Geeks2,Geeks3,Geeks4,Geeks5>