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

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 中填充数组的方法有哪些?欢迎留言分享。

「点点赞赏,手留余香」

0

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

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » JavaScript中如何用初始值填充数组?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们