1. 介绍
作用：将一个伪数组对象或者可迭代的任意对象转换为一个真正的数组
语法： Array.from(arrayLike [, mapFunction [, thisArg]])
- arrayLike：必传参数，指定需要转换为数组的伪数组对象或任意可迭代的对象
- mapFunction：可选参数，mapFunction( item, index ){} 是在集合中的每个项目上调用的方法，返回的值插入到新集合中
- thisArg: 可选参数，执行回调函数 mapFunction 时的 this 对象，很少用
2. 将伪数组转换为真正的数组
2.1 DOM 集合
// 最常见的伪数组就是 DOM 集合
let lis = document.querySelectorAll('ul > li')
let newLis = Array.from(lis)
console.log(newLis);
2.2 函数中的 arguments 关键字
function sum() {
// reduce() 方法接收的两个参数分别代表的是上一次返回的值，和这一次遍历的值
let arr = Array.from(arguments).reduce((x, y) => x + y)
console.log(arr)
// 6
}
sum(1, 2, 3)
2.3. 将字符串转换为数组
let str = 'JavaScript'
let arr = Array.from(str)
console.log(arr)
// ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
2.4 带有 length 的对象
let obj = {
0: '张三',
1: 59,
2: '男',
length: 3,
}
console.log(obj)
// { '0': '张三', '1': 59, '2': '男', length: 3 }
let arr = Array.from(obj)
console.log(arr)
// [ '张三', 59, '男' ]
/*** 如果将上面代码中的 length 去掉，返回的就是一个长度为 0 的空数组 ***/
将上面的代码再次进行改进：将对象中的 key 修改为 字符串类型
let obj = {
'0': '张三',
'age': 59,
'sex': '男',
length: 3,
}
console.log(obj)
// { '0': '张三', age: 59, sex: '男', length: 3 }
let arr = Array.from(obj)
console.log(arr)
// [ '张三', undefined, undefined ]
虽然可以返回数组，但是除了字符串类型的数值，其他的字符串均被识别为了 undefined。
由此可见，要将一个伪数组转换为一个真正的数组，需要满足以下两个条件：
- 伪数组必须携带
length属性，用于指定数组的长度。如果没有，转换出来的就是一个空数组 - 伪数组对象的属性值必须是
数值型或者字符串类型的数值
3. 数组去重
// 原理：利用 set 集合会去除重复项的能力
let arr = [1, 2, 3, 1]
let set = new Set(arr)
console.log(set)
// Set(3) { 1, 2, 3 }
let newArr = Array.from(set)
console.log(newArr)
// [ 1, 2, 3 ]
// 打包成函数
function unique(arr) {
return Array.from(new Set(arr))
}
console.log(unique([1, 1, 2, 3, 3]))
// [ 1, 2, 3 ]
4. Array.from() 方法的第二项参数
第二项参数为一个函数，会在每个元素上进行调用，返回的值插入到新集合中。
let arr = [10, 22, 30]
let newArr = Array.from(arr, (item) => item * 2)
console.log(newArr)
// [ 20, 44, 60 ]
// 类似于 map() 方法
let newArr2 = arr.map((item) => item * 2)
console.log(newArr2);
// [ 20, 44, 60 ]