一、JavaScript 简介
本章为 ABAP 开发者提供了 JavaScript 的介绍。我们先从学习 JavaScript 的必备知识开始。然后，我们将介绍 JavaScript 的基础知识，以及 ABAP 和 JavaScript 之间的一些差异。接下来，我们将看一个非常简单的程序和你自己创建它的必要步骤。
简单的 JavaScript 背景
JavaScript 是 ECMAScript 语言规范中标准化的高级、动态、非类型化语言。与超文本标记语言(HTML)和级联样式表(CSS)一起，JavaScript 是另一项最初推动 Web 应用架构的重要技术。所有现代 web 浏览器都支持 JavaScript (JS ),并且今天大多数网站和 web 应用都在使用它。一开始，使用 JavaScript 的典型例子包括在网页上创建交互效果和在网站上进行表单数据验证。从那以后，许多库都是用 JS 编写的，比如 jQuery。
注意
有一种常见的误解，认为 JavaScript 和 Java 是相似的。它们是不相关的，并且具有不同的语义。JavaScript 的语法源自 C 编程语言。
此外，JS 语言在服务器端编程中用作几种不同浏览器引擎的运行时引擎，如 V8 (Google Chrome)和 SpiderMonkey (Firefox)。最广为人知和使用的 JS 运行时环境之一叫做 NodeJS。
JavaScript 与 C 语言在语法上有一些相似之处，比如 switch 和 if 语句以及 while 和 do while 循环。在 JavaScript 中，类型与值链接，而不是与变量链接。例如，一个名为 myvar 的变量可以先被赋予一个字符串，然后被反弹为一个数字。
JavaScript 是一种区分大小写的语言，这意味着任何语言关键字、变量名和函数名都必须用一致的大写字母书写。例如，关键字 case 必须写成“case”，而不是“CASE”或“Case”
JavaScript 是一种多参数语言，允许命令式编程、面向对象编程和函数式编程。它允许你处理文本、数字、日期和数组。JavaScript 中还提供了正则表达式处理功能。然而，JS 不提供任何网络或图形功能。JavaScript 支持使用类进行继承的原型(与许多其他面向对象的语言不同，如 ABAP)。许多基于类的特性可以使用 JavaScript 中的原型来编程。
在 JavaScript 程序内部
本节详细介绍 JavaScript 程序的各种不同的代码元素。
JavaScript 程序由许多语句组成。每条语句都以分号(；).JavaScript 区分表达式和语句。语句可以由文字、变量和表达式组成。给定的 JS 语句可能跨越多行。此外，在一行中可以写多条语句。
注释是任何代码的重要组成部分。JavaScript 忽略了它们，但它们是程序员记录代码目的的重要工具，供以后审查。有两种类型的注释可以添加到 JavaScript 程序中。首先，您可以添加单行注释，如下所示:
var num = 1; // from here comments start
如您所见，单行注释以双斜线(//)开始。该行中所有后续代码/文本都被视为注释文本。标记单行注释的结尾不需要结尾标点；这条线的尽头就是为了这个目的。
JavaScript 还允许您指定多行注释。这些行可以包含在/和/之间，并且可以包含一行或多行。在多行注释中，嵌套是不可能的。试图嵌套多行注释会产生语法错误。清单 1-1 显示了一个在 JS 中不可接受的例子。
清单 1-1。错误嵌套的注释
/* this is comment 1
/* this is comment 2 */
*/
正如你所看到的，这个例子试图在注释 1 中嵌套注释 2，这是不允许的，并且会产生语法错误。
在 JavaScript 程序中，语句是逐行执行的(即顺序执行)。一组语句可以组合在一起形成一个块。块的开始和结束用花括号({ })表示。这些块可能包括函数中的代码(函数类似于 ABAP 中的子例程)或 if 语句或 switch 语句中的代码。
一个 JS 程序可能包含许多文字。在 JS 中使用文字来表示程序中使用的固定值(与变量相反)。这些文字的一些例子是整数和字符串文字。
在 JavaScript 中，字符串包含在一组双引号(“”)或一组单引号(‘’)中，而 ABAP 字符串只包含在单引号中。其他类型的文字有数组文字、布尔文字和对象文字。
创建一个简单的 JS 程序
现在您已经对 JavaScript 有了一些基本的了解，本节将向您展示如何制作一个简单的程序，然后解释它的各个部分。
您将创建一个小程序，在弹出对话框中显示“我的第一个 JS 程序”的消息。JS 中有一个内置的函数 alert，可以让您向用户显示一条消息。这个函数可以接受文字或变量形式的数字或字符串作为输入。
这个程序的代码如清单 1-2 所示。
清单 1-2。在弹出对话框中显示文本的程序
<html>
<body>
<script>
alert("First JS program by an ABAP Developer");
</script>
</body>
</html>
如您所见，该程序使用一个字符串文字(在双引号内)向用户显示消息。运行此示例会在弹出的对话框中显示一条消息，如图 1-1 所示。
图 1-1。程序输出
快速浏览 HTML
JavaScript 代码不能单独执行。它依赖于运行时环境来包含/导入脚本(例如，HTML
HTML 是用来创建网页的语言。在网页源代码文本中，有许多标签。简单来说，标签是 HTML 文档中的代码，以符号<开始，以>结束。标签通常成对出现，一对标签指示浏览器如何处理标签对中出现的文本。
每个标签都有特殊的含义，有自己的效果。标签由浏览器读取并相应地解释。浏览器不会显示标签。然后，浏览器向查看者呈现并显示网页。
注意
HTML 不是区分大小写的语言:、、都有同样的效果。但是，您必须确保结束标记，比如，包含一个正斜杠，而不是反斜杠。写会出问题。
在这个阶段，您只需要知道 HTML 的细节，这些细节将帮助您运行将要编写的 JS 代码。HTML 文档中存在许多元素，它们被表示为标签:
-
HTML 标签和标记了 HTML 文档的开始和结束。浏览器根据 HTML 标记中包含的信息呈现页面。确保没有代码写在标志 HTML 文档结束的
-
HEAD 标签包含与文档相关的一般信息，例如页面的使用以及与其他文档和资源的链接。例如，一对标签可能包含与网页相关的 JS 文件和 CSS 代码的信息。标题中是 TITLE 标签，用于指定文档的标题。标题显示在浏览器窗口的顶部。TITLE 标签还包含关于文档的元数据。
-
和包含关于页面主体的信息——浏览器加载页面时呈现的实际内容。这对标记中包含的一些元素是页眉和页脚。在正文中，您可以显示许多文本行、表格、表单和图形。您可能有许多标题，如、等等。使用
标签，你也可以指定一个新段落的开始位置。浏览器读取正文中的各种元素，并相应地呈现页面。
现在你已经准备好看看如何编写你的第一个 HTML 代码。图 1-2 显示了一个简单的 HTML 程序，其中没有任何 JavaScript。
图 1-2。HTML 无 JavaScript 代码
图 1-2 的代码输出如图 1-3 所示。
图 1-3。HTML 代码输出
如果 HTML 代码中有语法错误，浏览器仍然会产生输出。但是，您可能得不到想要的结果。例如，考虑图 1-2 中所示的相同代码，其中主体中的< /H1 >标签被错误地写成< \H1 >(即带有反斜杠)。在这种情况下，整组文本行以标题样式显示，如图 1-4 所示。
图 1-4。HTML 页面的错误输出
将 JavaScript 放入 HTML 代码中
本节向您展示如何将本章前面的 JavaScript 代码添加到上一节的简单 HTML 页面中。您可以选择几种方法中的任何一种来实现这一点。最简单的方法是将整个 JS 代码写在 HTML 页面的头部或主体中。也可以将 JS 代码编写为一个单独的文件，并将文件名包含在 HTML 代码中。让我们逐一考虑这些方法。请注意，它们都在浏览器显示中产生相同的输出。
在和标签中编写 JS 代码
第一种方法是在 HEAD 元素中包含整个 JavaScript 代码。例如，您可以将您在清单 1-2 中编写的 JS 代码嵌入到上一节创建的 HTML 代码中(如图 1-2 所示)。包含 JavaScript 的 HTML 代码如清单 1-3 所示。
清单 1-3。头部带有 JS 代码的 HTML 代码
<!DOCTYPE html>
<html>
<head>
<title>My first Web Page</title>
<script>
alert("First JS program by an ABAP Developer");
</script>
</head>
<body>
</body>
</html>
如您所见，单行 JS 脚本是在 HEAD 标记中编写的。当浏览器到达标签之后的剩余 HTML 代码。
在和标签中编写 JS 代码
另一种方法是将 JavaScript 代码包含在 BODY 元素中，在
清单 1-4。在 HTML 主体中添加 JavaScript
<!DOCTYPE html>
<html>
<head>
<title>My first Web Page</title>
</head>
<body>
<script>
alert("First JS program by an ABAP Developer");
</script>
</body>
</html>
与前面的方法一样，当浏览器到达标记后的剩余 HTML 代码。
在单独的文件中创建 JS 代码
另一种常用的方法是将 JS 代码包含在与 HTML 代码分开的文件中，并在 HTML 代码中包含指向 JS 文件的链接。这种方法有几个优点:它使 HTML 代码和 JavaScript 代码都更容易理解和维护。清单 1-5 展示了如何在 HTML 代码中链接到一个 JS 文件。
注意
当将外部 JS 文件链接到 HTML 代码时，请确保 JS 文件的名称以正确的大小写书写。例如，不要将 Code.js 写成 code.js 或 CODE.JS。
清单 1-5。用 HTML 代码处理 JS 文件
<!DOCTYPE html>
<html>
<head>
<title>My first Web Page</title>
<script src="Code.js"> // JS file name
</script>
</head>
<body>
</body>
</html>
这个例子假设 JavaScript 代码包含在一个单独的文件中，在 HTML 代码所在的目录中。如您所见，包含 JS 代码的文件名(在本例中是 Code.js)是在 HEAD 元素中指定的。您必须确保以正确的大小写书写文件名。
同样，一旦到达标签之后的剩余 HTML 代码。
JavaScript 中的变量声明
变量声明是任何编程语言的重要组成部分。声明变量使您能够为程序中使用的值指定符号名。JavaScript 变量名必须以下列之一开头:
-
一个字母(包括大写字符 A 到 Z 和小写字符 a 到 z
-
下划线(_)
-
美元符号($)
名称不能以数字(0-9)开头，但后面的字符可以是数字。允许的变量名包括 Nu_hits、Mytemp13 和 _myname。
JavaScript 中定义的变量要么是具有全局执行上下文的全局变量，要么是特定于特定函数的局部变量(我们将在本书的后面部分讨论这一点)。局部变量只在定义它的函数内可见/可访问，在函数外不可见/可访问。全局变量对整个 JS 程序是可见的/可访问的。
JavaScript 中的变量是使用 var 关键字声明的。下面是语法:
var num;
也可以在同一行代码中声明变量并初始化它:
var num = 1;
您也可以在一行中链接两个变量声明(使用逗号将它们链接在一起):
var num1, num2;
也可以在一行代码中初始化一个或两个变量:
var num1, num2 = 1;
您不需要指定变量的类型。声明从分配给它的值中获取类型。
注意
与 ABAP 不同，JavaScript 允许你声明变量，然后改变它们的类型。
您也可以使用相同的 var 语句声明一个变量并用一个值初始化它，然后将该变量及其值赋给另一个变量:
var num1 = 10;
var num2 = num1;
如您所见，变量 num1 是用值 10 声明和初始化的。在第二条语句之后，num2 变量被声明为一个数字，并被赋值为 10。在语句之后，两个变量的值都是 10。
也可以在以后更改变量的类型。例如，如果变量 num1 是一个数字，以后可以将其更改为字符串，如下例所示:
var num1 = 10;
num1 = "my string";
在 JavaScript 中，你也可以在变量被使用后声明它。换句话说，你甚至可以在声明变量之前使用它。考虑下面这段简短的代码:
num1 = 10;
var num1;
在这种情况下，我们有一个名为 num1 的变量，其值为 10。代码的后面是使用 var 关键字定义变量。JS 的这个特点被称为变吊。当加载和执行 JS 程序时，首先处理所有声明变量的 var 语句(即，在程序代码的其余部分之前)。
如前所述，JavaScript 是一种区分大小写的语言。这意味着你可以用相同的字母创建不同大小写的变量。例如，考虑下面的例子:
var message = "Second JS Program - Message 1";
var MESSAGE = "Second JS Program - Message 2";
这段代码定义了两个独立的变量 message 和 MESSAGE，每个变量都被赋予了不同的字符串值。不鼓励这种做法，以避免混淆。
使用 Eclipse
创建 JavaScript 程序没有单一的编辑器。您有多种选择，例如
-
笔记本
-
SAP Web IDE
-
便笺本
-
记事本++
在这一部分和整本书中，我将演示如何使用我选择的编辑器 Eclipse IDE 创建 JavaScript 程序。向您展示整个 Eclipse 安装过程超出了本章的范围。你应该可以通过 www.eclipse.org 的在线说明很容易地安装它，你也可以在那里下载 Eclipse。
成功安装 Eclipse 后，双击桌面上的快捷方式，如图 1-5 所示。
图 1-5。Eclipse 快捷方式
注意
所有的例子和截图都是在 Windows 中测试的。
或者，如果您使用的是 Windows，您可以使用程序菜单打开 Eclipse。这两个选项都将您带到 Eclipse 编辑器的开始屏幕，如图 1-6 所示。
图 1-6。Eclipse 编辑器
现在您需要创建一个 Eclipse JavaScript 项目。选择菜单路径文件➤新➤项目。出现新建项目对话框，如图 1-7 所示。展开 JavaScript 文件夹，选择 JavaScript 项目节点，然后单击 Next 按钮。
图 1-7。创建 JavaScript 项目
在出现的向导屏幕上，输入项目的名称(在本例中，首先输入**)。不要更改屏幕上的任何其他值，并单击 Finish 按钮。现在屏幕出现如图 1-8 所示。**
**
图 1-8。项目“第一”
在左侧面板中，您可以看到名为 First 的项目最初没有 HTML 或 JavaScript 文件。现在，您将把 JavaScript 和 HTML 文件添加到这个项目中。要添加 JavaScript 代码，只需右键单击第一个项目节点，然后选择“新建➤ JavaScript 源文件”。在出现的对话框中，输入文件的名称。对于这个例子，输入 Code.js 。然后，单击“完成”按钮。
左窗格将出现如图 1-9 所示。
图 1-9。添加了 Code.js 节点
如您所见，第一个项目文件夹中添加了一个新的 Code.js 节点。要向 Code.js 文件添加代码，只需双击该节点。右窗格变化如图 1-10 所示。
图 1-10。JavaScript 编辑器
只需在程序中添加如图 1-10 所示的代码，并使用组合键 CTRL+S 保存代码，如您所见，本例使用了两个名称相似但大小写不同的变量(message 和 MESSAGE)。它还使用两个警告语句向用户输出值。
接下来，您需要向项目中添加一个 HTML 文件。首先右键单击文件夹，然后选择“新建➤文件”。在出现的对话框中，输入带有 html 扩展名的文件名(在本例中为First.html)。在右侧面板的 html 编辑器中输入 HTML 的代码(参见图 1-11 )。
图 1-11。HTML 编辑器
正如您所看到的，这个例子使用了
接下来，保存您的项目。现在您可以在 Eclipse 中测试您的代码了。为此，右键单击 HTML 文件节点，然后选择“运行➤浏览器”。
您将在右侧面板中看到输出。因为你在程序中写了两条 alert 语句，第一条 alert 语句的输出显示在一个对话框中，如图 1-12 所示。
图 1-12。显示警告的 JavaScript 编辑器
单击第一个对话框的确定按钮将显示第二个对话框。
您已经在 Eclipse 中成功地创建了一个 JavaScript 程序，为后续章节的构建奠定了基础。
摘要
这本书的第一章介绍了 JavaScript 的基础知识。您看到了如何在程序中定义和使用变量，以及如何创建一个简单的 JS 程序。此外，您还了解了用于创建 JavaScript 程序和 HTML 代码的 Eclipse IDE。在下一章中，您将更详细地探索这种语言，包括 JavaScript 语言支持的数据类型。**
二、JavaScript 更进一步
在第一章中学习了 JavaScript 的基础知识和运行一个 JavaScript (JS)程序的先决条件之后，你就可以开始学习 JS 语言的细节了。本章首先给你一个窗口对象的概述。接下来，它详细描述了 JavaScript 提供的数据类型。然后，演示程序将向您展示如何在对话框中向用户显示数据，如何在 web 浏览器的控制台中调试您的 web 页面，以及如何通过对话框接受用户的输入。本章的最后一节列出了 JS 语言的保留字。
窗口对象
JavaScript 中的一个重要概念是窗口对象。window 对象代表浏览器中打开的窗口。本节描述该对象及其提供的属性和方法。
在 JS 程序中，在任何函数之外声明的所有变量本质上都是全局的。它们在网页的整个执行过程中保持活动状态。全局变量是这个对象的属性。该组全局变量可通过全局窗口对象来访问。窗口对象的任何组件都可以通过使用点符号(.).
为了更好地理解 Window 对象，考虑以下 JS 程序的摘录:
var num1 = 10;
window.num1 = 20 ;
alert (num1);
该语法声明了一个变量 num1，并给它赋值 10。然后，它使用 window 对象来访问 num1，并给它赋值 20。短 JS 程序输出如图 2-1 所示的值。
图 2-1。程序输出
如您所见，显示的是值 20，而不是 10。这是因为变量 num1 驻留在通过窗口对象访问的全局容器中。当您赋值 20 时，它引用同一个变量 num1。
Window 对象包含许多属性和方法，所有主流浏览器都支持它。表 2-1 中列出并简要描述了与之相关的一些重要属性。
表 2-1。窗口对象的重要属性
|财产
|
目的
|
| — | — |
| 状态 | 设置或返回浏览器底部的状态栏文本 |
| 名字 | 设置或返回窗口的名称 |
| 全屏 | 指示窗口的全屏显示 |
| 内部高度 | 设置窗口内容区域的高度，包括水平滚动条 |
| 内宽 | 设置窗口内容区域的宽度 |
| 长度 | 设置窗口中的帧数 |
此外，Window 对象还有很多有用的方法。表 2-2 中列出并简要描述了一些重要的方法。
表 2-2。窗口对象的重要方法
|方法
|
目的
|
| — | — |
| 警报() | 向用户显示带有消息文本和确定按钮的警告框 |
| 提示() | 生成供用户输入的对话框 |
| 打印() | 写入相关窗口的内容 |
| 打开() | 在浏览器中创建新窗口 |
| 关闭() | 关闭窗口 |
| 确认() | 显示带有“确定”和“取消”按钮的对话框以及相应的消息 |
| createPopup() | 创建弹出窗口(此方法在 Internet Explorer 中有效) |
JS 程序的所有部分都可以调用这些方法。调用这些方法时，可以使用窗口对象，也可以不使用窗口对象调用这些方法。考虑以下示例:
Window.alert("Hello"); // incorrect, as Window must be written in lowercase i.e. window
window.alert(text); // correct
alert("Hello"); // correct
前面两种说法效果相同。没有必要将调用与窗口对象一起使用。
注意
当调用窗口对象时，总是使用小写字母。
JavaScript 中的数据类型
第章 1 简单介绍了 JS 中可用的数据类型。本节将更深入地探讨 JavaScript 支持的各种数据类型。在 JavaScript 中，变量被赋予在给定实例中分配的类型。
总的来说，JavaScript 中存在六种数据类型，如表 2-3 中所总结的。下面的小节更详细地描述了它们，并展示了如何声明它们。
表 2-3。数据类型及其用途
|类型名称
|
目的
|
| — | — |
| 线 | 一组字符 |
| 数字 | 整数，负数或正数，或各种小数 |
| 不明确的 | 具有此类型的变量已定义，但没有值 |
| 空 | 对没有值的变量的有意或明确的说明 |
| 目标 | 一组未排序的属性和属性值 |
| 布尔代数学体系的 | 包含真或假 |
线
字符串是各种长度的字符序列。典型的例子包括“约翰 123”和“约翰是个好人”。字符串必须用引号括起来。通常，使用双引号。但是，也可以使用单引号。考虑以下代码摘录:
var person = "John James"; // double quotes
var areaName = 'Burj Khalifa'; // Using single quotes
也可以在用双引号括起来的字符串中使用单引号。考虑以下示例:
var text = "It's a rainy day"; // correct
或者，您可以使用以下可接受的形式:
var text = "My profession is 'Computer programmer'"; //correct
同样，您可以在单引号中的 sting 中使用双引号:
var text = 'My Profession is "Computer programmer" '; // correct
但是，以下示例是不可接受的，并且会产生语法错误:
var text = 'My profession is 'Computer programmer''; // wrong
var text = "My profession is "Computer programmer'"'; // wrong
让事情变得稍微复杂一点的是，这两种不可接受的形式可能会稍微调整一下，以避免语法错误。文本中的单引号必须以反斜杠开头。现在考虑同一个例子:
var text = 'My Profession is \'Computer programmer\' ' ; // correct
语句执行后，变量文本包含我的职业是‘计算机程序员’。
同样，以下语句也是可以接受的:
var text = "My Profession is \"Computer programmer\" " ; // correct
执行后，变量文本包含我的职业是“计算机程序员”。
字符串定义和赋值可以在一行或一组行中。在多行中使用字符串定义时，可以使用转义换行符(\n)，如下所示:
var text = "My Profession is \nComputer programmer" ;
alert(text);
执行前面几行代码后，变量文本的内容显示在如图 2-2 所示的窗口中。
图 2-2。两行显示的字符串
如图所示，文本由两行组成。这是通过在字符串规范中使用\n 来实现的。
另一个可以在字符串上下文中使用的运算符是+。考虑下面一行代码:
var string1 = 'ABAP' + 'er' ; // string1 contains ABAPer
添加+运算符会导致两组字符的连接。变量 string1 将包含“ABAPer”。现在考虑下面的例子:
var string1 = 1 + '7'; //
在这种情况下，执行语句后，string1 变量的值为“17”。它导致数字 1(也被视为字符串)与字符串“7”的串联，并且 string1 中的结果也是一个字符串。
考虑另一个例子:
var string1 = 'A' + 1 + 7; // string1 will contain A17
在这种情况下，当执行该语句时，变量 string1 将包含值“A17”而不是“A8”。
相反，考虑下面的例子:
var string1 = 1 + 7 + 'A' ;
执行此语句后，string1 中的结果值是“8A”而不是“17A”。原因是 JavaScript 按顺序将 1 和 7 视为数字并执行加法，直到遇到字母 A。从这一点开始，到目前为止计算出的值(8)与 A 连接并存储在变量 string1 中。变量 string1 的类型是 string。
数字
为了表示数值，JavaScript 只有一种数据类型:number。这些数字可能有也可能没有小数点。此外，它们可能包含也可能不包含一元运算符。为了澄清数字在 JS 中的用法，让我们考虑几个例子。
以下代码行表示一个包含值 26 的整数:
var num1 = 26;
现在考虑另一个例子:
var num2 = -26;
变量 num2 被赋值为负 26。
在 JavaScript 中定义变量时，不需要指定小数位数。分配变量时，必须提供相应的值。现在让我们考虑几个十进制数的例子。以下是正十进制值的一些示例:
var num1 = 0.6888 ;
var num2 = 122.688;
var num3 = 10.0;
你也可以有一个带负号和小数位的数字:
var num4 = -2.3;
您也可以为数字变量指定一个指数值。以下是一些例子:
var num5 = 28.5e-3 ; //which is equal to .0285
var num6 = 28.5e3 ; //which is equal to 28500
这将在变量 num1 中存储值 2.78900 以及必要的小数位。
可以执行添加操作:
var num1 = 2.78900 + 1 ;
当执行加法时，结果值将是 3.789。
在 JS 内部，有两个特殊的数字:正无穷大(无穷大)和负无穷大(-无穷大)。程序中的算术溢出会导致正无穷大。另一方面，如果试图存储(在一个数字变量中)一个小于允许最小值的值，就会出现负无穷大。
注意
一个数字变量可能包含两个特殊的值:无穷大和-无穷大。
请考虑下面的示例，它演示了数字类型也用于存储十六进制和八进制值。十六进制值从 0x 开始:
var Hexval1 = -0xFFDD;
var Hexval2 = 0xFFDD;
八进制值以零开始:
var Octval = 0628;
不明确的
如果已经声明了一个变量，但没有给它赋值，则该变量的类型为 undefined。考虑以下示例:
var mytype ;
正如您所看到的，这个例子声明了变量 mytype，但是没有给它赋值。变量 mytype 的类型未定义。
var mytype ; // mytype has undefined type
也可以将变量显式设置为 undefined:
var mytype = 10; // mytype has type number
mytype = undefined; // now mytype has type undefined
空
JavaScript 中使用 null 数据类型来显式指定变量没有值。您可以简单地将 null 赋给一个变量，如下例所示:
var mytype = 1 ;
var mytype = null; // mytype has type null
注意
将 null 或 undefined 赋给变量时，不要在 null 或 undefined 两边加上单引号或双引号。否则，它们将被视为字符串。
目标
JavaScript 中的 object 数据类型表示一组无序的属性和值。在程序中定义对象的语法如下:
var myobj = { property1 : val1 , property2 :val2 ... property : valn };
对象定义可以写在一行或多行上。属性和相应的值必须用冒号分隔，而属性-值对用逗号分隔。在程序中，对象也是通过 var 关键字定义的变量。然而，对象是由许多属性和值组成的。
考虑这个例子:
var employee1 = { pernr : '1', empName : "John Wright" , gender : 'M', country : "USA" } ;
此示例定义了一个名为 employee1 的对象，其属性为 empName、gender 和 country，并为各个属性赋值。
相同的定义和赋值可以在多行中完成:
var employee1 = { pernr : '1',
empName : "John Wright" ,
gender : 'M',
country : "USA" } ;
定义对象时，请确保仅使用大括号{ }将属性和值对括起来。用括号将它们括起来会产生语法错误，这是不允许的。
要处理各种属性，请使用点运算符:
alert ( employee1.pernr) ;
前面的语句将显示一个值为 1 的对话框。
还可以更改给定对象的特定属性值:
employee1.pernr = 2 ;
一旦完成，对于 employee1 对象，pernr 的值将为 2。
您可以将一个给定对象分配给另一个对象，如下所示:
var employee1 = { pernr : '1', empName : "John Wright" , gender : 'M', country : "USA" } ;
var employee2 = employee1;
employee2.pernr = '2';
employee2.empName = 'James Dolman' ;
alert ( employee2.pernr + " " + employee2.empName + " " + employee2.gender + " " + employee2.country ) ;
如您所见，该示例首先创建一个名为 employee1 的对象，并为员工 John Wright 分配适当的属性值，员工编号为 1。接下来，将对象 employee1 分配给新声明的对象 employee2。对象 employee2 的属性 pernr 和 empName 被更改，并使用 alert 函数在对话框中输出。程序的输出如图 2-3 所示。
图 2-3。程序输出
指定对象的属性时，可以指定 undefined 或 null 作为属性值。指定 null 的示例如下所示:
var employee1 = { pernr : null, empName : null , gender : 'M', country : "USA" } ;
employee1.pernr = '2' ;
employee1.empName = 'John Reed' ;
除了点符号之外，还有另一种方法来处理对象的属性。这显示在以下代码行中:
employee1["pernr"] = '2' ; correct
这将把值“2”赋给 employee1 对象的属性 pernr。如您所见，属性名用双引号和方括号括起来。也可以用单引号将属性名括起来。考虑以下具有相同效果的语句:
employee1['pernr'] = '2'; // correct
但是，您必须确保在单引号或双引号中只使用方括号，如示例所示。使用圆括号或花括号会产生语法错误:
employee1('pernr') = '2' ; // Wrong
此外，省略引号(单引号或双引号)，即使与方括号一起使用，也是有问题的，如下所示:
employee1[ pernr ] = '2' ; // Wrong
对象中的对象
到目前为止，您已经看到了只包含一组属性的对象的例子。现在您将看到如何定义包含一个或多个其他对象的对象。您可以通过稍微修改前面的 employee1 示例来实现这一点。修改后的示例没有使用基于字符串的属性名，而是引入了一个新的属性 fullname，它基于一个具有属性 lastname 和 firstname 的对象。这方面的代码如下:
var employee1 = { pernr : '1',
fullname : { lastname : "John" , firstname : "Wright" } ,
gender : 'M',
country : "USA" } ;
这里，与最初的示例一样，定义了一个具有许多属性的对象 employee1。但是，employee1 现在有一个名为 fullname 的属性，它本身是一个包含属性 lastname 和 firstname 的对象。请注意 employee1 和 fullname 对象的花括号用法。在子对象中，冒号和逗号的使用方式与它们在主对象规范中的使用方式相同。
考虑下面几节中描述的例子。
注意
JavaScript 中存在一种称为数组的特殊对象。数组是一组有序的值，写在方括号内；如[1，2，7，10]或[‘我的’，‘她’]。数组将在第五章和后续章节中详细讨论。
布尔代数学体系的
顾名思义，基于布尔数据类型的变量的值可以是 true 或 false。请考虑以下几点:
var bool1 = true; // correct
var bool2 = false ; // correct
这些示例定义了两个布尔变量 bool1 和 bool2，并分别为它们赋值 true 和 false。重要的是，赋值不能用单引号或双引号写，必须用小写字母写。
注意
当您将 true 和 false 赋给布尔变量时，请确保不要将它们写在单引号或双引号中。否则，它们将被视为字符串。还要确保全部使用小写字母。
考虑这些例子:
var bool1 = "true"; // wrongly defined as string - not boolean
var bool2 = "false" ; // wrongly defined as string - not boolean
这里，bool1 和 bool2 都是字符串，而不是布尔值。
布尔变量用于条件求值，并可用于存储条件求值的结果，如 if 和 while 语句。(这些陈述将在本书的后半部分详细讨论)。考虑下面一行:
var boolean1 = ( 10 > 1 ) ;
执行脚本后，变量 boolean1 包含值 true。接下来，考虑这个例子:
var boolean2 = ( 0 > 1 ) ;
在这种情况下，boolean2 变量包含值 false。
运算符的类型
JavaScript 中一个重要的操作符是 typeof 。typeof 运算符返回一个字符串，该字符串表示所讨论的操作数的类型。typeof 运算符的语法如下所示:
typeof (variable) ;
typeof variable ;
变量或操作数可以属于本章讨论的任何类型。如果使用 typeof 运算符计算单个语句中的单个操作数，可以省略变量名两边的括号。您还可以在 alert 方法或 console.log 方法中使用 typeof 运算符(将在下一节中讨论)。
以下示例显示了如何使用 typeof 运算符:
var text = 'My Profession is "Computer programming" '.
alert (typeof(text)); // string displayed in dialog box
在此示例中，typeof 运算符返回一个字符串，该字符串显示在对话框中。
考虑以下代码，其中运算符正确地返回了对象类型:
var employee1 = { pernr : '1',
fullname : { lastname : "John" , firstname : "Wright" } ,
gender : 'M',
country : "USA" } ;
alert (typeof(employee1) ) ; // object displayed in dialog box
在下面的代码中，变量 boolean1 属于布尔数据类型。因此，typeof 运算符返回布尔值。
var boolean1 = ( 10 > 1 ) ;
alert (typeof(boolean1)) ; // boolean displayed in dialog box
如前所述，当变量被声明但没有赋值时，变量的类型是未定义的。相同的未定义类型由 typeof 运算符确定:
var mytype ; // mytype has undefined type
alert (typeof(mytype)) ; // undefined displayed in dialog box
typeof 运算符也适用于数字，并给出正确的类型(即数字):
mytype = 10; // mytype has type number
alert (typeof(mytype)) ; // number displayed in dialog box
最后，此示例显示了当涉及 null 时 typeof 运算符的行为:
mytype = 1 ;
mytype = null; // mytype has type null
alert(typeof( mytype)) ; // but object displayed in dialog box ----wrongly displayed
在空值的情况下，typeof 运算符错误地将类型名返回为 object。开发人员需要小心谨慎，并编写适当的措施来处理这种情况。
警告
typeof 运算符在所有情况下都返回正确的 JS 类型，但类型 null 除外。在这种情况下，它错误地返回“object”。
方法控制台. log
到目前为止，在本章中你已经看到了 JS 中各种可用的数据类型以及一些例子，包括如何使用 alert 方法在对话框中显示信息。但是，出于测试和调试的目的，您可能需要在程序执行过程中的不同时刻显示某些变量的值。
注意
不建议在实际环境中使用 console.log 方法。但是，在开发 JS 程序时，必须使用它进行测试。
在执行程序时，可以使用 console.log 方法显示变量的测试值。虽然颜色和风格化选项是可能的，但这里我们将只讨论该方法的基本工作。这种方法的语法如下:
console.log( obj1, obj2 ....objn );
console.log 方法可以接受一个或多个数字、字符串、布尔值或对象作为输入。还可以使用 console.log 方法显示对象的一个或多个属性。还可以将 console.log 与 typeof 运算符结合使用。对于包含更多对象的对象，您可以深入查看该对象的更多详细信息。
注意
当传递给 console.log 方法的值涉及要执行的操作(如加法或串联)时，首先计算结果，然后输出结果。
以下示例显示了实际使用的 console.log 方法:
<!DOCTYPE html>
<html>
<body>
<h1>Console Log Demo </h1>
<script>
console.log(10 + 5);
</script>
</body>
</html>
Console 对象允许您访问浏览器的调试控制台。console.log 方法的输出既不与浏览器中的其余网页内容一起显示，也不在加载网页时的弹出框中显示。相反，它显示在浏览器调试器的控制台选项卡中。打开控制台显示器的步骤如下:
-
在浏览器中打开包含 HTML 和 JavaScript 代码的网页。(在这个例子中，我使用的是谷歌浏览器。)
-
按 Ctrl+Shift+I。这将在网页输出右侧的单独窗格中打开调试器，如图 2-4 所示。
图 2-4。调试器控制台选项卡
-
单击控制台选项卡。现在您将看到使用 console.log 方法显示的值(在图 2-4 中，15 显示为相加的结果)。
注意
确保在 JavaScript 代码中使用小写字母编写 console.log。将其写入 Console.log 不会产生预期的结果。
考虑清单 2-1 中的例子。
清单 2-1。显示对象员工 1
<script>
var employee1 = { pernr : '1',
empName : "John Wright" ,
gender : 'M',
country : "USA" } ;
console.log(employee1);
</script>
这里，employee1 对象作为参数传递给 console.log 方法。控制台中的输出如图 2-5 所示。
图 2-5。控制台中显示的员工 1 对象
如您所见，该对象与相关属性和值一起显示在一行中。
现在考虑一个示例，其中对象 employee1 包括属性 fullname(这是另一个对象):
var employee1 = { pernr : '1',
fullname : { lastname : "John" , firstname : "Wright" } ,
gender : 'M'',
country : "USA" } ;
console.log (employee1) ;
对于这样的嵌套对象，控制台输出如图 2-6 所示。
图 2-6。控制台中显示的员工 1 对象
在这种情况下，不会显示 fullname 属性的值。相反，只为它显示对象。您可以展开对象节点来查看雇员 1 的全部详细信息，如图 2-7 所示。
图 2-7。展开的对象员工 1
如你所见，在 Chrome 控制台的详细视图中，属性是按字母顺序排列的。
接受用户的输入
到目前为止，您已经看到了如何在对话框中向用户输出数据，以及如何在 web 浏览器控制台中调试您的网页。现在，您将看到如何从查看嵌入了 JavaScript 代码的网页的用户那里获取输入。
Window 对象的 prompt 方法用于此目的，如以下语法所示:
window.prompt ( text , optional default text ) ;
prompt ( text , optional default text ) ;
prompt 方法的调用将显示给用户的文本以及可选的默认值作为输入。网页上将显示一个对话框。这是一个模态对话框，意味着它不允许用户在浏览器中执行任何其他活动，直到对话框关闭。该对话框显示有两个按钮:“确定”和“取消”。
您可以将用户输入的文本赋给程序中声明的变量。无论使用什么类型的变量，当用户在对话框的输入字段中输入一个值并单击 OK 按钮后，返回的变量的类型将变为 string。
为了更好地理解，请考虑以下示例:
var value = 0;
value = prompt("Enter a value", "10") ;
alert('You entered ' + value + ' which has type ' + typeof(value) );
此示例指定一个数字变量值，然后调用 window 对象的 prompt 方法，并将输入的值赋给该变量。在方法调用中指定了默认文本 10。然后，该示例使用 alert 方法在另一个对话框中显示输入的值及其类型。该代码生成的输入对话框如图 2-8 所示。
图 2-8。输入对话框
当用户输入一个值，如 10，点击确定，显示如图 2-9 所示的信息。
图 2-9。显示的消息
如您所见，变量值被赋值为 10，输入的值的类型被解释为字符串。
另一方面，如果用户单击 Cancel 按钮，变量值将被赋值为 null。
JavaScript 中常用的关键字
作为本章的总结，表 2-4 列出了 JavaScript 语言中的一些关键字(保留字)。请注意，不允许定义与这些关键字同名的变量，这就是它们被称为保留变量的原因。
表 2-4。保留字
|布尔代数学体系的
|
破裂
|
情况
|
| — | — | — |
| 捕捉 | 班级 | 继续 |
| 系统默认值 | 做 | 其他 |
| 错误的 | 最后的 | 为 |
| 功能 | 如果 | 在 |
| 实例 | （同 Internationalorganizations）国际组织 | 新的 |
| 空 | 私人的 | 保护 |
| 公众的 | 返回 | 短的 |
| 静电 | 极好的 | 转换 |
| 这 | 扔 | 真实的 |
| 尝试 | 类型 | 定义变量 |
| 正在… | 随着 | |
摘要
在本章中，您已经了解了 JavaScript 提供的窗口对象和数据类型。接下来，您看到了如何在对话框中向用户显示数据，如何在浏览器的控制台中调试 web 页面，以及如何通过对话框接受用户的输入。本章末尾列出了 JS 语言的保留字。
第三章介绍了 JavaScript 的更多细节。您将看到 JS 语言中的各种控制结构，以及如何使用它们来满足需求。
三、JavaScript 中的运算符
本章详细解释了 JavaScript 操作符。它从算术运算符开始，然后着眼于比较运算符和逻辑运算符，这些运算符用于在 JS 程序中制定条件检查。本章的最后一节介绍了赋值运算符和按位运算符。
算术运算符
算术运算符将文字或变量形式的值作为操作数，并返回单个值。JavaScript 支持的标准算术运算符在表 3-1 中列出。在接下来的小节中，将依次介绍每种方法。
表 3-1。算术运算符
|操作员描述
|
操作员
|
| — | — |
| 添加 | + |
| 减法 | - |
| 增加 | * |
| 分开 | / |
| 余数(模或模数) | % |
| 指数运算 | ** |
| 增量 | ++ |
| 减量 | - |
| 一元否定 | - |
加法算子
加法运算符(+)产生数字操作数的加法(和)。对于字符串，加法运算会导致字符串串联。其语法如下所示:
A + B
以下是加法运算符的几个应用示例:
2 + 4 // 6 addition performed
10 + "text" // 10text concatenation
"text" + "string" // "textstring"
2 + true // results in value 3
1 + false // 1
减法运算符
减法运算符(-)对两个操作数执行算术减法。语法是
x - y
对于数值操作数，返回 x 和 y 之间的差值。如果是字符串，则返回值 NaN(不是数字)。以下是减法运算符的一些示例:
10 - 6 // 4
6 - 10 // -4
"text" - 2 // NaN
乘法运算符
乘法运算符(*)确定所提供的操作数的乘积。语法是
A * B
乘法运算符的示例包括:
52 * 2 // results in 104
-22 * 2 // -44
Infinity * Infinity // Infinity
"abc" * 3 // NaN
除法算符
除法运算符(/)得出所提供的操作数的商。语法是
A / B
这里，左操作数(A)是被除数，右操作数(B)是除数。该运算符的一些示例包括
1 / 2 // returns 0.5 in JavaScript
3 / 0 // returns Infinity in JavaScript
3.0 / -0.0 // returns -Infinity in JavaScript
余数运算符
余数(或模)运算符(%)用于确定第一个操作数除以第二个操作数时的余数(余数)。余数总是有被除数的符号。语法是
A % B
reminder 操作符的数学不太简单，所以这里提供了几个使用它的例子:
result = ( 13 % 4 ); // 1
result = ( -1 % 3 ); // -1
result = ( 1 % -3 ); // 1
result = ( 1 % 3 ); // 1
result = ( 2 % 6 ); // 2
result = ( -6 % 2 ); // -0
result = ( 6.5 % 2) ; // 0.5
指数运算符
取幂运算符(**)用于对第一个操作数进行第二次幂运算。语法是
A ** B
以下是取幂运算符的一些示例:
2 ** 4 // 16
4 ** 4 // 256
10 ** -2 // 0.01
增量运算符
递增运算符(++)将相关操作数的值加 1。增量运算符可以有两种形式，后缀或前缀。
后缀形式的语法是
A++
在这种形式中，变量 A 首先被返回，然后递增。
前缀形式的语法是
++A
在前缀形式中，变量 A 在返回之前首先递增。
以下是增量运算符两种形式的示例:
// Postfix
var A = 6;
B = A++; // after this, B = 6, A = 7
// Prefix
var A = 6;
B = ++A; // after this, A = 6, B = 6
减量运算符
减量运算符(-)将其操作数值减 1(即从值中减去 1)。像递增运算符一样，递减运算符可以有两种形式:后缀或前缀。
后缀形式的语法是
A--
在后缀形式中，首先返回变量 A，然后递减。
前缀形式的语法是
--A
在前缀形式中，变量 A 在返回之前首先递减。
以下是减量运算符两种形式的示例:
// Postfix
var A = 6;
var B = A--; // B = 6, A = 5
// Prefix
var A = 6;
var B = --A; // A = 5, B = 5
一元否定运算符
一元求反运算符(-)位于所讨论的操作数之前，当在表达式中使用时，对其值求反。考虑以下示例:
// unary negation
var A = 6;
B = -A; // B = -6 A = 6
在这个例子中，在语句执行之后，变量 B 包含值-6，而 A 的值仍然是 6。
比较运算符
JavaScript 支持各种比较运算符，所有这些都将在下面的小节中解释。
大于运算符
大于(>)运算符检查左操作数的值是否大于右操作数的值。如果是，条件返回 true。否则，它返回 false。语法是
A > B
小于运算符
顾名思义，小于运算符(
A < B
大于或等于运算符
当左边操作数的值大于或等于右边操作数的值时，使用大于或等于运算符(> =)的条件为真。否则就是假的。语法是
A >= B
注意
字符串根据字典顺序进行比较。
小于或等于运算符
当左边操作数的值大于或等于右边操作数的值时，使用小于或等于运算符(< =)的条件为真。否则就是假的。语法是
A <= B
清单 3-1 展示了如何使用到目前为止讨论过的 JS 比较操作符。
清单 3-1。运算符用法示例 1
<html>
<body>
<script >
var a = 20;
var b = 30;
var result;
console.log("(a < b) returned ");
result = (a < b);
console.log(result);
console.log("(a > b) returned ");
result = (a > b);
console.log(result);
console.log ("(a >= b) returned ");
result = (a >= b);
console.log (result);
console.log ("(a <= b) returned ");
result = (a <= b);
console.log (result);
</script>
</body>
</html>
执行上述程序时，浏览器控制台的输出如图 3-1 所示。
图 3-1。程序输出
变量 a 和 b 分别被赋值为 20 和 30。条件的输出在变量 result 中返回。
等式和不等式运算符
本节讨论与测试相等和不相等相关的四个可用的比较运算符。它还提供了代码示例来帮助您更好地理解它们的用法。
注意
JavaScript 支持严格比较和类型转换比较。
等式运算符
如果涉及的两个操作数相等，相等运算符(==)将返回 true。在比较之前，如果两个操作数不属于同一类型，运算符将应用操作数转换。
6 == 6 // true
"6" == 6 // true
0 == false // true
0 == null // false
null == undefined // true
true == 1 // true
不等式算子
不等式运算符(！=)如果涉及的两个操作数不相等，则返回 true。在比较之前，如果两个操作数不属于同一类型，运算符将应用操作数转换。
6 != 6 // false
6 != "6" // false
0 != false // false
严格相等(恒等)运算符
如果所讨论的两个操作数在没有任何类型转换的情况下结构相等，则严格相等运算符(===)返回 true。语法是
A === B
当使用该运算符比较两个字符串时，只有当它们具有相同的字符序列和相同的长度时，才返回 true 值。
对于两个数字的比较，当它们具有相同的数值时===运算符成功。如果两个布尔值都为真或都为假，则两个布尔值严格相等。
8 === 8 // true
8 === '8' // false
'Abc' === 'Abc' // true
非同一性/严格不等式算子
非标识运算符(！==)在下列任一情况下返回 true:
-
这两个操作数不相等。
-
这两个操作数不属于同一类型。
非标识运算符的语法是
A !== B
考虑以下非标识运算符的示例:
6 !== '6' // true
6 !== 3 // true
逻辑运算符
像许多其他编程语言一样，JavaScript 支持几种逻辑运算符。逻辑运算符用在表达式中来表示条件。在评估之后，它们返回 true 或 false 值。但是，当与非布尔值一起使用时，它们可能会返回非布尔值。表 3-2 显示了 JS 中支持的三种逻辑运算符。
表 3-2。逻辑运算符
|操作员
|
例子
|
影响
|
| — | — | — |
| 和 ( & &) | ex1 和 ex2 | 与布尔值一起使用时，如果操作数 ex1 和 ex2 都为真，则&返回 true。 |
| 或 (||) | 例 1 ||例 2 | 与布尔值一起使用时，如果至少有一个操作数为 true，则||返回 true。如果 ex1 和 ex2 都为 false，||运算符将返回 false。 |
| 不是(!) | ！ex1 | 当所讨论的操作数可转换为 true 时，这会导致 false 否则，表达式返回 true。 |
现在您已经对三种可用的逻辑操作符有了一个概念，让我们来看几个成熟的工作示例。考虑清单 3-2 中使用& &操作符的代码。
清单 3-2。逻辑运算符的示例
var result;
result = (true && true);
console.log("( true && true ) returns ", result);
result = ( false && true);
console.log("( false && true ) returns ", result);
result = (false && false );
console.log ("( false && false ) returns ", result);
result = ( 'a' && 'b');
console.log ("( a && b ) returns ", result);
result = ( false && 'a' );
console.log ("( false && a ) returns ", result);
result = 'a' && true;
console.log ("( a && true ) returns ", result);
这个例子在许多操作数上使用&&运算符，包括布尔和非布尔。web 浏览器控制台中清单 3-2 的输出如图 3-2 所示。
图 3-2。程序输出
如您所见，当涉及到布尔值时，结果总是布尔值。然而，非布尔操作数会产生奇怪的结果。清单 3-3 展示了一个涉及逻辑 OR 和 NOT 操作符的例子。
清单 3-3。逻辑 AND 和 NOT 运算符的用法
var result;
result = (true || true);
console.log("( true || true ) returns ", result);
result = (false || true);
console.log("( false || true ) returns ", result);
result = (false || (6 >= 4 ) );
console.log("( false || (6 >= 4 ) ) returns ", result);
result = ( 'a' || D );
console.log("( a || D ) returns ", result);
result = ( false || 'a' );
console.log("( false || a ) returns ", result);
result = ( ! false );
console.log("( ! false ) returns ", result);
result = ( ! true );
console.log("( ! true ) returns ", result);
列表 3-3 的输出如图 3-3 所示。
图 3-3。显示 AND 和 NOT 运算符的输出
此示例使用了带有运算符的布尔值和非布尔值。在非布尔值的情况下，非布尔值是运算符使用的结果。
逻辑表达式从左到右计算。当一个为真的表达式与任何其他表达式进行“或”运算时，JS 会将整个表达式评估为真，而不执行任何后续评估:
true || *any_expression evaluated as true*
另一方面，当 false 表达式与任意数量的表达式进行“与”运算时，逻辑运算将返回 false:
false && *any_expression evaluated as* false
这就是所谓的短路评估(或者麦卡锡评估)。
按位运算符
JavaScript 还支持许多位操作符。按位运算符将其操作数视为带符号的 32 位序列，采用二进制补码，由 1 和 0 组成(即二进制表示)，而不是小数或十六进制数。但是，一旦执行了 operator 函数，就会返回 JS 数字值。各种按位运算符如表 3-3 所示。
表 3-3。按位运算符
|操作员描述
|
操作员
|
| — | — |
| 和 | & |
| 运筹学 | | |
| 异或 | ^ |
| 不 | 你是谁 |
| 左移位 | << |
| 有符号右移(符号传播右移) | >> |
| 无符号右移(零填充右移) | >>> |
为了使用这些操作符，你必须理解操作数是如何存储和解释的。对于表 3-3 中的所有运算符，操作数被视为 32 位二进制数，然后各自的运算应用于一个或多个操作数。在这种格式中，最左边的位是符号位。该位为 1 或 0。0 表示正数，而 1 表示负数。
让我们检查两个例子，一个正的和一个负的，以及它们是如何被表示为 32 位二进制数值的。首先，让我们看看一个正数是如何存储的。例如，数字+10 表示为
00000000 00000000 00000000 00001010
另一方面，数字+2 显示为
00000000 00000000 00000000 00000010
现在让我们看看负数是如何存储的。数字-11 存储如下:
11111111 11111111 11111111 11110101 = -11
按位 AND
按位 AND 运算符(&)对两个操作数(即它们的 32 位表示)的每一位执行 AND 运算。如果两个操作数的对应位等于 1，则结果的对应位为 1。否则，结果位被设置为 0。
语法是
A & B;
在下面的例子中，两个数字(2 和 10)进行 and 运算:
var num = 2 & 10 ; // result is number 2
让我们看看这是如何工作的。下面显示了数字 2 和 10 的 32 位二进制表示形式，以及按位 and 运算后的结果数字:
00000000 00000000 00000000 00000010 = 2
00000000 00000000 00000000 00001010 = 10
--------------------------------------------------------------
00000000 00000000 00000000 00000010 = 2 = 2 & 10
正如您所看到的，两个操作数最右边的位等于 0，因此结果在相应的位置也包含 0。因为两个操作数在倒数第二位位置都包含 1，所以在 AND 运算后，结果位被设置为 1。
按位或
按位 or 运算符(|)对两个 32 位数字等效操作数的每一位执行 OR 运算。如果发现至少有一位为 1，则结果的相应位为 1。否则，结果位被设置为 0。语法是
A | B;
以下是按位 OR 运算符的一个示例:
var num = 2 | 10 ; // result is 10
下面显示了数字的 32 位二进制表示形式，以及按位“或”运算后的结果数字:
00000000 00000000 00000000 00000010 = 2
00000000 00000000 00000000 00001010 = 10
--------------------------------------------------------------
00000000 00000000 00000000 00001010 = 10 = 2 | 10
正如您所看到的，两个操作数最右边的位等于 0，因此结果在相应的位置也包含 0。因为两个操作数在倒数第二位都包含 1，所以在 OR 运算后，结果位被设置为 1。至少有一位(在第一个或第二个操作数中)等于 1 的位置，其结果位也设置为 1。
按位异或
按位异或(XOR)运算符(^)有点类似于 OR 运算符。只有当操作数中的一位为 1，另一位为 0 时，结果数中的位才会设置为 1。当发现只有一位为 1 时，结果的相应位为 0。在所有其他情况下，结果位设置为 0。语法是
A ^ B;
以下是 XOR 运算符的一个示例:
var num = 2 ^ 10 ;
让我们看看这是如何工作的。下面显示了数字 2 和 10 的 32 位二进制表示，以及按位异或运算后的结果数字:
00000000 00000000 00000000 00000010 = 2
00000000 00000000 00000000 00001010 = 10
--------------------------------------------------------------
00000000 00000000 00000000 00001000 = 8 = 2 ^ 10
正如您所看到的，两个操作数最右边的位等于 0，因此结果在相应的位置也包含 0。因为两个操作数在倒数第二位位置都包含 1，所以在异或运算后，结果位被设置为 0。
按位非
按位 NOT 运算符(∾)是一元运算符，这意味着它只涉及一个操作数。它只是对操作数中的位求反。每个 0 位变成 1，反之亦然。语法是
∼ A
以下是按位非运算符的一个示例:
var num = ∼ 10;
下面显示了数字 3 的 32 位二进制表示，以及 NOT 运算后的结果数字:
00000000 00000000 00000000 00001010 = 10
--------------------------------------------------------------
11111111 11111111 11111111 11110101 = -11 = ∼ 10
正如您所看到的，NOT 运算反转了操作数的所有位，包括符号位。这导致值为-11。
为了总结到目前为止所讨论的内容，表 3-4 给出了一个真值表，显示了各种按位运算符。
表 3-4。AND、or 和 XOR 运算符的真值表
|操作数 A 中的位
|
操作数 B 中的位
|
AND 之后的结果位
|
OR 之后的结果位
|
异或运算后的结果位
|
| — | — | — | — | — |
| Zero | Zero | Zero | Zero | Zero |
| Zero | one | Zero | one | one |
| one | Zero | Zero | one | one |
| one | one | one | one | Zero |
按位左移
顾名思义，按位左移运算符(<
A << B
考虑以下示例:
var result = ( 10 << 2 ); // left shift by two places
在这种情况下，移位前的数字 10 显示为
00000000 00000000 00000000 00001010
向左移动两个位置后，二进制表示如下所示:
00000000 00000000 00000000 00101000
左边加了两个零。这个结果现在是十进制数 40。
按位无符号右移
按位无符号右移位运算符(>>>)也称为零填充右移位。不管操作数的符号是什么，它总是产生一个非负值。语法是
A >>> B ;
它将操作数 A 的位移动 B 指定的位数，右移的位会丢失，这些位等于 B)。在左侧，添加的零等于移位的位数(即 B)。在操作之后，最左边的位总是等于零(即，导致非负值)。考虑以下示例:
var result = ( 10 >>> 2 ); // right shift by two places
在这种情况下，移位前的数字 10 如下所示:
00000000 00000000 00000000 00001010
向右移动两个位置后，二进制表示如下所示:
00000000 00000000 00000000 00000010
在左边，添加了两个零。这个结果现在是十进制数 2。
按位带符号右移
按位有符号右移运算符(>>)，也称为符号传播右移，将位向右移动。然而，数字的符号也被保留。向右移动的位数由符号位填充，无论是 0 还是 1。语法是
A >> B ;
考虑以下示例:
var result = ( -10 >> 2 ); // signed right shift result = -3
在这段代码中，在执行语句后，结果变量包含值-3。
编码示例
既然您已经熟悉了各种位操作符，清单 3-4 展示了一个完整的编码示例。
清单 3-4。按位运算符示例
var result;
result = ( 2 & 10 ); // AND
console.log("( 2 AND 10 ) returns ", result);
result = ( 10 | 2 ); // OR
console.log("( 10 OR 2 ) returns ", result);
result = ( 10 ^ 2 ); // XOR
console.log ("( 10 XOR 2 ) returns ", result);
result = ( ∼ 10 ); // NOT
console.log ("( NOT 10 ) returns ", result);
result = ( 10 << 2 ); // left shift by two
console.log("( 10 << 2 ) returns ", result);
result = ( -10 >> 2 ); // signed right shift
console.log ("( -10 >> 2 ) returns ", result);
result = ( 10 >>> 2 ); // unsigned right shift
console.log ("( 10 >>> 2 ) returns ", result);
该程序的输出如图 3-4 所示。
图 3-4。程序输出
赋值运算符
JavaScript 还支持许多赋值操作符。赋值运算符可以简单地定义为考虑到右操作数的值而将值“赋值”给左操作数的运算符。
各种赋值运算符如表 3-5 所示。
表 3-5。赋值运算符
|操作员
|
运算符用法/速记
|
实际效果
|
| — | — | — |
| 分配(基本分配) | x = y | x = y |
| 加法赋值 | x += y | x = x + y |
| 减法赋值 | x -= y | x = x - y |
| 乘法赋值 | x *= y | x = x * y |
| 分部分配 | x /= y | x = x / y |
| 余数分配 | x %= y | x = x % y |
| 指数赋值 | x **= y | x = x ** y |
| 左移赋值 | x <<= y | x = x << y |
| 右移位赋值 | x >>= y | x = x >> y |
| 无符号右移位赋值 | x >>>= y | x = x >>> y |
| 按位 AND 赋值 | x &= y | x = x & y |
| 按位异或赋值 | x ^= y | x = x ^ y |
| 按位 OR 赋值 | x |= y | x = x | y |
如您所知，基本的赋值操作符(=)将右边操作数的值赋给左边的操作数。其余的操作符是本章到目前为止讨论的各种操作符的简写。例如，考虑以下情况:
x &= y
这段代码只是以下代码的简写形式:
x = x & y
考虑下面的代码块:
var result = 2;
result &= 10;
此代码与相同
var result = 2 & 10;
但是，要确保赋值操作符中没有空格，在本例中为&=。将它写成& =会产生语法错误。
字符串运算符
到目前为止，在这一章中，你已经看到运算符+被用作算术运算符。但是，当与字符串一起使用时，+运算符的作用相当于提供串联功能的字符串运算符。在第二章中，你看到了许多这种用于数字和/或字符串的例子。
摘要
本章首先详细解释了 JavaScript 提供的算术运算符。然后介绍了比较运算符和逻辑运算符的用法，接着详细解释了按位运算符。最后，您看到了各种赋值操作符，它们被用作 JavaScript 支持的各种位、逻辑和算术操作符的简写。JavaScript 的学习之旅还在继续，在下一章中，你将看到 JS 领域中主要使用的控制结构的细节。
四、JavaScript 中的控制结构
本章描述了 JS 语言中的各种控制结构，并演示了如何使用它们来满足需求。本章首先概述了 JavaScript 支持的块语句。接下来，如果…详细介绍了 else 和 switch 语句。然后将向您介绍 JavaScript 支持的各种类型的循环，包括 for 和 while 循环，并给出展示如何执行它们的演示程序。本章最后简要介绍了标签声明。
块语句
块用于对一组语句进行分组。一个块用一对大括号{}括起来。基本语法是
{
st_1;
st_2;
}
Block 语句用在各种控制结构中。这些包括 if 语句和 while 和 for 循环(将在本章的后半部分介绍)。考虑以下示例:
var abc = 0;
while ( abc < 122) {
abc = abc + 2;
}
在这段代码中，{ ABC = ABC+2；}是 block 语句。
考虑另一个块的例子:
var abc = 150;
{
var abc = 100 + 2;
}
alert(abc); // outputs 102
此代码输出 102，因为第二个 var 语句(在花括号内)与该块之前的 var 语句位于相同的范围内。
清单 4-1 展示了在一个块中使用复合语句的例子。
清单 4-1。块示例
<html>
<body>
<script>
{
var x = 5;
x++;
}
console.log(x);
</script>
</body>
</html>
程序的输出如图 4-1 所示。
图 4-1。字块输出
条件语句
JavaScript 提供了两种条件语句:
-
如果…其他
-
转换
这些语句允许您在发现给定条件为真时执行代码块。或者，在 if 语句的情况下，当发现条件为假时，可能会执行语句块。
如果…else 语句
当发现逻辑条件为真时，if 语句执行一组语句。可选的 else 子句用于在条件被确定为假时执行语句。关于简单 if 语句的流程图如图 4-2 所示。
图 4-2。if 语句流程图
if 语句的语法是
if (eval_of_condition) {
first_block;
} else {
second_block;
}
任何导致 true 或 false 的表达式都可以用来表示条件。如果发现条件为真，则执行 first _ block 否则，执行 second_block。该块可以包含任意数量的语句，包括更多的 if 语句。
还可以使用 if 和 else if 来指定多个要逐个检查的条件，以便按顺序测试多个条件，如下所示:
if (eval_cond1) {
block_1;
} else if (eval_cond2) {
block_2;
} else if (eval_cond3) {
block_3;
} else {
last_block;
}
当指定多个条件时，将执行与评估为真的第一个条件相关的代码。如果发现第一个条件为假，则检查由 else if 指定的下一个条件，然后检查下一个 else if，依此类推。如果三个条件都为假，则执行 last_block 代码。
注意
值 false、null、undefined 和 0 在计算时总是产生“false”值。
清单 4-2 展示了如何使用 if 语句创建一个短程序。
清单 4-2。使用 if 语句的驾驶执照程序
<html>
<body>
<script>
var age = 20;
if( age > 18 )
{
console.log("Eligible for Driving license");
}
</script>
</body>
</html>
该示例显示了一个简单的 if 语句。声明了值为 20 的变量 age。if 语句中的条件声明，如果 age 大于 18，则应该执行代码块。该程序的输出如图 4-3 所示。
图 4-3。程序输出
清单 4-3 通过修改示例添加了一个 else 子句，使事情变得有点复杂。
清单 4-3。带 else 子句的驾驶执照计划
<html>
<body>
<script>
var age = 18;
if( age > 18 ){
console.log("Eligible for Driving license");
}
else if( age == 18 ){
console.log("Eligible for learning license");
}
else{
console.log("Not eligible for Driving license");
}
</script>
</body>
<html>
在这种情况下，执行与满足的条件相关的代码块，并通过 console.log 语句打印相应的输出。在本例中，else if 条件(即年龄== 18)得到满足，因此输出将有资格获得学习许可，如图 4-4 所示。
图 4-4。程序输出
交换语句
switch 语句使您能够计算一个表达式，然后使用许多 case 标签匹配它的值。当发现匹配时，执行相关的代码块。
在开关控制结构中使用了 break 语句。break 语句确保一旦表达式匹配，程序就脱离 switch。
开关控制结构的流程图如图 4-5 所示。
图 4-5。开关控制结构流程图
交换机控制结构的语法是
switch (expression) {
case value1:
//Statements executed when the result of expression matches value1
[break;]
case value2:
//Statements executed when the result of expression matches value2
[break;]
...
default:
//Statements executed when none of the values match the value of the expression
[break;]
}
表达式的结果值与每个大小写值相匹配。如果没有一个大小写值与表达式的大小写值匹配，则执行默认的块代码。
清单 4-4 提供了驾驶执照程序中 switch 语句的一个例子。
清单 4-4。switch 语句示例
<html>
<body>
<script>
var age = "16";
switch (age) {
case "18":
console.log("Eligible for learning license")
break;
case "20":
console.log("Eligible for two wheeler license")
break;
case "23":
console.log("Eligible for four wheeler license")
break;
default:
console.log("Not eligible for license");
}
</script>
</body>
</html>
可变年龄声明为 16 岁。不同的 case 子句包含在各自的编码中。清单 4-4 还包括一个默认子句，指定如果没有匹配的值(通过 case 子句指定)程序应该做什么。因为年龄是 16 岁，所以执行默认代码。程序输出如图 4-6 所示。
图 4-6。Switch 语句输出
如前所述，正确执行开关控制结构需要 break 语句。清单 4-5 显示了一个没有 break 语句的开关控制结构的例子。
清单 4-5。不正确的开关控制结构示例
<!DOCTYPE html>
<html>
<body>
<script>
var color = "Green";
switch (color) {
case "Red":
console.log("Sign for Danger");
case "Green":
console.log("Sign for Growth");
case "White":
console.log("Sign for Peace");
default:
console.log("No sign");
}
</script>
</body>
</html>
由于清单 4-5 中省略了 break 语句，输出显示不正确，如图 4-7 所示。
图 4-7。错误输出
提供给开关表达式的值为绿色。这与第二个 case 子句相匹配，因此在控制台日志中应该只显示增长符号。但是，因为没有包含 break 语句，所以在执行匹配的语句后，还会执行两个后续的 case 子句。
JavaScript 中的循环
循环有助于多次或重复执行代码块，直到给定的条件为真。JS 支持各种类型的循环:
-
while 循环
-
做…while 循环
-
for 循环
-
为…在回路中
while 循环
这是一个条件循环。while 循环执行一个代码块，直到指定的条件评估为 true。一旦条件失败，循环就会停止。while 循环的流程图如图 4-8 所示。
图 4-8。while 循环流程图
while 循环的一般语法是
while (condition)
{
Statements to be executed if condition is true
}
清单 4-6 提供了一个 while 循环的完整工作示例。
清单 4-6。while 循环示例
<html>
<body>
<script>
var n = 0;
console.log("Starting Loop ");
while (n < 3)
{
console.log("Current Count : " + n + " ");
n++;
}
console.log("Loop stopped!");
</script>
</body>
</html>
清单 4-6 声明了变量 n 并给它赋值 0。while 循环条件规定变量 n 应该小于 3。在循环中，n 递增 1。因此，循环继续三次；也就是说，对于 n 等于 0，1 和 2。一旦 n 的值等于 3(即满足条件)，循环就停止。
程序的输出如图 4-9 所示。
图 4-9。while 循环的输出
做…while 循环
do…while 循环重复进行，直到指定的条件被评估为 false。首先指定代码块，然后执行相关条件。这意味着循环将总是至少执行一次，即使条件为假。流程图如图 4-10 所示。
图 4-10。do 流程图…while 循环
do 的语法…while 循环是
do
{
//Statements;
}
while (condition);
do 的一个例子…while 循环如清单 4-7 所示。
清单 4-7。做…while 示例
<html>
<body>
<script>
var n = 0;
console.log("Starting Loop ");
do
{
console.log("Current Count : " + n + "");
n++;
}
while (n < 4)
console.log("Loop stopped!");
</script>
</body>
</html>
在这个例子中，变量 n 的值被设置为 0。在每次循环迭代中，n 的值增加 1。while 循环重复，直到 n 的值不再小于 4(即，n 等于 4)。
列表 4-7 的输出如图 4-11 所示。
图 4-11。do 输出…while 循环
for 循环
for 循环是一个条件循环，它会一直持续到指定的条件计算结果为 false 为止。通用语法是
for ([initialization]; [test condition]; [expression])
{
Statement
}
在初始化部分，将循环计数器初始化为一个初始值。对于测试条件，您指定必须检查的条件，以确定循环是否应该继续。表达式是增加或减少计数器或值的部分。
清单 4-8 展示了一个在程序中使用 for 循环的例子。
清单 4-8。对于循环示例
<html>
<body>
<script>
var count;
console.log("Starting Loop" + "");
for(count = 0; count < 10; count++){
console.log("Current Count : " + count );
}
console.log("Loop stopped!");
</script>
</body>
</html>
此示例声明变量 count，然后在 for 循环中将 count 的值初始化为 0。然后，循环条件检查计数值是否小于 10。如果是，计数器加 1。
在循环迭代中，显示 count 的当前值。每次循环迭代后，计数值增加 1，并根据指定的条件检查其值。
该循环运行十次(计数等于 0 到 9)。当 count 的值等于 10 时，条件评估为 false，循环停止。
程序的输出如图 4-12 所示。
图 4-12。程序输出
前面的例子向您展示了如何使用 for 循环来增加计数器值。清单 4-9 展示了另一个 for 循环示例，展示了如何递减计数器值。
清单 4-9。反向 for 循环
<html>
<body>
<script>
var count;
console.log("Starting Loop" + "");
for(count = 10 ; count > 0; count--){
console.log("Current Count : " + count );
}
console.log("Loop stopped!");
</script>
</body>
</html>
此示例显示反向循环计数。它首先将计数值初始化为 10。该条件检查 count 的值是否大于 0。每循环一次，count 的值就减 1。该程序的输出如图 4-13 所示。
图 4-13。程序输出
如您所见，打印的第一个值是 10，因为 count 的初始值是 10。只要 count 的值大于 0，循环中的代码就会运行(因此最后打印的值是 1)。
在 for 循环代码块中，还可以包含 if 结构。假设您需要打印从 0 到 19 的所有偶数。您可以通过使用 for 循环和 if 语句的组合来实现这一点，如清单 4-10 所示。
清单 4-10。带有 if 语句的 for 循环
<html>
<body>
<script>
var i;
for(i = 0; i < 20; i++)
{
if((i % 2) == 0)
{
console.log("Number is divisible by 2 : " + i );
continue;
}
}
</script>
</body>
</html>
此示例在 for 循环中使用 if 语句来检查变量 I 是否能被 2 整除。在 I 的值能被 2 整除的每种情况下，程序都会打印出该值。程序的输出如图 4-14 所示。
图 4-14。程序输出
您也可以嵌套 for 循环，这意味着您可以在 for 循环中包含一个 for 循环。在讨论 for 之后，您将看到一个与 label 关键字结合使用的示例…在循环中。
注意
break 语句也可以在 for 循环中使用，以退出循环。
为…在回路中
森林…in 循环是一种特殊类型的循环，在对象的属性上运行。森林…in 循环在一个对象的所有属性上迭代指定的变量。
森林…在语法上是
for (variable in object) {
statements
}
清单 4-11 提供了 for 的示例…程序中使用的 in 循环。
清单 4-11。为…在示例中
<html>
<body>
<script>
var obj = {a:"alto", b:"scorpio", c:"zen"};
for(var string=" " in obj) {
console.log(obj[string]);
}
</script>
</body>
</html>
清单 4-11 介绍了一个具有三个属性 a、b 和 c 的对象 obj，这三个属性分别被赋值为 alto、scorpio 和 zen。森林…然后使用 in obj 循环来处理对象的每个属性。在每次迭代中，object 的一个属性被赋给变量名，循环继续，直到 object 的所有属性都被读取。console.log 方法用于在 web 浏览器控制台上显示属性内容。
程序的输出如图 4-15 所示。
图 4-15。打印对象的属性
标签语句
label 语句使您能够为语句块定义唯一的标识符。语法是
label:
statements
标签名称后面跟一个冒号，标签下面是与标签名称链接的语句块(或由给定标签定义的语句块)。为了澄清，考虑清单 4-12 中的例子。
清单 4-12。标签示例
<html>
<body>
<script>
var i, j;
Outerloop:
for (i = 0; i < 5; i++) {
for (j = 0; j < 5; j++) {
if (i === 1 && j === 1) {
break Outerloop;
}
console.log("i = " + i + ", j = " + j);
}
}
</script>
</body>
</html>
清单 4-12 为外部 for 循环定义了一个标签 Outerloop。外循环的每次迭代还有一次内循环运行。为了在计数器 I 和 j 的值都等于 1 时退出外部循环，break 语句与先前定义的标签 outer loop 一起使用，以表示外部 for 循环。列表 4-12 的输出如图 4-16 所示。
图 4-16。程序输出
摘要
本章涵盖了 JS 语言中的各种控制结构，并描述了如何使用它们来满足需求。它从 JavaScript 支持的块语句开始。接下来，它讨论了如果…else 和 switch 语句。最后，演示程序向您展示了如何执行 JavaScript 中支持的各种类型的循环，包括 for 和 while 循环，以及 LABEL 语句。
第五章讨论了 JavaScript 中的另一个重要话题:正则表达式和字符串方法。
扫一扫
2982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
