任何编程语言都具有超出基本用法的功能，这得益于成功的设计和尝试解决范围广泛的问题。JavaScript中有这样一个函数：Array.from：允许对JavaScript集合（例如：数组、类数组对象，或可迭代对象，如字符串、映射、集合等）进行有用的转换。在本文中，我描述了Array.from()的5个有用且有趣的用例。简介在开始之前，让我们回顾一下Array.from()的作用。语法：Array.from(arrayLike[,mapFunction[,thisArg]])arrayLike必须传参，要转成数组的伪数组对象或可迭代对象。mapFunction：可选参数，mapFunction(item,index){...}是对集合中的每个项目调用的函数。返回值将被插入到新集合中。thisArg：可选参数，执行回调函数mapFunction时的this对象。这个参数很少使用。例如，让我们将类数组的每一项乘以2：constsomeNumbers={'0':10,'1':15,length:2};Array.from(someNumbers,value=>value*2);//=>[20,30]2.将类数组对象转换为数组Array.from()第一个目的：将类数组对象转换为数组。通常，你会遇到的类数组对象是：函数中的arguments关键字，或者DOM集合。在下面的示例中，让我们对函数的参数求和：functionsumArguments(){returnArray.from(arguments).reduce((sum,num)=>sum+num);}sumArguments(1,2,3);//=>6Array.from(arguments)将类数组对象arguments转换为数组，然后使用数组的reduce方法求和。另外，Array.from()的第一个参数可以是任何可迭代对象，我们继续看一些例子：Array.from('Hey');//=>['H','e','y']Array.from(newSet(['one','two']));//=>['one','two']constmap=newMap();map.set('one',1)map.set('two',2);Array.from(map);//=>[['one',1],['two',2]]3.克隆数组在JavaScript中有很多克隆数组的方法。正如您想象的那样，Array.from()使数组的浅拷贝变得容易。常量数字=[3,6,9];constnumbersCopy=Array.from(numbers);数字===数字复制；//=>falseArray.from(numbers)创建一个numbers数组的浅拷贝，numbers===numbersCopy的结果为false，也就是说numbers和numbersCopy虽然有相同的项，但是它们是不同的数组对象。是否可以使用Array.from()创建数组的克隆，包括所有嵌套的数组？挑战！函数recursiveClone(val){返回Array.isArray(val)？Array.from(val,recursiveClone):val;}constnumbers=[[0,1,2],['one','two','three']];constnumbersClone=recursiveClone(numbers);numbersClone;//=>[[0,1,2],['one','two','three']]numbers[0]===numbersClone[0]//=>falserecursiveClone()可以深拷贝数组，通过判断数组的item是否为数组，如果是数组，则继续调用recursiveClone()实现数组的深拷贝。你能写一个比用Array.from()递归复制更短的数组深层副本吗？如果可以的话，请在下方评论区留言。用值填充数组如果需要用相同的值初始化一个数组，那么Array.from()会是一个不错的选择。让我们定义一个函数来创建一个填充有相同默认值的数组：constlength=3;常量初始化=0；constresult=Array.from({length},()=>init);结果;//=>[0,0,0]result是一个新的数组，它的长度是3，数组的每一项都是0。调用Array.from()方法，传入一个类数组对象{length}和一个返回初始化值的mapFunction函数。但是，还有一种替代方法array.fill()可以实现相同的功能。constlength=3;constinit=0;constresult=Array(length).fill(init);fillArray2(0,3);//=>[0,0,0]fill()用初始值正确填充数组。4.1用对象填充数组当初始化数组的每一项都应该是一个新对象时，Array.from()是一个更好的解决方案：constlength=3;constresultA=Array.from({length},()=>({}));constresultB=Array(length).fill({});resultA;//=>[{},{},{}]resultB;//=>[{},{},{}]resultA[0]===resultA[1];//=>falseresultB[0]===resultB[1];//=>trueArray.from返回的resultA使用不同的空对象实例进行初始化。发生这种情况是因为mapFunction，这里()=>({})每次调用都会返回一个新对象。然后用相同的空对象实例初始化fill()方法创建的resultB。不会跳过空项目。4.2使用array.map怎么样？是不是可以使用array.map()方法来实现呢？让我们试试：constlength=3;constinit=0;constresult=Array(length).map(()=>init);result;//=>[undefined,undefined,undefined]map()方法似乎不正常，创建的数组不是预期的[0,0,0]，而是一个包含3个空项的数组。这是因为Array(length)创建了一个包含3个空项的数组（也称为稀疏数组），但map()方法会跳过空项。生成一系列数字您可以使用Array.from()生成一系列值。例如，下面的range函数生成一个从0到end-1的数组。functionrange(end){returnArray.from({length:end},(_,index)=>index);}range(4);//=>[0,1,2,3]在range()函数中，Array.from()提供了类似数组的{length:end}，以及一个简单返回当前索引的map函数。这样您就可以生成值范围。6、数组去重由于Array.from()的入参是一个可迭代对象，我们可以结合Set使用它来快速删除数组中的重复项。functionunique(array){returnArray.from(newSet(array));}`unique([1,1,2,3,3]);//=>[1,2,3]首先，newSet(array)创建一个包含数组的集合，Set集合去重。因为Set集合是可迭代的，所以可以使用Array.from()将其转换为新数组。这样，我们就实现了数组的去重。7.结论Array.from()方法接受类数组对象和可迭代对象。它可以接受一个映射函数，这个映射函数不会跳过值未定义的数值项。这些特性为Array.from()提供了多种可能性。如上所述，您可以轻松地将类数组对象转换为数组、克隆数组、用初始化填充数组、生成范围以及对数组进行去重。事实上，Array.from()设计得很好，配置灵活，允许很多集合转换。你知道Array.from()的任何其他有趣的用例吗？可以在留言区写。文章转自公众号：前端宇宙作者：刘小萌
