JavaScript中如何用初始值填充数组?

目录
文章目录隐藏
  1. 1. 用 primitives 填充数组
  2. 2. 用对象填充数组

1. 用 primitives 填充数组

假设我们想用给定值初始化一个长度为 3 的数组。

array.fill() 方法可以用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

再结合使用 Array(n)

const length = 3;
const filledArray = Array(length).fill(0);
filledArray; // [0, 0, 0]

Array(length).fill(initialValue) 是一种创建具有所需长度并使用原始值(数字、字符串、布尔值)初始化的数组的便捷方法。

2. 用对象填充数组

如果需要用对象填充数组怎么办?

2.1 使用 array.fill()

上述方法同样支持传递对象为初始值:

const length = 3;
const filledArray = Array(length).fill({ value: 0 });
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

Array(length).fill({ value: 0 })创建一个 length 数组 3,并为每个项目分配{ value: 0 },要注意的是:分配相同的对象实例。

这种方法创建了一个具有相同对象实例的数组。如果碰巧修改了数组中的任何一项,那么数组中的每一项都会受到影响:

const length = 3;
const filledArray = Array(length).fill({ value: 0 });
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 3 }, { value: 3 }, { value: 3 }]

改变数组的第二个项目 filledArray[1].value = 3 会改变数组中的所有项目。

2.2 使用 Array.from()

Array.from() 方法对一个数组或可迭代对象创建一个新的,浅拷贝的数组实例。

因此利用 Array.from() 方法可以轻松地创建和初始化具有不同对象实例的数组:

const length = 3;
const filledArray = Array.from(Array(length), () => {
  return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

如果修改数组中的任何项目,则只有该项目会受到影响,其他项目不受影响:

const length = 3;
const filledArray = Array.from(Array(length), () => {
  return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

filledArray[1].value = 3 只修改数组的第二项。

2.3 使用 array.map() 结合 array.fill()

既然 Array(n) 返回一个数组,为何还需要使用 Array.from 呢,直接使用 map 不好吗,问题是 array.map() 跳过 empty 元素:

const length = 3;
const filledArray = Array(length).map(() => {
  return { value: 0 };
});
filledArray; // [empty × 3]

解决方法很简单,将 empty 数组 fill null 即可:

const length = 3;
const filledArray = Array(length).fill(null).map(() => {
  return { value: 0 };
});

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

以上就是个人在 JavaScript 中用初始值填充数组的方法总结。你常用的在 JavaScript 中填充数组的方法有哪些?欢迎留言分享。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JavaScript中如何用初始值填充数组?

发表回复