JavaScript 陣列fill()

admin發表於2018-08-29

方法的功能通常和名字相關聯,fill翻譯成漢語是"填充"的意思。

fill方法的功能也確實如此,它能夠用指定的值填充陣列指定的區間。

從實際的操作結果來看,填充其實也可以理解為替換。

此方法是ES2015新增。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
arr.fill(value[, start [, end]])

引數解析:

(1).value:必需,用來進行填充的值。

(2).start:可選,規定填充開始位置,預設從索引0處開始。

(3).end:可選,規定填充結束位置,預設填充到陣列結尾。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
let arr = ["青島市南區",6,"螞蟻部落","ES2015"];
let newArr = arr.fill("ES2015");

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/021315pgscq2sagpenc5sm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

預設會用指定元素將陣列中從頭到尾替換一遍。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["青島市南區",6,"螞蟻部落","ES2015"];
let newArr = arr.fill("ES2015");
console.log(newArr==arr);

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/021350dxd4j4ldjkmyxx9e.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由此可見,fill方法是直接運算元組本身。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["青島市南區",6,"螞蟻部落","ES2015"];
arr.fill("ES2015",1);
console.log(arr);

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/021430f53gre7imtwumg2u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼從陣列索引1位置處開始填充,一直到結尾。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["青島市南區",6,"螞蟻部落","ES","js教程"];
arr.fill("ES2015",1,3);
console.log(arr);

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/021511es0uewkosteu37ux.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼可以使用"ES2015"填充字串中從索引1到索引3區間,但是不會填充索引3位置。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["青島市南區",6,"螞蟻部落","ES2015","js教程","css教程"];
arr.fill("ES2015",-5,-1);
console.log(arr);

程式碼執行截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/021553e2lcfdcr7b26np3s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

引數值可以為負數,索引0是陣列的第一個元素,那麼索引-1就是陣列的倒數第一個元素,以此類推。那麼上面例子中,-5是倒數第五個元素,也就是陣列第二個元素6,-1是倒數第一個元素,也就是陣列第6個元素css教程,最終也就是使用數字"ES2015"填充元素6到元素css教程之間的元素。

相關文章