javascript中最经典也最受非议的一句话就是：javascript中一切皆是对象。这篇重点要提到的，就是任何jser都不陌生的Object和Array。

　　有段时间曾经很诧异，到底两种数据类型用来存储数据有什么不同。于是，我打算探究探究。

　一、掌握三种数据类型

　　首先，一个前提必须掌握的，就是必须理解javascript的数据类型分类，主要分为以下三种：

　　第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"北京"这个单独的词。

　　第二种类型是序列（sequence），也就是若干个相关的数据按照一定顺序并列在一起，又叫做数组（array）或列表（List），比如"北京，上海"。

　　第三种类型是映射（mapping），也就是一个键/值对（key/value），即数据有一个键名，还有一个与之相对应的键值，这又称作散列/哈希（hash）或字典（dictionary），比如"首都：北京"。

　　从这里也可知道对象就是一种映射类型的数据，数组是一种序列类型的数据。

　　比较细致的解答，可以参考阮一峰的博文《数据类型和Json格式》

　　

　二、声明和实例化方式

　　1.对象的声明和实例化　　
　　

//第一种方式

var obj = new Object();

obj.name = "wall";

//第二种方式

var obj = {};

obj.name = "wall";

//第三种方式

var obj = {

   "name" : "wall"

};

//第三种方式的简约版

var obj = {

   name : "wall" //key减少了一对双引号

};

//第四种方式

var obj = {};

obj["name"] = "wall";

　　

　　2.数组的声明和实例化

　　

//第一种方式

var arr = new Array();

arr[0] = "wall";

//第二种方式

var arr = [];

arr[0] = "wall";

//第三种方式

var arr = ["wall"];

//第四种方式

var arr = [];

arr.push("wall");

//诡异的第五种方式，也是后面讲的一个重点

var arr = [];

arr["name"] = "wall";

　三、使用方式

//输出对象中name的值

console.log(obj.name);

//或

console.log(obj["name"]);

//输出数组中name的值

console.log(arr[0]);

//输出数组声明的第五种方式中的值

console.log(arr["name"]);

　四、比较

　　以上可以看出，其实在简单的数据存储要求上，选择数组和选择对象进行存储，差别不是很大，而且两者均可以用下标的方式进行访问，所以有时自己都有疑惑到底二者区别到底在哪里。

　　最简单的不同就是：对象，系统默认是没有length属性的，而数组是默认有length属性的。而这，又牵扯出一个有趣的现象：

　　在chrome的控制台下，输出一个简单的例子

　　

　　到这里，肯定会有人感到奇怪，为什么变量b的长度会是0！ 为什么不是1。

　　为了验证我的想法，就再编写一个例子:

　　

　　原来，b["test"]这个键值并没有放入数组的序列中去，那会跑哪里去了？于是我查了下b这个变量的结构，然后再重新实例化一个新的变量b，比较其不同，终于找到原因：

　　            

　　原来，test是作为数组的一个属性值进行存储，而不是添加到数组的数据序列中去，顿时豁然开朗，呵呵~

　　这里也可以得出一个结论：数组是一个可以存储序列类型数据的对象，即是对对象的继承和扩展。数组的序列类型数据，可以通过整数下标进行读写操作，而其自定义的属性值，则可以通过对象访问属性值的方式进行访问，二者互不干扰。

　五、对象实例化中需要注意的地方　　

//第三种方式

var obj = {

   "name" : "wall"

};

//第三种方式的简约版

var obj = {

   name : "wall" //key减少了一对双引号

};

　　虽然这两种方式看起来没什么不同，都可以使用obj.name进行访问，但是这里推荐第三种方式，而不要用简约版。

　　原因就是如果用简约版的方式进行实例化，键名如果是javascript保留的关键字，在 ECMAScript 5 之前会抛出SyntaxError 的错误（来自javascript秘密花园的解释）。

　六、函数变量缓存的技巧

　　我就不多说，直接先上代码：

//定义函数

var fun = function(options){

    if(!arguments.callee.arr){

      arguments.callee.arr = {

         "name":"wall",

         "who":"jser"

      };

       console.log("init");//标识是否调用初始化

    }

    return arguments.callee.arr[options];

}    

//访问name

console.log(fun("name"));

//访问who

console.log(fun("who"));

　　运行结果如下：

　　所以，很明显地，数据只要初始化一次，就会保存在当前函数对象下，作为它的一个属性值，下次操作就可以避免重复性的工作了。

　　可能很多读者还不是很明白arguments.callee是什么，其实它指向的就是调用当前方法的对象，也即是fun。

　　这样写的原因是，在实际生产过程中，多人协作编码，可能有人会一不小心把你这里的function改个名字什么的，那缓存的作用就失效了，甚至会出错。不过有个缺点就是在严格模式下，arguments.callee会被禁用。

　　最后，再贴上一个未做上面这个优化的代码，其实效果也一样（其实就是将arguments.callee替换成fun）。

//定义函数

var fun = function(options){

    if(!fun.arr){

      fun.arr = {

         "name":"wall",

         "who":"jser"

      };

       console.log("init");//标识是否调用初始化

    }

    return fun.arr[options];

}    

//访问name

console.log(fun("name"));

//访问who

console.log(fun("who"));

　　另外，这里的arguments.callee也可以替换成this指针，不过，调用的时候就要注意this指针的指向，这里可以用new function()的方式调用。

via:cnblogs.com/walls/p/4281531.html

探究javascript对象和数组的异同，及函数变量缓存技巧的更多相关文章

  1. 第一百零三节，JavaScript对象和数组

    JavaScript对象和数组 学习要点: 1.Object类型 2.Array类型 3.对象中的方法 什么是对象,其实就是一种类型,即引用类型.而对象的值就是引用类型的实例.在ECMAScript中 ...

  2. JavaScript 对象与数组参考大全

    http://www.cnblogs.com/meil/archive/2006/06/28/437527.html本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作 ...

  3. javascript中对象和数组的异同点

    一.JS声明对象或数组 JS对象:{ } JS数组:[ ] 对象 var b={m:'123',n:'abc'};alert(b.m);alert(b.n); 一维数组 var a=[1,2,3];a ...

  4. JavaScript对象和数组

    1.JavaScript中有两个非常重要的数据类型是对象和数组. 通过"."或者"[]"来访问对象属性 举例:var book = { topic:" ...

  5. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  6. javascript 对象和数组(花括号、方括号)

    1. javascript对象定义 var a = {var a = "test", var b = "test"} 2. javascript数组定义 var ...

  7. JavaScript对象与数组

    一．Object 类型到目前为止,我们使用的引用类型最多的可能就是 Object 类型了.虽然 Object 的实例不具备多少功能,但对于在应用程序中的存储和传输数据而言,它确实是非常理想的选择.创建 ...

  8. javascript对象初探（一）--- 构造器函数

    我们可以通过构造器函数(简称构造函数)来创建对象: function Her(){ this.child = 'Jon'; } 为了使用该函数来创建对象,我们需要使用new操作符,例如: var sh ...

  9. 精彩的javascript对象和数组混合相加

    最近遇到一个让人困解的一个问题:一个简单的js加法运算表达式: +[]; //这里加上一个空数组得到什么???答案:'1'; 为什么答案是1,一开始我也很困惑:后来我读了一篇文章才知道:在javasc ...

随机推荐

  1. 关于几个主流语音SDK的接入问题

    这两周都在忙着游戏上线还有接入游戏语音,两周分别接了腾讯语音和百度语音!!! 关于腾讯语音的一些问题 由于发现腾讯语音的在录完音频后的数据是编过码的所以出现了一些问题: *不能解码(腾讯方不提供解码算 ...

  2. [C#] 软硬结合第二篇——酷我音乐盒的逆天玩法

    1.灵感来源: LZ是纯宅男,一天从早上8:00起一直要呆在电脑旁到晚上12:00左右吧~平时也没人来闲聊几句,刷空间暑假也没啥动态,听音乐吧...~有些确实不好听,于是就不得不打断手头的工作去点击下 ...

  3. .NET 基础 一步步 一幕幕[面向对象之构造函数、析构函数]

    构造函数.析构函数 构造函数: 语法: //无参的构造函数 [访问修饰符] 函数名() :函数名必须与类名相同. //有参的构造函数 [访问修饰符] 函数名(参数列表):函数名必须与类名相同. 作用: ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. Yii1.1的验证规则

    在Yii1.1的数据验证是由CValidator完成,在CValidator中提供了各种基本的验证规则 <?php public static $builtInValidators=array( ...

  6. wordpress多站点配置

    wordpress作为全球第一的个人博客搭建平台一直在国内外有着较高的人气,从3.0版本开始就已经支持多站点的搭建.该功能可以让子站点运行主站点的程序,不需要再每个站点分别存放网站程序.最近更新的4. ...

  7. C#中5步完成word文档打印的方法

    在日常工作中,我们可能常常需要打印各种文件资料,比如word文档.对于编程员,应用程序中文档的打印是一项非常重要的功能,也一直是一个非常复杂的工作.特别是提到Web打印,这的确会很棘手.一般如果要想选 ...

  8. angularjs 依赖注入--自己学着实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...

  9. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

  10. cocos2dx调用浏览器打开网址

    安卓端cocos2dx/platform/android路径下CCApplication.h: virtual void openURL(const char* pszUrl); CCApplicat ...