ES6入门教程之Array.from()方法
前言
ES6为Array增加了from函数用来将其他对象转换成数组。
当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。
1.部署了Iterator接口的对象，比如：Set，Map，Array。
2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。
1、将类数组对象转换为真正数组：
letarrayLike={
0:'tom',
1:'65',
2:'男',
3:['jane','john','Mary'],
'length':4
}
letarr=Array.from(arrayLike)
console.log(arr)//['tom','65','男',['jane','john','Mary']]
那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。
这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：
letarrayLike={
'name':'tom',
'age':'65',
'sex':'男',
'friends':['jane','john','Mary'],
length:4
}
letarr=Array.from(arrayLike)
console.log(arr)//[undefined,undefined,undefined,undefined]
会发现结果是长度为4，元素均为undefined的数组
由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
2、该类数组对象的属性名必须为数值型或字符串型的数字
该类数组对象的属性名可以加引号，也可以不加引号
2、将Set结构的数据转换为真正的数组：
letarr=[12,45,97,9797,564,134,45642] letset=newSet(arr) console.log(Array.from(set))//[12,45,97,9797,564,134,45642]
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
如下：
letarr=[12,45,97,9797,564,134,45642] letset=newSet(arr) console.log(Array.from(set,item=>item+1))//[13,46,98,9798,565,135,45643]
快速创建一个1~20的数组
Array.from({length:20},(t,i)=>i+1)
//[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
模拟生成1万条数据
//模拟生成1万条数据，利用了Array.from来快速生成数据
constoriginNews=Array.from(
{length:10000},
(v,k)=>({content:`新闻${k}`})
)
3、将字符串转换为数组：
letstr='helloworld!'; console.log(Array.from(str))//["h","e","l","l","o","","w","o","r","l","d","!"]
4、Array.from参数是一个真正的数组：
console.log(Array.from([12,45,47,56,213,4654,154]))
像这种情况，Array.from会返回一个一模一样的新数组
把数组按指定大小进行分组，可以用于分页、数据切割、异步操作数据。
constchunk=(arr,size)=>
Array.from({length:Math.ceil(arr.length/size)},(v,i)=>
arr.slice(i*size,i*size+size)
);
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。