JavaScript 數(shù)組中 Slice 和 Splice 的區(qū)別（含視頻）
我最近在寫一些簡明的 Web 前端開發(fā)教程。這篇文章的標(biāo)題或許應(yīng)該是“怎么才能不混淆 JavaScript 數(shù)組中的 Slice 方法和 Splice 方法”，因?yàn)槲易约嚎偸怯洸蛔∵@兩者的區(qū)別。
希望這個解釋可以幫我自己理解，也幫到你：
S?(p)?lice?=?Slice?+?(p)?=>?Slice?+?in?(p)?lace
（點(diǎn)擊小程序查看?S1ng S1ng 的講解視頻）
Array.prototype.slice()
Array.prototype.slice() 是用于提取一個數(shù)組，從 start ?元素到 ?end ?元素（不包含 ?end ?元素）。
其實(shí)可以從這個方法的名字看出來，它是用于從一個 JavaScript 數(shù)組中提取元素。不過和切蛋糕不同，從數(shù)組中提取元素不會影響原數(shù)組，原數(shù)組根本就不會變化（像是切不完的蛋糕！）
arr.slice(start,?[end])
要點(diǎn)：
1、返回新數(shù)組，而原數(shù)組保持不變
2、如果沒有指定 ?end ?元素，那么切分的數(shù)組包含從 ?start ?到數(shù)組結(jié)束的所有元素
3、如果 start ?元素是負(fù)數(shù)，那就從數(shù)組尾部算起，-1 是指最后一個元素
const?infiniteCake?=?['?','?','?','?','?','?']
let?myPieceOfCake?=?infiniteCake.slice(0,1)?//?['?']
let?yourDoublePieceOfCake?=?infiniteCake.slice(0,2)?//?(2)?["?",?"?"]
console.log(infiniteCake)?//['?','?','?','?','?','?']
可以看到，原數(shù)組 inifinteCake ?保持不變。
Array.prototype.splice()
Splice 方法為原數(shù)組添加或者刪除元素，返回被刪除的元素，也就是說它會改變原數(shù)組。
這是真正意義上的“切蛋糕”。
arr.splice(start,?[deleteCount,?itemToInsert1,?itemToInsert2,?...])
要點(diǎn)：
1、返回一個數(shù)組，包含被刪除的元素
2、如果 start ?元素是負(fù)數(shù)，那就從數(shù)組尾部算起，-1 是指最后一個元素
3、如果沒有指定 ?deleteCount，則刪除至原數(shù)組尾部
4、如果沒有指定 ?itemToInsert1，則不向原數(shù)組添加元素
const?cake?=?['?','?','?','?','?','?'];
let?myPieceOfCake?=?cake.splice(0,?1)?//?["?"]
console.log(cake)?//?(5)?["?",?"?",?"?",?"?",?"?"]
let?yourDoublePieceOfCake?=?cake.splice(0,2)?//(2)?["?",?"?"]
console.log(cake)?//(3)?["?",?"?",?"?"]
如上， ?cake ?數(shù)組被修改了，元素減少了。
代碼示例
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]
小結(jié)
如果需要改變原數(shù)組，或者為原數(shù)組增加元素，用 ?splice。
如果只是刪除元素，而不改變原數(shù)組，用 ?slice。
原文鏈接：https://www.freecodecamp.org/news/javascript-array-slice-vs-splice-whats-the-difference/
作者：Shruti Kapoor
譯者：Chengjun.L
分享人：
止戈，F(xiàn)CC 校友，重度拖延癥患者伴有間歇性躊躇滿志，半罐子專家，半原教旨主義者。字符串處理研究三級，CURD 二級，普通話三甲。
主題《從“本來無一物”到“山中百花開”》，主要內(nèi)容：從零開始寫一個簡單的頁面，并展示分享者如何解決問題，從入門到放棄（劃掉）
書香墨劍（余琦），Web 全棧開發(fā)工程師，F(xiàn)CC 成都社區(qū)核心成員，全民編程倡導(dǎo)者，熱衷于 K12 階段編程教育。
主題《用 HTML/CSS 創(chuàng)建七夕賀卡》
伍裕平，5 年全棧（Web + PHP/Java）開發(fā)經(jīng)驗(yàn)，freeCodeCamp Top Contributor，比較熟悉 jQuery、Dojo 和 Semantic UI，了解 Vue、Element 和 Bootstrap，對計(jì)算機(jī)網(wǎng)絡(luò)和操作系統(tǒng)底層也熟悉，寫過 C/C++ 和匯編。
主題《對 HTML、CSS、JavaScript、jQuery、Vue、計(jì)算機(jī)網(wǎng)絡(luò)等 Web 開發(fā)相關(guān)問題或者編程學(xué)習(xí)和工作相關(guān)問題的答疑》
掃碼關(guān)注公眾號，訂閱更多精彩內(nèi)容。
給個[在看]，是對達(dá)達(dá)最大的支持！
