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

lookSomeone 发布于2019-08-23 15:14 / 339人阅读

摘要：原来，它的替换功能实际上是通过删除和添加来完成的。在只有一个参数的情况下，方法返回从该参数指定位置开始到当前数组末尾的所有项。它并不改变原数组。吐槽我曾经一直困惑数组中的删除方法，当知道删除这项伟大的任务竟然交给了，我心里是失望的。

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

谈起这两个方法，新手不蒙，我是不信！正如吐槽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

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

海外云主机 GPU服务器 slice和splice的区别 javascript中的二维数组 javascript数组方法 slice方法

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

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

吐槽Javascript系列一：slice()、substr()和 substring()

摘要：点评我们来看这样一个例子给定一个字符串，要求去掉最后一个逗号。大胆假想一下，如果把踢出去，就保留和，你还会懵吗或者更大胆一点，把和都踢出去，就只保留，我反正感觉整个世界都清静了系列链接吐槽系列一和吐槽系列二数组中的和方法吐槽系列三数组的陷阱实不相瞒，对于字符串中的slice()、substr()和 substring()这三个方法，我自己很长一段时间都是理不清的，每次用都得查一下文档...

waltr 2019-08-23 15:10 评论0 收藏0
Javascript数组系列五之增删改和强大的 splice()

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

chavesgu 2019-08-23 12:01 评论0 收藏0
吐槽Javascript系列三：数组的陷阱

摘要：虽然本系列是吐槽，但并不是为了黑，而是揭露它的一些特性怪癖，只有更好的了解它，才能更好的使用它。本篇主要介绍数组中常见的隐患点。虽然本系列是吐槽，但并不是为了黑Javascript，而是揭露它的一些特性（怪癖），只有更好的了解它，才能更好的使用它。本篇主要介绍数组中常见的隐患点。龟速的map 在数组中，map是一个功能很强大的方法，先来见识一下： let arr = [5, 2, ...

U2FsdGVkX1x 2019-08-23 15:24 评论0 收藏0
Day07 - Array Cardio 中文指南二

摘要：中文指南二作者简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。第七天的练习是接着之前中文指南一的练习，继续熟练数组的方法，依旧没有页面显示效果，所以请打开浏览器的面板进行调试运行。 Day07 - Array Cardio 中文指南二作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个...

Forest10 2019-08-20 18:18 评论0 收藏0