转载地址:http://blog.csdn.net/wangyuchun_799/article/details/38460515

引言

这篇文章的主要目的是讲解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个学院属性,而每个学院属性又是一个包含多个系的数组,这就是一个典型的多维数组和对象混合使用的例子,可以简单明了的说明和列表学校、学院和系之间的级别、归属和数量关系。

JS一维数组、多维数组和对象的混合使用的更多相关文章

  1. egret之一维,二维数组

    一维数组转换成二维数组下标公式: 行=下标/二维数组列数 列=下标%二维数组列数+1 ] + ); ] + ); 二维数组转一维数组: 下标=(二维数当前行-1)*列数+二维数当前列-1: let i ...

  2. Java一维与二维数组的拷贝与排序

    Java一维与二维数组的拷贝与排序 目录 Java一维与二维数组的拷贝与排序 Arrays.sort() 一维数组升序排序 二维数组按行升序排序 二维数组按列升序排序 Java中的数组 Java中数组 ...

  3. Java基本语法-----java数组(一维数组二维数组)

    嘿嘿!你们懂的,又是图片,委屈大家了. java数组(一维数组二维数组) [正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!下面有个"顶"字,你就 ...

  4. js递归遍历多维数组并在修改数组的key后返回新的多维数组

    我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...

  5. 二维数组&多维数组

    1.二维数组 二维数组由多个一维数组组成,其定义方式: ,]{ {,,,}, {,,,}, {,,,} }; 二维数组中括号中,逗号左边表示一维数组的个数,也可以说控制行,逗号后面的数表示每个一维数组 ...

  6. java数组---多维数组

    多维数组 多维数组可以看成是数组的数组 比如二维数组就是一个特殊的一维数组,其每一个元素都是一个一维数组. 二维数组 public static void main(String[] args) { ...

  7. 数据结构 二维数组-->稀疏数组-->二维数组

    稀疏数组基本概念: 稀疏数组应用场景: 当一个数组大部分的元素为"0",或者为同一个值的数组时,可以使用稀疏数组来保存该数组 处理方法: 1>记录数组一共有几行几列,有多少不 ...

  8. 10-20C#基础---一维、二维数组&&冒泡排序

    一.一维数组 1.定义:是某一种数据类型的数据的组合,数组用来分组基本类型或相同类型的对象.数组中的实体叫做数组的元素或成员. 2. 格式:int[ ] shuzu=new int[ 6];存放int ...

  9. 一维、二维数组 与 常用的返回数组 以及 fetch_all与fetch_row的区别

    一维数组:单行单列的数组. 二维数组:多行多列的数组.       (至少两行两列) 索引数组: fetch_all() 返回所有数组 fetch_row() 返回一行或一列数组  (第二行需要输入两 ...

  10. php获取一维,二维数组长度的方法(有实例)

    在php中获取数组长度方法很简单,php为我们提供了两个函数可以计算一维数组长度,如count,sizeof都可以直接统计数组长度哦,下面我们来看几个实例吧.php如何获取数组的长度,使用php函数c ...

随机推荐

  1. h5-钟表动画案例

    1.html代码 <div class="clock"> <div class="line line1"> <div class= ...

  2. 解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’ 问题

    问题: 当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资 ...

  3. share团队冲刺6

    团队冲刺第六天 昨天:进行各种原件的自定义样式,进行界面布局 登陆界面: 今天:进行后台的代码编写,实现各种按钮的功能 问题:在不同的型号手机上,界面会发生不兼容的问题.

  4. chrome安装switchyomega

    由于在国外网站找不到下载链接,在国内招了个crx文件,以下为安装crx教程 首先修改后缀为zip,再解压, 得到以下文件 然后在chrome里找到扩展程序, 打开开发者模式,点击-加载已解压的扩展程序 ...

  5. 微信支付第三方sdk使用

    1.引入依赖:(对于依赖冲突自行解决) <dependency> <groupId>com.github.binarywang</groupId> <arti ...

  6. 数据分析-Matplotlib:绘图和可视化

    学习路线 简介 简单绘制线形图 plot函数 支持图类型 保存图表 1.简介 Matplotlib是一个强大的Python绘图和数据可视化的工具包.数据可视化也是我们数据分析的最重要的工作之一,可以帮 ...

  7. saturates|meteoric|enclose|marooned|predators|Pioneer community|salinization|condenser|embodied

    saturates渗透 meteoric蒸汽 enclose包围 Pioneer community 先锋群落 Climax community顶级群落 cumulative积累 Rebound 回弹 ...

  8. MySQL数据库数据迁移:从一个服务器到另一个服务器

    需要两个服务器数据库版本相同才可迁移 1:单个或多个数据库 mysqldump -h远程ip -u用户 -p密码 -P3306 -- -uroot -p -P3306 执行后输入本地数据库密码即可 : ...

  9. UEFI启动(翻译)

    本文是我翻译自国外技术博客的一篇文章,其中讲述了 UEFI 的一些基本概念和细节. 本文的原始链接位于: https://www.happyassassin.net/2014/01/25/uefi-b ...

  10. Intellij IDEA中mybatis-generator自动生成

    一.在maven工程中的resource中创建generatorConfig.xml 二.配置generatorConfig.xml: <?xml version="1.0" ...