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 相关文章推荐
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
js实现文字选中分享功能
Jan 25 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
子页向父页传值示例
2013/11/27 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
初三学习计划书范文
2014/04/30 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
分享一些Java的常用工具
2021/06/11 Java/Android