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. MySQL 游标

    概述 本章节介绍使用游标来批量进行表操作,包括批量添加索引.批量添加字段等.如果对存储过程.变量定义.预处理还不是很熟悉先阅读我前面写过的关于这三个概念的文章,只有先了解了这三个概念才能更好的理解这篇 ...

  2. 我的jQuery源码读后感

    (function(window, undefined) { // 构造jQuery对象 var jQuery = (function() { var jQuery = function(select ...

  3. apche配置后报错(Forbidden)没有权限

    apche如何配置虚拟目录及虚拟目录的权限 <Directory /> Options FollowSymLinks AllowOverride None Order deny,allow ...

  4. 《ACM国际大学生程序设计竞赛题解Ⅰ》——基础编程题

    这个专栏开始介绍一些<ACM国际大学生程序设计竞赛题解>上的竞赛题目,读者可以配合zju/poj/uva的在线测评系统提交代码(今天zoj貌似崩了). 其实看书名也能看出来这本书的思路,就 ...

  5. MySQL 创建数据表

    MySQL 创建数据表 创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (col ...

  6. iptsbles及磁盘扩容

    如果你的IPTABLES基础知识还不了解,建议先去看看. 们来配置一个filter表的防火墙 1.查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L -n Cha ...

  7. Java:从面试题“i++和++i哪个效率高?&quot;开始学习java字节码

    今天看到一道面试题,i++和++i的效率谁高谁低. 面试题的答案是++i要高一点. 我在网上搜了一圈儿,发现很多回答也都是同一个结论. 如果早个几年,我也会认同这个看法,但现在我负责任的说,这个结论是 ...

  8. 【转】Java中hashCode的作用

    以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode  ...

  9. Python中的turtle初探

    turtle Python自带了一个turtle库,就像名字turtle说的那样,你可以创建一个turtle,然后这个turtle可以前进,后退,左转,这个turtle有一条尾巴,能够放下和抬起,当尾 ...

  10. 使用Three.js为QQ用户生成3D头像阵列

    东西其实比较简单,就是输出某一范围内QQ账号的3D头像 涉及的技术主要是Three.js的基本使用 而后通过腾讯的接口异步并发请求QQ用户头像,Canavs作图生成Texture应用在球体上 需要注意 ...