ES6如何将伪数组转换成数组

今天小编给大家分享一下ES6如何将伪数组转换成数组的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

在做网站、成都网站设计过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。成都创新互联还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

在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"]

以上就是“ES6如何将伪数组转换成数组”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

分享名称：ES6如何将伪数组转换成数组
分享链接：https://www.cdcxhl.com/article40/pceeeo.html

成都网站建设公司_创新互联，为您提供静态网站、软件开发、、面包屑导航、网站排名、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联