JavaScript 如何动态添加元素到现有数组

数组是一个 JavaScript 对象，它可以同时存储多个值，无论数据类型如何。在本文中，我们将讨论如何在JavaScript中动态地向现有数组中添加新元素。本文将介绍两种方法，即使用push()方法和使用数组索引在任意索引处动态添加元素。

示例：

var a = ['Geeks', 'For', 'Geeks', 1];

在上面的示例中，“Geeks”是“字符串”类型，而1是“整数”类型。数组还可以存储JavaScript对象。JavaScript数组是动态的，它们在初始化时不需要大小。它们使用数字索引进行访问。

console.log(a[1]);

上面的声明在控制台窗口中打印出上面示例中的“For”。

输出：

For

或者

document.write(a[1]);

输出：

For

在 JavaScript 中动态地向数组中添加元素，程序员可以使用以下任意一种方法。

方法 1： 使用数字索引将元素添加到指定索引位置。

// JavaScript Array Initialization
var a = ['Hi', 'There'];
 
// New element added dynamically.
a[3] = 'Geeks';
 
console.log(a[3]);
console.log(a[2]);

输出：

Geeks
undefined

可以看到，只声明了索引为{0, 1}。索引3是动态创建并初始化为’Geeks’。索引2是自动创建并初始化为undefined，以保持顺序。

方法2: 使用 push() 方法向数组末尾添加元素。

// JavaScript Array Declared
var a = [];
 
// Elements pushed into the 
// array using push() method
a.push('Geeks');
a.push('For');
a.push('Geeks');
 
// Obtaining the value
console.log(a);

输出：

['Geeks', 'For', 'Geeks']

控制台窗口显示一个包含3个值的数组对象，它们是[‘Geeks’, ‘For’, ‘Geeks’]。 push() **** 方法通过在数组末尾添加新元素来保持索引的顺序，并返回数组的新长度。

方法 3: 使用 unshift() 方法在数组开头添加元素。

// JavaScript Array Declared
var a = [];
 
// Elements pushed into the 
// array using push() method
a.unshift('Geeks');
a.unshift('For');
a.unshift('Geeks');
 
// Obtaining the value
console.log(a);

输出：

['Geeks', 'For', 'Geeks']

方法4：使用splice()方法： 使用这个方法可以通过删除现有元素和/或添加新元素来修改数组的内容。

语法：

Array.splice( index, remove_count, item_list )

示例：

const language = ['HTML', 'Css'];
 
language.splice(
    language.length, // We want add at the END of our array
    0, // We do NOT want to remove any item
    'Javascript', 'react', // These are the items we want to add
);
 
console.log(language);