JavaScript 数组怎么添加元素

在日常做网页开发时，咱们经常需要给存储数据的“小箱子”——数组——添东西，比如给购物清单加新商品、给待办列表补任务。很多新手刚学JavaScript时，常不知道怎么高效给数组加元素，今天咱们就用生活化的例子，把这事说透。

往数组末尾加元素：最常用的“收尾添加法”

咱们先想个场景：你列了个周末要吃的水果数组const fruits = ['苹果', '香蕉']，现在要加个“草莓”到最后。这时候最顺手的方法就是push()，它就像给排队的队伍加人，直接站到队伍尾巴。

实际用的时候，push()会把新元素塞到数组最后，而且会直接修改原来的数组——就像你写购物清单时，直接在最后一行补“草莓”，原本的清单不会变。比如：

`javascript

const fruits = ['苹果', '香蕉'];

fruits.push('草莓');

console.log(fruits); // 输出 ['苹果', '香蕉', '草莓']

`

要是加多个元素也简单，比如再加“蓝莓”，就直接写fruits.push('草莓', '蓝莓')，相当于一下补两行清单，不用反复写方法。

往数组开头加元素：给队伍排前面加人

有时候需要给数组开头加东西，比如刚列的水果清单，突然想把“车厘子”放最前面，这时候就得用unshift()。它的作用和push()相反，是把元素塞到数组最前面，也是直接修改原数组。

还是用水果例子：

`javascript

const fruits = ['苹果', '香蕉'];

fruits.unshift('车厘子');

console.log(fruits); // 输出 ['车厘子', '苹果', '香蕉']

`

要注意，用unshift()加第一个元素时，数组的所有原有元素都会往后挪一位，就像给排队的人前面加个新伙伴，后面的人都得往后站，这和push()的“不挪位置、直接收尾”不一样。

往数组中间加元素：精准插入的“插队法”

如果不是头尾，是数组中间的位置需要加元素呢？比如想在“苹果”和“香蕉”之间加“橙子”，这时候就得用splice()，它就像给队伍中间插人，还能顺便把原来的人挤到后面。

splice()的参数是三个：第一个是要插入的位置索引（从0开始数），第二个是要删除的元素数量（插入的话就写0），第三个是要加的新元素。用例子说最清楚：

`javascript

const fruits = ['苹果', '香蕉'];

// 在索引1的位置插入“橙子”，不删原有元素

fruits.splice(1, 0, '橙子');

console.log(fruits); // 输出 ['苹果', '橙子', '香蕉']

`

要是想插多个元素也没问题，比如在“苹果”后加“橙子”和“柚子”，就写fruits.splice(1, 0, '橙子', '柚子')，相当于在同一位置插两个伙伴。

选哪种方法？看你的需求

最后给大家捋捋怎么选：要加在末尾用push()，加在开头用unshift()，插中间就用splice()。要是你不想修改原数组，还可以用concat()，它会返回一个新数组，比如const newFruits = fruits.concat('草莓')，相当于复制一份清单，在新副本上改，不影响原来的。

这些方法都是JavaScript数组添加元素的常用技巧，日常开发里用得特别多，多练几个小例子，很快就能摸熟啦。