🥒js数组常用方法3之splice、slice和split方法

900 阅读2分钟

这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战


写在前面:

  • 个人前端网站:zhangqiang.hk.cn
  • 欢迎加入博主的前端学习qq交流群::706947563专注前端开发,共同学习进步

前期相关文章:

0 前言

英语不太好,splice(拼接)、slice(切)、split(分割)这几个方法总是记不熟,今天特地自己总结一下,这样以后过来翻自己的博客就行了,省的每次都要百度.. 然后再采用熟能生巧法来记下它们。

1 核心

  • slice:截取功能

    • 截取数组为主,也可以截取字符串
    • 返回新的数组,包含截取的元素
    • 不改变原数组
  • splice():数组增删查改

    • 只能对数组增删查改,字符串无效
    • 返回新的数组,内容是被删除的元素
    • 会改变原数组
  • split:字符串 => 数组

    • 字符串的方法,不是数组的方法。
    • 返回一个字符串数组。

2 实例详解

2.1 slice 数组截取

  • 返回一个新的数组对象,且是浅拷贝的。
  • 原数组不变。
const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.slice(2));
console.log(arr.slice(2, 4));
console.log(arr.slice(1, 5));
console.log(arr.slice(-2));
console.log(arr.slice(2, -1));

控制台输出为:

image.png

2.2 splice 数组增删改查

  • 在给定位置删除任意个元素,并可选择插入任意个元素,以数组形式返回被删除的元素。
  • 改变原数组。
    let arr1 = ['a', 'b', 'c', 'd', 'e'];
    let arr2 = ['a', 'b', 'c', 'd', 'e'];
    let arr3 = ['a', 'b', 'c', 'd', 'e'];
    let arr4 = ['a', 'b', 'c', 'd', 'e'];
    let arr5 = ['a', 'b', 'c', 'd', 'e'];
    let arr6 = ['a', 'b', 'c', 'd', 'e'];
​
    arr1.splice(1); // 在数组下标为1的位置开始,删除包括自身与其后面所有元素
    arr2.splice(-2); // 删除最后两个元素。
    arr3.splice(1, 3); //从数组下标为1的位置开始删除元素,一共删除三个元素
    arr4.splice(1, 0, 'yoyo'); // 纯增加。在数组下标为1的位置插入一个'yoyo'字符串
    arr5.splice(1, 0, 'シャブアシャブアシャブ', 'パクパクパクパク') // 纯增加。增加多个。
    arr6.splice(-3, 2, 'Yeah');// 更改。 从最后数第三个位置开始,网游删除包括其自身2个元素,然后插入'Yeah'
​
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);
    console.log(arr5);
    console.log(arr6);

控制台输出为:

image-20211119161527104

2.3 split

  • split()是字符串的方法,不是数组的方法。其意思为通过指定分隔符分割字符串返回一个数组
const str = 'a$b$c$d';
console.log(str.split('$'));

控制台输出为:

image-20211119162002046


参考链接:

juejin.cn/post/702508…

developer.mozilla.org/zh-CN/docs/…

参考链接里面还有个深浅拷贝,这里可以参考:www.cnblogs.com/echolun/p/7…


😏 彩蛋

  • 再分享一个好玩的东西

将鼠标悬停停止我主页的头像上面,有好玩的事情发生哦~

image.png