JS數組學習如何在頭部或尾部插入元素?

青灯夜游
發布: 2021-08-18 17:44:05
原創
10325 人瀏覽過

在上一篇文章《JS數組學習之一維和二維數組的創建和訪問》中,我們介紹了數組創建的多種方法。既然有了數組,我們就要操作數組,而最常見的操作就是要新增或刪除數組元素。這次我們先來跟大家介紹插入陣列元素的幾種方式,之後再給大家介紹刪除陣列元素的方法。

添加數組元素有多種方式:可以在數組開頭或末尾添加,也可以根據數組下標在任意位置添加。今天我們就先來跟大家介紹如何在陣列開頭或結尾插入元素。

在陣列開頭插入元素

在JavaScript中,我們可以使用unshift()函數來在陣列開頭插入元素,該函數能夠將一個或多個參數值附加到陣列的頭部:

array.unshift(元素1, 元素2, ..., 元素X)
登入後複製

第1 個參數元素1為陣列新的元素0,第2 個參數元素2為新的元素1,以此類推,最後傳回新增元素後的陣列長度。

我們透過下面的例子來具體看看:

var a = [0]; //定义数组 console.log(a); //返回[0] a.unshift(1,2); //一次性增加两个元素 console.log(a); //返回[1,2,0] var a = [0]; a.unshift(1); //增加元素1 a.unshift(2); //增加元素2 console.log(a); //返回[2,1,0]
登入後複製

可以看出:我們使用a.unshift(1,2)來在a數組的開頭按順序插入兩個數值1、2;使用a.unshift(1)在a數組的開頭插入數值1,又在此基礎上使用a.unshift(2)在開頭(即數值1前)插入數值2。因此輸出結果為:

JS數組學習如何在頭部或尾部插入元素?

在陣列最後插入元素

在JavaScript中,我們可以使用push()或concat() 方法來在陣列尾部插入元素。以下一一介紹:

1、使用push()方法

#push()方法能夠把一個或多個參數值附加到陣列的尾部,並傳回新增元素後的陣列長度。

array.push(元素1, 元素2, ..., 元素X)
登入後複製

我們透過下面的例子來具體看看:

var a = [0]; //定义数组 console.log(a); //返回[0] a.push(1,2); //一次性增加两个元素 console.log(a); //返回[0,1,2] var a = [0]; a.push(1); //增加元素1 a.push(2); //增加元素2 console.log(a); //返回0,1,2]
登入後複製

可以看出:我們使用a.push(1,2)在a數組的尾部按順序插入兩個數值1、2;使用a.push(1)在a數組的尾部插入數值1,又在此基礎上使用a.push(2)在尾部(即數值1後)插入一個數值2。因此輸出結果為:

JS數組學習如何在頭部或尾部插入元素?

2、使用concat() 方法

1)、concat() 方法可以連接兩個或多個數組,會將作為參數的一個或多個數組的元素加到指定數組的尾部。

var a = [1,2,3]; var b = [4, 5, 6]; var c = [7,8]; var d = a.concat(b,c); console.log(d);
登入後複製

concat() 方法會把作為參數的一維數組打散,分別作為單獨的元素連接到數組的尾部。因此輸出結果為:

JS數組學習如何在頭部或尾部插入元素?

但concat() 方法無法全部打散二維數組,而只能將二維數組包含的一維元素連接到數組的尾部

var a = [1,2,3,4,5]; var b = [[1,2,3], [4,5]]; var c = [[1,2,3], 3]; var d = a.concat(b,c); console.log(d);
登入後複製

JS數組學習如何在頭部或尾部插入元素?

2)concat() 方法也可以插入給定的一個或多個元素,能夠把傳遞的所有參數依序加到陣列的尾部。

var a = [1,2,3,4,5]; //定义数组 var b = a.concat(6,7,8); //为数组a连接3个元素 console.log(b); //返回[1,2,3,4,5,6,7,8]
登入後複製

輸出結果為:

JS數組學習如何在頭部或尾部插入元素?

說明:concat() 方法將建立並傳回一個新數組,而不是在原來的基礎上新增元素;但unshift()方法會在原數組基礎上加入元素。

好了,就說到這裡了,有需要的可以看:javascript高階教學

#

以上是JS數組學習如何在頭部或尾部插入元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!