• ES6(三)数组的扩展


    1、Array.form

       ES6中,Array.from = function(items,mapfn,thisArg) {  }

        Array.from 用于将 类数组 和 可遍历对象(实现了Iterator接口的对象以及set、map)对象,转换成真正的数组。

       (1)   第一个参数:items,类数组 和 可遍历对象。

             在ES5中,将类数组转换成真正数组,如下:

    var arr=[].slice.call(likeArray);

             实际应用中,类数组对象常常包括 NodeList集合,以及 函数参数 arguments.

      (2) 第二个参数,类似map方法,可以直接改变原数组的值。

           如下:将 类数组中的值加 1

    Array.from(arrayLike, (x)=>x+1);

       (3)   第三个参数,绑定this。

       (4) Array.from 可以将只要原始的数据结构(string,number 等),会先对值进行处理,

         然后转换成规范的数组结构,进而可以使用Array中的方法。 

    Array.from( { length:2}, ()=>'jack');

        将字符串转换为数组,能正确处理各种Unicode字符,避免 将大于 uFFFF 的字符,算成两个字符。

    function countString(string){
        return Array.from(string).length;  
    }

    2、Array.of

     Array.of = function(items) { }

      用于将一组值,转换成数组,用于弥补Array()不足。 

        比如:使用 Array(3),指定了数组为3,值为[undefined*3],当参数count>=2时,才会返回新数组。

      ES5中可以如下代替:

    function ArrayOf(){
        return [].slice.call(arguments);  
    }

    3、扩展运算符  ( ... )

       扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果A对象没有实现此接口,则无法转换。

         [...数据结构A]  这样的书写方式可以将某些数据结构转换成为数组。

       扩展运算符 无法将类数组转换为 real Array.

        

    4、数组实例的扩展

        (1)copyWithin()

           Array.prototype.copyWithin = function(target,start,enf) {}

      1、在当前数组内部,将指定位置的成员复制到其他位置,且覆盖原有成员;
       2、其中 包括start,不包括enf(end from),如果[1,3,5],即将 3,4位置的元素替换 arr 
      3、start,endf为负数,则表示数组倒数位数

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

       (2)find() and findIndex()

           Array.prototype.find = function(predicate,thisArg) {}

                     find()   用于找出第一个符合条件的数组成员,参数是一个回调函数,所有数组成员依次执行该回调函数,若无符合条件,则返回undefined。  

          findIndex() 则返回第一个符合条件的成员的位置,未找到,则返回 -1。

    let personList = [
            {
                name: 'jack',
                age: 20
            },
            {
                name: 'Tom',
                age: 18
            },
            {
                name: 'Lily',
                age: 15
            }
        ];
    
        personList.find((item,index,arr)
        =>(item.age < 19));

         这两个方法都可以发现 NaN,弥补了数组 IndexOf方法的不足。

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

        (3) fill()

        Array.prototype.fill = function(value,start,end) {}
       使用给定值,填充一个数组。
    ['a','b','c'].fill(7,1,2);//[a,7,c]
    
    

        (4)entries(),keys(),values()

        var arr = ['key1', 'key2'];
        for (let index of arr.keys) {
    
        }

            如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

        (5)includes()   

            String.prototype.includes = function(searchString,position) {};

            表示某个数组是否包含给定的值

                position 表示搜索的起始位置,负数为倒数位置

         indexOf 内部使用严格相当运算符(===)进行判断,这会导致对NaN的误判。

        [1, 2, 3].includes(3, 3);
        [NaN].indexOf(NaN); //-1
        [NaN].includes(NaN); //true
        Map 的has方法,用来查找 键名。  
       Set 的has方法,用来查找 值。

    (5)数组的空位

       数组的空位,是指某一个位置没有任何值,空位不是undefined。

       1、forEach,filter,every,some 都会跳过空位。

       2、map会跳过空位,但会保留这个值。

       3、join 、toString 会将空位视为 undefined,undefined和null 则被处理成空字符串。

      而Array.from 会将数组的空位 转换为 undefined,不会忽略这个空位。
    ( ... )也会转换为 undefined。

    至于为什么会出现 空位,我也不太明白。
      
  • 相关阅读:
    大屏设计
    ES6课程---11、promise对象实例
    ES6课程---10、promise对象
    心得体悟帖---200502(读西游记之修心)
    ES6参考---promise对象结构分析
    javascript疑难问题---18、回调函数做异步操作
    javascript疑难问题---17、js中in关键字使用总结
    javascript疑难问题---16、类数组对象转换成数组
    javascript疑难问题---15、类数组对象
    心得体悟帖---200501(情感回馈,一般你怎么对待别人,别人也会怎么对待你)
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/6831069.html
Copyright © 2020-2023  润新知