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


Posted in Javascript onMarch 23, 2019

前言

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)
 );

总结

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

Javascript 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JS常用算法实现代码
Nov 14 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
setTimeout与setInterval的区别浅析
Mar 23 #Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 #Javascript
vue中axios请求的封装实例代码
Mar 23 #Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 #Javascript
浅谈Angular单元测试总结
Mar 22 #Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 #Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 #Javascript
You might like
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
简单了解前端渐进式框架VUE
2020/07/20 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
Python类属性与实例属性用法分析
2015/05/09 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
如何用Python徒手写线性回归
2021/01/25 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
合同协议书格式
2014/04/18 职场文书
实习指导老师评语
2014/04/26 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书