`
忘忧鸟
  • 浏览: 141941 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

【转】JavaScript面向对象程序设计(2): 数组

阅读更多

或许你会奇怪,面向对象的程序设计为什么从数组开始讲起?这是因为……其间的种种关系吧……嘿嘿,这里先卖个关子,先来看看我们熟悉的数组在JavaScript里面是什么样子的。

1. 创建数组

在JavaScript中有很多创建数组的方法。比如使用Array函数。不过这不是现在我们要讲述的。现在我们使用简单的方括号“[]”的办法来创建数组。

var objAyyar = []; // 1 
var objAyyar = [2]; // 2 
var objAyyar = ["a", "b", "c"]; // 3 
var objAyyar = [new Date(), 123, "abc"]; // 4 
 
这里有四个创建数组的语句。下面来一一解释一下:

第一句,创建一个空的数组;

第二句,创建一个数组,数组元素只有一个2;

第三句,创建一个数组,数组的元素分别初始化为"a", "b", "c";

第四句,创建一个数组,其中第一个元素为一个Date类型的对象,第二个元素是数字123,第三个元素是字符串"abc"。

回顾一下,在Java或者C++语言中,数组是具有相同的数据类型的元素的集合。比如使用Java语言的下面语句

int[] array = new int[10];

将创建一个能放入10个int类型的元素的数组。数组和其他类型的集合的一个很大的区别是,数组里面只能存放相同数据类型的元素(使用泛型的集合除外)。但是,像上面的第四句,JavaScript的数组怎么能存放不同类型的元素呢?这是因为,JavaScript是弱类型的语言,没有很大的数据类型的差别,所以数组的元素可以放入不同的类型。

2. 操作数组

数组是元素的有序集合。数组中的元素是有序的,这就可以通过下标访问到数组中的每个元素。而且,JavaScript的数组相当的灵活。当你习惯了Java或者C++的数组之后,或许并不习惯JavaScript的数组。在一定程度上,这种数组可以称为一种动态数组。看这样一段代码:
var arr = [1, 2, 3, 4, 5]; 
alert(arr.length); // 数组长度为5 
alert(arr[3]); // arr[3] = 4 
arr[9] = 10; // 改变了数组的长度为10 
alert(arr[7]); 
alert(arr.length); 
 
首先创建一个数组arr,可以看到它的长度是5,arr[3]是4。这些都是很常见的。那么第三句,arr[9] = 10;就有点意思了——在Java中,这句操作将导致数组越界的异常,在C++中,这种操作是极其危险的。但是在JavaScript中,这样的操作是正常的——你可以动态的改变数组的大小!虽然你在创建数组时并没有这么大的长度,但是,你可以在创建之后指定它!这时的arr.length已经自动的变成10了。那么,arr[7]又会是什么呢?经过运行代码我们会看到,arr[7]是undefined。也就是说,虽然arr[9]有了值,但是其中从arr[5]到arr[8]这几个元素都是未定义的,也就是undefined。如果你问JavaScript怎么不给个初始值?唉,饶了它吧!JavaScript并不知道你想要它初始化成什么值啊!万一错了呢?干脆还是别了吧……

var arr = [1, 2, 3, 4, 5]; 
alert(arr.length); // 数组长度为5 
delete arr[3]; // 删掉第4个元素 
alert(arr.length); // 长度不变 
alert(arr[3]); // arr[3] = undefined 
arr.length = 4; // 缩短长度 
alert(arr[4]); 
arr.length = 10; // 增加长度 
alert(arr[6]); 
 
上面的代码也很有意思:使用delete操作符可以删除任意一个数组元素,但是长度并不改变。

Java的数组也有一个length属性,用来显示数组的长度。JavaScript的数组也有这个属性。但是,和Java不同的是,后者的length属性并不是只读的!你可以任意的设置数组的length属性的值,无论是扩大还是缩小!只是如上面的代码所示,改变了length之后,越界的元素或者以前没有定义的元素都将成为undefined。也就是说,当length大于原始长度时,从原长度到length - 1的元素都将成为undefined;当length小于原始长度时,从length到原长度 - 1的元素也都会清除设置为undefined。

3. 非数字的下标?

如果动态的length属性还不够灵活的话,那么,JavaScript的数组还有另外的能力。

你见到过用字符串做数组下标的吗?Java行吗?C++行吗?JavaScript就行!看看下面的语句:
var arr = [1, 2, 3]; 
alert(arr[1] == arr["1"]); 
arr["js"] = 4; 
alert(arr["js"]); 
 
上面的语句看到,arr[1]和arr["1"]实际是一样的效果!这是怎么回事呢?我们用下面的语句验证一下:

alert(1 == "1"); // true 
alert(1 === "1"); // false 
 
由于JavaScript是弱类型语言,所以在使用变量的时候,JavaScript会尽可能的将它转换成所需要的类型。比如数组下面需要数字,那么提供一个字符串,将会试图把字符串转换成数字。这里的"1"就成功的转换成了数字1,于是这个语句就成立了。这就是使用 == 操作符返回true的原因。而 === 操作符不允许这样的类型转换,所以会返回false。

那么,这个arr["js"]怎么也能成立呢?这就不是上面的问题了。也就是说,JavaScript实际是允许将字符串作为数字下标的。这在JavaScript中是完全合法的。
分享到:
评论

相关推荐

    JavaScript面向对象程序设计

    JavaScript面向对象程序设计(2): 数组 JavaScript面向对象程序设计(3): 对象 JavaScript面向对象程序设计(4): 函数 JavaScript面向对象程序设计(5): 类 JavaScript面向对象程序设计(6): 封装 JavaScript面向对象程序...

    JavaScript面向对象编程指南(第2版)

    , 内容提要, JavaScript语言是一种具有高度表达能力的、基于原型特性的、非常灵活的面向对象程序设计语言。本书着重于介绍JavaScript在面向对象方面的特性,以为您展示如何去构建强健的、可维护的、功能强大的应用...

    JavaScript面向对象编写购物车功能

    之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着...

    详解JavaScript基于面向对象之创建对象(2)

    接着上文《详解JavaScript基于面向对象之创建对象(1)》继续学习。 4、原型方式  我们创建的每个函数都有一个通过prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和...

    php课程(共100多节)

    2:PHP的数据类型与源码调试 3:常用PHP运算类型介绍与应用 4: PHP条件语句介绍与应用 5:PHP循环语句的介绍与应用 6:PHP数组的创建修改应用 7:PHP函数和自定义函数 8:Mysql 简介和创建新的数据库 9:数据库中的...

    JavaScript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类。javaScript只有对象,不是类的实例。javascript中的对象是基于原型的。 1.1句点...

    详解JavaScript对象和数组

    许多高级编程语言都是面向对象的,比如C++、C#和Java等高级程序设计语言,那么一种面向对象语言有哪些基本要求呢?下面我们就通宿地说一下面向对象的一些知识。 一种面向对象语言需要向开发者提供四种基本能力: (1...

    Java编程基础.PPT+PDF

    PDF部分:认识Java 变量 运算符 流程控制语句和函数 ...PPT部分:集合update 超文本标记语言 JavaScript程序设计 CSS样式表 update数组 update函数 update面向对象基础 面向对象高级特性 update异常处理 update工具类

    JavaScript王者归来part.1 总数2

     第2章 浏览器中的JavaScript  2.1 嵌入网页的可执行内容   2.2 赏心悦目的特效   2.3 使用JavaScript来与用户交互  2.4 绕开脚本陷阱 2.5 总结   第3章 开发环境和调试方法  3.1 我能用什么来编写脚本--...

    程序员面试刷题的书哪个好-FrontEndKnowledge:前端知识

    面向对象编程 :star: :star: 箭头函数 函数式编程 传播和休息运算符 数组方法(Map、Filter、Reduce、ForEach、Every、Some 等) 解构赋值 例外 构架 助焊剂 图书馆 :star: :star: :star: :star: React :star: :star...

    JavaScript for PHP Developers(中文版)第2版

    中文完整版!...在为大型应用程序编码的时候,使用常用的设计模式。 致谢 前言 第1章简介 第2章语法 第3章函数 第4章面向对象编程 第5章内建API 第6章ECMAScript 5第7章JavaScrIpl模式 第7章JavaScrIpl模式

    java源码包2

    2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...

    clientnode:通过原始的jquery模式和选择器作用域提供互斥,通用接口控制器,面向对象的设计

    该插件的主要目的是提供一种通用的接口逻辑,例如控制器,用于调用实例方法或获取面向对象的设计插件的属性值。 还集成了一组用于构建gui组件的可重用逻辑元素。 内容 [目录] 特征 通过锁定管理实现互斥支持 具有...

    javaScript精粹

    《JavaScript 精粹》还介绍了一些面向对象编程内容,这部分内容可以帮助用户以更高的角度来看待自己的设计,以提高代码的质量和可维护性。最为难得的是,由于具有丰富的业界实践经验,作者在《JavaScript 精粹》中不...

    JS克隆,属性,数组,对象,函数实例分析

    主要介绍了JS克隆,属性,数组,对象,函数,结合实例形式分析了javascript中面向对象程序设计相关的对象、属性、函数及数组等相关技巧,需要的朋友可以参考下

    curso-javascript-typescript:JavaScript和TypeScript课程库从基础到高级

    面向对象的Javascript(类,构造函数,工厂函数等) 功能性Javascript(特定于功能,数组和对象的部分) 异步Javascript(具有Promise,Ajax,Axios和Fetch API) Webpack和Babel(用于在较旧的浏览器中使用现代...

    Java语言基础下载

    第三章:面向对象的程序设计 31 学习目标 31 类和对象的描述 32 声明类 32 声明属性 33 声明成员方法 34 源文件的布局 36 包的声明 36 包与目录的布局 38 内容总结 45 独立实践 46 第四章: Java语法基础 47 学习...

    COURSERA_HTML_CSS_Javascript_Web_Developers:Web开发人员HTML,CSS和Javascript

    Coursera 约翰·霍普金斯大学 欢迎使用面向Web开发人员HTML,... Javascript中的对象和函数 数组,闭包和命名空间 使用Java脚本构建Web应用程序 文档对象模型操纵 Ajax简介 使用Ajax将餐厅网站与真实数据连接起来

    PHP入门到精通

    26.4Smarty程序设计 第4篇 项目实战 应用Smarty模板开发电子商务网站(教学录像:2小时10分54秒) 27.1系统分析 27.2系统设计 27.3软件开发环境 27.4数据库与数据表设计 27.5搭建系统框架 27.6公共文件设计 27.7前台...

    PHP入门到精通02

    26.4Smarty程序设计 第4篇 项目实战 应用Smarty模板开发电子商务网站(教学录像:2小时10分54秒) 27.1系统分析 27.2系统设计 27.3软件开发环境 27.4数据库与数据表设计 27.5搭建系统框架 27.6公共文件设计 27.7前台...

Global site tag (gtag.js) - Google Analytics