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

翻譯 | 楊小愛

在今天的教程中，我們將學(xué)習(xí)如何使用 JavaScript Array push()方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾。

JavaScript Array push() 方法介紹

Array.prototype.push()方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾并返回新數(shù)組的長度。

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


push(newElement);push(newElement1,newElement2);push(newElement1,newElement2,...,newElementN);

push() 方法返回調(diào)用該方法的數(shù)組對(duì)象的長度屬性的新值。

JavaScript Array push() 方法示例

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

1)、使用數(shù)組 push() 將一個(gè)元素追加到數(shù)組中

以下示例將數(shù)字 40 添加到 numbers 數(shù)組的末尾：


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

輸出：


4[ 10, 20, 30, 40 ]

它是怎么工作。

首先，定義包含三個(gè)數(shù)字的 numbers 數(shù)組：


let numbers = [10, 20, 30];

其次，使用方法將數(shù)字添加到數(shù)組40的末尾并將返回值分配給變量：numbers push() length

const length = numbers.push(40);

第三、輸出length變量和numbers數(shù)組：


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

下圖說明了該示例的工作原理：

2)、使用數(shù)組 push() 將多個(gè)元素添加到數(shù)組末尾

以下示例顯示了如何使用push()方法將多個(gè)元素添加到數(shù)組的末尾：


let numbers = [10, 20, 30];const length = numbers.push(40, 50);console.log(length);console.log(numbers);

輸出：


5[ 10, 20, 30, 40, 50 ]

下圖說明了它是如何工作的：

3）、使用 push() 將一個(gè)數(shù)組的元素追加到另一個(gè)數(shù)組

假設(shè)您有兩個(gè)數(shù)組colors和 cmyk：


let colors = ['red', 'green', 'blue'];let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

并且，我們想將 cmyk 的元素附加到顏色數(shù)組中。

為此，我們可以使用 for...of 循環(huán)遍歷 cmyk 數(shù)組的元素，并使用 push() 方法將每個(gè)元素附加到 colors 數(shù)組，如下所示：


let colors = ['red', 'green', 'blue'];let cmyk = ['cyan', 'magenta', 'yellow', 'back'];for (const color of cmyk) {  colors.push(color);}console.log(colors);

輸出：

['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']

從 ES6 開始，我們可以使用擴(kuò)展運(yùn)算符( ...) 來擴(kuò)展cmyk數(shù)組的元素并同時(shí)將它們推送到colors數(shù)組中，如下所示：

let colors = ['red', 'green', 'blue'];let cmyk = ['cyan', 'magenta', 'yellow', 'back'];colors.push(...cmyk);console.log(colors);

對(duì)類數(shù)組對(duì)象使用 JavaScript Array push() 方法

Array.prototype.push() 方法被設(shè)計(jì)成是通用的。因此，我們可以在類數(shù)組對(duì)象上使用 call() 或 apply() 調(diào)用 push() 方法。

在底層， push() 方法使用 length 屬性來確定插入元素的位置。如果 push() 方法無法將 length 屬性轉(zhuǎn)換為數(shù)字，它將使用 0 作為索引的值。

請(qǐng)參見以下示例：


let greetings = {  0: 'Hi',  1: 'Hello',  length: 2,  append(message) {    [].push.call(this, message);  },};greetings.append('Howdy');greetings.append('Bonjour');  console.log(greetings);

輸出：

{  '0': 'Hi',  '1': 'Hello',  '2': 'Howdy',  '3': 'Bonjour',  length: 4,  add: [Function: add]}

這個(gè)是怎么運(yùn)行的。

首先，定義具有三個(gè)屬性 1、2 和length以及一個(gè)方法 append() 的 greetings 對(duì)象：


let greetings = {  0: 'Hi',  1: 'Hello',  length: 2,  append(message) {    [].push.call(this, message);  },};

append() 方法調(diào)用數(shù)組對(duì)象的 push() 方法將message附加到 greetings 對(duì)象。

第二、調(diào)用greetings對(duì)象的append()方法：


greetings.append('Howdy');greetings.append('Bonjour');

在每次調(diào)用中，push() 使用問候?qū)ο蟮拈L度屬性來確定它附加新元素的位置并將長度屬性增加一。

結(jié)果，greetings 對(duì)象在索引 2 和 3 處多了兩個(gè)元素。調(diào)用后的 length 屬性為 4。

第三，將greetings對(duì)象輸出到控制臺(tái)：


console.log(greetings);

要允許 append() 方法接受多個(gè)消息，我們可以像這樣修改該方法：


let greetings = {  0: 'Hi',  1: 'Hello',  length: 2,  append() {    [].push.call(this, ...arguments);  },};greetings.append('Howdy', 'Bonjour');console.log(greetings);