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 相关文章推荐
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
谈一谈javascript闭包
Jan 28 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
js验证上传图片的方法
2015/05/12 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Django之腾讯云短信的实现
2020/06/12 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
UNIX特点都有哪些
2016/04/05 面试题
校园达人秀策划书
2014/01/12 职场文书
运动会入场词50字
2014/02/20 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
伊索寓言教学反思
2014/05/01 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB