js Array.from() 和 Array.of()
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである。数组在本质上来说是对象,这次主要来讲讲一个ES6新方法,把特定对象转化为数组。
Array.from(obj, callback, thisArg)
把一个可以遍历的对象(内部有Symbol.iterator迭代器)转化为真正的数组。
第一个参数传入需要转化为数组的对象,第二个是回调函数,该对象被转化为数组之后还需要做什么处理的时候写上,本质上这个回调函数就是map方法,第三个参数thisArg,希望传入的对象并被第二个回调函数以this引用的对象,第三参数不详细讲,大家可以参考我之前写的博客
传送门。
这个方法拥有返回值,需要参数来接收。
现在举几个常用的这个方法的应用场景
- 获取DOM节点信息转化数组。
<ul>
<li>kaiqisan</li>
<li>Sam</li>
<li>Lily</li>
</ul>
const objLi = document.querySelectorAll('li')
console.log(objLi);
// objLi = {
// length: 3,
// 0: {...节点信息},
// 1: {...节点信息},
// 2: {...节点信息}
// }
const name = objLi.map(aa => aa.textContent) // 必报错
此时,objLi只是一个类数组,它的原型是NodeList,它拥有迭代器,可以遍历,但是无法使用数组的方法
此时,Arrey.from() 就可以解决这个问题。
const objLi = document.querySelectorAll('li')
const arrLi = Array.from(objLi)
const name = arrLi.map(aa => aa.textContent)
// 获取标签内部所有文字信息
console.log(name) // ["kaiqisan", "Sam", "Lily"]
上面说到这个Array.from这个方法拥有第二个参数,为回调函数,所以上面的Arrat.from方法和map方法可以合二为一。
const objLi = document.querySelectorAll('li')
let name = Array.from(objLi, aa => aa.textContent)
console.log(name) // ["kaiqisan", "Sam", "Lily"]
- 可以把函数里的数组对象(arguments)转化成真正的数组
function sum() {
console.log(arguments);
// arguments = {
// 0: 1,
// 1: 5,
// 2: 7,
// 3: 8,
// length: 4
// }
return arguments.reduce((prev, curr) => prev + curr, 0) // arguments不是数组,必报错
}
sum(1, 5, 7, 8)
//此时,无法直接调用函数,因为此时arguments还不是一个真正的数组,它的原型只是Object(对象),它没有reduce方法
此时,应该将它正式转化为数组
function sum() {
console.log(arguments);
return Array.from(arguments).reduce((prev, curr) => prev + curr, 0) // arguments不是数组,必报错
}
sum(1, 5, 7, 8) // 21
- 可以把字符串转化为数组
const name = 'kaiqisan'
console.log(Array.from(name))
//输出长度为8的由单个字母组成的字符串
//["k", "a", "i", "q", "i", "s", "a", "n"]
- 可以把set map类型的数据转化为数组
let s = new Set(['app', 100]);
Array.from(s);
// ["app", 100]
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
- 这个也是Array.from()转化遵循的最基本原则,上面的DOM转化和arguments转化就是很好的例子
let obj = {
0: 'aa',
1: '1212',
2: 1111,
length: 3
}
console.log(Array.from(obj)); // ["aa", "1212", 1111]
现在来讲讲它的转化机制,首先,它会浏览对象里面的所有元素,找到键名为数字的一些成员,提取出来,排列成一个临时数组(我的叫法),它的最大下标就是这个数字键名中最大的那个。然后,寻找对象中键名为length的成员,最终形成的数组长度就由这个length值决定,如果临时数组短了,就会再在这个临时数组后面再续一些空成员(undefined),如果临时数组短长了,就要腰斩这个临时数组直到指定的length.
注意,待转化的对象中,这个length必须要有,它的合法值是 0 ~~ +∞,如果没有这个length或者这个length值不合法,只能生成一个空数组。
实例1
let obj = {
0: 'aa',
1: '1212',
2: 1111,
length: 5 // length偏长
}
console.log(Array.from(obj)); // ["aa", "1212", 1111, undefined, undefined]
实例2
let obj = {
0: 'aa',
1: '1212',
2: 1111,
length: 2 // length偏短
}
console.log(Array.from(obj)); // ["aa", "1212"] 第三个元素被腰斩抬走了
实例3
// 对象有除了键名为数组的成员之外还有别的成员
let obj = {
0: 'aa',
2: '1212',
5: 1111,
name: 'ddd',
id: 1000,
length: 8
}
console.log(Array.from(obj)); // 对象属性 name id 被丢弃
// ["aa", undefined, "1212", undefined, undefined, 1111, undefined, undefined]
实例4
// 没有length
let obj = {
0: 'aa',
1: '1212',
2: 1111,
}
console.log(Array.from(obj)); // []
Array.of(...vals)
: 用于弥补new Array()一些创建时的机制问题
使用new Array()这个构造函数建立数组的时候,有时候会出现我们不想要的结果
const a =new Array(1) // 产生长度为1的空数组而不是长度为1,值为[1]的数组
const b=new Array(7) // 产生长度为7的空数组,而不是长度为1,值为[7]的数组
const c=new Array(2, 3, 4)// [2, 3, 4]
所以我们使用Array.of()方法会更加灵活,也可以避免上述的错误。
const a = Array.of(7) // 产生长度为1.值为[7]的数组,而不是长度为7,全部值为空的数组
const b = Array.of(2, 3) // 产生长度为2,值为[2,3]的数组
const c = Array.of() // 里面啥也不写,返回空数组 []
总结
温馨提示,部分浏览器内核无法接受ES6新方法,需要手动转化或者使用工具来转化ES6到ES5以便于兼容部分版本低下的浏览器。