zoukankan      html  css  js  c++  java
  • js类数组转数组的方法(ArrayLike)

    1. 什么是类数组ArrayLike

    • 拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
    • 不具有数组所具有的方法
    //类数组示例
    var a = {'1':'gg','2':'love','4':'meimei',length:5};
    Array.prototype.join.call(a,'+');//'+gg+love++meimei'
    
    //非类数组示例
    var c = {'1':2};   //没有length属性就不是类数组

    javascript中常见的类数组有arguments对象和DOM方法的返回结果。
    比如 document.getElementsByTagName()

    2. 判断一个对象是否属于类数组

    function isArrayLike(o) {
        if (o &&                                // o is not null, undefined, etc.
            typeof o === 'object' &&            // o is an object
            isFinite(o.length) &&               // o.length is a finite number
            o.length >= 0 &&                    // o.length is non-negative
            o.length===Math.floor(o.length) &&  // o.length is an integer
            o.length < 4294967296)              // o.length < 2^32
            return true;                        // Then o is array-like
        else
            return false;                       // Otherwise it is not
    }

    3. 类数组转换成数组之后进行操作有什么优势

    由于类数组不具有数组所具有的操作数组的方法,讲类数组转换为数组之后就能调用如shift,unshift,splice,slice,concat,reverse,sort等这些强大的方法,方便快捷。

    4. 类数组转换为数组方法

    Array.prototype.slice.call(arrayLike)

    //将arguments转化为数组后,截取第一个元素之后的所有元素
      var args = Array.prototype.slice.call(arguments,1);

    首先Array.prototype.slice.call(arrayLike)的结果是将arrayLike对象转换成一个Array对象。所以其后面可以直接调用数组具有的方法,例如

    Array.prototype.slice.call(arrayLike).forEach(function(element,index){  //可以随意操作每一个element了 })

    (1)Array.prototype.slice表示数组的原型中的slice方法。注意这个slice方法返回的是一个Array类型的对象。

    //slice的内部实现
    Array.prototype.slice = function(start,end){  
          var result = new Array();  
          start = start || 0;  
          end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键  
          for(var i = start; i < end; i++){  
               result.push(this[i]);  
          }  
          return result;  
     } 

    (2)能调用call的只有方法,所以不能用[].call这种形式,得用[].slice。而call的第一个参数表示真正调用slice的环境变为了arrayLike对象。所以就好像arrayLike也具有了数组的方法。

    (3)附上转成数组的通用函数

    var toArray = function(s){  
        try{  
            return Array.prototype.slice.call(s);  
        } catch(e){  
                var arr = [];  
                for(var i = 0,len = s.length; i < len; i++){  
                    //arr.push(s[i]);  
                     arr[i] = s[i];     //据说这样比push快
                }  
                 return arr;  
        } 

    5. 将数组转换为参数列表(类数组)

    调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合,   这里就说明apply的一个巧妙用法,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3), 这个如果让我们用程序来实现将数组的每一个项,来转换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法。

    具体可以参考前面的文章  js函数中的apply()、call()、bind()方法 ---(apply的其他巧妙用法(一般在什么情况下可以使用apply))

    参考来源

    1.https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-7/array-like-objects
    2.JavaScript 的怪癖 8:“类数组对象”

    3.js类数组转数组的方法

  • 相关阅读:
    一行代码更改博客园皮肤
    fatal: refusing to merge unrelated histories
    使用 netcat 传输大文件
    linux 命令后台运行
    .net core 使用 Nlog 配置文件
    .net core 使用 Nlog 集成 exceptionless 配置文件
    Mysql不同字符串格式的连表查询
    Mongodb between 时间范围
    VS Code 使用 Debugger for Chrome 调试vue
    css权重说明
  • 原文地址:https://www.cnblogs.com/guorange/p/6668440.html
Copyright © 2011-2022 走看看