转换为数组的三种方法

前言：

　　　　我们常常想使用数组方法，如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]