这篇文章的主要目的是讲解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 + "
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在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Dreamweaver Mac版
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

WebStorm Mac版
好用的JavaScript开发工具