美文网首页
es6中数组新增的一些方法?

es6中数组新增的一些方法?

作者: jie_zhao | 来源:发表于2019-07-18 11:43 被阅读0次

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

    let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    // ES5的写法
    var arr1 = [].slice.call(arrayLike);   // ['a', 'b', 'c']
    // ES6的写法
    let arr2 = Array.from(arrayLike);   // ['a', 'b', 'c']

    实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

    // NodeList对象
    let ps = document.querySelectorAll('p');
    Array.from(ps).filter(p => { return p.textContent.length > 100;});
     // arguments对象
    function foo() { var args = Array.from(arguments); // ...}


    2、Array.of()-用于将一组值,转换为数组。

    这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

    Array() // []
    Array(3) // [, , ,]
    Array(3, 11, 8) // [3, 11, 8] 

    上面代码中,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。 


    3、find(fn, thisObj) 和 finfIndex(fn, thisObj)
        3.1、find()-用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
        3.2、findIndex()-返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
    注意:这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。


    4、fill(value, start, end)-用value值从start位置填充到end,不包含end位置的值。
    注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。


    5、entries(),keys() 和 values()


    6、includes()
    Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法。

    [1,2,3].includes(2) // true
    [1,2,3].includes(4) // false
    [1,2,NaN].includes(NaN) // true

    该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

    [1,2,3].includes(3,3); // false
    [1,2,3].includes(3,-1); // true

    没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。

    if (arr.indexOf(el) !== -1) { // ...} 

    indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。

    [NaN].indexOf(NaN)// -1 

    includes使用的是不一样的判断算法,就没有这个问题。

    [NaN].includes(NaN)// true 

    下面代码用来检查当前环境是否支持该方法,如果不支持,部署一个简易的替代版本。

    const contains = (() =>
         Array.prototype.includes ?
        (arr, value) => arr.includes(value) :
        (arr, value) => arr.some(el => el === value)
    )();
    contains(['foo', 'bar'], 'baz'); // => false 

    另外,Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

    - Map 结构的has方法,是用来查找键名的,比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
    - Set 结构的has方法,是用来查找值的,比如Set.prototype.has(value)、WeakSet.prototype.has(value)。 


    7、flat()-如下图所示

    只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

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


    文章内容摘至阮一峰老师的es6

    相关文章

      网友评论

          本文标题:es6中数组新增的一些方法?

          本文链接:https://www.haomeiwen.com/subject/emvklctx.html