JavaScript数组的新增、修改、删除操作与栈和队列的实现

简介

  JavaScript数组较一些强类型语言来说更为灵活，数组中可存放不同类型的元素，甚至是undefined等类型。下面我们就来介绍一些JavaScript数组的各类操作。

新增、修改操作

  JavaScript数组可通过以下两个方式新建并赋初始值，且这两种方式没有区别。

let myArray = [4,1,2,'ffff',undefined];
console.log(myArray); // 打印结果 [ 4, 1, 2, 'ffff', undefined ]
let myArray2 = new Array(4,1,2,'ffff',undefined);
console.log(myArray2);  //  打印结果 [ 4, 1, 2, 'ffff', undefined ]

concat（）方法添加数组

  concat（）方法并不会改变原数组，而是会返回一个新数组，所以我们要用一个变量来接收concat（）的返回值。

let myArray = [4,1,2,'ffff',undefined];
let result1 = myArray.concat(5);
console.log(result1); //打印结果为  [ 4, 1, 2, 'ffff', undefined, 5 ]

let result2 = myArray.concat(['ant']);
console.log(result2); //打印结果为 [ 4, 1, 2, 'ffff', undefined, 'ant' ]

let newArray = ['tencent','ali'];
let result3 = myArray.concat(newArray);
console.log(result3); //打印结果为 [ 4, 1, 2, 'ffff', undefined, 'tencent', 'ali' ]

从上述结果我们可以得出两个结论：
  1.concat（）方法不会改变原数组。
  2.concat（）方法的参数可以传入单一元素，数组元素，或者一个数组变量。
如果我们想改变原数组，使用了

myArray = myArray.concat( [100,200] )

这样的语句，无疑会造成内存的浪费，此时使用splice（）方法较为恰当。

splice()方法 修改数组

  splice（）方法用于对数组进行操作，其既可以新增、修改数组，也可以删除数组

• splice（）方法有多个参数，其中第一个参数指定要添加元素的位置，第二个参数指定要删除多少个元素，而后面的参数均为要添加的元素。如：

let myArray = [4,1,2,'ffff',undefined];
myArray.splice(3,0,'新元素');
console.log(myArray);   //  打印结果 [ 4, 1, 2, '新元素', 'ffff', undefined ]

  这里有一点要特别注意，第一个参数为3，则代表要在索引为3的位置新增元素，原数组中索引为3的元素会被后移。
  第二个参数为0，则代表不会对原数组数据进行删除，如果我们把第二个参数变成2，则它会先删除原数组中从3开始的连续两个索引位置，即 ‘ffff’，undefined。然后再把要添加的元素新增进去。测试：

let myArray = [4,1,2,'ffff',undefined];
myArray.splice(3,2,'新元素');
console.log(myArray);   //  打印结果 [ 4, 1, 2, '新元素' ]

• 如果数组为稀疏数组，let myArray = [4,1,2,'ffff', ,undefined];，此时数组长度为6，而数组只有五个元素，索引为4的位置是一个缺失的元素，我们此时运行与上方一样的代码，打印出来：

let myArray = [4,1,2,'ffff',    ,undefined];
myArray.splice(3,2,'新元素');
console.log(myArray);   //  打印结果 [ 4, 1, 2, '新元素', undefined ]

  我们可以看到，第二个参数为2时删除了原数组索引为3和4的位置，所以splice（）方法是按照数组连续的索引进行删除，无论该位置上有没有元素。

• splice方法会直接修改原数组，并且有返回值。它的返回值为已删除项的数组

let myArray = [4,1,2,'ffff',    ,undefined];
let result = myArray.splice(3,2,'新元素');
console.log(result);   //  打印结果 [ 'ffff', <1 empty item> ]

删除操作

delete删除数组

  数组的删除操作可以使用splice（）来实现，并且推荐使用splice（）。因为delete运算符删除元素后，不会修改原数组的索引，会形成一个稀疏数组。

let myArray = [4,1,2,'ffff',undefined];
delete  myArray[2]
console.log(myArray) //打印结果为 [ 4, 1, <1 empty item>, 'ffff', undefined ]

从上面结果中，我们可以看出delete仅仅删除了数组中该位置的元素，但是未改变数组的长度，造成了数组元素的缺失。

截取数组

slice（）方法截取数组

• slice（）方法不会改变原数组！
• slice（）方法可以接收两个参数，第一个参数为开始截取元素的索引，第二个参数为结束截取元素的索引（截取结果中不包含第二个参数指向的元素）。相当于一个左闭右开区间。例：

let myArray = [4,1,2,'ffff',undefined];
let result = myArray.slice(1,3);
console.log(result); //打印结果为 [ 1, 2 ]

使用pop（）、push（）实现栈操作。

  栈是一个先进后出的数据结构，在JavaScript数组中，我们可以使用push（）和pop（）方法很轻松的实现类似栈的操作。

1. push（）为进栈操作。它会把元素放进数组中最后一个位置，并且返回数组的新的长度。

let myArray = [1,2,3,4,5];
let result = myArray.push(6);
console.log("myArray为",myArray,"result为",result);
 //打印结果为 myArray为 [ 1, 2, 3, 4, 5, 6 ] result为 6

如果我们push进去的是一个数组，则push（）操作会把新元素原样放进数组中，如：

let myArray = [1,2,3,4,5];
let result = myArray.push([6,7]);
console.log("myArray为",myArray,"result为",result);
 //打印结果为 myArray为 [ 1, 2, 3, 4, 5, [ 6, 7 ] ] result为 6

如果我们想要把新数组的元素一一放进去原数组中，则可以使用展开操作符 … ，例：

let myArray = [1,2,3,4,5];
let result = myArray.push(...[6,7]);
console.log("myArray为",myArray,"result为",result); 
//打印结果为 myArray为 [1, 2, 3, 4,5, 6, 7] result为 7

2. pop（）方法为出栈操作，它会删除数组中最后一个索引位置的元素，并返回这个元素如果最后一个索引位置上元素缺失，则会返回基本类型undefined。例：

let myArray = [1,2,3,4,5];
let result = myArray.pop();
console.log("myArray为",myArray,"result为",result);
//打印结果为 myArray为 [ 1, 2, 3, 4 ] result为 5

使用unshift（）、shift（）方法实现栈操作

shift（）、unshift（）方法与pop（）、push（）方法类似，只不过这两种方法是在数组起始位置进行进栈、出栈操作。因为在数组头部插入、删除数据，会导致其后数组元素的索引改变，所以尽量使用pop（）和push（）方法来实现栈操作。

1. unshift（）入栈

let myArray = [1,2,3,4,5];
let result = myArray.unshift(0);
console.log("myArray为",myArray,"result为",result);
//打印结果为 myArray为 [ 0, 1, 2, 3, 4, 5 ] result为 6

2. shift（）出栈

let myArray = [1,2,3,4,5];
let result = myArray.shift();
console.log("myArray为",myArray,"result为",result);
//打印结果为 myArray为 [ 2, 3, 4, 5 ] result为 1

使用push（）、shift（）实现队列操作

  队列的特性是先进先出，所以我们可以用push（）在队列尾部添加数据，用shirt（）在队列的头部删除数据，以此来实现先进先出的效果。

let myArray = [1,2,3,4,5];
// 插入队列尾部
myArray.push(6);
// 取出头部元素
let head = myArray.shift()
console.log(head,"myArray",myArray)
//打印结果为 1 myArray [ 2, 3, 4, 5, 6 ]