來源 | https://www.javascripttutorial.net/

翻譯 | 楊小愛

在今天的文章中，我們將學(xué)習(xí)如何使用 JavaScript Array unshift() 方法將一個或多個元素添加到數(shù)組的開頭。

JavScript Array unshift() 方法介紹

Array.prototype.unshift() 方法將一個或多個元素添加到數(shù)組的開頭并返回新數(shù)組的長度。

下面顯示了 unshift() 方法的語法：


unshift(element);unshift(element1, element2);unshift(element1, element2,...elementN);

因?yàn)?unshift() 方法需要重新索引現(xiàn)有元素，所以如果數(shù)組有很多元素，它會很慢。

請注意，要將一個或多個元素添加到數(shù)組的末尾，我們可以改用 push() 方法。

JavaScript 數(shù)組 unshift() 方法示例

讓我們舉一些使用 unshift() 方法的例子。

1) 使用 JavaScript Array unshift() 方法將元素添加到數(shù)組中

以下示例使用 unshift() 方法將數(shù)字 10 添加到 numbers 數(shù)組：


let numbers = [30, 40];const length = numbers.unshift(20);console.log({ length });console.log({ numbers });

輸出：


{ length: 3 }{ numbers: [ 20, 30, 40 ] }

這個程序是怎么工作的？

首先，定義一個包含兩個元素的數(shù)組：


let numbers = [20, 30];

numbers 數(shù)組的長度為 2。

其次，將數(shù)字 10 添加到 numbers 數(shù)組的開頭，并將新數(shù)組的長度分配給 length 變量：


const length = numbers.unshift(10)；

代碼語言： JavaScript  （javascript ）

3）、將length和numbers變量輸出到控制臺：

console.log({ length });console.log({ numbers });

下圖說明了 unshift() 函數(shù)的工作原理：

2) 使用 JavaScript Array unshift() 方法將多個元素添加到數(shù)組中

以下示例使用 unshift() 方法在數(shù)組的開頭添加兩個元素：


let numbers = [30, 40];const length = numbers.unshift(10, 20);console.log({ length });console.log({ numbers });


{ length: 4 }{ numbers: [ 10, 20, 30, 40 ] }

3) 使用 JavaScript 數(shù)組 unshift() 將一個數(shù)組的元素添加到另一個數(shù)組

以下示例使用 unshift() 方法將數(shù)組的元素添加到另一個數(shù)組的開頭：

let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];let weekends = ['Sat', 'Sun'];
for (const weekend of weekends) {  days.unshift(weekend);}
console.log(days);

輸出：

['Sun', 'Sat', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']

{ length: 4 }{ numbers: [ 10, 20, 30, 40 ] }

從 ES6 開始，我們可以使用擴(kuò)展運(yùn)算符使代碼更簡潔，如下所示：

let days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];let weekends = ['Sat', 'Sun'];
days.unshift(...weekends);
console.log(days);

對類數(shù)組對象使用 JavaScript Array unshift() 方法

unshift() 方法是通用的。因此，它可以很好地處理類似數(shù)組的對象。要從類數(shù)組對象調(diào)用 unshift() 方法，我們可以使用 call() 或 apply() 方法從數(shù)組對象中借用它。

請參見以下示例：

let greetings = {  0: 'Hi',  1: 'Hello',  2: 'Howdy',  length: 3,  prepend(message) {    [].unshift.call(this, message);    return this.length;  },};
greetings.prepend('Good day');
console.log(greetings);

輸出：

{  '0': 'Good day',  '1': 'Hi',  '2': 'Hello',  '3': 'Howdy',  length: 4,  prepend: [Function: prepend]}

這個程序怎么運(yùn)行？

首先，定義有

名稱為 0、1 和 3 的屬性表示問候?qū)ο蟮脑亍?/span>
length 屬性初始化為 3，表示問候語對象具有的元素數(shù)。
prepend() 方法調(diào)用 unshift() 方法的 call() 方法并將 this 設(shè)置為 greetings 對象。換句話說，問候?qū)ο髲臄?shù)組對象 ([]) 中借用了 unshift() 方法。

其次，調(diào)用 greetings 對象的 prepend() 方法在索引 0 處添加一個元素。

第三，將問候語對象輸出到控制臺。

如果你想允許 prepend() 方法向問候?qū)ο筇砑右粋€或多個元素，你可以像這樣使用 rest 參數(shù)和擴(kuò)展運(yùn)算符：

let greetings = {  0: 'Hi',  1: 'Hello',  2: 'Howdy',  length: 3,  prepend(...messages) {    [].unshift.call(this, ...messages);    return this.length;  },};
greetings.prepend('Good day', 'Bye');