JavaScript 中通过 Array.from 设置数组初始状态的技巧-js教程-PHP中文网

array.from 是灵活的数组构造方法，可将类数组或可迭代对象转为数组，并在创建时通过映射函数初始化元素；它能生成“满”数组，避免稀疏数组问题，支持按索引差异化赋值和结构化数据生成。

javascript 中通过 array.from 设置数组初始状态的技巧

Array.from 是一个灵活的数组构造方法，它不仅能将类数组或可迭代对象转为数组，还能在创建时直接初始化元素值，省去后续遍历赋值的步骤。

传入一个类数组对象（如 { length: n }）作为第一个参数，再通过映射函数生成每个位置的值。注意：仅靠 { length: 5 } 不会自动产生实际元素，必须配合第二个参数（映射函数）才能真正填充。

// 创建长度为 5、所有元素为 0 的数组
Array.from({ length: 5 }, () => 0); // [0, 0, 0, 0, 0]
// 创建递增数字数组
Array.from({ length: 4 }, (_, i) => i + 1); // [1, 2, 3, 4]
// 创建对象数组，避免引用同一对象
Array.from({ length: 3 }, () => ({ id: Date.now(), active: false }));
（每次调用箭头函数都会新建对象，不会共享引用）

常见于 DOM 操作中获取的 NodeList 或 arguments（旧式函数参数），它们不是真正的数组但有 length 属性和索引访问能力。

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

// 获取所有按钮并转为数组，方便使用 map/filter
const buttons = Array.from(document.querySelectorAll('button'));
// 在映射过程中直接提取属性或转换类型
const inputValues = Array.from(document.querySelectorAll('input'), el => el.value);
// 也可用于字符串（天然可迭代）
Array.from('hello', char => char.toUpperCase()); // ['H','E','L','L','O']

new Array(n) 创建的是稀疏数组（只有 length，没有实际元素），而 Array.from({ length: n }) 配合映射函数才能得到“满”的数组。直接对稀疏数组调用 map/filter 会跳过空槽位，容易出错。

// ❌ 稀疏数组，map 不生效
new Array(3).map(() => 'x'); // [, , ,]（仍是空槽）
// ✅ 正确初始化
Array.from({ length: 3 }, () => 'x'); // ['x', 'x', 'x']
// ✅ 或者用 Array(3).fill()
Array(3).fill('x'); // ['x', 'x', 'x']（fill 更简洁，但不支持按索引差异化生成）

当初始值依赖外部变量或需逻辑判断时，映射函数内部可自由编写逻辑，比 fill 更具表达力。

// 根据索引设置不同值
Array.from({ length: 6 }, (_, i) => i % 2 === 0 ? 'even' : 'odd');
// ['even', 'odd', 'even', 'odd', 'even', 'odd']
// 基于配置生成结构化数据
const keys = ['name', 'age', 'city'];
Array.from(keys, key => ({ key, value: '' }));
// [{key:'name',value:''}, {key:'age',value:''}, ...]

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南