新增元素

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

Array.prototype.push

功能概述

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

語法

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

關(guān)注點

新增的元素出現(xiàn)在數(shù)組的末尾

可以一次性添加多個元素

返回值是數(shù)組的最新長度

代碼示例

簡單使用

let arr = [1,2];

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

console.log(newLength)// newLength: 4

對比通過腳本添加和ES6析構(gòu)的方式添加性能對比

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')

輸出的結(jié)果

push: 470.538818359375ms

add: 454.7177734375ms

es6: 2625.546142578125ms

結(jié)論

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

let arr = [1,2];

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

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

Array.prototype.unshift

功能概述

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

語法

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

關(guān)注點

新增單個或者多個元素到數(shù)組的頭部

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

函數(shù)返回新數(shù)組的長度

代碼示例

簡單使用

let arr = [1,2];

let newLength = arr.unshift(10);

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

區(qū)分一次添加多個元素和循環(huán)添加

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

第一處的輸出和第二處的輸出結(jié)果是不一樣

刪除元素

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

Array.prototype.pop

功能概述

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

語法

arr.pop()

關(guān)注點

從元素末尾刪除

返回被刪除的元素

如果數(shù)組是空，返回的元素是 undefined

代碼示例

let arr = [1,2];

let delEle = arr.pop();

console.log(delEle);// 2

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

Array.prototype.shift

功能概述

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

語法

arr.shift()

關(guān)注點

從數(shù)組頭部開始刪除元素

返回刪除元素的本身

如果數(shù)組是空，返回的元素是 undefined

實現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的棧和隊列

數(shù)據(jù)結(jié)構(gòu)(棧)

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

代碼實現(xiàn)

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

從數(shù)組末尾入棧

function Stack(initData){

this.data = initData || [];

}

// 入棧

Stack.prototype.in = function (element) {

return this.data.push(element);

}

// 出棧

Stack.prototype.out = function(){

return this.data.pop();

}

從數(shù)組頭部入棧

function Stack(initData){

this.data = initData || [];

}

// 入棧

Stack.prototype.in = function (element) {

return this.data.unshift(element);

}

// 出棧

Stack.prototype.out = function(){

return this.data.shift();

}

數(shù)據(jù)結(jié)構(gòu)(隊列)

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

代碼實現(xiàn)

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

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

// 使用 shift 和 push 實現(xiàn)

function Queue(initData){

this.data = initData || [];

}

// 添加

Queue.prototype.in = function (element) {

return this.data.pop(element);

}

// 刪除

Queue.prototype.out = function(){

return this.data.shift();

}

總結(jié)

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。