Array.fill()

.fill() 方法是用一個固定值填充一個數組中的元素，從起始索引到終止索引內的全部元素，即將數組中的所有元素更改為另外的值，從開始索引（默認為 0）到結束索引（默認為 array.length），最終返回修改后的數組。

語法：Array.fill(value,start,end)

• value：為需要處理的數組
• start：開始索引（默認為 0）
• end：結束索引（默認為 array.length），如指定結束索引，是不包括索引本身的元素

const articles = [
    "《如何在 Vue 的計算屬性中傳遞參數》作者：天行無忌",
    "《Angular數據狀態管理框架：NgRx/Store》作者：天行無忌",
    "《Angular管道PIPE介紹》作者：天行無忌",
];
const replaceArticle =
    "《JavaScript 數組操作必須熟練運用的10個方法》作者：天行無忌";

console.log([...articles].fill(replaceArticle, 1)); // 從索引為 1 的元素開始的素有元素替換，
/*
[
  '《如何在 Vue 的計算屬性中傳遞參數》作者：天行無忌',
  '《JavaScript 數組操作必須熟練運用的10個方法》作者：天行無忌',
  '《JavaScript 數組操作必須熟練運用的10個方法》作者：天行無忌'
]
*/

console.log([...articles].fill(replaceArticle, 1, 2)); // 從索引為 1 的開始到索引為2的元素替換，不包括索引為2的元素在內
/* 
[
  '《如何在 Vue 的計算屬性中傳遞參數》作者：天行無忌',
  '《JavaScript 數組操作必須熟練運用的10個方法》作者：天行無忌',
  '《Angular管道PIPE介紹》作者：天行無忌'
]
*/

Array.from()

.from() 方法從一個類似數組或可迭代對象創建一個新的，淺拷貝的數組實例。

語法：Array.from(arrayLike,mapFn)

• arrayLike：想要轉換成數組的偽數組對象或可迭代對象
• mapFn：可選，如果指定了該參數，新數組中的每個元素會執行該回調函數

console.log(Array.from([1, 2, 3], (item) => item + item)); // [ 2, 4, 6 ]
console.log(Array.from("china")); // [ 'c', 'h', 'i', 'n', 'a' ]

使用方法

這里大概介紹一下 Array.fill() 和 Array.from() 的使用方法，但不限于本文介紹。

創建數組并賦值

這里介紹幾種創建于數組并賦值的方法，首先可以使用 Array.fill 方法創建一個填充有值的數組，但一般是同值數組。

const numbers = new Array(5).fill(1);
console.log(numbers); // [ 1, 1, 1, 1, 1 ]

上面創建了一個全是 1 的 5 維數組，new Array(5) 創建一個有 5 維數組，再適用 .fill() 將每維替換為 1 。

可以通過對一個空數組調用 keys 方法，生成一個升序的數組，如下：

const numbers = [...new Array(5).keys()];
console.log(numbers); // [ 0, 1, 2, 3, 4 ]

還可以用 Array.from() 和一些計算方法來填充一個數組，如下：

const numbers = Array.from(new Array(5), (_, i) => i ** 2);
console.log(numbers); // [ 0, 1, 4, 9, 16 ]

上面創建了一個 0-4 的數字平方組成的數組，如果需要創建 undefined 組成的數組，如下：

const undefineds = [...new Array(3)];
console.log(undefineds); // [ undefined, undefined, undefined ]

創建重復值

在JavaScript 中創建重復值，常見有四種方式：

• 使用循環
• 使用 Array.fill()
• 使用 repeat()
• 使用 Array.from()

repeat()構造并返回一個新字符串，該字符串包含被連接在一起的指定數量的字符串的副本。

語法：str.repeat(count)

• count：整數，表示在新構造的字符串中重復了多少遍原字符串。

const china = " ";

const createStrByRepeat = (str, count) => str.repeat(count);
const createStrByFill = (str, count) => Array(count).fill(str).join("");
const createStrByFrom = (str, count) =>
    Array.from({ length: count }, () => str).join("");
console.log(createStrByRepeat(china, 3)); //   
console.log(createStrByFill(china, 3)); //   
console.log(createStrByFrom(china, 3)); //   

總結

在本文中，通過圖解方式展示常用的 JavaScript 數組方法的功能，結合前面的《JavaScript 數組操作必須熟練運用的10個方法》內容，我覺得對于JavaScript數組的理解和使用應該沒有什么問題了，如果還有不足的地方，請不要忘記在評論中提及，到時會更新相關內容的。