在 JavaScript 中用範圍填充陣列

本文將討論 Array 類提供的各種方法，我們可以使用這些方法在 JavaScript 中用範圍填充陣列。

使用 JavaScript 中的 Array.fill() 函式用範圍填充陣列

Array.fill() 方法用特定值填充現有陣列。

該方法採用三個引數：value，我們將填充到陣列中，以及 start 和 end，它們描述了我們要在陣列中新增資料的位置。start 和 end 是可選引數。

例子：

var arr = [1, 2, 3, 4];
arry.fill(6);

console.log(arr);

輸出：

[6, 6, 6, 6]

正如我們所看到的，陣列中的所有元素都被成功替換並填充了值 6。如果我們不想用該值替換所有元素，我們可以指定 start 和 end 索引。

使用 JavaScript 中的 Array.from() 函式用範圍填充陣列

在 ES6 版本的 JavaScript 中引入的 Array.from 方法從類似陣列的可迭代物件建立陣列的淺拷貝例項。

語法：

Array.from(target, mapFunction, thisValue)

其中，

1. target：要轉換為陣列的物件。
2. mapFunction：呼叫每個陣列元素。這是一個可選引數。
3. thisValue：執行 mapFunction 時用作 this 的值。這也是一個可選引數。

為了填充陣列，我們使用 Array.from() 和 Array.keys()。Array.keys() 方法提取陣列的所有鍵並返回一個迭代器，然後 Array.from() 函式將此迭代器作為引數。

最後，所有索引都被複製為新陣列的元素。

例子：

var arr = Array.from(Array(5).keys());
console.log(arr);

輸出：

[ 0, 1, 2, 3, 4 ]

在 JavaScript 中使用 ES6 擴充套件運算子用範圍填充陣列

除了 Array.from() 函式，我們還可以使用擴充套件運算子，由三個點 ... 表示。

我們將傳遞 Array.keys()，它將返回一個迭代器，並使用擴充套件運算子 ... 擴充套件該迭代器中存在的元素，放在 Array.keys() 之前。

之後，我們必須將所有這些括在方括號 [] 內以表示一個陣列。

擴充套件運算子將生成與 Array.from 函式相同的輸出。

例子：

var arr = [...Array(5).keys()];
console.log(arr);

輸出：

[ 0, 1, 2, 3, 4 ]

使用 JavaScript 中的 Array.map() 函式用範圍填充陣列

Array.map() 函式將通過在呼叫陣列的每個元素上執行提供的函式作為引數來建立一個新陣列。這可以將任何函式作為引數，例如箭頭、回撥或內聯。

例子：

var elements = 5;
var arr = [...Array(elements)].map((item, index) => index);
console.log(arr);

輸出：

[ 0, 1, 2, 3, 4 ]

在上面的例子中，map 函式將箭頭函式作為引數來提取 item 和 index。將在陣列的每個元素上呼叫此箭頭函式。

最後，所有陣列元素的索引值將被提取並儲存在新陣列中。

在 JavaScript 中使用範圍填充陣列的更多方法

我們討論過的在 JavaScript 中用範圍填充陣列的方法被許多開發人員廣泛使用。除了這些，我們還可以使用其他方法。

1. Array.prototype.apply()，它是 JavaScript 中的預構建方法。
2. Underscore.js 庫的 range() 方法。