JavaScript中的伪数组理解

看过jQuery源码的人都知道类数组对象,与我们熟知的arguments对象很像

构造一个类数组必须有两个条件

第一个条件:你必须给对象定义个splice方法,只要他是一个function就可以

第二个条件:就是赋值一个length属性,或者增加push,unshift,shift,pop其中任何一个方法,并且调用了一次。

当这两个条件同时满足那么当前的对象在控制台输出后跟数组的格式一模一样。

一般而言大部分都是这样构造一个类数组对象(jQuery就是这么干的)。因为相比而言,这样更简洁,并且更有意义。

1 var obj = {
2 length: 0,
3 splice: [].splice
4 };

同样可以实现类数组的代码,除了splice,其他四个方法只要定义了其中的任何一个并且调用了。


 1 var blankArray = [];
2 var obj = {
3 splice: blankArray.splice,
4 push: blankArray.push,
5 unshift: blankArray.unshift,
6 pop: blankArray.pop,
7 shift: blankArray.shift
8 };
9 obj.push();
10 obj.unshift();
11 obj.pop();
12 obj.shift();

那为什么浏览器会这么做?其实我也不明白,因为我没看过浏览器的内部实现,这个谁要知道的话,烦请告诉我一下。

----------------------------------------分割线------------------------------------

可能有些人不太明白直接把push指向数组的push方法就能直接调用,并且行为还和数组一样?

是的,push本身就是给数组追加值的,在对象中这里也是一样的,他会先检测length属性的值,然后从length的位置添加push传的参数。key从length之后开始累加,同时更改length值。来段代码说明下


1 var obj = {
2 length: 1,
3 splice: blankArray.splice,
4 push: blankArray.push
5 }
6 obj[0] = 10; //如果length是0的话,push后的结果就是1,2,3。如果length是1的话,那么结果就成了10,1,2,3。
7
8 obj.push(1,2,3);
9 obj.length // 4

由此看出,对象这里的obj[0] = 10并不会影响length的值,而数组却不同。数组给对应的下标赋值,而对象给对应的key赋值。

你可以把数组的下标想象成对象的key

不理解?看下面的代码


1 var testArr = [‘one‘, ‘two‘, ‘three‘];
2
3 //你可以把以上数组理解成下面这种对象
4
5 var testObj = {
6 0: ‘one‘,
7 1: ‘two‘,
8 2: ‘three‘
9 }

接下来就简单了,obj的push引用了array实例对象的push方法

1 var obj = {
2 // ...
3 //事实上[].push这里引用的是function push() { [native code] },push方法的内部实现
4 push: [].push
5 }

而引用的这个push function,它的context就是obj,与下面的代码意义相同

1 var obj = {
2 push: function(){
3 return [].push.apply(this, arguments);
4 }
5 }

在用下标值访问类数组对象的时候,实际上访问的是它的key。

个人理解,不对请指出。

转载请注明出处。

JavaScript中的伪数组理解,布布扣,bubuko.com

时间: 2024-08-05 03:01:08

JavaScript中的伪数组理解的相关文章

javascript中字符串和数组的相互转换

javascript中字符串和数组的相互转换:字符串和数组的相互转换操作是非常的重要的,因为在实际编码过程中会经常用到,所以这是必须要掌握的知识点,当然这个知识点并不难,知道了就永远知道了,并不是那种需要充分实践才能够掌握的东西,下面就做一下简单的介绍.一.字符串转换为数组:此操作会用到split()函数,它能够以指定的字符作为分隔符,将字符串转换成一个数组,实例代码如下: var Str="abc-mng-zhang-mayi"; var newArray=Str.split(&qu

JavaScript中常见的数组操作函数及用法

昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考.如果恰好你也在准备各种笔试,希望对你有所帮助.同时,也欢迎补充. 1.数组创建 创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下: var array1 = new Array(); var array2 = []; 上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇.其中,

对Javascript中原型的深入理解

  理解原型对象 在Javascript中无论什么时候,只要创建一个新的函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法).如果按照字面上的意思来理解,那么原型属性就是通过调用构造函数而创建的那个对象的实例的原型对象. 在默认的情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针.如下图 function P

Javascript中的Array(数组) 、{}(映射) 与JSON解析

做网页总会使用javascript,使用javascript总会使用JSON.最近用到一下,就写写. 下面是总结: 1.将javascript中的Array和{}转化为json字符串可以使用json2.js,源码地址https://github.com/douglascrockford/JSON-js. 2.将json字符串转为javascript对象,可以使用javascript自带的eval函数. 3.javascript中可以使用typeof查看变量的类型. 4.要访问json字段,必须是

javascript中的稀疏数组(sparse array)和密集数组

学习underscore.js数组相关API的时候,遇到了sparse array这个东西,以前没有接触过. 这里学习下什么是稀疏数组和密集数组. 什么是密集数组呢?在java和C语言中,数组是一片连续的存储空间,有着固定的长度.加入数组其实位置是address,长度为n,那么占用的存储空间是address[0],address[1],address[2].......address[n-1].即数组元素之间是紧密相连的,不存在空隙.如下的js代码创建的就是一个密集数组 var data = [

第一篇 对Javascript中原型的深入理解

  理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定类型的全部实例共享的属性和方法).假设依照字面上的意思来理解.那么原型属性就是通过调用构造函数而创建的那个对象的实例的原型对象. 在默认的情况下,全部的原型对象都会自己主动获得一个constructor(构造函数)属性,这个属性包括一个指向prototype属性所在函数的指针. 例如以下图 func

JavaScript中的类数组对象

在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    //取obj对象的attr1属性 a[1];   //取数组a中的第二个元素 但是,有些时候,也会将一个对象“伪装”成一个数组来用,我们把这种对象称为“类数组对象”,再此我们可以給它下一个定义,请看如下的代码: var a= {}; var i = 0; for(i=0; i<10 ; i++){ a[i

JavaScript - javascript 中的 &quot;||&quot; 与 &quot;&amp;&amp;&quot; 的理解与灵活运

你肯定见到过这样的代码:a = a||"xxx". 它其实就等价于下面三种形式的代码: a = a || "xxx"; 与: if (!a) { a = "xxx"; } 和: if (a == null || a == "" || a == undefined) { a = "xxx"; } 如何理解三种代码.首先必须理解一个问题: javascript 中的数据类型在与bool类型转换时候发生了什么?

javascript中的关联数组

所谓关联数组(associative array), 就是指javascript中的对象. 因为javascript中的属性就是一个个的键值对,可以通过obj[attr]的方式访问,很类似数组. 这种数据结构还有很多种叫法: 散列(hash) 散列表(hashtable) 字典(dictionary) 最让人感到迷惑的是,javascript中的数组也可以使用非数字存储值,比如: var arr = []; arr['uname'] = 'uname'; 但是这种方式添加的值并不影响他的数组特性