Array.from()方法就是将一个类数组对象或者部署了Iterator接口的对象(Set、Map、Array)转换成一个真正的数组。
那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。
基本用法
var arrayLike = {
0: '张三',
1: 18,
2: ['lei','hai','yuan'],
3: '上海市',
length: 4
}
const arr = Array.from(arrayLike)
console.log(arr) // ["张三", 18, Array(3), "上海市"]
注意:
一定要有length属性
length属性的长度是除了本属性其它属性的个数。
类数组的key是数字
下面看下如果不是真正的类数组会出现什么情况
// 1、 将length属性去掉,会返回空数组[]
var arrayLike = {
0: '张三',
1: 18,
2: ['lei','hai','yuan'],
3: '上海市',
}
const arr = Array.from(arrayLike)
console.log(arr) // []
// 2、key不为数字
var arrayLike = {
'a': '张三',
'b': 18,
'c': ['lei','hai','yuan'],
'd': '上海市',
length: 4
}
const arr = Array.from(arrayLike)
console.log(arr) // [undefined, undefined, undefined, undefined]
// 3、数字key不从0开始
var arrayLike = {
1: '张三',
3: 18,
2: ['lei','hai','yuan'],
4: '上海市',
length: 4
}
const arr = Array.from(arrayLike)
console.log(arr) // [undefined, "张三", Array(3), 18]
可以看到length=4就代表arr[0]、arr[1]、arr[2]、arr[3] 这个数字就是类数组对象的key。
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
var arrayLike = {
0: 2,
1: 4,
2: 6,
length:3
}
console.log(Array.from(arrayLike, x => x * x)) // [4, 16, 36]
// 等同于
console.log(Array.from(arrayLike).map(x => x*x))
应用场景
1、字符串转数组
var s = "dkandedg"
var arr = Array.from(s)
console.log(arr) // ["d", "k", "a", "n", "d", "e", "d", "g"]
2、数组去重
function dupRem(arr) {
return Array.from(new Set(arr))
}
console.log(dupRem([3,5,3,2,6,5,3])) // [3, 5, 2, 6]
3、arguments转对象
// 求最大值
function max() {
return Math.max.apply(null,Array.from(arguments))
}
console.log(max(16,28,23)) // 28
// 求和
function sum() {
return Array.from(arguments).reduce((sum,key) => sum+key)
}
console.log(sum(1,2,3)) // 6
4、set转数组
var arr = [2,3,6,8]
var set = new Set(arr)
console.log(Array.from(set)) // [2, 3, 6, 8]