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 函数链之演变
Apr 07 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
个人小程序接入支付解决方案
May 23 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
浅谈django orm 优化
2018/08/18 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Python字符串对象实现原理详解
2019/07/01 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Django ORM filter() 的运用详解
2020/05/14 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
python 实现客户端与服务端的通信
2020/12/23 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
学术诚信承诺书
2014/05/26 职场文书
幼儿园见习报告
2014/10/30 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python