站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

ES6怎么将伪数组转换成数组

时间:2022-05-06 [网络编程]作者:fabuyuan 浏览:5 次

ES6中,可利用数组类型的from()方法来将伪数组转换成数组,该方法可以将一个类数组对象或者可遍历对象转换成一个真正的数组,语法“Array.from(伪数组对象).forEache(item=>console.log(item))”。

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

ECMAScript6新特性——伪数组

什么是伪数组 :如果一个对象的所有键都是正整数或零,并且有length属性,那么这个对象就很像数组,称为伪数组。

典型的伪数组:arguments对象,大多数的DOM元素集,还有字符串。

示例

let arrayLike = {
 "0": "a",
 "1": "b",
 "2": "c",
 "length": 3
}

像上面的 arrayLike 对象,有 length 属性,key 也是有序序列。

所以可以遍历,也可以查询长度。但却不能调用数组的方法。比如 push、pop 等方法。

在 ES6 之前,还有一个常见的伪数组:arguments。

arguments 看上去也很像一个数组,但它没有数组的方法。

比如 arguments.push(1) ,这样做一定会报错。

ES6怎么将伪数组转换成数组

在ES6中,可以利用Array类型的from 方法来将伪数组转换成数组。

Array.from()方法用于将两类对象转换为真正的数组:

1、类似数组的对象,可以理解为“伪数组”

2、可遍历对象(比如字符串)

  <button name="button">测试1</button>
    <br/>
    <button name="button">测试2</button>
    <br/>
    <button name="button">测试3</button>
    <br/>
<script>
//声明变量let变量,const常量
let btns=document.getElementsByName("button");
console.log("btns",btns);//得到一个伪数组
//此处出现异常:Uncaught TypeError:btns.forEach is not a function 
btns.forEach(item=>console.log(item))
</script>
<script>
Array.from(btns).forEache(item=>console.log(item))//将伪数组转换为数组
</script>

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

扩展知识:把字符串转成数组

let msg = 'hello';
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]

【相关推荐:javascript视频教程、web前端】

以上就是ES6怎么将伪数组转换成数组的详细内容,更多请关注站长家园其它相关文章!

本文标签:  ES6

转载请注明来源:ES6怎么将伪数组转换成数组

本文永久链接地址:https://www.adminjie.com/post/12002.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • es6怎么删除数组中的元素

      es6怎么删除数组中的元素

      删除方法:1、用shift()删除第一个元素,语法“arr.shift()”;2、用pop()删除最后一个元素,语法“arr.pop()”;3、用splice(...

    • php标量数据和数组的最大区别是什么

      php标量数据和数组的最大区别是什么

      最大区别是:一个标量只能存放一个数据,而数组可以存放多个数据;且标量类型是值传递,而数组是引用传递。在PHP中,标量数据有四种类型:布尔型、字符串、整型、浮点型...

    • php如何修改数组的下标

      php如何修改数组的下标

      两种方法:1、用“array_values($arr)”语句,可将关联数组转为索引数组,将字符串下标转为纯数字下标。2、用“array_combine(键名数组...

    • php怎么求数组下标

      php怎么求数组下标

      两种方法:1、用array_keys,语法“array_keys(数组,搜索值,false|true)”,会返回一个包含下标的数组。2、遍历数组,将下标存入一个...

    • angular学习之聊聊依赖注入

      angular学习之聊聊依赖注入

      什么是依赖注入?本篇文章带大家了解一下angular中的依赖注入(DI),详细介绍一下AngularDI框架的两个核心概念:注入器Injectors和提供者...

    热门文章