ES6入门教程之Array.from()方法

网络编程 2025/1/2 佚名

3 2 1

圆月山庄资源网 Design By www.vgjia.com

前言

ES6为Array增加了from函数用来将其他对象转换成数组。

当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。

1.部署了Iterator接口的对象，比如：Set，Map，Array。

2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

1、将类数组对象转换为真正数组：

let arrayLike = {
 0: 'tom', 
 1: '65',
 2: '男',
 3: ['jane','john','Mary'],
 'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

那么，如果将上面代码中 length 属性去掉呢？实践证明，答案会是一个长度为0的空数组。

这里将代码再改一下，就是具有 length 属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

let arrayLike = {
 'name': 'tom', 
 'age': '65',
 'sex': '男',
 'friends': ['jane','john','Mary'],
 length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]

会发现结果是长度为4，元素均为 undefined 的数组

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该类数组对象必须具有 length 属性，用于指定数组的长度。如果没有 length 属性，那么转换后的数组是一个空数组。

2、该类数组对象的属性名必须为数值型或字符串型的数字

该类数组对象的属性名可以加引号，也可以不加引号

2、将Set结构的数据转换为真正的数组：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from 还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

如下：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(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 来快速生成数据
const originNews = Array.from(
 { length: 10000 },
 (v, k) => ({ content: `新闻${k}` })
)

3、将字符串转换为数组：

let str = 'hello world!';
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 会返回一个一模一样的新数组

把数组按指定大小进行分组，可以用于分页、数据切割、异步操作数据。

const chunk = (arr, size) =>
 Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
 arr.slice(i * size, i * size + size)
 );

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

es6,from方法,es6,array.from()方法

标签：

es6,from方法,es6,array.from()方法

圆月山庄资源网 Design By www.vgjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

圆月山庄资源网 Design By www.vgjia.com

评论“ES6入门教程之Array.from()方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年01月02日

ES6入门教程之Array.from()方法

es6,from方法,es6,array.from()方法

vue中组件的3种使用方式详解

setTimeout与setInterval的区别浅析

评论“ES6入门教程之Array.from()方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接