🚀看完这个,终于分清楚splice、slice和split了🎉

11,814

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。


说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)

作者:小只前端攻城狮、 主页:小只前端攻城狮的主页、 来源:掘金

GitHub:P-J27、 CSDN:PJ想做前端攻城狮

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


前言

初学js的时候,对slice,splice,split这个三个函数傻傻分不清楚。我想很多人也是一样吧,我再来重新整理一下。

核心

  • slice:截取功能
    • 截取数组为主,也可以截取字符串
    • 返回新的数组,包含截取的元素
    • 不改变原数组
  • splice():数组增删查改
    • 只能对数组增删查改,字符串无效
    • 返回新的数组,内容是被删除的元素
    • 会改变原数组
  • split:字符串 => 数组
    • 字符串的方法,不是数组的方法。
    • 返回一个字符串数组。
  • join:数组 => 字符串

slice()

核心

  • 从数组中截取任意个元素,返回结果为新的数组
  • 不改变原数组

语法

新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); 
//注意:包含开始索引,不包含结束索引,即[a,b)

举例:

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.slice(); // 无参数时,截取所有的元素。
arr.slice(2); // 从第二个值开始提取,直到末尾
arr.slice(-2); // 提取最后两个元素 负数会将其与长度相加,-2+6=4
arr.slice(2, 4); // 提取从第二个到第四个之间的元素(不包括第四个元素)
arr.slice(4, 2); // 空

扩展

以前会用 slice()将伪数组,转化为真数组。

// 方式1
array = Array.prototype.slice.call(arr);
// 方式2
array = [].slice.call(arr);

ES6 版

array = Array.from(arr);

splice()

核心

  • 从数组中删除任意个(可以是负的即增加)元素。

  • 返回结果为被删除元素组成的新数组

  • 该方法会改变原数组,会将指定元素从原数组中删除;

语法:

新数组 = 原数组.splice(起始索引index, 需要删除的个数);

新数组 = 原数组.splice(起始索引index, 需要删除的个数, 新的元素1, 新的元素2...);

分析:第三个及之后的参数是需要增加的元素。插入从起始索引的前一个位置开始。可以理解成:删除了哪些元素,就在所在位置补充新的内容。

var arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
arr1.splice(1); //从第index为1的位置开始,删除元素
arr2.splice(-2); //删除最后两个元素,和slice同样的思想。
arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
// 增加系列
arr4.splice(1,0,'g','h') //纯增加情况
//变更的情况就是 先删除再增加,即替换
arr4.splice(1, 3, 'js', 'vue');//删除+增加 == 更改

split()

核心

  • split()是字符串的方法,不是数组的方法。

语法:

新的数组 = str.split(分隔符);

分析:通过指定的分隔符可以为空字符串''),将一个字符串拆分成一个数组。不会改变原字符串。

join()

核心

  • 将数组转换为字符串,返回转换后的字符串

  • 不会改变原来的数组

  • join()方法可以指定一个字符串可以为空字符串)作为参数,其将会成为数组中元素的连接符

  • 如果不指定连接符,则默认使用 , 作为连接符,此时和 toString()的效果是一致的

语法:

新的字符串 = 原数组.join(参数); // 参数选填--连接符
var arr = ['a', 'b', 'c'];
arr.join(); // 这里没有指定连接符,所以默认使用 , 作为连接符
arr.join('-'); // 使用指定的字符串作为连接符

感谢阅读,希望能对你有所帮助,文章若有错误或者侵权,可以在评论区留言或在我的主页添加公众号联系我。

写作不易,如果觉得不错,可以「点赞」+「评论」 谢谢支持❤

「欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,抽奖详情见活动文章」。