javascript中的伪(类)数组

1.什么是伪数组?

伪数组(ArrayLike)又称类数组,虽然从名字上来看,貌似和数组很像,但实际上和数组有很大区别:

  1. 伪数组是一个对象,所以 伪数组 instanceof Array===false 和 伪数组 instanceof Object===true 这两个等式都成立
  2. 伪数组必须含有length属性,且必须是 number 类型,否则就不叫伪数组,就是一个普通对象而已
  3. 如果length不为0,那么必须要有数值型下标(即0或者'0'都可以,只要可以通过Number()转换为数值即可)存储的数据
  4. 伪数组不能调用数组原型上的方法。就是:xx.push()、xx.slice()、xx.indexOf() 等等这些方法都不能用

了解了伪数组的特点后,我们可以根据其特点举几个例子

2.举个栗子

不是伪数组

var a = {};
var b = { length: 3 };

是伪数组

var c = { length: 0 };
var d = { 0: '888', length: 1 };
var e = { 1: 'abc', length: 3 }
var f = { '0': 'abc',1:'test', length: 3 }
var g = { 0: 'abc',2:'test', length: 1 }

我们打印下上面7个变量的结果如下:

20190911111001.png

3.伪数组转数组

  1. 方法一:Array.prototype.slice.call(arrayLike) 或者 Array.prototype.slice.apply(arrayLike)

我们知道数组的slice方法可以对数组进行切割(不传参,返回原数组),返回新数组。由于类数组并没有数组的这些方法,所以通过前面在javascript中的this指向讲解过call的原理,我们可以借用方法。所以上面代码的call函数原理是:

arrayLike.fn1=this //this指向slice
arrayLike.fn1()  //即arrayLike调用fn1也就是slice方法,所以slice方法中的this指向arrayLike。所以伪数组被切割成数组返回出来

Array.prototype上的方法原本只能用来操作array对象。但用call apply 可以把任意对象当做this传入某个方法,如此一来,方法中用到的this的地方就不再局限于原来规定的对象,而是得到更广的适用性。

  1. 方法二:Array.prototype.splice.call(arrayLike, 0) 或者 Array.prototype.splice.call(arrayLike, 0)

splice也是数组的方法,对数组进行切割(第一个参数为切割起始位置,必填),我就不介绍了。和上面原理一样。

  1. 方法三:Array.prototype.concat.apply([], arrayLike)
  1. 方法四:使用es6自带的Array.from(arrayLike)方法

4.使用上面转换方法测试

上面我们举了几个伪数组的例子以及如何将伪数组转换为数组,现在我们对这些例子进行测试:

1.使用 Array.prototype.slice.call(arrayLike)

注:splice我就不举列子,和slice一样。

var translate=function(arrayLike){
    return Array.prototype.slice.call(arrayLike)
}
console.log(translate(c),translate(c)[0],translate(c).length);
console.log(translate(d),translate(d)[0],translate(d).length);
console.log(translate(e),translate(e)[0],translate(e).length);
console.log(translate(f),translate(f)[2],translate(f).length);
console.log(translate(g),translate(g)[1],translate(g).length);

运行结果如下:

20190911111500.png

2.使用 Array.prototype.concat.apply([], arrayLike) 方法

var translate=function(arrayLike){
    return Array.prototype.concat.apply([], arrayLike)
}
console.log(translate(c),translate(c)[0],translate(c).length);
console.log(translate(d),translate(d)[0],translate(d).length);
console.log(translate(e),translate(e)[0],translate(e).length);
console.log(translate(f),translate(f)[2],translate(f).length);
console.log(translate(g),translate(g)[1],translate(g).length);

运行结果如下:

20190911111537.png

3.使用 Array.from(arrayLike) 方法

var translate=function(arrayLike){
    return Array.from(arrayLike)
}
console.log(translate(c),translate(c)[0],translate(c).length);
console.log(translate(d),translate(d)[0],translate(d).length);
console.log(translate(e),translate(e)[0],translate(e).length);
console.log(translate(f),translate(f)[2],translate(f).length);
console.log(translate(g),translate(g)[1],translate(g).length);

运行结果如下:

20190911111303.png

5.对比

上面测试结果:

  1. 从打印表面上看,Array.prototype.concat.apply([], arrayLike)Array.from(arrayLike)所有输出结果都一样,而Array.prototype.slice.call(arrayLike)结果有些许差别
  2. 如果类数组length值和所含数据个数相等,三个方法结果都一样
  3. 如果类数组length值大于所含数据个数,slice将所缺失的用empty来补充,contact和from用undefined来补充。但是打印缺失的都为undefined,所以三者只是从形式上有区别,使用没什么区别
  4. 如果类数组length值小于所含数据个数,三个方法都会将多余的裁减掉。

6.常见的类数组对象

1.arguments对象

arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。arguments对象不是一个Array。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。例如,它没有pop方法。但它可以被转换为一个真正的Array。

function foo(a, b, c) {
    console.log(arguments);
}

foo(1, 2, 3);

打印结果如下:

20190911115414.png

2.jquery对象

//html
<p>1</p>
<p>2</p>
<p>3</p>

//js
console.log($('p'))
20190911115921.png

3.js获取dom节点的方法,如getElementById等

 //html
<p>1</p>
<p>2</p>
<p>3</p>

//js
console.log('通过querySelectorAll:',document.querySelectorAll("p"))

console.log('通过getElementsByTagName:',document.getElementsByTagName("p"))

20190911120433.png

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 3,011评论 0 5
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 1,921评论 0 4
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 2,939评论 0 5
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 5,164评论 0 2
  • 他是一个帅小伙 一个高大的铁钉 他的爱情和偶像剧里面一样 那段时间 大雨倾盆 他遇到了他的挚爱 雨水姑娘 他很爱她...
    现实与野兽阅读 226评论 1 6