slice() 方法將數(shù)組部分的副本返回到新的數(shù)組對(duì)象中。這個(gè)對(duì)象是從頭到尾選擇的。請(qǐng)注意,它不會(huì)修改原始數(shù)組。
此外,如果向其中一個(gè)數(shù)組添加新元素,則另一個(gè)數(shù)組不會(huì)受到影響。
## **參數(shù)是什么?**
slice() 方法的參數(shù)是開(kāi)始和結(jié)束索引。
**開(kāi)始**
它是一個(gè)從零開(kāi)始的索引,用于開(kāi)始復(fù)制數(shù)組的一部分。如果未定義,則默認(rèn)值為 0。如果 start 大于數(shù)組的索引范圍, slice() 方法將返回一個(gè)空數(shù)組。
此外,首先,您還可以使用負(fù)索引。slice(-1) 提取數(shù)組的最后一個(gè)元素。它類似于 Python。
**結(jié)尾**
該參數(shù)是可選的。如果你的 slice() 函數(shù)中只有一個(gè)參數(shù),那就是 start。如果省略, slice() 方法從序列的末尾提取。
如果它大于序列的長(zhǎng)度,slice 一直提取到序列的末尾,只是在它被省略的情況下。
它是結(jié)束提取之前的索引。它不包括在內(nèi)。因此,索引的最后一個(gè)元素不包含在數(shù)組的副本中。例如, slice(1,3) 提取第二個(gè)和第三個(gè)元素。
```js
y = [1, 2, 3, 4, 5, 6]
y.slice(2, -2) // will return [3, 4]
```
這意味著 y 會(huì)將數(shù)組從索引 2 切片到索引 -2 獨(dú)占。
## **1、復(fù)制一個(gè)數(shù)組**
第一個(gè)功能是 slice() 函數(shù)的基本功能。沒(méi)有參數(shù)的數(shù)組復(fù)制原始數(shù)組。有時(shí),您可能想要更新數(shù)組中的某些元素。
但是,您可能希望保護(hù)原始數(shù)組中的元素。因此,您可以創(chuàng)建原始數(shù)組的淺表副本。
```js
const midtermGrades=updatedGrades.slice();
```
## **2、構(gòu)造一個(gè)以n開(kāi)頭的子數(shù)組**
slice() 方法的第二個(gè)用例是復(fù)制以 n 開(kāi)頭的子數(shù)組。例如,您正在分析從考試中獲得 80 分或更高分的學(xué)生。您發(fā)現(xiàn)學(xué)生的索引從 10 開(kāi)始。
因此,您可以復(fù)制成功學(xué)生的索引。
```js
const successfulStudents = allStudents.slice(10);
```
你也可以得到不滿意的學(xué)生。
```js
const unsatisfactoryStudents = allStudents.slice(-10);
```
## **3、將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組**
您可以使用 slice() 方法將看起來(lái)像數(shù)組的對(duì)象轉(zhuǎn)換為數(shù)組。例如,您可以按如下方式創(chuàng)建函數(shù)。
```js
function TransformToArray(){
return Array.prototype.slice.call(arguments);
}
var newArray = TransformToArray("1", "2", "3", "4");
console.log(newArray); // ["1", "2", "3", "4"];
```
## **4、將一個(gè)NodeList轉(zhuǎn)換成一個(gè)數(shù)組**
NodeList 對(duì)象是從文檔中提取的節(jié)點(diǎn)集合。您可以使用 querySelectorAll() 方法返回一個(gè) NodeList 對(duì)象。
例如,您可以選擇 HTML 文檔中的所有節(jié)點(diǎn)。使用 slice(),您可以將您選擇的 NodeList 轉(zhuǎn)換為數(shù)組。
```js
var p = document.querySelectorAll(‘p’);
var pNodes = Array.prototype.slice.call(p);
```
## **5、替換字符串中的特定索引**
您可以使用 slice() 函數(shù)創(chuàng)建替換函數(shù)。
```js
String.prototype.append = function (index,value) {
return this.slice(0,index) + value + this.slice(index);
};
var s = "Happy year";
alert(s.append(6,"new "));
```
## **結(jié)論**
學(xué)習(xí) JavaScript 內(nèi)置函數(shù)的用例可以幫助您提高編碼技能。您可以在需要時(shí)使用您的知識(shí)。您可以優(yōu)雅地實(shí)現(xiàn)功能。
slice() 也是一個(gè)有用的內(nèi)置函數(shù)。如果您知道如何使用它,則可以在遇到需要使用它的問(wèn)題時(shí)使用它。您可以使用 slice() 輕松獲取數(shù)組的副本。
**總結(jié)一下,本文中 slice() 的用例如下:**
- 復(fù)制數(shù)組
- 構(gòu)造一個(gè)從 n 開(kāi)始的子數(shù)組
- 將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組
- 將 NodeList 轉(zhuǎn)換為數(shù)組
- 替換字符串中的特定索引
**- End -**
更多關(guān)于“html5培訓(xùn)”的問(wèn)題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。