1. push() - 末尾添加（最常用）

let arr = [1, 2, 3];
arr.push(4);        // [1, 2, 3, 4]
arr.push(5, 6);     // [1, 2, 3, 4, 5, 6] - 可添加多個(gè)

2. unshift() - 開頭添加

let arr = [1, 2, 3];
arr.unshift(0);     // [0, 1, 2, 3]

3. splice() - 指定位置添加

let arr = [1, 2, 3];
arr.splice(1, 0, 'a');  // 在索引1處添加'a'
// [1, 'a', 2, 3]

// 語法: splice(起始索引, 刪除數(shù)量, 要添加的元素)

4. 展開運(yùn)算符 … - 創(chuàng)建新數(shù)組（不修改原數(shù)組）

let arr = [1, 2, 3];
let newArr = [...arr, 4];        // 末尾添加
let newArr2 = [0, ...arr];       // 開頭添加

5. concat() - 合并數(shù)組（不修改原數(shù)組）

let arr = [1, 2, 3];
let newArr = arr.concat(4, 5);   // [1, 2, 3, 4, 5]

6.對(duì)比表格

7.推薦

• 末尾添加 → 用 push()
• 開頭添加 → 用 unshift() 或 [...arr, item]
• 指定位置 → 用 splice()

???????8.知識(shí)擴(kuò)展

在 JavaScript 中，數(shù)組（Array） 是一種非常靈活的數(shù)據(jù)結(jié)構(gòu)，添加元素的方式也多種多樣。根據(jù)你希望添加的位置（末尾、開頭、中間）以及是否需要?jiǎng)?chuàng)建新數(shù)組，可以選擇不同的方法。

下面詳細(xì)列出常用方法，并附上代碼示例和注意事項(xiàng)。

1. push() – 在數(shù)組末尾添加一個(gè)或多個(gè)元素

• 特點(diǎn)：直接修改原數(shù)組，返回新數(shù)組的長度。
• 適用場景：最常用、性能最好的追加方式。

let arr = [1, 2, 3];
let newLength = arr.push(4, 5);  // 添加 4 和 5
console.log(arr);       // [1, 2, 3, 4, 5]
console.log(newLength); // 5

2. unshift() – 在數(shù)組開頭添加一個(gè)或多個(gè)元素

• 特點(diǎn)：修改原數(shù)組，返回新長度。因?yàn)橐苿?dòng)所有后續(xù)元素，性能低于 push()。
• 適用場景：需要在頭部插入數(shù)據(jù)，且數(shù)組長度不大。

let arr = [1, 2, 3];
let newLength = arr.unshift(0, -1);
console.log(arr);       // [0, -1, 1, 2, 3]
console.log(newLength); // 5

3. splice() – 在任意位置插入 / 刪除元素

• 語法：splice(起始索引, 刪除個(gè)數(shù), 要插入的元素1, 元素2, ...)
• 特點(diǎn)：直接在原數(shù)組上操作，返回被刪除的元素組成的數(shù)組（若無刪除則返回空數(shù)組）。
• 適用場景：需要精確控制在中間或指定位置添加元素，同時(shí)也可以做刪除操作。

let arr = [1, 2, 3, 4];
// 在索引 2 的位置插入 100 和 200，不刪除任何元素
arr.splice(2, 0, 100, 200);
console.log(arr); // [1, 2, 100, 200, 3, 4]

4. concat() – 合并數(shù)組（返回新數(shù)組）

• 特點(diǎn)：不修改原數(shù)組，將參數(shù)中的數(shù)組或元素與原數(shù)組合并后返回一個(gè)新數(shù)組。
• 適用場景：不想改變?cè)瓟?shù)組，需要得到一個(gè)新的合并結(jié)果。

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2, 5);
console.log(arr1);   // [1, 2] 原數(shù)組未變
console.log(newArr); // [1, 2, 3, 4, 5]

5. 擴(kuò)展運(yùn)算符 ...（ES6+） – 創(chuàng)建新數(shù)組

• 特點(diǎn)：語法簡潔，返回新數(shù)組，不修改原數(shù)組。
• 適用場景：函數(shù)式編程，或需要基于原數(shù)組輕松生成新數(shù)組。

let arr = [1, 2, 3];
let newArr1 = [...arr, 4, 5];   // 末尾添加
let newArr2 = [0, ...arr];       // 開頭添加
let newArr3 = [0, ...arr.slice(0, 2), 99, ...arr.slice(2)]; // 中間插入
console.log(newArr1); // [1, 2, 3, 4, 5]
console.log(newArr2); // [0, 1, 2, 3]
console.log(newArr3); // [0, 1, 2, 99, 3]

6. 直接通過索引賦值或利用 length 屬性

• 特點(diǎn)：最原始的方式，通過索引添加新元素，也可以直接使用 arr[arr.length] = value。
• 注意：如果索引超出當(dāng)前長度，中間會(huì)形成“空位”（empty slots），產(chǎn)生稀疏數(shù)組，一般不推薦。

let arr = [1, 2, 3];
arr[arr.length] = 4;      // 等價(jià)于 push(4)
console.log(arr);          // [1, 2, 3, 4]
arr[10] = 5;              // 索引跳躍，中間產(chǎn)生 empty
console.log(arr);          // [1, 2, 3, 4, empty × 6, 5]

性能對(duì)比與建議

push() 速度最快，因?yàn)樗辉跀?shù)組尾部添加，無需移動(dòng)已有元素。

unshift() 最慢，每次添加都會(huì)將所有現(xiàn)有元素向后挪一位。

splice() 插入中間 也會(huì)移動(dòng)部分元素，性能介于兩者之間。

需要頻繁在頭部添加元素時(shí)，考慮改用鏈表結(jié)構(gòu)或先 push 最后再 reverse。

總結(jié)表

根據(jù)需求選擇合適的方法，絕大多數(shù)日常編碼中 push() + splice() 組合就足夠了。

到此這篇關(guān)于JavaScript中列表(數(shù)組)添加數(shù)據(jù)的常用方法的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組添加數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論