当前位置: 首页 > news >正文

吐槽Javascript系列二:数组中的splice和slice方法

战斗英雄你当,漂亮媳妇儿你娶,怎么啥好事都被你给占了——《激情燃烧的岁月》

谈起这两个方法,新手不蒙,我是不信!正如吐槽Javascript系列一:slice()、substr()和 substring()中提到的,字符串中也有一个slice方法,极易混淆!
但其实呢,在数组中,他们还是很好区分的。

splice

splice,译为拼接,它的功能非常强大,能够删除,新增,修改原数组,功能三合一哦,我们先来看它的删除功能:

// 删除
let colors = ['red', 'green', 'blue']
let removed = colors.splice(0, 1)
console.log(removed) // [ 'red' ]
console.log(colors) // [ 'green', 'blue' ]

上面代码中,splice接收了二个参数,第一个参数表示要删除的第一项的位置,第二个参数表示要删除的项数。
我们再来看看它的添加功能:

// 添加
let colors = ['red', 'green', 'blue']
let removed = colors.splice(1, 0, 'yellow', 'orange')
console.log(removed) // []
console.log(colors) // [ 'red', 'yellow', 'orange', 'green', 'blue' ]

上面代码中,splice接收了四个参数,第一个参数表示要删除的第一项的位置,第二个参数表示要删除的项数,从第三个参数开始,表示要添加的项。
我们再来看看它的替换功能:

// 替换
let colors = ['red', 'green', 'blue', 'orange']
let removed = colors.splice(2, 1, 'yellow', )
console.log(removed) // [ 'blue' ]
console.log(colors) // [ 'red', 'green', 'yellow', 'orange' ]

上面代码中,splice接收了三个参数,第一个参数表示要删除的第一项的位置,第二个参数表示要删除的项数,第三个参数表示要添加的项。
原来,它的替换功能实际上是通过删除和添加来完成的。

说完splice,接下来说slice。

slice

slice,译为切开,我们来看例子:

let arr = ['red', 'green', 'blue', 'yellow']
let arr1 = arr.slice(1)
let arr2 = arr.slice(1, 2)

console.log(arr1) // [ 'green', 'blue', 'yellow' ]
console.log(arr2) // [ 'green' ]
console.log(arr) // [ 'red', 'green', 'blue', 'yellow' ]

slice接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。它并不改变原数组。

吐槽splice

我曾经一直困惑数组中的删除方法,当知道删除这项伟大的任务竟然交给了splice,我心里是失望的。
不应该是del或者remove才像话吗?删除的功能它占了也就算了,添加的功能它也占了!它既能添加,也能删除,还能拼接,那它为什么没有七十二变?

吐槽slice

一个西瓜,被菜刀切成几块,这西瓜还是原来的西瓜吗?那一个数组,被你切了几下,那数组还是原来的数组吗?

相关文章:

  • centos7系统安装完成初始化
  • tkinter内嵌Matplotlib系列(一)之解读官网教材
  • SpringMvc4.0.0+Spring4.0.0+Mybatis3.2.7整合开发
  • js-时间戳转字符串
  • PYTHON2.day02
  • POJ3635 Full Tank
  • 家庭记事本开发进度1
  • Winodws 10 美化与调优
  • matlab-基础 快捷键 命令行窗口 输入多行命令
  • Redis在Web项目中的应用与实践
  • TLS 1.3 Handshake Protocol (下)
  • 前端_面试
  • 67 亿美金搞个图,创建知识图谱的成本有多高你知道吗?
  • 重学前端-css选择器
  • 对象引论
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • javascript从右向左截取指定位数字符的3种方法
  • Java程序员幽默爆笑锦集
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • Sass Day-01
  • storm drpc实例
  • Web设计流程优化:网页效果图设计新思路
  • 解析 Webpack中import、require、按需加载的执行过程
  • 理清楚Vue的结构
  • 强力优化Rancher k8s中国区的使用体验
  • 十年未变!安全,谁之责?(下)
  • 系统认识JavaScript正则表达式
  • 译有关态射的一切
  • puppet连载22:define用法
  • 仓管云——企业云erp功能有哪些?
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • # Java NIO(一)FileChannel
  • #我与Java虚拟机的故事#连载03:面试过的百度,滴滴,快手都问了这些问题
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (09)Hive——CTE 公共表达式
  • (1)(1.13) SiK无线电高级配置(五)
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (BFS)hdoj2377-Bus Pass
  • (二)斐波那契Fabonacci函数
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (算法)前K大的和
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (转)scrum常见工具列表
  • .NET Standard 的管理策略
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET/C# 项目如何优雅地设置条件编译符号?
  • .NET开源快速、强大、免费的电子表格组件
  • .NET下ASPX编程的几个小问题
  • @Import注解详解
  • [ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务