转换为数组的三种方法
前言:
我们常常想使用数组方法,如forEach、filter、map,或者some等等来处理非数组的数据类型,那么在这些场景下,我们需要将非数组转为数组,分别为Array.form()、Array.of()、扩展运算符。三种转换方法有不同的转换对象。
•Array.from():
转换数组方法Array.form()可以将对象转换为真正的数组,对象包括两种,分别是:类数组对象与含有迭代器的对象
>>类数组对象转换实例
类数组对象的表现形式是以0,1数字作为键的一种对象形式,而使用Array.from()
转换后,它的值将被转换为数组形式
let arrObj = { "0":"猪八戒",//键名必须从0开始 并且有几个 length=几 "1":"猴子", length:2 }; let arr = Array.from(arrObj) console.log(arr) //["猪八戒","猴子"]
>>类数组对象转换应用
在开发中,我们操作dom会用到节点列表,通过document.querySelectorAll()获取,如下图,可以清晰的了解到,我们拿节点列表是类数组对象,所以无法直接使用数组一些方法。如forEach、或filter。
let arr = document.querySelectorAll("p") console.log(arr) //NodeList(25) [p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p] typeof arr //object //使用array.from才可以转为真数组 let brr = Array.from(arr) //[p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p]
>>含有迭代器对象转换实例
Array.from()还可以将含有迭代器的对象转为真正数组,比如字符串,map或者是set。
let str = '猪八戒啊' let strArr = Arr.from(str) console.log(strArr)//['猪','八','戒','啊']
>>Array.from()的第二个参数
第二个参数比较像数组map方法,作为一个回调函数来处理转换后数据的每个元素
let str = "猪痞恶霸" let _str = Array.form(str, (item) => { return item+item }) console.log(_str) // [ '猪猪', '痞痞', '恶恶', '霸霸' ]
上面的操作,我模拟了字符串的处理,常常可以使用正则处理字符串,当然这就可以联想到我们可以使用这种方法来处理用户输入的内容,也可以防御恶意输入的产生。
•Array.of()
Array.of()可以将一组值转为数组,其实他的真正实际应用是初始化数组。
let arr = Array(1,2,3)
console.log(arr) //[1,2,3]
如上Array()也可以 为什么要用Array.of()呢 其实Array.of()弥补了Array()作为数组构造函数的不足
let arr = new Array(3) console.log(arr) // [ <3 empty items> ]
let arr = new Array(3, 2, 1); console.log(arr); // [ 3, 2, 1 ]
Array.of()
const d = Array.of(4) //[4]
•扩展运算符
可以通过使用扩展运算符将含有迭代器的对象转换为真正的数组
[...document.querySelectorAll("p")] //(25) [p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p, p]