JavaScript 數(shù)組中 Slice 和 Splice 的區(qū)別（含視頻）

我最近在寫一些簡明的 Web 前端開發(fā)教程。這篇文章的標(biāo)題或許應(yīng)該是“怎么才能不混淆 JavaScript 數(shù)組中的 Slice 方法和 Splice 方法”，因為我自己總是記不住這兩者的區(qū)別。

希望這個解釋可以幫我自己理解，也幫到你：

S?(p)?lice?=?Slice?+?(p)?=>?Slice?+?in?(p)?lace

（點擊小程序查看?S1ng S1ng 的講解視頻）

Array.prototype.slice()

Array.prototype.slice() 是用于提取一個數(shù)組，從 start ?元素到 ?end ?元素（不包含 ?end ?元素）。

其實可以從這個方法的名字看出來，它是用于從一個 JavaScript 數(shù)組中提取元素。不過和切蛋糕不同，從數(shù)組中提取元素不會影響原數(shù)組，原數(shù)組根本就不會變化（像是切不完的蛋糕！）

arr.slice(start,?[end])

要點：

1、返回新數(shù)組，而原數(shù)組保持不變

2、如果沒有指定 ?end ?元素，那么切分的數(shù)組包含從 ?start ?到數(shù)組結(jié)束的所有元素

3、如果 start ?元素是負數(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,?...])

要點：

1、返回一個數(shù)組，包含被刪除的元素

2、如果 start ?元素是負數(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。

分享人：

• 止戈，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)驗，freeCodeCamp Top Contributor，比較熟悉 jQuery、Dojo 和 Semantic UI，了解 Vue、Element 和 Bootstrap，對計算機網(wǎng)絡(luò)和操作系統(tǒng)底層也熟悉，寫過 C/C++ 和匯編。

  主題《對 HTML、CSS、JavaScript、jQuery、Vue、計算機網(wǎng)絡(luò)等 Web 開發(fā)相關(guān)問題或者編程學(xué)習(xí)和工作相關(guān)問題的答疑》