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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
Postman无法正常返回结果问题解决
Aug 28 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
php array_search() 函数使用
2010/04/13 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php生成验证码函数
2015/10/20 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
深入理解Antd-Select组件的用法
2020/02/25 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
秘书岗位职责
2013/11/18 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
道路建设实施方案
2014/03/18 职场文书
应届生求职信范文
2014/05/26 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
早读课迟到检讨书
2014/09/25 职场文书
故意伤害辩护词
2015/05/21 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
java基础——多线程
2021/07/03 Java/Android