《AngularJS高级程序设计》——5.7 使用数组

简介: 本例中有几点需要注意的地方。第一,我不需要在创建它时声明数组中成员的数量。JavaScript数组会调整其大小以放置任何数量的成员。第二点是我无需声明数组中将放入的数据类型。所有的JavaScript数组都可以放置任意混合的数据类型。在本例中,我为数组赋了三个值:数字、字符串和布尔值。

本节书摘来自异步社区《AngularJS高级程序设计》一书中的第5章,第5.7节,作者:【美】Adam Freeman(弗里曼)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

5.7 使用数组

JavaScript的数组用起来和其他大多数编程语言一样。清单5-32展示了你可以如何创建并填充数组。

清单5-32 在文件jsdemo.html中创建并填充数组

screenshot

我调用new Array()创建了新的数组。这会创建空数组,我将它赋值给了变量myArray。在后面的语句中,我为数组中各索引位置赋值。(该清单没有控制台输出。)

本例中有几点需要注意的地方。第一,我不需要在创建它时声明数组中成员的数量。JavaScript数组会调整其大小以放置任何数量的成员。第二点是我无需声明数组中将放入的数据类型。所有的JavaScript数组都可以放置任意混合的数据类型。在本例中,我为数组赋了三个值:数字、字符串和布尔值。

5.7.1 使用数组字面量
数组字面量风格让你在单行语句中创建并填充数组,如清单5-33中所示。

清单5-33 在文件jsdemo.html中使用数组字面量风格

screenshot

在本例中,通过在方括号(“[”和“]”)之间指明在数组中我想要的成员,我指定了变量myArray应该被赋予新数组。(该清单没有控制台输出。)

5.7.2 检测数组
AngularJS提供angular.isArray方法,它在参数为数组时返回true,如清单5-34所示。

清单5-34 在jsdemo.html文件中检测数组

screenshot

该示例产生如下控制台输出:

screenshot

5.7.3 读取和修改数组的内容
你要取值得使用方括号(“[”和“]”)并给予索引,将你需要的索引放在括号中间,如清单5-35所示。

清单5-35 在文件jsdemo.html中从数组的索引处取数据

screenshot

通过为索引赋一个新值,你可以轻而易举地修改放在JavaScript数组中任意位置的数据。只要是正常的变量,你就可以肆无忌惮地更换某个索引上的数据类型。清单输出如下:

screenshot

清单5-36演示修改数组内容。

清单5-36 在文件jsdemo.html文件中修改数组内容

screenshot

在本例中,我将字符串赋值到数组中位置0,该位置之前放的是数字,产生该输出:

screenshot

5.7.4 枚举数组内容
你可以使用for循环或AngularJS的angular.forEach方法来枚举数组内容,清单5-37中演示了二者。

清单5-37 在文件jsdemo.html中枚举数组内容

screenshot

JavaScript的for循环与其他语言中的循环用起来差不多。你可以使用length属性来确定数组中有多少元素。使用angular.forEach方法不需要数组的范围,但也不提供当前数组项的索引。清单输出如下:

screenshot

5.7.5 使用内置数组方法
JavaScript的Array对象定义了大量你可以和数组一起用的方法。表5-6描述了最有用的那些方法。

表5-6  有用的数组方法
screenshot

相关文章
|
6月前
|
设计模式 前端开发 JavaScript
AngularJS基础知识总结
【5月更文挑战第1天】AngularJS,谷歌收购的JavaScript框架,用于构建动态Web应用,采用MVC模式简化开发。特性包括:模块化代码管理、双向数据绑定、语义化HTML标签和依赖注入。适合单页面应用开发,但不适用于DOM操作密集或高性能需求场景。提供强大工具,提升开发效率和代码可维护性。
51 2
|
存储 JavaScript 前端开发
AngularJS进阶学习(二)
AngularJS 是一种流行的 JavaScript 框架,用于开发 Web 应用程序。它提供了许多功能,如依赖注入、控制器、指令、服务、过滤器等,使开发人员可以更轻松地构建复杂的 Web 应用程序。在这篇教程中,我们将介绍 AngularJS 的安装、使用、应用场景以及一些代码实例。 # 一、安装 AngularJS 安装 AngularJS 需要一些前置条件,如 Node.js 和 npm。下面是安装 AngularJS 的具体步骤: ## 1. 安装 Node.js 和 npm 在安装 AngularJS 之前,您需要安装 Node.js 和 npm。Node.js 是一个用于在服务
|
JavaScript 前端开发
AngularJs-变量
Angularjs-变量 名字 : Hello {{name}} ...
783 0
《AngularJS高级程序设计》——1.6 小结
在本章中,我描述了本书内容和结构的大致轮廓,以及AngularJS Web开发所需要的软件。就像之前所说的,学习AngularJS开发最好的方式就是通过实例学习,所以在第2章中我将直接开始演示如何创建你的第一个AngularJS应用程序。
1514 0
|
JavaScript 前端开发 HTML5
《AngularJS高级程序设计》——第1章 准备 1.1你需要知道哪些知识
AngularJS吸收了服务器端开发技术的一些最好的方面,并使用它们来对浏览器中的HTML进行增强,为更简单而容易地构建富应用程序奠定了基础。AngularJS应用程序是围绕着被称为模型-视图-控制器(MVC)的模式而构建的,该模式的重点在于创建这样的应用程序
1335 0
|
JSON 前端开发 数据格式
《AngularJS高级程序设计》——2.4 小结
在本章中,演示了如何创建第一个简单的AngularJS应用,将一个HTML模拟页面改造成一个实现了MVC模式并从Web服务器上以JSON形式获得数据的动态应用。一路下来,我们接触了AngularJS提供给开发者的各个主要组件和特性,并指出了你在本书中哪些部分可以找到更多信息。
1514 0
|
JavaScript 前端开发 程序员
《AngularJS高级程序设计》——导读
本书是AngularJS程序设计的高级指南。全书共25章,分为3个部分,每部分覆盖一组相关话题。第1部分为第1章到第8章,包括AngularJS简介,以及HTML、CSS和JavaScript的基础知识。
1603 0
|
JavaScript 前端开发 数据格式
《AngularJS高级程序设计》——5.11 小结
在本章中我提供了JavaScript语言的简单基础,以及AngularJS为补充核心语言特性而提供的实用方法。我还介绍了承诺以及AngularJS对JSON的支持,它们二者是使用Ajax并实现我在第3章中讲的单页面应用程序模型所必不可少的。
1539 0