新增元素

js中給數組新增元素主要通過2個方法 push 和 unshift

Array.prototype.push

功能概述

push() 方法將一個或多個元素添加到數組的末尾，并返回該數組的新長度(該方法修改原有數組)。

語法

arr.push(element1, ..., elementN)

關注點

新增的元素出現在數組的末尾

可以一次性添加多個元素

返回值是數組的最新長度

代碼示例

簡單使用

let arr = [1,2];

let newLength = arr.push(3,4);

console.log(newLength)// newLength: 4

對比通過腳本添加和ES6析構的方式添加性能對比

function push() {

let arr = [1,2];

let newLength = arr.push(3,4);

}

function add() {

let arr = [1,2];

let len = arr.length;

arr[len] = 3;

arr[len+1] = 4;

}

function es6() {

let arr = [1,2];

arr = [

...arr,

3,

4

]

}

let sum = 1000000;//1百萬次

console.time('push')

for (let index = 0; index < sum; index++) {

push();

}

console.timeEnd('push');

console.time('add')

for (let index = 0; index < sum; index++) {

add();

}

console.timeEnd('add')

console.time('es6')

for (let index = 0; index < sum; index++) {

es6();

}

console.timeEnd('es6')

輸出的結果

push: 470.538818359375ms

add: 454.7177734375ms

es6: 2625.546142578125ms

結論

push 和 通過角標去添加元素性能接近，而es6的析構會慢很多；原因是 es6的析構可以等效如下代碼

let arr = [1,2];

arr = [...arr,4,5]; //1

arr = arr.concat(4,5); //2

Array.prototype.unshift

功能概述

unshift()方法將一個或多個元素添加到數組的開頭，并返回該數組的新長度(該方法修改原有數組)

語法

arr.unshift(element1,...,elementN)

關注點

新增單個或者多個元素到數組的頭部

如果是多個元素，會以塊的方式添加到數組頭部，也就是說會保持參數的原有順序

函數返回新數組的長度

代碼示例

簡單使用

let arr = [1,2];

let newLength = arr.unshift(10);

console.log(newLength);// 3，新數組長度

區分一次添加多個元素和循環添加

let arr = [1,2];

arr.unshift(3,4,5);

console.log(arr); //#1

let arrMap = [1,2];

let add = [3,4,5];

add.map(val=>{

arrMap.unshift(val);

})

console.log(arrMap);//#2

第一處的輸出和第二處的輸出結果是不一樣

刪除元素

數組中提供了2個刪除元素的方法分別是pop()和shift();和新增元素一樣，一個是從末尾刪除一個是從頭部刪除

Array.prototype.pop

功能概述

pop()方法從數組中刪除最后一個元素，并返回該元素的值(此方法更改數組的長度)。

語法

arr.pop()

關注點

從元素末尾刪除

返回被刪除的元素

如果數組是空，返回的元素是 undefined

代碼示例

let arr = [1,2];

let delEle = arr.pop();

console.log(delEle);// 2

console.log(arr); // [1];

Array.prototype.shift

功能概述

shift() 方法從數組中刪除第一個元素，并返回該元素的值(此方法更改數組的長度)。

語法

arr.shift()

關注點

從數組頭部開始刪除元素

返回刪除元素的本身

如果數組是空，返回的元素是 undefined

實現數據結構中的棧和隊列

數據結構(棧)

棧(stack)又名堆棧，它是一種運算受限的線性表。限定僅在表尾進行插入和刪除操作的線性表。這一端被稱為棧頂，相對地，把另一端稱為棧底。向一個棧插入新元素又稱作進棧、入棧或壓棧，它是把新元素放到棧頂元素的上面，使之成為新的棧頂元素；從一個棧刪除元素又稱作出棧或退棧，它是把棧頂元素刪除掉，使其相鄰的元素成為新的棧頂元素

代碼實現

從概念描述來說，我們只需要滿足 先進后出(后進先出)這個特性就可以了；所以如果我們入棧的時候是在數組的末尾，那么出棧的時候也得從末尾開始，如果入棧的時候是數組的頭部那么出棧的時候也對在數組的頭部

從數組末尾入棧

function Stack(initData){

this.data = initData || [];

}

// 入棧

Stack.prototype.in = function (element) {

return this.data.push(element);

}

// 出棧

Stack.prototype.out = function(){

return this.data.pop();

}

從數組頭部入棧

function Stack(initData){

this.data = initData || [];

}

// 入棧

Stack.prototype.in = function (element) {

return this.data.unshift(element);

}

// 出棧

Stack.prototype.out = function(){

return this.data.shift();

}

數據結構(隊列)

隊列是一種特殊的線性表，特殊之處在于它只允許在表的前端(front)進行刪除操作，而在表的后端(rear)進行插入操作，和棧一樣，隊列是一種操作受限制的線性表。進行插入操作的端稱為隊尾，進行刪除操作的端稱為隊頭。

代碼實現

和棧一樣，我們可以把數組的任意一頭作為隊列的 前端；

把數組的頭部當作前端，那么數組的末尾就是后端，也就是刪除元素得在數組的頭部，而新增元素就在數組的尾部

// 使用 shift 和 push 實現

function Queue(initData){

this.data = initData || [];

}

// 添加

Queue.prototype.in = function (element) {

return this.data.pop(element);

}

// 刪除

Queue.prototype.out = function(){

return this.data.shift();

}

總結

push,pop,unshift,shift這4個函數是數組提供的對數組內元素進行新增和刪除；在日常開發中組合使用能夠幫助我們快速實現很多功能，在結合vue和angular這些框架使用的時候，需要注意他們的雙向數據綁定對數組的限制

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js数组再倒数第二个添加元素_归纳JS中数组的使用(一)元素新增和删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。