JavaScript 数组中 Slice 和 Splice 的区别（含视频）
共 3023字，需浏览 7分钟
·
2020-08-22 12:38
我最近在写一些简明的 Web 前端开发教程。这篇文章的标题或许应该是“怎么才能不混淆 JavaScript 数组中的 Slice 方法和 Splice 方法”，因为我自己总是记不住这两者的区别。
希望这个解释可以帮我自己理解，也帮到你：
S (p) lice = Slice + (p) => Slice + in (p) lace
（点击小程序查看 S1ng S1ng 的讲解视频）
Array.prototype.slice()
Array.prototype.slice() 是用于提取一个数组，从 start 元素到 end 元素（不包含 end 元素）。
其实可以从这个方法的名字看出来，它是用于从一个 JavaScript 数组中提取元素。不过和切蛋糕不同，从数组中提取元素不会影响原数组，原数组根本就不会变化（像是切不完的蛋糕！）
arr.slice(start, [end])
要点：
1、返回新数组，而原数组保持不变
2、如果没有指定 end 元素，那么切分的数组包含从 start 到数组结束的所有元素
3、如果 start 元素是负数，那就从数组尾部算起，-1 是指最后一个元素
const infiniteCake = ['?','?','?','?','?','?']
let myPieceOfCake = infiniteCake.slice(0,1) // ['?']
let yourDoublePieceOfCake = infiniteCake.slice(0,2) // (2) ["?", "?"]
console.log(infiniteCake) //['?','?','?','?','?','?']
可以看到，原数组 inifinteCake 保持不变。
Array.prototype.splice()
Splice 方法为原数组添加或者删除元素，返回被删除的元素，也就是说它会改变原数组。
这是真正意义上的“切蛋糕”。
arr.splice(start, [deleteCount, itemToInsert1, itemToInsert2, ...])
要点：
1、返回一个数组，包含被删除的元素
2、如果 start 元素是负数，那就从数组尾部算起，-1 是指最后一个元素
3、如果没有指定 deleteCount，则删除至原数组尾部
4、如果没有指定 itemToInsert1，则不向原数组添加元素
const cake = ['?','?','?','?','?','?'];
let myPieceOfCake = cake.splice(0, 1) // ["?"]
console.log(cake) // (5) ["?", "?", "?", "?", "?"]
let yourDoublePieceOfCake = cake.splice(0,2) //(2) ["?", "?"]
console.log(cake) //(3) ["?", "?", "?"]
如上， cake 数组被修改了，元素减少了。
代码示例
const myArray = [1,2,3,4,5,6,7]
console.log(myArray.slice(0)) // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(0, 1)) // [ 1 ]
console.log(myArray.slice(1)) // [ 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(5)) // [ 6, 7 ]
console.log(myArray.slice(-1)) // [ 7 ]
console.log(myArray) // [ 1, 2, 3, 4, 5, 6, 7 ]
const secondArray = [10, 20, 30, 40, 50]
console.log(secondArray.splice(0, 1)) // [ 10 ] : deletes 1 element starting at index 0
console.log(secondArray.splice(-2, 1)) // [ 40 ] : deletes 1 element starting at index end-2
console.log(secondArray) // [ 20, 30, 50 ]
console.log(secondArray.splice(0)) // [ 20, 30, 50 ] : deletes all elements starting at index 0
console.log(secondArray) // []
console.log(secondArray.splice(2, 0, 60, 70)) // [] : deletes 0 elements starting at index 2 (doesn't exist so defaults to 0) and then inserts 60, 70
console.log(secondArray) // [60, 70]
小结
如果需要改变原数组，或者为原数组增加元素，用 splice。
如果只是删除元素，而不改变原数组，用 slice。
原文链接：https://www.freecodecamp.org/news/javascript-array-slice-vs-splice-whats-the-difference/
作者：Shruti Kapoor
译者：Chengjun.L
分享人：
止戈，FCC 校友，重度拖延症患者伴有间歇性踌躇满志，半罐子专家，半原教旨主义者。字符串处理研究三级，CURD 二级，普通话三甲。
主题《从“本来无一物”到“山中百花开”》，主要内容：从零开始写一个简单的页面，并展示分享者如何解决问题，从入门到放弃（划掉）
书香墨剑（余琦），Web 全栈开发工程师，FCC 成都社区核心成员，全民编程倡导者，热衷于 K12 阶段编程教育。
主题《用 HTML/CSS 创建七夕贺卡》
伍裕平，5 年全栈（Web + PHP/Java）开发经验，freeCodeCamp Top Contributor，比较熟悉 jQuery、Dojo 和 Semantic UI，了解 Vue、Element 和 Bootstrap，对计算机网络和操作系统底层也熟悉，写过 C/C++ 和汇编。
主题《对 HTML、CSS、JavaScript、jQuery、Vue、计算机网络等 Web 开发相关问题或者编程学习和工作相关问题的答疑》
扫码关注公众号，订阅更多精彩内容。
给个[在看]，是对达达最大的支持！
