JavaScript 數(shù)組中插入元素的實(shí)例方法
數(shù)組數(shù)據(jù)類型是處理有序值列表時(shí)最常用的數(shù)據(jù)類型之一。
每個(gè)值都被稱為具有唯一 id
的元素。它存儲(chǔ)可以通過(guò)單個(gè)變量訪問(wèn)的各種數(shù)據(jù)類型的元素。
在實(shí)踐中,一個(gè)數(shù)組可以包含一個(gè)用戶列表,我們可能需要在最后一個(gè)元素之后、第一個(gè)元素之前或數(shù)組中的任何指定點(diǎn)添加一個(gè)元素到數(shù)組中。
本文將向你展示如何使用 JavaScript 將元素插入到數(shù)組中。如果你趕時(shí)間,以下是我們將在本文中深入討論的方法:
// 添加到數(shù)組的開頭 Array.unshift(element); // 添加到數(shù)組的末尾 Array.push(element); // 添加到指定位置 Array.splice(start_position, 0, new_element...); // 使用 concat 方法添加而不改變?cè)紨?shù)組 let newArray = [].concat(Array, element);
- 當(dāng)你想在數(shù)組末尾添加一個(gè)元素時(shí),請(qǐng)使用
push()
。 - 如果你需要在數(shù)組的開頭添加一個(gè)元素,請(qǐng)使用
unshift()
。 - 如果要將元素添加到數(shù)組的特定位置,請(qǐng)使用
splice()
。 - 最后,當(dāng)你想保持原始數(shù)組時(shí),可以使用
concat()
方法。
如何使用 unshift() 方法添加到數(shù)組的開頭
在 JavaScript 中,你可以使用 unshift()
方法將一個(gè)或多個(gè)元素添加到數(shù)組的開頭,并在添加新元素后返回?cái)?shù)組的長(zhǎng)度。
如果我們有一個(gè)國(guó)家數(shù)組,并且想在當(dāng)前第一個(gè)索引 0
處的 “Nigeria” 之前添加一個(gè)國(guó)家,我們可以使用 unshift()
方法來(lái)完成,如下所示:
const countries = ["Nigeria", "Ghana", "Rwanda"]; countries.unshift("Kenya"); console.log(countries); // ["Kenya","Nigeria","Ghana","Rwanda"]
我們還可以使用 unshift()
方法添加多個(gè)元素:
const countries = ["Nigeria", "Ghana", "Rwanda"]; countries.unshift("South Africa", "Mali", "Kenya"); console.log(countries); // ["South Africa","Mali","Kenya","Nigeria","Ghana","Rwanda"]
在我們對(duì) unshift()
方法的解釋中,我們還聲明它返回新數(shù)組的長(zhǎng)度,如下所示:
const countries = ["Nigeria", "Ghana", "Rwanda"]; let countriesLength = countries.unshift("South Africa", "Mali", "Kenya"); console.log(countriesLength); // 6
如何使用 push() 方法推送到數(shù)組的末尾
push()
方法類似于 unshift()
方法,因?yàn)樗鼘⒃靥砑拥綌?shù)組的末尾而不是開頭。它返回新數(shù)組的長(zhǎng)度,并且與 unshift()
方法一樣,可用于添加多個(gè)元素。
讓我們?cè)俅螄L試相同的示例,但這次使用 push()
方法將它們添加到數(shù)組的末尾:
const countries = ["Nigeria", "Ghana", "Rwanda"]; countries.push("Kenya"); console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"] countries.push("South Africa", "Mali"); console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya","South Africa","Mali"]
我們可以用它來(lái)獲取新數(shù)組的長(zhǎng)度:
const countries = ["Nigeria", "Ghana", "Rwanda"]; let countriesLength = countries.push("Kenya"); console.log(countriesLength); // 4
如何使用 splice() 方法將元素添加到數(shù)組中的指定位置
到目前為止,我們只看到了如何將元素添加到數(shù)組的開頭或結(jié)尾,但是你可能想知道如何將元素添加到數(shù)組中的特定位置。好吧,你可以使用 splice()
方法來(lái)做到這一點(diǎn)。
splice()
方法是一種通用方法,用于通過(guò)在數(shù)組的指定位置刪除、替換或添加元素來(lái)更改數(shù)組的內(nèi)容。本節(jié)將介紹如何使用此方法將元素添加到特定位置。
例如,考慮以下國(guó)家數(shù)組,其中包含按字母順序排列的三個(gè)元素(國(guó)家):
const countries = ["Ghana", "Nigeria", "Rwanda"];
假設(shè)我們要添加 “Kenya”,按照字母順序,它應(yīng)該放在第二個(gè)位置,索引 1
(在 Ghana 之后和 Nigeria 之前)。在這種情況下,我們將使用 splice()
方法,語(yǔ)法如下:
Array.splice(start_position, 0, new_element...);
start_position
指定了我們希望將新元素插入到數(shù)組中的位置的索引。如果有多個(gè)元素,它指定插入的元素將從哪里開始。- 如果我們想添加元素到數(shù)組中,我們將第二個(gè)參數(shù)設(shè)置為零(
0
),指示splice()
方法不要?jiǎng)h除任何數(shù)組元素。 - 以下參數(shù)或元素可能不止一個(gè),因?yàn)檫@些是我們要在指定位置添加到數(shù)組中的元素。
例如,讓我們?cè)趪?guó)家數(shù)組中將 “Kenya” 放在 “Ghana” 之后:
const countries = ["Ghana", "Nigeria", "Rwanda"]; countries.splice(1, 0, 'Kenya'); console.log(countries); // ["Ghana","Kenya","Nigeria","Rwanda"]
就像我們對(duì)其他方法所做的那樣,我們也可以添加多個(gè)元素:
const countries = ["Ghana", "Nigeria", "Rwanda"]; countries.splice(1, 0, 'Kenya', 'Mali'); console.log(countries); // ["Ghana","Kenya","Mali","Nigeria","Rwanda"]
請(qǐng)注意,前面的方法返回新數(shù)組的長(zhǎng)度,但 splice()
方法更改了原始數(shù)組。它不會(huì)刪除任何元素,因此它返回一個(gè)空數(shù)組。
如何使用 concat() 方法將元素添加到數(shù)組
我們可以使用 concat()
方法將元素添加到數(shù)組中,而無(wú)需改變或更改原始數(shù)組。如果我們不希望原始數(shù)組受到影響,則創(chuàng)建一個(gè)新數(shù)組是一種更好的方法。
我們可以使用此方法根據(jù)放置元素的位置將元素添加到數(shù)組的開頭和結(jié)尾:
const countries = ["Ghana", "Nigeria", "Rwanda"]; let newCountries = [].concat("Mali", countries, "Kenya"); console.log(newCountries); // ["Mali","Ghana","Nigeria","Rwanda","Kenya"]
concat()
方法還允許我們將兩個(gè)(或更多)數(shù)組連接到一個(gè)新數(shù)組中:
const africanCountries = ["Ghana", "Nigeria", "Rwanda"]; const europeanCountries = ["Germany", "France", "spain"]; let countries = [].concat(africanCountries, europeanCountries); console.log(countries); // ["Ghana","Nigeria","Rwanda","Germany","France","spain"]
總結(jié)
在本文中,我們學(xué)習(xí)了使用 splice()
方法將元素添加到數(shù)組的開始、末尾或任何位置的各種方法。
我們還了解到 concat()
方法允許我們?cè)诓桓淖冊(cè)紨?shù)組的情況下添加元素。
相關(guān)文章
js判斷一個(gè)字符串是以某個(gè)字符串開頭的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js判斷一個(gè)字符串是以某個(gè)字符串開頭的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12使用layer彈窗提交表單時(shí)判斷表單是否輸入為空的例子
今天小編就為大家分享一篇使用layer彈窗提交表單時(shí)判斷表單是否輸入為空的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02JavaScript實(shí)現(xiàn)文本轉(zhuǎn)語(yǔ)音功能的完整步驟
這篇文章主要介紹了如何使用JavaScript和WebSpeechAPI快速實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文本轉(zhuǎn)語(yǔ)音Web應(yīng)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02javascript 流暢動(dòng)畫實(shí)現(xiàn)原理
瀏覽器目前來(lái)說(shuō)是沒(méi)有抗鋸齒效果的(將來(lái)不一定哦),這樣dom元素外觀的改變就被限制在1個(gè)像素為最佳效果。2009-09-09js操作CheckBoxList實(shí)現(xiàn)全選/反選(在客服端完成)
對(duì)于CheckBoxList控件來(lái)說(shuō),一方面要實(shí)現(xiàn)大量數(shù)據(jù)在服務(wù)器端的綁定工作,另一方面往往要求實(shí)現(xiàn)全選、反選等功能,接下來(lái)將介紹js操作CheckBoxList實(shí)現(xiàn)全選/反選,感興趣的朋友可以了解下,或許對(duì)你有所幫助2013-02-02微信小程序局部刷新觸發(fā)整頁(yè)刷新效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序局部刷新觸發(fā)整頁(yè)刷新效果的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11