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 动态生成方法的例子
Jul 22 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
vue实现简单瀑布流布局
May 28 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
javascript document.images实例
2008/05/27 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
详解vue-cli中配置sass
2017/06/21 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python如何生成网页验证码
2018/07/28 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
在python中pandas的series合并方法
2018/11/12 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
保险专业求职信
2014/07/07 职场文书
新店开张活动方案
2014/08/24 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
模范班主任事迹材料
2014/12/17 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
摩登时代观后感
2015/06/03 职场文书
飞屋环游记观后感
2015/06/08 职场文书