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 相关文章推荐
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
es6学习之解构时应该注意的点
Aug 29 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
Express 配置HTML页面访问的实现
Nov 01 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
Mysql的常用命令
2006/10/09 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
深入PHP数据加密详解
2013/06/18 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
应届大学生自荐信格式
2013/09/21 职场文书
乔迁之喜主持词
2014/03/27 职场文书
户外宣传策划方案
2014/05/25 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
假释思想汇报范文
2014/10/11 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL