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

learning 发布于2019-08-23 18:31 / 2110人阅读

摘要：为什么炒冷饭了解这些方法就可以在很方业务场景使用，了解他们的用法也会带来很大的遍历这里我总结的是数组拼接法该方法基于当前数组创建一个新的数组副本，然后将参数添入该数组副本中的末尾，如果参数中包含一个或多个数组，该方法会将数组中的每一项都添加

为什么炒冷饭：

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

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 的文章比较基础细致，欢迎有问题指出。

GPU云服务器云服务器 slice和splice的区别数组操作方法 javascript数组方法 js数组操作方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105374.html

Javascript数组系列五之增删改和强大的 splice()

摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。生命不息，更新不止！今天我们就不那么多废话了，直接干货开始。我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 pus...

chavesgu 2019-08-23 12:01 评论0 收藏0
《javascript高级程序设计》笔记：数组方法

摘要：如果传递给方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。为了实现排序，方法会调用每个数组项的转型方法，然后比较得到的字符串，以确定如何排序。将数组转换成字符串 join()能够将数组用指定的字符分割成字符串方法用法变量的值表达式的值假设 arr = [1,2,3] ...

Aomine 2019-08-22 10:53 评论0 收藏0
JavaScript学习笔记之数组（二）

摘要：方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。，这两个方法，返回一个布尔值，表示判断数组成员是否符合某种条件。该函数接受三个参数当前成员当前位置和整个数组，然后返回一个布尔值。数组基础篇二数组对象 1.声明数组的方法 Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。 var arr =new A...

YPHP 2019-08-26 11:52 评论0 收藏0
读Zepto源码之集合操作

摘要：调用来获取符合条件的集合元素，这在上篇文章读源码之神奇的已经有详细的论述。然后调用方法来合并两个集合，用内部方法来过滤掉重复的项，方法在读源码之内部方法已经有论述。最后也是返回一个集合。接下来几个篇章，都会解读 zepto 中的跟 dom 相关的方法，也即源码 $.fn 对象中的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码...

pepperwang 2019-08-20 16:43 评论0 收藏0
javascript引用类型之Array 类型

摘要：如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。数组在javascript中是很常用的数据类型创建数组的几种方式使用new操作符来创建数组 var arr = new Array() // []创建了一个长度为0的空数组 var arr1 = new Array(2) // [empty × 2]创建了一个长度...

lsxiao 2019-08-23 14:25 评论0 收藏0