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))

时间: 2024-12-14 06:38:22

js类数组转数组的方法(ArrayLike)的相关文章

js类数组

类数组 - [ Array-like ] : objects 1. what's Array-like 类数组和数组很像,但是数组的很多方法却不能用,这就很尴尬了~ 像 arguments.nodelist 等这些数据有序集合,有长度和下标等属性,但却不是 Array. 这就是所谓的 Array-like(类数组/伪数组).对于 Array-like 我们可以用跨原型链来操作,eg :Array.prototype.slice.call(arguments, 0); 这也是把 Array-lik

JS 中检测数组的四种方法

今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一种对象所以也可以利用 instaceof 来进行判断. let arr = [1, 2, 3]; console.log(arr.instanceof(Array)); // true 这种方法在只有一个全局作用域的环境下是可以的,但是如果一个网页中包含多个框架,那么就会存在不同的全局环境,不同的环

关于String类和String[]数组的获取长度方法细节

一.在Java中,以下代码段有错误的是第(  )行 public static void main(String[] args) { String name = "小新";                       //第一行 String sex = new String("男");          //第二行 String age = 18+"";                       //第三行 int len = name.le

js之二维数组定义和初始化三种方法

方法一:直接定义并且初始化,这种遇到数量少的情况可以用 var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]] 方法二:未知长度的二维数组 var tArray = new Array();   //先声明一维 for(var k=0;k<i;k++){        //一维长度为i,i为变量,可以根据实际情况改变

JS合并数组的几种方法及优劣比较

这篇文章主要介绍了JS合并数组的几种方法及优劣比较,本文讲解了concat.循环插入.reduce等方法合并数组,并对它们的优劣做了比较,需要的朋友可以参考下 本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点. 我们先来看看具体的场景: 代码如下: var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8];var b = [ "tie", "mao", "csdn",

js数组中的reverse()方法

reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reverse方法能否用于undefined与null上 实验代码如下: 1 <script type="text/javascript"> 2 var foo=function () { 3 var c=null; 4 var d=undefined; 5 //reverse方法测试

js数组对象以及数组常用属性和方法

定义形式: var  arr1 = new Array(1,  5,  8,  7,  2,  10);  //定义了一个数组,其中具有6个数据 var  arr2 = new Array();                   //只是单纯地定义了一个数组(名),但没有给值(数据),即现在是空的 var  arr3 = [1,  5,  8,  7,  2,  10];  //同arr1,只是一种简写的定义法. var  arr4 = [ ];                  //同arr

JS中对象转数组方法总结

1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: 'nihao', 1: 'haha', 2: 'gansha', 'length': 3 } let arr = Array.from(obj) console.log(arr); tips: 1. object中必须有length属性,返回的数组长度取决于length长度         2.key 值必须是数值 2.Object.values(o

简单谈谈JS数组中的indexOf方法

前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入讨论的话题,因此这里没有解释indexOf()的第二个参数,相信大家都知道第二个参数的作用. String 类型的使用 温习一下大家熟知的字符串用法,举个 ? 1 2 3 4 5 let str = 'orange'; str.indexOf('o'); //0 str.indexOf('n');