• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-05-05 14:04:20原创141

    在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个参数可传。这样可以延伸很多种小玩法。

    第三个参数的用法(不常用)

    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怎么将伪数组转换成数组的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:es6怎么去掉字符串的空格 下一篇:为什么要将es6转为es5
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• es6装饰器有几种• es6解构是深拷贝吗• es6怎么改变数组数据• es6中yield的用法是什么• es6里面has()的用法是什么• es6中常量可以修改吗
    1/1

    PHP中文网