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 相关文章推荐
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
js预加载图片方法汇总
Jun 15 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JS实现简单的九宫格抽奖
Jun 28 Javascript
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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
jquery remove方法应用详解
2012/11/22 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python 下载及安装详细步骤
2019/11/04 Python
python-视频分帧&多帧合成视频实例
2019/12/10 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
护士岗前培训自我评鉴
2014/02/28 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书