JavaScript之数组操做方法concat( )、slice( )、splice( )

为何炒冷饭：

了解这些方法就能够在很方业务场景使用，了解他们的用法也会带来很大的遍历

concat( ) 这里我总结的是 数组拼接法

该方法基于当前数组建立一个 新的数组（副本） ，而后将参数添入该数组副本中的末尾，若是参数中包含一个或多个数组，该方法会将数组中的每一项都添加到结果中，没有参数则只简单建立一个新的数组副本。

let arr = [1, 2];

let newArr = arr.concat('3', 4);

let otherArr = arr.concat('3', [4, 5, '6'], {name: 'Phoenix'});

console.log(newArr);  // [ 1, 2, '3', 4 ]

console.log(otherArr);  // [ 1, 2, '3', 4, 5, '6', { name: 'Phoenix' } ]

如上代码concat()中的参数能够是多种多样的（Number，Array，Object，String...）等；

细心点看能够发现细节，我使用同一数组 arr 调用了 concat() 方法两次；

若是你对 concat() 方法并不了解 那么你肯恩对它给你返回对结果并不理想；

你可能认为最终结果是 [ 1, 2, '3', 4, '3', 4, 5, '6', { name: 'Phoenix' } ]；

这里就要追溯到 该方法会建立一个新的数组副本，也就是说concat()不会更改原来的数组；

---

slice( ) 这里我总结的是 数组截取法

该方法呢，接受一或两个参数；

若是只传递一个参数就是指定开始截取数组的位置一直到数组末尾，而后 返回截取出来的值

说到这，必须提醒一下，slice() 方法不会操做原数组，不会操做原数组，不会操做愿数组；

那么继续说，若是传递两个参数的时候，第一个参数仍是指定截取的开始位置，第二个参数则是结束位置（不包括结束位置的元素）；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(1);

let otherArr = arr.slice(1, 3);

console.log(newArr); // [ 2, 3, 4, 5 ]

console.log(otherArr);  // [ 2, 3 ]

console.log(arr); // [ 1, 2, 3, 4, 5 ]

上面代码能够看出 newArr 是从 arr 数组中 index 为 1 的位置开始截取到末尾；

otherArr 是从 arr 数组中 index 为 1 开始到 index为 3（arr[3]结果是4），因此最终返回[2, 3]，该结果并不包括 4；

而最后我打印了原来的数组 arr 发现和原来并无任何变化；

脑洞大些的同窗必定想到传递 负值 会有什么结果；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(-2);

console.log(newArr); // [ 4, 5 ]

从上面能够看出 当参数为 负值 该方法会截取该数组最后 2 个元素；

好像和 Array.pop() 很像，可是区别在于 前者返回一个数组，且不会改变原数组，然后者是返回单个元素，并且会改变原有元素；

---

接下来就是相对比较好用的且经常使用的splice()；

该方法接受三个参数（还能够更多，等下细说）；

第一个参数是下标值，将要操做当前数组内的第n项开始；

第二个参数是将要删除的n个项；

第三个参数则是单个或多个将要插入的元素；

下面开始玩吧：

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1);

console.log(newArr);  // [ 2, 3, 4, 5 ]

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

能够看到，我只传递一个参数进去，和slice()方法没有区别，细节就在于我为何此次没有一下调用该方法好几回，就是由于，这个方法强大到，能够更改原来的数组；

能够看到 我打印的 arr 数组中只剩下一个元素 1 了；

此次我再传递一个 负值 进去；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(-1);

console.log(newArr);  // [ 5 ]

console.log(arr);  // [ 1, 2, 3, 4 ]

和想的同样，只不过该方法更改了原数组；

那么传递 2 个参数看看；

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1, 3);

console.log(newArr);  // [ 2, 3, 4 ]

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

比较直观的看出从 数组中的1开始截取，截取3个元素出来，那么这个结果没有什么错了，原数组也是想的同样；

再看三个参数:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1, 3, '5', {name: 'Phoenix'}, [1, 2]);

console.log(newArr);  // [ 2, 3, 4 ]

console.log(arr);  // [ 1, 5, { name: 'Phoenix' }, [ 1, 2 ], 5 ]

newArr仍是老样子，截取的和以前的同样，可是后面我在以前的基础上又加了3个参数；

也就是说该方法把以前删除掉的元素换成了这些（'5', {name: 'Phoenix'}, [1, 2]）；

还一点就是 它也没有像 concat() 同样把全部参数展开再添加进去，而是原封不动的添加进来；

以上就是这些内容，但愿对你学习 JavaScript 有所帮助，本人近期也在写一些关于 TypeScript 的文章比较基础细致，欢迎有问题指出。