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 密码强弱度检测万能插件
Feb 25 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vuex与组件联合使用的方法
May 10 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JS实现li标签的删除
2019/04/12 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python del()函数用法
2013/03/24 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python内置函数及功能简介汇总
2020/10/13 Python
软件测试面试题
2015/10/21 面试题
幼儿园师德师风学习材料
2014/05/29 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
新学期感想
2015/08/10 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫