JS Array.from()将伪数组转换成数组的方法示例


Posted in Javascript onMarch 23, 2020

Array.from 方法用于将两类对象转换为真正的数组:

1、类似数组的对象,可以理解为“伪数组”

2、可遍历对象(比如字符串)

什么是伪数组?

伪数组都有一个基本的特点:必须有 length 属性。

let arrayLike = {
 "0": "a",
 "1": "b",
 "2": "c",
 "length": 3
}

像上面的 arrayLike 对象,有 length 属性,key 也是有序序列。

所以可以遍历,也可以查询长度。但却不能调用数组的方法。比如 push、pop 等方法。

在 ES6 之前,还有一个常见的伪数组:arguments。

arguments 看上去也很像一个数组,但它没有数组的方法。

比如 arguments.push(1) ,这样做一定会报错。

ES5 的做法

在 ES6 问世之前,开发者通常需要用以下的方法把伪数组转换成数组。

方法1:遍历
// 通过 makeArray 方法,把数组转成伪数组
function makeArray(arrayLike) {
 let result = [];
 for (let i = 0, len = arrayLike.length; i < len; i++) {
  result.push(arrayLike[i]);
 }
 return result;
}

function doSomething () {
 let args = makeArray(arguments);
 console.log(args);
}
doSomething(1, 2, 3);

// 输出: [1, 2, 3]

这个方法虽然有效,但要多写很多代码。

方法2:Array.prototype.slice.call

function doSomething () {
 let args = Array.prototype.slice.call(arguments);
 console.log(args);
}
doSomething(1, 2, 3);

// 输出: [1, 2, 3]

这个方法的功能和 方法1 是一样的,虽然代码量减少了,但不能很直观的让其他开发者觉得这是在转换。

ES6的做法

直到 ES6 提供了 Array.from 方法完美解决以上问题。

function doSomething () {
 let args = Array.from(arguments);
 console.log(args);
}

doSomething('一', '二', '三');

// 输出: ['一', '二', '三']

Array.from 的主要作用就是把伪数组和可遍历对象转换成数组的。

说“主要作用”的原因是因为 Array.from 还提供了2个参数可传。这样可以延伸很多种小玩法。

Array.from 的第二个参数是一个函数,类似 map遍历 方法。用来遍历的。

Array.from 的第三个参数接受一个 this 对象,用来改变 this 指向。

第三个参数的用法(不常用)

let helper = {
 diff: 1,
 add (value) {
  return value + this.diff; // 注意这里有个 this
 }
};

function translate () {
 return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);

console.log(numbers); // 2, 3, 4

其他玩法

创建长度为5的数组,且初始化数组每个元素都是1

let array = Array.from({length: 5}, () => 1)
console.log(array)

// 输出: [1, 1, 1, 1, 1]

第二个参数的作用和 map遍历 差不多的,所以 map遍历 有什么玩法,这里也可以做相同的功能。就不多赘述了。

把字符串转成数组

let msg = 'hello';
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]

最后一个问题:如果传一个真正的数组给 Array.from 会返回什么结果?

答案是:会返回一个一模一样的数组。

到此这篇关于JS Array.from()将伪数组转换成数组的方法示例的文章就介绍到这了,更多相关JS Array.from伪数组转换成数组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
js 函数调用模式小结
Dec 26 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
详解Node.js开发中的express-session
May 19 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
区分vue-router的hash和history模式
Oct 03 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 #Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
用JS实现选项卡
Mar 23 #Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
You might like
浅谈PDO的rowCount函数
2015/06/18 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
让焦点自动跳转
2006/07/01 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
Vue组件开发初探
2017/02/14 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
详解jquery和vue对比
2019/04/16 jQuery
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python如何快速实现分布式任务
2017/07/06 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python合并同类型excel表格的方法
2018/04/01 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
利用python实现汉诺塔游戏
2021/03/01 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
外贸实习生自荐信范文
2013/11/24 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
大学辅导员述职报告
2015/01/10 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
SQL SERVER触发器详解
2022/02/24 SQL Server
MySQL分区表管理命令汇总
2022/03/21 MySQL