Javascript学习之路：Array.from详解

@德玛玩前端
2023-07-07

在以往的开发中，对于Array.from的了解是from是Array的静态方法，可以将类数组和迭代对象转换为数组，可以结合Set集合快速实现数组的去重，一直以为Array,from()只有一个参数，不是传类数组就是可迭代对象，但是，今天，在阅读他人写的node项目时，出现了以下代码。

我当时真的是蒙蔽的，因为在我的认知中，这个方法应该不会出现第二个参数😵😵😵😵😵😵。

所以，我花了些许的时间，专门对这个静态方法做了整理（也不知道详不详细，如有遗漏，欢迎各位大神和同行们指教😘😘😘）。并将学习的成果记录如下，和大家分享ヾ(≧▽≦*)o：

Array.from()

Array.from(arrayLike,Function,thisObj)

• arrayLike 必传参数，想要转换成数组的数组，类数组或可迭代对象
• Function 可选参数，Function(item,value){…}是在集合中每个元素上调用的函数。返回的值将插入到新集合中
• thisArg 可选参数，执行回调函数Function时this对象，这个参数很少使用

用途1：把类数组转换成数组

类数组一般是 dom集合或者arguments关键字等

示例

将arguments关键字转换为数组，使用数组原型对象上的reduce方法

function sum(){
	return Array.from(arguments).reduce((sum,val)=>sum+val)
} 
sum(1,2,3) //6

用途2.可迭代对象转换为数组

示例1：字符串转换成数组

Array.from('dema') //['d', 'e', 'm', 'a']
//api实现效果同'dema'.split('') //['d', 'e', 'm', 'a']

示例2：集合转换成数组

Array.from(new Set([1,2])) //[1,2]

示例3：映射转数组

const map = new Map();
map.set('orgId_1', 1);
map.set('orgId_2', 2);
Array.from(map) //[ ['one', 1] , ['two', 2]]
// api实现效果同打散映射 ...map

用途3.克隆数组

浅拷贝

const arr=[1,2,3]
const arrCopy=Array.from(arr)
console.log(arr===arrCopy) //false

利用递归进行深拷贝

function deepCopy(val){
	return Array.isArray(val)?Array.from(val,deepCopy):val
}
const arr=[[1,2,3],['dongdong','haohao','haha']]
const arrCopy = deepCopy(arr);
console.log(arr[0]===arrCopy[0]) //false

用途4.使用值填充数组

创建一个填充相同默认值的数组，传入一个类数组对象 { length } 和 返回初始化值的 Function 函数。

const length =3
const init=0
const result=Array.from({length},()=>init)
console.log(result) //[0, 0, 0]
// result就是一个长度为3的新数组
// 实现效果类似于 new Array(3).fill(0)

用途5.使用不同的空对象填充数组

数组中的每一个对象都是一个新对象

const length=3
const resultA=Array.from({length},()=>({}))
const resultB=Array(length).fill({})
console.log(resultA) // [{},{},{}]
console.log(resultB) // [{},{},{}]

可以看出，由Array.from创建数组中的对象不是一个对象，而Array.fill()创建数组中的对象是同一个对象

console.log(resultA[0]===resultA[1]) //false
console.log(resultB[0]===resultB[1])  //true

下一个用途终于解答了我的疑惑😁😁😁😁😁

用途6.生成数字范围

可以用Array.from()生成值的范围

function range(end){
	var wd="a"
	return Array.from({length:10},(_,i)=>`${wd}${i+1}`)
}
range(4) 
// ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10']

用途7.数组去重

Array.from可结合Set集合实现数组的快速去重

function arr(array){
	return Array.from(new Set(array))
}
arr([1,2,2,2,3,4,5]) //[1, 2, 3, 4, 5]