js一维数组、多维数组和对象的混合使用方法


Posted in Javascript onApril 03, 2016

这篇文章的主要目的是讲解JavaScript数组和对象的混合使用,由于JS的弱检查特性,因此在JS数组中可以同时存储不同类型的变量,比如你可以把数字、字符串、字符、对象等内容放在同一个数组中。对象也可以做同样的事情,区别是对象可以指定对象里每一个成员的别名,这样在编程的时候数据更易读,比如:

var arr1 = ["飞鱼", 25, 172, "江苏"];
var person = {name:"飞鱼",age: 25, height:172,province: "江苏"};

这样,person.name是不是比arr1[0]更易读,更易使用?当然数组和对象各有优势,本文的重点是将二者的优势结合起来,综合使用。

一维数组
下面的代码创建名为 cars 的数组:先创建数组,再一一赋值

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者 (condensed array):在创建数组对象的时候赋值

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):不创建变量,直接辅助,不过注意创建对象时用的小括号“( )”,而直接赋值时用的是方括号“[ ]”,这个一不小心就容易出错。
实例
var cars=["Audi","BMW","Volvo"];

上面是一维数组的三种创建方式。由于JS的弱检查性,你可以在一维数组中放不同类型的变量。

二维和多维数组:
1、 创建二维数组方法一:先创建一个一维数组,然后该一维数组的所有成员再创建一维数据

var persons = new Array();

persons[0] = new Array();
persons[1] = new Array();
persons[2] = new Array();

persons[0][0] = "zhangsan";
persons[0][1] = 25;
persons[1][0] = "lisi";
persons[1][1] = 22;
persons[2][0] = "wangwu";
persons[2][1] = 32;
persons[0] = ["zhangsan", 25];
persons[1] = ["lisi", 21];
persons[2] = ["wangwu", 32];

相比较上一种方法,这个要简单易读多了。

persons.length = 3

       2、创建二维数组方法二:先创建一个一维数组,然后该一维数组的所有成员直接赋值
var persons = new Array();

       3、创建二维数组方法三:直接赋值
var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];

4、总结
第一种和第二种方法虽然麻烦一些,但贵在可以先创建一个空的多维数组,然后在for循环中根据自己的需求进行赋值。第三种方法对于枚举数据来说就比较简单易用了。
二维数组的最后一个问题,就是二维数组或多维数组的长度是多少?我们测试一下下面的代码:

document.write("persons = " + persons + "<br />persons.length = " + persons.length);

       输出的结果是:
            persons = zhangsan,25,lisi,21,wangwu,32
    也就是说,多维数组的length属性返回的是多维数组第一维的长度,而不是多维数组中元素的个数。

   5、如何返回多维数组的元素个数

如下数组:

var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];

通过维数(此处是3)乘以每维元素的个数(此处是2)就可以得出该多维数组的元素个数是6了。但是这并不是保险的做法,因为多维数组中每一个维度的元素个数是可以不一样的,如:

var persons = [["zhangsan", 25], ["lisi", 21, 172], ["wangwu", 32]];

        该数组的第一维的第二个元素数组包含三个元素,其他的只有两个,这再使用length来计算还是3,因为第一维的元素个数没变嘛。但是再使用上面的方法计算该多维数组的元素个数就不对了。
        因此多维数组的length属性和一维数组一样,永远返回第一维数组的元素个数。计算多维数组的元素个数,可以自己创建一个或多个嵌套for循环来计算,如:
        在知道数组的维度的情况下,可以针对该数组写算法,如二维数组:

var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];
function getArr2ElementNum(arr) {
var eleNum = 0;
if (arr == null) {
return 0;
}
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
eleNum++;
}
}
return eleNum;
}
alert(getArr2ElementNum(persons));

      在多维数组维度过多,嵌套复杂时,通过上面的方法来写针对的算法就太累了,特别是当这个复杂的多维数组还可能随时变换维度的情况下。如下这个复杂的多重嵌套的多维数组:
var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]];
      甚至,有些多维嵌套数组比这个还复杂,那怎么计算数组元素个数呢,我写了一个求数组元素个数的函数,不管是一维还多维,也不管是多么复杂的嵌套多维数组,都可以计算出来,算法不麻烦,主要用到了递归的理念:
//判断某个对象是不是数组

function isArray(obj) {
return obj && ( typeof obj === 'object') && (obj.constructor == Array);
}

//eleNum变量初始值为0,用来统计数组元素个数
var eleNum = 0;

//递归计算某个数组元素是不是下一维数组,如果是,则继续递归下去;如果不是,统计元素个数。
function recursion(obj) {
if (isArray(obj)) {
for (var j = 0; j < obj.length; j++) {
if (!isArray(obj[j])) {
eleNum++;
continue;
}
recursion(obj[j]);
}
} else {
eleNum++;
}
}

//arr为要计算数组元素个数的一维或多维数组,通过调用递归函数recursion返回数组元素个数
function getArrNElementNum(arr) {
if (arr == null) {
return 0;
}

recursion(arr);

return eleNum;
}

//随意定义一个复杂的多维嵌套数组
var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]];
//打印出来数组元素个数
alert(getArrNElementNum(arrN));

对象:
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "Bill",
lastname : "Gates",
id    : 5566
};

对象属性有两种寻址方式:
实例

name=person.lastname;
name=person["lastname"];

对象和多维数组的混合使用:
         想象这么一个场景,要枚举并统计清华大学(qinghua)、北京大学(beida)、浙江大学(zheda)三所大学一共有多少个系,怎么做?
         首先,建立一个数组,数组中包括着三所学校:

var departments = [qinghua, beida, zheda];

        每个学校又有很多不同或相同的学院(xx),如何表示?在这里就要用到数组包含对象了:
var departments = [qinghua{xx1, xx2, xx3}, beida{xx4, xx5,

 xx6, xx7}, zheda{xx8, xx9}];

每个学院又有不同的系(d),如何表示?
var departments = [qinghua{xx1:[d1, d2], xx2[d3, d5],

 xx3:[d7, d8]}, beida{xx4, xx5, xx6, xx7}, zheda{xx8,

 xx9}];

 //只是举个例子,后面两个大学我就不表示了

上述例子就是一个数组,该数组的元素是学校对象,学校对象有N个学院属性,而每个学院属性又是一个包含多个系的数组,这就是一个典型的多维数组和对象混合使用的例子,可以简单明了的说明和列表学校、学院和系之间的级别、归属和数量关系。
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
vue如何进行动画的封装
Sep 26 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 #Javascript
JQuery解析XML的方法小结
Apr 02 #Javascript
javascript HTML5文件上传FileReader API
Mar 27 #Javascript
JavaScript中文件上传API详解
Apr 01 #Javascript
jquery表单验证插件formValidator使用方法
Apr 01 #Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
You might like
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Git命令之分支详解
2021/03/02 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
React Component存在的几种形式详解
2018/11/06 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python二元算术运算常用方法解析
2020/09/15 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
delegate与普通函数的区别
2014/01/22 面试题
木工主管岗位职责
2013/12/08 职场文书
教师实习自我鉴定
2013/12/18 职场文书
捐助倡议书范文
2014/04/15 职场文书
白血病募捐倡议书
2014/05/14 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
民间个人借款协议书
2014/09/30 职场文书
大学生见习报告总结
2014/11/04 职场文书
2014年保育员工作总结
2014/12/02 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
行政复议答复书
2015/07/01 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫