zoukankan      html  css  js  c++  java
  • ES6之Array.from()方法

    ES6之Array.from()方法:https://www.cnblogs.com/jf-67/p/8440758.html

               https://www.cnblogs.com/kongxianghai/p/7417210.html

    1、类数组对象:所谓类数组对象,最基本的要求就是具有length属性的对象。

    2、Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。Array.from有三个参数,Array.from(arrayLike[, mapFn[, thisArg]]),arrayLike:想要转换成数组的伪数组对象或可迭代对象;mapFn:如果指定了该参数,新数组中的每个元素会执行该回调函数;thisArg:可选参数,执行回调函数 mapFn 时 this 对象。该方法的返回值是一个新的数组实例(真正的数组)。

    3、例子1——将类数组转换为数组

    let array = {
        0: 'name', 
        1: 'age',
        2: 'sex',
        3: ['user1','user2','user3'],
        'length': 4
    }
    let arr = Array.from(array )
    console.log(arr) // ['name','age','sex',['user1','user2','user3']]
    

    如果将上面代码中length属性去掉arr将会是一个长度为0的空数组,如果将代码修改一下,就是具有length属性,但是对象的属性名不再是数字类型的,而是其他字符串型的,代码如下:

    let array = {
        'name': 'name', 
        'age': 'age',
        'sex': 'sex',
        'user': ['user1','user2','user3'],
        'length': 4
    }
    let arr = Array.from(array )
    console.log(arr)  // [ undefined, undefined, undefined, undefined ]
    

    会发现结果是长度为4,元素均为undefined的数组,由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:
    (1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
    (2)该类数组对象的属性名必须为数值型或字符串型的数字
    该类数组对象的属性名可以加引号,也可以不加引号

    4、例子2:——将Set解构的数据转换为数组

    let arr = [1,2,3,4,5,6,7,8,9]
    let set = new Set(arr)
    console.log(Array.from(set))  // [1,2,3,4,5,6,7,8,9]
    

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

    let arr = [1,2,3,4,5,6,7,8,9]
    let set = new Set(arr)
    console.log(Array.from(set, item => item + 1)) // [2,3,4,5,6,7,8,9,10]
    

    5、例子3——将字符串转换为数组

    let  str = 'hello world!';
    console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
    

    6、例子4——将Map解构转为数组,最方便的做法就是使用扩展运算符(...)

    const myMap = new Map().set(true, 7)
    console.log(myMap); //Map(1) {true => 7}
    console.log([...myMap]); //[true ,7]


    作者:Julian小龙虾
    链接:https://www.jianshu.com/p/f4554f74de95
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    ES6之Array.from()方法

     

      Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

      那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。

      1、将类数组对象转换为真正数组:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let arrayLike = {
        0: 'tom'
        1: '65',
        2: '男',
        3: ['jane','john','Mary'],
        'length': 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr) // ['tom','65','男',['jane','john','Mary']]

      

      那么,如果将上面代码中length属性去掉呢?实践证明,答案会是一个长度为0的空数组。

      这里将代码再改一下,就是具有length属性,但是对象的属性名不再是数字类型的,而是其他字符串型的,代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let arrayLike = {
        'name''tom'
        'age''65',
        'sex''男',
        'friends': ['jane','john','Mary'],
        length: 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr)  // [ undefined, undefined, undefined, undefined ]

      会发现结果是长度为4,元素均为undefined的数组

      由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

      1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

      2、该类数组对象的属性名必须为数值型或字符串型的数字

      ps: 该类数组对象的属性名可以加引号,也可以不加引号

      2、将Set结构的数据转换为真正的数组: 

    1
    2
    3
    let arr = [12,45,97,9797,564,134,45642]
    let set = new Set(arr)
    console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

      

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

    1
    2
    3
    let arr = [12,45,97,9797,564,134,45642]
    let set = new Set(arr)
    console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

      

      3、将字符串转换为数组:

    1
    2
    let  str = 'hello world!';
    console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

      

      4、Array.from参数是一个真正的数组:

    1
    console.log(Array.from([12,45,47,56,213,4654,154]))

      像这种情况,Array.from会返回一个一模一样的新数组

    作者:江峰★ 
    出处:http://www.cnblogs.com/jf-67/ 
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利

  • 相关阅读:
    STM32 F4 DAC DMA Waveform Generator
    STM32 F4 General-purpose Timers for Periodic Interrupts
    Python第十四天 序列化 pickle模块 cPickle模块 JSON模块 API的两种格式
    Python第十三天 django 1.6 导入模板 定义数据模型 访问数据库 GET和POST方法 SimpleCMDB项目 urllib模块 urllib2模块 httplib模块 django和web服务器整合 wsgi模块 gunicorn模块
    查看SQL Server服务运行帐户和SQL Server的所有注册表项
    Pycharm使用技巧(转载)
    SQL Server 2014内存优化表的使用场景
    Python第十天 print >> f,和fd.write()的区别 stdout的buffer 标准输入 标准输出 从控制台重定向到文件 标准错误 重定向 输出流和输入流 捕获sys.exit()调用 optparse argparse
    Python第七天 函数 函数参数 函数里的变量 函数返回值 多类型传值 函数递归调用 匿名函数 内置函数
    Python第六天 类型转换
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/10475872.html
Copyright © 2011-2022 走看看