新增元素

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这些框架使用的时候，需要注意他们的双向数据绑定对数组的限制