概述
本教程操作环境: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怎么将伪数组转换成数组所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复