ES6數(shù)組復制和填充方法copyWithin()、fill()的具體使用

更新時間：2021年10月27日 09:50:06 作者：代碼搬運媛

本文主要介紹了ES6數(shù)組復制和填充方法copyWithin()、fill()的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

批量復制 copyWithin()

copyWithin() 方法用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中。
copyWithin()會按照指定范圍淺復制數(shù)組中的部分內(nèi)容，然后將它們插入到指定索引開始的位置。

語法

array.copyWithin(target, start, end)

參數(shù)：

參數(shù)	描述
target	必需。復制到指定目標索引位置。
start	可選。元素復制的起始位置。
end	可選。停止復制的索引位置 (默認為 array.length)。如果為負值，表示倒數(shù)。

返回值：返回復制之后的數(shù)組

代碼實例：

// 復制數(shù)組的前面兩個元素到后面兩個元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.copyWithin(2, 0);//Banana,Orange,Banana,Orange

// 復制數(shù)組的前面兩個元素到第三和第四個位置上：
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; 
fruits.copyWithin(2, 0, 2);//Banana,Orange,Banana,Orange,Kiwi,Papaya

填充數(shù)組方法 fill()

fill() 方法用于將一個固定值替換數(shù)組的元素。

語法：

array.fill(value, start, end)

參數(shù)：

參數(shù)	描述
value	必需。填充的值。
start	可選。開始填充位置。
end	可選。停止填充位置 (默認為 array.length)

返回值：數(shù)組

代碼實例：

//填充 "Runoob" 到數(shù)組的最后兩個元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.fill("Runoob", 2, 4);//[ "Banana", "Orange", "Runoob", "Runoob" ]

//使用固定值填充數(shù)組：
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.fill("Runoob");//Runoob,Runoob,Runoob,Runoob

關于索引的計算方式，兩種方法相同

開始索引用于指定開始填充的位置，它是可選的。
如果不提供結(jié)束索引，則一直填充到數(shù)組末尾。
負值索引從數(shù)組末尾開始計算。也可以將負索引想象成數(shù)組長度加上它得到的一個正索引。
靜默忽略超出數(shù)組邊界、零長度及方向相反的索引范圍。

代碼實例：

const zeroes = [0,0,0,0,0];

//用6填充索引大于等于3的元素
zeroes.fill(6, 3);//[0,0,0,6,6]
zeroes.fill(0);//重置

//用7填充索引大于等于1且小于3的元素
zeroes.fill(7,1,3);//[0,7,7,0,0]
zeroes.fill(0);//重置

//用8填充索引大于等于1且小于4的元素
//(-4+zeroes.length=1) (-1+zeroes.length=4)
zeroes.fill(8,-4,-1);//[0,8,8,8,0]

//索引過低，忽略
zeroes.fill(1,-10,-6);//[0,0,0,0,0]
//索引過高，忽略
zeroes.fill(1,10,15);//[0,0,0,0,0]
//索引反向，忽略
zeroes.fill(2,4,2);//[0,0,0,0,0]
//索引部分可用，填充可用部分
zeroes.fill(4,3,10);//[0,0,0,4,4]

到此這篇關于ES6復制和填充方法copyWithin()、fill()的具體使用的文章就介紹到這了,更多相關ES6 copyWithin()、fill()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

webpack打包后index.html引用文件地址問題小結(jié)
在前端開發(fā)中,src 屬性指定的相對路徑是相對于當前 HTML 文件的路徑,而不是相對于網(wǎng)站的根目錄,這篇文章主要介紹了webpack打包后index.html引用文件地址問題,需要的朋友可以參考下
2024-05-05
js中通過split函數(shù)分割字符串成數(shù)組小例子
分割字符串成數(shù)組的方法有很多，不過使用最多的還是split函數(shù)，接下來為大家介紹下它的具體使用方法，感興趣的朋友可以參考下
2013-09-09
微信小程序獲取用戶綁定手機號方法示例
這篇文章主要給大家介紹了關于微信小程序如何獲取用戶綁定手機號的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-07-07
JavaScript工具庫MyTools詳解
這篇文章主要為大家詳細介紹了JavaScript工具庫MyTools的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
JS獲取當前時間戳方法解析
這篇文章主要介紹了JS獲取當前時間戳方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
JS實現(xiàn)馬賽克圖片效果完整示例
這篇文章主要介紹了JS實現(xiàn)馬賽克圖片效果,結(jié)合完整實例形式分析了JavaScript基于HTML5 canvas圖形元素繪制實現(xiàn)馬賽克效果相關操作技巧,需要的朋友可以參考下
2019-04-04
JS實現(xiàn)圖片高亮展示效果實例
這篇文章主要介紹了JS實現(xiàn)圖片高亮展示效果的方法,實例分析了JavaScript響應鼠標事件動態(tài)操作頁面元素樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
Bootstrap Validator 表單驗證
這篇文章主要介紹了Bootstrap Validator 表單驗證的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
javascript實現(xiàn)動態(tài)改變層大小的方法
這篇文章主要介紹了javascript實現(xiàn)動態(tài)改變層大小的方法,涉及javascript操作頁面屬性的相關技巧,需要的朋友可以參考下
2015-05-05
微信小程序tabBar底部導航中文注解api詳解
這篇文章主要為大家詳細介紹了微信小程序tabBar底部導航中文注解api，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08