• 當(dāng)前子專欄 基礎(chǔ)入門(mén)三大核心篇 是免費(fèi)開(kāi)放階段。推薦他人訂閱，可獲取扣除平臺(tái)費(fèi)用后的35%收益，文末名片加V！
• 說(shuō)明：該文屬于 大前端全棧架構(gòu)白寶書(shū)專欄，目前階段免費(fèi)開(kāi)放，購(gòu)買(mǎi)任意白寶書(shū)體系化專欄可加入TFS-CLUB 私域社區(qū)。
• 福利：除了通過(guò)訂閱"白寶書(shū)系列專欄"加入社區(qū)獲取所有付費(fèi)專欄的內(nèi)容之外，還可以通過(guò)加入星薦官共贏計(jì)劃 加入私域社區(qū)。

• 作者：不渴望力量的哈士奇(哈哥)，十余年工作經(jīng)驗(yàn), 跨域?qū)W習(xí)者，從事過(guò)全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前任某金融品類App負(fù)責(zé)人。
• 榮譽(yù)：2022年度博客之星Top4、博客專家認(rèn)證、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者、新星計(jì)劃導(dǎo)師，“星薦官共贏計(jì)劃” 發(fā)起人。
• 現(xiàn)象級(jí)專欄《白寶書(shū)系列》作者，文章知識(shí)點(diǎn)淺顯易懂且不失深度；TFS-CLUB社區(qū)創(chuàng)立者，旨在以“賦能 共贏”推動(dòng)共建技術(shù)人成長(zhǎng)共同體。

---

• ?? 白寶書(shū)系列
  • ?? Python全棧白寶書(shū)
  • ?? 產(chǎn)品思維訓(xùn)練白寶書(shū)
  • ?? 全域運(yùn)營(yíng)實(shí)戰(zhàn)白寶書(shū)
  • ?? 大前端全棧架構(gòu)白寶書(shū)

繼上一章節(jié)我們學(xué)習(xí) JavaScript 「數(shù)組」的相關(guān)知識(shí)之后，該章節(jié)我們來(lái)學(xué)習(xí)一下數(shù)組的常用方法。

?? 數(shù)組的頭尾操作方法

數(shù)組的頭尾操作方法：

? push() - 在尾部插入新項(xiàng)

• push就是“推”的意思，可以將數(shù)組想象成一個(gè)彈匣，push()就是在彈匣尾部“推”入一顆子彈。

• 如果要推入多項(xiàng)，用逗號(hào)隔開(kāi)

• 調(diào)用push()方法后，數(shù)組會(huì)立即改變，不需要賦值

• push()差不多是最常用的一個(gè)方法了，編程時(shí)常常用它來(lái)往數(shù)組尾部插入新項(xiàng)。

示例代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-469185.html

var arr = [11, 22, 33, 44];

//往數(shù)組尾部推入新項(xiàng)
arr.push(55);
arr.push(66, 77, 88);

? pop() - 在尾部刪除

• pop()方法用來(lái)刪除數(shù)組中的最后一項(xiàng)，還是將數(shù)組想象成一個(gè)彈匣，pop是“彈出”的意思，就是將彈匣尾部“彈出”一顆子彈。

• 注意：pop()方法不僅會(huì)刪除數(shù)組末項(xiàng)，還會(huì)返回被刪除的項(xiàng)

示例代碼：

var arr = [11, 22, 33, 44];

//刪除數(shù)組的末項(xiàng)
arr.push();
//pop()還會(huì)返回被刪除的項(xiàng)，可以用變量“接收”返回值
var item = arr.pop();
console.log(arr);
console.log(item);

? unshift() - 在頭部插入新項(xiàng)

• unshift()用來(lái)在數(shù)組頭部插入新項(xiàng)，參數(shù)就是插入的項(xiàng)

• 如果要插入多項(xiàng)，可以用逗號(hào)隔開(kāi)

• 調(diào)用unshift()方法后，數(shù)組會(huì)立即改變，不需要賦值

• 和push()方法非常類似

示例代碼：

var arr = [11, 22, 33, 44];

//在數(shù)組頭部插入新項(xiàng)
arr.unshift(0);
arr.unshift(-33, -22, -11);
console.log(arr);

? shift() - 在頭部刪除

• shift()方法用來(lái)刪除數(shù)組中的首項(xiàng)，即下標(biāo)為0的項(xiàng)

• 注意：shift()方法不僅會(huì)刪除數(shù)組第一項(xiàng)，還會(huì)返回被刪除的項(xiàng)

• 和pop()方法非常類似

示例代碼：

var arr = [11, 22, 33, 44];

//刪除數(shù)組的首項(xiàng)
arr.shift();
//shift()還會(huì)返回被刪除的項(xiàng)，可以用變量“接收”返回值
var item = arr.shift();
console.log(arr);
console.log(item);

?? splice() - 替換數(shù)組中的指定項(xiàng)

• splice()方法有很多功能，所以有人也叫它為“多功能方法”

• 基本功能：替換數(shù)組中的指定項(xiàng)

示例代碼：

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

//替換數(shù)組中的'B'、'C'兩項(xiàng)為：'x'、'y'、'z'
arr.splice(1, 2, 'x', 'y', 'z');
console.log(arr);

splice()方法也可以用來(lái)在指定位置插入新項(xiàng)：只需要將跨度設(shè)置為0即可

示例代碼：

var arr = [0, 1, 2, 3, 4, 5];

//在2后面插入2.1，2.2，2.3，2.4
arr.splice(3, 0, 2.1, 2.2, 2.3, 2.4);
console.log(arr);

splice()方法也可以用來(lái)刪除指定項(xiàng)：“跨度”寫(xiě)成刪除的項(xiàng)的個(gè)數(shù)，而且不寫(xiě)替換的項(xiàng)

示例代碼：

var arr = ['python', 'c', 'js', 'java', 'css', 'html', 'php'];
        
//刪除“亂入”的兩個(gè)非后端語(yǔ)言
arr.splice(4, 2);
console.log(arr);

splice()方法會(huì)用數(shù)組的形式返回被刪除/被替換的項(xiàng)，如果是純插入，也會(huì)返回一個(gè)空數(shù)組

示例代碼：

var arr = ['python', 'c', 'js', 'java', 'css', 'html', 'php']; 
var item = arr.splice(4, 2);  //返回['css', 'html']
console.log(arr, item);

?? slice() - 截取得到子數(shù)組

• slice()用于得到子數(shù)組，類似于字符串的slice()方法

• slice(a, b)截取的子數(shù)組從下標(biāo)為a的項(xiàng)開(kāi)始，到下邊為b(但不包括下標(biāo)為b的項(xiàng))結(jié)束。

• 注意：slice()方法不會(huì)更改原數(shù)組，而是會(huì)返回截取的子數(shù)組

• slice()方法可以不提供第二個(gè)參數(shù)，表示從指定項(xiàng)開(kāi)始截取后面所有的項(xiàng)

• slice()方法的參數(shù)允許為負(fù)數(shù)，表示數(shù)組的倒數(shù)第幾項(xiàng)

示例代碼：

var arr = ['A', 'B', 'C', 'D', 'E', 'F'];

var item_1 = arr.slice(2, 4);		//截取下標(biāo)為2~4的項(xiàng)作為子數(shù)組返回，不包括4
var item_2 = arr.slice(2);		//截取下標(biāo)為2~最后一個(gè)的項(xiàng)作為子數(shù)組返回
var item_3 = arr.slice(-3, -1);		//截取倒數(shù)第3~倒數(shù)第1項(xiàng)為子數(shù)組返回，不包括倒數(shù)第1

到了這里，關(guān)于〖大前端 - 基礎(chǔ)入門(mén)三大核心之JS篇?〗- JavaScript 的數(shù)組的常用方法 (一)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！