7、前端知识点--关于Array.from详解

1、Array.from()方法就是将一个类数组对象 或 可遍历对象 或 可迭代对象 转换成一个真正的数组。浅拷贝的数组实例。

2、那么，什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

应用一、将类数组对象转换为真正数组

let arrayLike = { 0:'jack', 1:'60', 2:'男', 3:['rose','john','mary'], 'length':4};
let arr = Array.from(arrayLike)
console.log(arr)
// 返回值：  ["jack", "60", "男", Array(3)]
// 如果，将上面代码中的length属性去掉的话，运行结果是，长度为0的一个空数组。

如果将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

let arrayLike2 = { 'name':'tom', 'age':60, 'sex':'男', 'friends':['jack','jogn','mary'],length:4}
let arr2 = Array.from(arrayLike2)
console.log(arr2)
// 运行结果：(4) [undefined, undefined, undefined, undefined]，即长度为4，每个元素为undefined

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

　　1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

　　2、该类数组对象的属性名必须为数值型或字符串型的数字

　　ps: 该类数组对象的属性名可以加引号，也可以不加引号

应用二、将Set结构的数组转换成真正的数组

let arr3 = [12,45,97,9797,564,134,45642]
let set = new Set(arr3)
console.log(set)  
// 返回结果：Set(7) {12, 45, 97, 9797, 564, …}，即set集合对象

console.log(Array.from(set)) 
 // 返回结果： (7) [12, 45, 97, 9797, 564, 134, 45642]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

let arr4 = [10, 20, 30, 40, 50, 60, 70, 80 ,90]
let set4 = new Set(arr4)
console.log(Array.from(set4,item => item + 5))
// 返回结果： (9) [15, 25, 35, 45, 55, 65, 75, 85, 95]

应用三、将字符串转成数组

let str2 = 'hello world'
console.log(Array.from(str2))
// 返回值：(11) ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

应用四、Array.from参数是一个真正的数组，那么返回的是和原数组一模一样的 数组

console.log(Array.from([10, 20, 30, 40, 50, 60, 70, 80 ,90]))
// 返回值：(9) [10, 20, 30, 40, 50, 60, 70, 80, 90]