快捷導(dǎo)航

JavaScript高效創(chuàng)建100長(zhǎng)度數(shù)組的六種方式

更新時(shí)間：2025年05月09日 08:30:52 作者：燭陰

本文介紹了六種高效創(chuàng)建100長(zhǎng)度數(shù)組的方法,包括使用Array構(gòu)造函數(shù)、Array.from、fill、map結(jié)合fill、擴(kuò)展運(yùn)算符和keys屬性,以及手動(dòng)循環(huán)法,每種方法都有其特點(diǎn)和適用場(chǎng)景,需要的朋友可以參考下

1. 使用Array構(gòu)造函數(shù)——最原始但常用
2. Array.from的妙用——推薦的現(xiàn)代寫法
3. fill方法——填充你的數(shù)組
4. map結(jié)合fill解鎖序列化
5. 擴(kuò)展運(yùn)算符 + keys屬性的騷操作
6. 手動(dòng)循環(huán)法（暴力可靠，適合定制）
結(jié)語

1. 使用Array構(gòu)造函數(shù)——最原始但常用

const arr = new Array(100);
console.log(arr.length); // 100
console.log(arr); // [ <100 empty items> ]

優(yōu)缺點(diǎn)解析：

快速聲明指定長(zhǎng)度的空槽數(shù)組
需要注意：此時(shí)每個(gè)元素都是 empty，不可直接.map或遍歷賦值

2. Array.from的妙用——推薦的現(xiàn)代寫法

const arr = Array.from({ length: 100 });
console.log(arr.length); // 100
console.log(arr); // [undefined, ..., undefined] 共100項(xiàng)

實(shí)用變形：生成0~99數(shù)組

const seq = Array.from({ length: 100 }, (_, i) => i);
// [0, 1, 2, ..., 99]

面試官可能會(huì)追問：Array.from的第二參數(shù)mapFn到底有什么用？上面已經(jīng)做了經(jīng)典演示啦！

3. fill方法——填充你的數(shù)組

const arr = new Array(100).fill(0);
// [0, 0, ..., 0]

注意：填充對(duì)象或數(shù)組的話，都是同一個(gè)引用，記得區(qū)分場(chǎng)景。

4. map結(jié)合fill解鎖序列化

const arr = new Array(100).fill().map((_, i) => i);
// [0, 1, 2, ..., 99]

原理洞察：只有經(jīng)過fill填充，map才會(huì)遍歷全部元素！

5. 擴(kuò)展運(yùn)算符 + keys屬性的騷操作

const arr = [...Array(100)];
// [undefined, undefined, ..., undefined]

const arrSeq = [...Array(100).keys()];
// [0, 1, 2, ..., 99]

隱藏技巧：.keys()返回的是數(shù)組索引的迭代器，用擴(kuò)展運(yùn)算符輕松轉(zhuǎn)數(shù)組！

6. 手動(dòng)循環(huán)法（暴力可靠，適合定制）

const arr = [];
for(let i=0; i<100; i++){
  arr.push(i); // 或其他任何初始值
}

適用場(chǎng)景：對(duì)每個(gè)元素生成有特殊邏輯需求時(shí)，非常自由。

結(jié)語

到此這篇關(guān)于JavaScript高效創(chuàng)建100長(zhǎng)度數(shù)組的六種方式的文章就介紹到這了,更多相關(guān)JavaScript創(chuàng)建100長(zhǎng)度數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: