• ES6的数组方法之Array.from


    首先说说什么是数组:数组在类型划分上归为Object,属于比较特殊的对象,数组的索引值类似于对象的key值。

    数组的几个注意点

    1.数组的长度是可读属性,不可更改,数组的长度根据索引最大值。

    2.数组的索引值可以是字符串等,但这个不影响数组的长度。

    3.数组根据下标最大值,会自动补齐对应的其他索引值,且值为空。

    ES6新增了数组的一系列方法,如Array.of,Array.from,Array.find等等

    数组与类数组的最大区别在于数组自身具有迭代器iterator

    Array.from   方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和 Map)

    任何有length属性的都可以转换为数组。

    document.querySelectorAll() //返回的是object,但是内有迭代器,可循环
    document.getElementsByClassName()//类数组集合,不可循环
    function fn(){
        let args = arguments //不定参集合,不可循环
    }

    解决方法

    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] //ES5
    

    或者

    arr = Array.from(likeArr) //ES6  不改变原来的类数组,返回新的数组
    

    在解决不定参的转为数组也可以用扩展运算符

    function foo() {  var args = [...arguments]; } //扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换

     Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组.

    Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]

    利用这一特性,可以这样做:

    Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]

    或者这样

    function typesOf () {  return Array.from(arguments, value => typeof value) }

    Array.from()可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然 后转成规范的数组结构,进而就可以使用数量众多的数组方法

    Array.from({ length: 2 }, () => 'jack') // ['jack', 'jack']

    对于不支持Array.from的浏览器,可以用Array.prototype.slice方法去弥补

    const toArray = (() => 
       Array.from ? Array.from : obj => [].slice.call(obj)
    )();

      

      

  • 相关阅读:
    dotnet run urls=http://*:8080
    内敛声明变量
    C#反射赋值(更新时用)
    mysql---auto_increment=10啥意思呢?
    vscode--代码折叠与展开
    联想启天M410台式机的清除BIOS密码
    AntD是什么?
    react-router-dom 中文文档
    Recoil是什么?
    sql server查看建表的创建代码?
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/9497579.html
Copyright © 2020-2023  润新知