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 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
数据库相关问题
2006/10/09 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
降低PHP Redis内存占用
2017/03/23 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
微信小程序实现分享商品海报功能
2019/09/30 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
对vue生命周期的深入理解
2020/12/03 Vue.js
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python新手学习标准库模块命名
2020/05/29 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
军训自我鉴定范文
2014/02/13 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
中英文求职信范文
2015/03/19 职场文书
靠谱的活动总结
2019/04/16 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
mysql数据库如何转移到oracle
2022/12/24 MySQL