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类数组转数组的方法

  • 相关阅读:
    HTML 文本格式化实例
    HTML 文本格式化实例--预格式文本+“计算机输出”标签
    HTML 文本格式化实例--文本格式化
    如何用通俗易懂的语言解释脚本(script)是什么?
    1. HTML 基础标签
    java 和 python的一些对比
    XML fragments parsed from previous mappers does not contain value for com.miniprogram.meirong.comment.dao.CommentMapper.Base_Column_List
    The request was rejected because the URL was not normalized.
    fastjson的简单使用
    微信小程序的分页
  • 原文地址:https://www.cnblogs.com/guorange/p/6668440.html
Copyright © 2011-2022 走看看