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中的Unescape()和String() 函数
Nov 09 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
php 获取可变函数参数的函数
2009/08/26 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
python生成日历实例解析
2014/08/21 Python
替换python字典中的key值方法
2018/07/06 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
培训心得体会
2013/12/29 职场文书
退学证明范本3篇
2014/10/29 职场文书
2014年班组工作总结
2014/11/20 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
公司辞职信模板
2015/05/13 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫