Js实现数组填充默认值

更新日期: 2021-10-22阅读: 1k标签: 数组

在 JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的功能呢?


方式一:使用Array.fill

数组实例上可用的array.fill(initalValue)方法是一种初始化数组的便捷方法:当在数组上调用该方法时,整个数组都用填充初始值,并返回修改后的数组。比如:

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

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

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

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

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


方式二:使用Array.from()

Array.from(array, mapperFunction) 接受 2 个参数:一个数组(通常是一个可迭代的)和一个映射器函数
mapperFunction对数组的每一项调用,将结果推送到新数组,最后返回新映射的数组。
因此Array.from()方法可以轻松地创建和初始化具有不同对象实例的数组:

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

可以看到修改数组中的任何一个对象,则只有该对象会受到影响,其他对象是不受影响的。


方式三:使用展开操作符...加array.map()

我们知道直接使用Array(length)以创建数组的情况下,数组内元素为empty,如下:

const sparseArray = Array(3);
sparseArray; // [empty × 3]

new Array(arrayLength) 方式构造的数组是一个稀疏数组,里面是没有任何值的,只有长度。所以这个方式构造出来的数组是无法遍历的,也就无法用 map 遍历填充值了。

这里我们通过使用展开操作符可以展开一个数组,然后从展开的数组中再创建一个新的数组。使用这种方式,我们避免了使用 fill 方法,但是我们依旧使用了 map 方法。

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


方式四:使用Array.apply()加array.map()

我们可以通过下面方式创建一个长度为3的数组,里面的值都是 undefined。

Array.apply(null, Array(3))

apply 方法会把生成的稀疏数组展开并当做参数再次传给 Array 的构造函数。其实等于:

Array.apply(null, [, , ,])

然后同方式三,使用map:

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


结论

JavaScript 提供了很多用初始值填充数组的好方法。

如果你想创建一个用原始值初始化的数组,那么最好的方法是Array(length).fill(length)。

如果你数组内存放的是对象,需要保证对象具有不同的实例,则不能使用方式一。使用使用Array.from()、展开操作符...加array.map()、Array.apply()加array.map()这几种方式。


链接: https://www.fly63.com/article/detial/10759

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!