这篇文章给大家分享的是有关JavaScript中Array.from()怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联公司专注于尖扎企业网站建设,成都响应式网站建设,商城网站制作。尖扎网站建设公司,为尖扎等地区提供建站服务。全流程按需网站设计,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务JavaScript 中有一个这样的函数:Array.from
:允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。
1. 介绍
在开始之前,我们先回想一下 Array.from() 的作用。语法:
Array.from(arrayLike[, mapFunction[, thisArg]])
arrayLike:必传参数,想要转换成数组的伪数组对象或可迭代对象。
mapFunction:可选参数,mapFunction(item,index){...} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
thisArg:可选参数,执行回调函数 mapFunction 时 this 对象。这个参数很少使用。
例如,让我们将类数组的每一项乘以2:
const someNumbers = { '0': 10, '1': 15, length: 2 };Array.from(someNumbers, value => value * 2); // => [20, 30]
2.将类数组转换成数组
Array.from()
第一个用途:将类数组对象转换成数组。
通常,你会碰到的类数组对象有:函数中的arguments
关键字,或者是一个DOM
集合。
在下面的示例中,让我们对函数的参数求和:
function sumArguments() { return Array.from(arguments).reduce((sum, num) => sum + num);}sumArguments(1, 2, 3); // => 6
Array.from(arguments)
将类数组对象arguments
转换成一个数组,然后使用数组的reduce
方法求和。
此外,Array.from()
的第一个参数可以是任意一个可迭代对象,我们继续看一些例子:
Array.from('Hey'); // => ['H', 'e', 'y']Array.from(new Set(['one', 'two'])); // => ['one', 'two']const map = new Map();map.set('one', 1)map.set('two', 2);Array.from(map); // => [['one', 1], ['two', 2]]
3.克隆一个数组
在 JavaScript 中有很多克隆数组的方法。正如你所想,Array.from() 可以很容易的实现数组的浅拷贝。
const numbers = [3, 6, 9];const numbersCopy = Array.from(numbers);numbers === numbersCopy; // => false
Array.from(numbers)
创建了对numbers
数组的浅拷贝,numbers === numbersCopy
的结果是false
,意味着虽然numbers
和numbersCopy
有着相同的项,但是它们是不同的数组对象。
是否可以使用Array.from()
创建数组的克隆,包括所有嵌套的?挑战一下!
function recursiveClone(val) { return Array.isArray(val) ? Array.from(val, recursiveClone) : val;}const numbers = [[0, 1, 2], ['one', 'two', 'three']];const numbersClone = recursiveClone(numbers);numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]numbers[0] === numbersClone[0] // => false
recursiveClone()
能够对数组的深拷贝,通过判断 数组的item
是否是一个数组,如果是数组,就继续调用recursiveClone()
来实现了对数组的深拷贝。
你能编写一个比使用Array.from()
递归拷贝更简短的数组深拷贝吗?如果可以的话,请写在下面的评论区。
4. 使用值填充数组
如果你需要使用相同的值来初始化数组,那么Array.from()
将是不错的选择。
我们来定义一个函数,创建一个填充相同默认值的数组:
const length = 3;const init = 0;const result = Array.from({ length }, () => init);result; // => [0, 0, 0]
result
是一个新的数组,它的长度为3,数组的每一项都是0。调用Array.from()
方法,传入一个类数组对象{ length }
和 返回初始化值的mapFunction
函数。
但是,有一个替代方法array.fill()
可以实现同样的功能。
const length = 3;const init = 0;const result = Array(length).fill(init);fillArray2(0, 3); // => [0, 0, 0]
fill()
使用初始值正确填充数组。
4.1 使用对象填充数组
当初始化数组的每个项都应该是一个新对象时,Array.from()
是一个更好的解决方案:
const length = 3;const resultA = Array.from({ length }, () => ({}));const resultB = Array(length).fill({});resultA; // => [{}, {}, {}]resultB; // => [{}, {}, {}]resultA[0] === resultA[1]; // => falseresultB[0] === resultB[1]; // => true
由Array.from
返回的resultA
使用不同空对象实例进行初始化。之所以发生这种情况是因为每次调用时,mapFunction
,即此处的() => ({})
都会返回一个新的对象。
然后,fill()
方法创建的resultB
使用相同的空对象实例进行初始化。不会跳过空项。
4.2 使用array.map
怎么样?
是不是可以使用array.map()
方法来实现?我们来试一下:
const length = 3;const init = 0;const result = Array(length).map(() => init);result; // => [undefined, undefined, undefined]
map()
方法似乎不正常,创建出来的数组不是预期的[0, 0, 0]
,而是一个有3个空项的数组。
这是因为Array(length)
创建了一个有3个空项的数组(也称为稀疏数组),但是map()
方法会跳过空项。
5. 生成数字范围
你可以使用Array.from()
生成值范围。例如,下面的range
函数生成一个数组,从0开始到end - 1
。
function range(end) { return Array.from({ length: end }, (_, index) => index);}range(4); // => [0, 1, 2, 3]
在range()
函数中,Array.from()
提供了类似数组的{length:end}
,以及一个简单地返回当前索引的map
函数 。这样你就可以生成值范围。
6.数组去重
由于Array.from()
的入参是可迭代对象,因而我们可以利用其与Set
结合来实现快速从数组中删除重复项。
function unique(array) { return Array.from(new Set(array));}unique([1, 1, 2, 3, 3]); // => [1, 2, 3]
首先,new Set(array)
创建了一个包含数组的集合,Set
集合会删除重复项。
因为Set
集合是可迭代的,所以可以使用Array.from()
将其转换为一个新的数组。
这样,我们就实现了数组去重。
7.结论
Array.from()
方法接受类数组对象以及可迭代对象,它可以接受一个map
函数,并且,这个map
函数不会跳过值为undefined
的数值项。这些特性给Array.from()
提供了很多可能。
如上所述,你可以轻松的将类数组对象转换为数组,克隆一个数组,使用初始化填充数组,生成一个范围,实现数组去重。
实际上,Array.from()
是非常好的设计,灵活的配置,允许很多集合转换。
感谢各位的阅读!关于“JavaScript中Array.from()怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章题目:JavaScript中Array.from()怎么用-创新互联
网页网址:http://lswzjz.com/article/jsdcs.html