• ES6之数组的扩展


    tip:在工作也有用到ES6的一些简单语法,但没有太系统的太细节的去了解实践过。所以最近主动营业啃起了阮老师的ES6标准入门,进一步学习。

    1.Array.from()

    用途:将类似数组的对象和可遍历的对象(包括ES6新增的数据结构Set和Map)转成真正的数组。

    类似数组事例:

    let arrLike = {
    '0': 'a',
    '1': 'b',
    length: 2 // 一定要标注length, ES5中如果length大于数组长度超出的部分会返回empty,ES6中则会返回undefine
    }
    // ES5写法
    var arr1 = [].slice.call(arrLike) // ['a', 'b']
    // ES6写法
    var arr2 = Array.from(arrLike) // ['a', 'b']

    *所谓类似数组的对象,本质特征只有一点,即必须有length属性。所以,任何有length属性的对象,都可以使用Array.from方法。而下面这种情况扩展运算符无法转换

      Array.from({length: 2}) // [undefine, undefine]

    对于没有支持ES6语法的浏览器可以使用Array.prototype.slice方法替代

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

    可遍历的对象:

    var arr5 = Array.from('hello') //  ["h", "e", "l", "l", "o"]
        let namesSet = new Set(['a', 'b'])
        Array.from(namesSet) //["a", "b"]

    因为字符串和Set结构都具有Iterator接口,因此可以被Array.from方法转成真正的数组。如果是一个真正的数组Array.from方法会返回 一个一模一样的新数组 

    此外,Array.from方法还支持第二参数,作用类似于数组的map方法,用来对每个元素进行处理

      let arrLike = {
          '0': '1',
          '1': '2',
          length: 2 
      }
     var arr3 = Array.from(arrLike, x => x * x)  //  [1, 4]
     var arr4 = Array.from(arrLike).map(x => x * x) //  [1, 4]

    Array.from()的另一个应用就是把字符串转成数组,然后返回字符串长度。好处是此方法可以正确处理各种Unicode字符,可以避免JavaScript大于uFFFF的字符的bug.

    2.Array.of()

    用途:将一组值起换为数组

    Array.of(1,2,3) // [1, 2, 3]
    Array.of(3) // [3]
    Array.of(1,2,3).length // 3

    此方法主要是用来弥补Array()的不足,因为参数不同会导致Array()的行为差异

    Array() // []
    Array(3) // [empty × 3]
    Array(1,2,3) // [1, 2, 3]

    此处小结:Array方法中参数>=2时返回新数组,参数<2时指定数组长度,而Array.of方法总是返回参数值组成的数组,如果没有参数,就返回一个空数组。

    3.数组实例的copyWithin()

    用途:在当前数组内部指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法会修改当前数组。

    Array.prototype.copyWithin(target, start = 0 ,end = this.length )

    它接受3个参数:

    target(必须):从该位置开始替换数据

    start(可选):从该位置开始读取数组,默认从0开始,如果是负值,则倒数

    end(可选):到该位置前停止读取数据,默认从this.length开始,如果是负值,则倒数

    [1,2,3,4,5].copyWithin(0,2) // [3,4,5,4,5]
    [1,2,3,4,5].copyWithin(0,2,4) // [3,4,3,4,5]

    4.数组实例的find()与findIndex()

    find用途:找符合要求的第一个数组成员 。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefine.

    findInde用途:与find相似,返回第一个符合条件的数组成员的位置。如果所有成员都不符合条件则返回-1.

    find方法:
    [1,2,3,4,5].find(function (value, index, arr) { return value > 3 }) // 4
    findInde方法:
    [1,2,3,4,5].findIndex(function (value, index, arr) {

      return value > 3
    }) // 3

    两个方法的回调函数可接受3个参数,依次是当前的值,当前位置,原数组。另外他们都可以接受第二个参数用来绑定回调函数的this对象。且他们都可以发现NaN,弥补了IndexOf方法的不足。

    [NaN].indexOf(NaN) // -1
    [NaN].findIndex(y => Object.is(NaN, y)) // 0

    上述代码,indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Obje.is方法做到。

    5.数组实例的fill()

    用途:填充数组

    [1,2,3].fill(5) // [5, 5, 5]
    new Array(3).fill(5) // [5, 5, 5]

    另外,fill方法还接受第二个和第三个参数,用于指定填充的起始位置和结束位置

    [1,2,3].fill(5,0,1) // [5, 2, 3]

    6.数组实例的entries(),keys(),values()

    entries用途:键值遍历数组,返回一个遍历器对象

    keys用途:键名遍历数组,返回一个遍历器对象

    values用途:键对遍历数组,返回一个遍历器对象

    7.数组实例的includes()

    用途:返回一个布尔值,表示某个数组是否包含给定值,与字符串的includes方法类似 ,该方法的第二个参数表示搜索的起始位置,默认为0,如果有负数,则表示倒数位置,如果超出数组长度则从0开始。

    查阅资料:ES6标准入门(第2版)阮一峰著

  • 相关阅读:
    oracle重新学习,主要是命令实用,有借鉴其他人博客
    cdn缓存立刻刷新
    python3发送需要双向认证的wss请求
    【2021.08.03】平等交流
    【2021.07.31】正面回应才是面对挑战的最好方式
    【2021.07.28】向晚
    【2021.07.25】过个生日
    【2021.07.17】Asoul——那些无法杀死我的,终会使我变得更加强大
    phaser3微信小游戏2
    eve-ng 配置apache2的虚拟目录
  • 原文地址:https://www.cnblogs.com/yilihua/p/12434925.html
Copyright © 2020-2023  润新知