相关文章推荐
性感的毛豆  ·  js ...·  1 年前    · 
爱搭讪的猴子  ·  JavaScript ...·  1 年前    · 
本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

我们常常想使用数组的方法,比如 forEach filter ,又或者 some 等等来处理非数组的数据类型,那么在这些场景下,我们就需要将非数组转换为数组,而在ES6新增了三种数组转换方法,分别为** Array.form() ** , Array.of() 扩展运算符 ,三种转换方法各有不同的转换对象,下面我们来分别看看。

Array.from()

转换数组方法 Array.from() 可以将对象转化为真正的数组,对象包括了两种,分别是: 类数组对象 含有迭代器的对象

类数组对象转换实例

类数组对象的表现形式是以0,1数字作为键的一种对象形式,而使用 Array.from() 转换后,它的值将被转换为数组形式

如上,我们定义了一个 arrObj 的类数组对象,通过 Array.from() 转换方法将其转换为数组得到 ['猪痞恶霸', 'fzf404']

可能读者看到这里想说:转换成数组有什么用途啊,不能光学语法是不是,那么下面来看类数组对象转换数组真正的实际应用。

类数组对象转换应用

在开发中,我们操作DOM会用到节点列表,通过 document.querySelectorAll() 获取,如下图,可以清晰得了解到,我们拿到的节点列表是类数组对象,所以无法直接使用数组的一些方法,比如 forEach ,又或者是 filter 等等。

let str = "猪痞恶霸"
let strArr = Array.from(str)
console.log(strArray) // [ '猪', '痞', '恶', '霸' ]
    

拿字符串举例,转换为数组后,每个元素对应着字符串每一个字符,我们之前经常为切割字符串而烦恼,需要去使用正则切割,现在只需要Array.from(str)一行代码来完成字符串的割离。

这里的应用我不再举例,转换数组应用的本质都是为了更好地使用数组的方法去操控处理数据,而Array.from还有第二个参数

Array.from()的第二个参数

第二个参数比较像数组的map方法,作为一个回调函数来处理转换后数据的每一个元素

上面的操作,我模拟了字符串的处理,常常可以使用正则处理字符串,当然这就可以联想到我们可以使用这种方法来处理用户输入的内容,也可以防御恶意输入的产生。

以上就是将类数组对象又或者是含有迭代器的对象转换成数组的Array.from()方法,下面我们来看第二种Array.of

Array.of()

Array.of()可以将一组值转换成数组,其实他的真正实际应用是初始化数组。