javascript中的对象和数组的应用技巧


Posted in Javascript onJanuary 07, 2007

javascript已经用了有三年多了,但是对一些细节的东西还是一知半解,比如对象和数组,一直都在用一些最基本的操作。这是我学习的一个坏习惯--懒,很多东西都是了解而已,看到稍微复杂点的逻辑就没有耐心。就像学asp时不知道asp跟脚本的关系,学html不知道什么是DOM...结果是学得慢且不扎实,碰到稍复杂的问题就歇菜(扯远了)。
今天继续优化脚本,尝试着合并一些数组时碰到问题,才算去仔细看了手册,做了一些测试。

javascript1.2之后允许使用[]创建数组:

var firstArray = [];
var secondArray = ["red", "green", "blue"];
var thirdArray = [,,,,];

可以在数组创建后添加元素:

secondArray[4] = 28;

这样的结果是第4个元素和第2个元素之间有1个空元素。
结果类似这样:["red", "green", "blue",,28]
需要注意的是,数组必须初始化,我测试了数组作为数组元素的定义:

var arrArray = [[]];

本来设想实现二维数组,结果是使用arrArray[i][0]当i>0时无效!
仔细看一下才明白,其实是定义了arrArray[0]为一个空数组,而其他元素都未定义,相当于
var arrArray=[];
arrArray[0]=[];
所以arrArray[1]没有定义,所以如果将它作为数组进行操作会出错。

删除一个数组元素:delete

var myColors = ["red", "green", "blue"];
delete myColors[1];
alert("The value of myColors[1] is: " + myColors[1]);

delete的结果是myColors[1]=undefined,但是myColors.length不变,myColors变成这样:["red",, "blue"]

替换或绝对删除数组元素用slice():

var myArray = [1, 2, 3, 4, 5];
myArray.slice(2); // returns [3, 4, 5]
myArray.slice(1, 3); // returns [2, 3]
myArray.slice(-3); // returns [3, 4, 5]
myArray.slice(-3, -1); // returns [3, 4]
myArray.slice(-4, 3); // returns [2, 3]
myArray.slice(3, 1); // returns []

var myArray = [1, 2, 3, 4, 5];
myArray.splice(3,2,''a'',''b'');
// returns 4,5 [1,2,3,''a'',''b'']
myArray.splice(1,1,"in","the","middle");
// returns 2 [1,"in","the","middle",3,''a'',''b'']

看了文档才知道,数组是传递引用的!

var x = [10, 9, 8];
var y = x;
x[0] = 2;
alert("The value of y's first element is: " + y[0]);

你猜结果是多少呢?
再看这个:

// Declare a reference type (array)
var refType = ["first ", " second", " third"]; 

// Declare a primitive type (number)
var primType = 10; 

// Declare a function taking two arguments, which it will modify
function modifyValues(ref, prim) 
{
ref[0] = "changed"; // modify the first argument, an array
prim = prim - 8; // modify the second, a number
}

// Invoke the function
modifyValues(refType, primType); 
// Print the value of the reference type
document.writeln("The value of refType is: ", refType+"<
>");
// Print the value of the primitive type
document.writeln("The value of primType is: ", primType); 

测试时发现一个问题:

var arr=[];
arr['a']=1;
arr['b']=2;
alert(arr.length);

弹出的数字是0!
看了文档后知道,这样的数组叫做联合数组(Associative Arrays),arr['a']等同于arr.a,arr.length也就等同于arr['length'],而arr.length在我们初始化arr(var arr=[];)的时候自动赋值为0。
有人把这种联合数组叫做javascript的hash table。严格上讲,联合数组和普通数组本身都是对象(废话,javascript中的一切都是对象- -),意义和用法都是相同的。看下面的例子:

var arr=[];
arr=[1,2,3];
arr.test='test';
alert(arr);
alert(arr[1]);
alert(arr['test']);

var arr={}; arr=[2,3,4]; alert(arr[0]); 
var arr={};和var arr=[]都可以写成var arr=function(){}; 
从上面的代码可以看出,下标数组跟联合数组分别独立,下标只作用于下标数组,不能访问联合数组,相应的,联合数组不对length属性产生影响。联合数组的标签就是属性,但是下标数组的下标并不是属性,arr[0]!=arr.0,访问arr.0会出错。

在某些时候,用arr['a']代替arr.a作为方法调用会更有效,因为arr['a']中的'a'可以用变量传入,比如将方法赋给变量:

var d=document,l=links;

这时候用直接d.l就会出错,而用d[l]就可以正确执行,alert一下就知道了:)

alert(d.l);//脚本错误
alert(d[l]);//显示object

既然数组是由lenght属性的对象,那么是不是所有具有length属性的对象都是数组呢?比如String。测试之后发现,firefox是可以把String当作数组处理的,但是ie不行:

var myString = "Hello world";
alert(myString.length);
alert(myString[0]);

数组的对象应该比较独特,用户对象不能完全模拟:

function myarray(size){
this.length=size;
var x=0;
}
var arr=new myarray(5);
arr[9]=1;
alert(arr);
alert(arr[9]);
alert(arr.length);

本以为Array的length属性就是普通的对象属性,结果经过上面的例子发现,arr的length不再是数组length,arr的结构也不是普通数组结构。

定义一个函数/类的方法有好几种:

function fName(arguments){
//function body
};

var fName = function(arguments){
//function body
}

var fName = new Function("arguments","/*function body*/");

第三种方法比较好玩,看下面的例子:

var arr=new Function("var total=0; for (var i=0; i

用这个方法可以解析ajax返回的JSON,这样就不用低效的eval了(没有测试是否比eval快):
假设{b:{c:2}}为返回的json字符串:

var arr=new Function("this.a={b:{c:2}};");
var aa =new arr();
alert(aa.a.b.c);

Javascript 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
js实现查询商品案例
Jul 22 Javascript
JavaScript For Beginners(转载)
Jan 05 #Javascript
JavaScript的目的分析
Jan 05 #Javascript
关于JavaScript的gzip静态压缩方法
Jan 05 #Javascript
关于Javascript 的 prototype问题。
Jan 03 #Javascript
彻底搞懂JS无缝滚动代码
Jan 03 #Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 #Javascript
对象的类型:本地对象(1)
Dec 29 #Javascript
You might like
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js style动态设置table高度
2014/10/21 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
js判断密码强度的方法
2020/03/18 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Django ModelForm操作及验证方式
2020/03/30 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
综合测评自我鉴定
2013/10/08 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
商场广播稿范文
2015/08/19 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏