归纳JS中数组的使用(一)元素新增和删除

新增元素

js中给数组新增元素主要通过2个方法 push 和 unshift

Array.prototype.push

功能概述

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(该方法修改原有数组)。

语法

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

关注点

1. 新增的元素出现在数组的末尾
2. 可以一次性添加多个元素
3. 返回值是数组的最新长度

代码示例

简单使用

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)

关注点

1. 新增单个或者多个元素到数组的头部
2. 如果是多个元素，会以块的方式添加到数组头部，也就是说会保持参数的原有顺序
3. 函数返回新数组的长度

代码示例

简单使用

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

关注点

1. 从元素末尾删除
2. 返回被删除的元素
3. 如果数组是空，返回的元素是 undefined

代码示例

let arr = [1,2];
let delEle = arr.pop();
console.log(delEle);// 2
console.log(arr); // [1];

Array.prototype.shift

功能概述

shift() 方法从数组中删除第一个元素，并返回该元素的值(此方法更改数组的长度)。

语法

arr.shift()

关注点

1. 从数组头部开始删除元素
2. 返回删除元素的本身
3. 如果数组是空，返回的元素是 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这些框架使用的时候，需要注意他们的双向数据绑定对数组的限制