新增元素
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]; //1arr = arr.concat(4,5); //2Array.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); //#1let 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);// 2console.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这些框架使用的时候，需要注意他们的双向数据绑定对数组的限制