初学者学习 JavaScript – JS 基础知识手册正式版

​本手册的目的是迅速向你介绍JavaScript的基础知识，以便你可以开始编写应用程序。它并不包括JavaScript的所有理论和概念，而是只教授语言中最重要的构件。它包括变量、数据类型、函数、对象、数组和类。你还将学习如何结合它们来构建小型、可靠的程序。本教程只关注作为编程语言的JavaScript和使用终端来执行代码。本教程还包括每个部分的练习，让你有时间练习你所学到的知识，并将这些知识"打入"你的大脑。目录1-JavaScript简介为什么要学习JavaScriptJavaScript与Java2-如何设置您的计算机如何安装VSCode如何安装Node.js3-快速控制台介绍4-是时候向世界问好了！5-JavaScript代码结构声明评论执行流程练习#16-JavaScript变量变量命名常数变量var关键字练习#2概括7-JavaScript基本数据类型JavaScript中的字符串JavaScript中的数字（整数和浮点数）JavaScript中的布尔值JavaScript中未定义JavaScript中的空值8-类型转换和强制类型强制类型强制规则为什么应该避免类型强制9-JavaScript中的运算符算术运算符赋值运算符比较运算符逻辑运算符运算符的类型练习#310-JavaScript数组数组索引位置数组操作的特殊方法练习#411-JavaScript中的控制流（条件）if...else语句switch...case语句switch语句体Switch语句用例练习#512-JavaScript中的控制流（循环）for语句什么时候使用for循环？while语句何时使用while循环？练习#613-JavaScript中的函数如何创建自己的函数函数参数和参数默认参数默认参数和null返回语句变量范围其余参数箭头功能单行和多行箭头函数不带圆括号的箭头函数箭头函数没有参数绑定如何轻松地将普通函数转换为箭头函数练习#714-JavaScript中的对象如何访问对象值如何向对象添加新属性如何修改对象属性如何删除对象属性如何检查对象中是否存在属性练习#8最后练习：构建一台收银机结论解决方案1-JavaScript简介JavaScript是由BrendanEich在1995年4月左右创建的。当时，他正在为一家名为Netscape的公司开发一款浏览器。他被告知，他只有10天时间来设计和编写一种可以在浏览器上运行的编程语言的原型。他需要创造一种能够吸引非专业程序员的语言，比如微软的VisualBasic。他只得到了10天的时间，因为网景公司需要发布一个当时与微软竞争的浏览器。最初，JavaScript并不像今天这样强大，因为它被设计用来给网页添加交互和动画。直到2005年，jQuery和AJAX发布后，JavaScript才被用于所有网站。在执行DOM操作和发送异步请求方面，没有比jQuery和AJAX更容易的选择。此外，一个活跃的JavaScript开发者社区继续为该库添加新的功能。然后，谷歌推出了最新的Chrome浏览器，Facebook也开始吸引更多的人进入互联网。JavaScript开始随着这些互联网巨头的野心而发展。浏览器开始开发可以在JavaScript中使用的API，JS能够从浏览器中检索IP地址和地理位置等信息，使互联网公司能够更好地将其网站的功能本地化。随后，另一项创新的出现，使JavaScript变得更加强大。一个名为Node.js的服务器端环境于2009年发布，使JavaScript能够像PHP、Java、Python和Ruby一样在服务器端运行。它还使开发者能够只用JavaScript来开发全栈网络应用。今天，JavaScript是一种可以支持网络、桌面和移动应用的语言。用O'ReillyMedia的创始人TimO'Reilly的话说：学习JavaScript曾经意味着你不是一个严肃的开发者。今天，不学习JavaScript也意味着同样的事情。现在，对于任何想成为网络开发者的人来说，学习JavaScript是必须的。现在，学习JavaScript对于那些想成为Web开发人员的人来说至关重要。为什么要学习JavaScript？您需要学习并深入理解JavaScript有4个充分的理由：JavaScript是唯一可以在浏览器中运行的语言它很容易学习（但很难掌握）它是制作Web应用程序的必备语言JavaScript开发人员有很多职业机会学习JavaScript为您提供了成为前端、后端或移动开发人员的巨大机会。基本上，学习JavaScript是技术职业发展的门户。JavaScript与Java最开始，JavaScript实际上被命名为LiveScript。它被重命名为JavaScript，因为Java是一种非常流行的编程语言。由于大多数软件开发人员已经熟悉Java，因此JavaScript这个名称被认为有助于将JavaScript作为一种出色的编程语言进行营销，并吸引了当时开发人员的兴趣。需要明确的是，JavaScript和Java是两种完全不同的编程语言。您无需了解Java即可学习JavaScript（反之亦然）。:)2-如何设置您的计算机要使用JavaScript编写程序，您需要安装2个可用于所有操作系统的免费工具。第一个要安装的工具是VisualStudioCode。如何安装VSCodeVisualStudioCode或简称VSCode是一个为编写代码而创建的文本编辑器程序。除了免费之外，VSCode也是开源的，并且可在所有主要操作系统上使用。您可以在Windows、macOS和Linux上使用VSCode，因此如果您的计算机上没有文本编辑器，我建议您在此处安装VSCode。现在您已经有了一个文本编辑器来编写JavaScript代码，您还需要一个软件来运行JavaScript代码。接下来让我们安装Node.js。如何安装Node.js要在浏览器外部运行JavaScript，您需要安装Node.js，它本质上是一个JavaScript运行器。只需访问Node.js网站（）并下载适合您计算机的最新LTS版本。下载完成后，将其安装到您的系统上。您需要使用控制台运行Node.js，因此打开命令行或终端应用程序并运行以下命令：node

-v此命令会将新安装的Node.js的版本输出到控制台。3-快速控制台介绍控制台是一个基于文本的界面，可用于在计算机上键入和运行命令。在Windows上，它称为命令行。在macOS和Linux上，它称为终端。您不会使用控制台中可用的所有命令。事实上，您只需要了解7个基本命令即可帮助您运行JavaScript代码。首先，打开计算机上的控制台程序并输入命令pwd：pwd这是您用来查找终端当前所在目录的命令。pwd是打印工作目录的缩写。要更改工作目录，您需要运行该cd命令。下面是移动到子目录的示例：cd

directory_name/directory_name要向上移动到父目录，请..在命令旁边指定：cd

..要向上移动多个目录，请使用../..要清除控制台上以前的命令和输出，请使用以下clear命令：clear要打印当前目录中的文件和目录列表，请运行以下ls命令：ls要创建新文件，请使用以下touch命令，后跟文件名和扩展名：touch

index.js上面的命令将创建一个index.js以当前工作目录命名的新JavaScript文件。要创建新目录，请使用mkdir命令后跟目录名称：mkdir

my_project要使用Node.js运行JavaScript，请指定node后跟文件名，如下所示：node

index.js您将在同一控制台中看到代码的所有输出。您可以使用控制台做很多事情，但这7个命令就足够了，因为我们只需要它来运行JavaScript代码。接下来，让我们运行您的第一个JavaScript程序！4-是时候向世界问好了！是时候使用Node运行您的第一个JavaScript程序了。从控制台中，创建一个index.js使用touch以下命令命名的新JavaScript文件。touch

index.js接下来，使用VSCode打开该文件并将以下代码行写入该文件中：console.log("Hello

World!");返回控制台，使用Node运行此脚本：node

index.js控制台应该执行该index.js文件并打印“HelloWorld!”。您刚刚使用Node.js运行了第一个JavaScript程序。出色的！当您运行该nodeindex.js命令时，Node.js程序开始从上到下逐行读取脚本。程序node发现您写了单词，console.log后跟括号()，因此它知道您正在指示它打印某些内容。然后程序读取您在括号中输入的内容并将其打印在控制台上。在VSCode或其他文本编辑器程序中，您应该看到代码的不同部分以不同的颜色突出显示。这是文本编辑器的一项功能，称为语法突出显示，它对于帮助您区分代码的不同部分非常有用。关键字log是一个函数，因此它以一种颜色突出显示，而括号中的单词则具有另一种颜色。函数只是用于执行特定任务的一段代码。该log()函数用于“打印”您放在括号内的任何内容。另一方面，console关键字是一个对象，它是一个独立的属性，可以访问某些功能。稍后我们将了解有关函数和对象的更多信息。现在，只需记住console.log()关键字用于将内容打印到控制台即可。接下来，我们就开始学习JavaScript代码结构。5-JavaScript代码结构计算机程序是写在文本文件中的一系列代码段。然后，这些文本文件通过专门为运行代码而设计的软件来运行。您之前下载的Node.js软件是处理JavaScript代码的工具。在进一步讨论之前，让我们先了解一下代码的结构。声明语句是计算机运行的一条指令。把它想象成一个句子，但是对于计算机来说。我们可以使用分号结束语句，;就像我们可以使用点结束句子一样.您可以在一行中编写多个语句，但约定是每行编写一个语句：//

This

is

hard

to

readconsole.log("Hello

World!");

console.log("I'm

learning

JavaScript");//

Now

it's

betterconsole.log("Hello

World!");console.log("I'm

learning

JavaScript");每个语句都是执行代码的软件需要执行的某些操作的表达式。评论在编程中，注释是我们用来传达文件中编写的代码上下文的文本。要在JavaScript中编写注释，您需要//在注释前添加两个正斜杠，如下所示：//

This

is

a

comment//

This

is

also

a

comment//

Below

print

two

lines

of

statementsconsole.log("Hello

World!");console.log("I'm

learning

JavaScript");语言处理器会忽略注释，因此您可以使用注释来禁用某些代码，而不必删除该代码。下面的代码显示了如何禁用第二个打印语句：console.log("Hello

World!");//

console.log("I'm

learning

JavaScript");执行流程Node.js等语言处理器以自上而下的方法执行语句。第一行写入的语句将在第二行之前执行，然后继续执行到最后一行：console.log("Hello

World!");console.log("I'm

learning

JavaScript");//

Printing

numbersconsole.log(1);console.log(2);console.log(3);输出：Hello

World!I'm

learning

JavaScript123如果你想在文本之前打印数字，那么你需要将相应的console.log()行移到顶部。练习#1尝试在控制台上打印您的姓名、年龄和职业。输出如下所示：John

Doe19Student现在你已经了解了JavaScript的基本代码结构，接下来我们继续学习变量。6-JavaScript变量在解释变量是什么之前，我希望您更改在index.js文件中编写的代码。更改该文件中的代码如下：let

message

=

"Hello

World!"console.log(message)接下来，使用命令运行代码nodeindex.js。您将看到与编写“HelloWorld!”时相同的输出。直接在console.log()函数内部发送消息。怎么会这样？这是因为上面代码中写的消息是一个变量。在编程中，变量只是您赋予值的名称，以便您稍后可以访问该值。您可以将变量视为可以标记为某个值的标签，因此您可以使用该标签来引用该值。要声明变量，您需要键入关键字，let后跟变量名称。代码中的第一行告诉JavaScript将message变量与值关联起来HelloWorld!：let

message

=

"Hello

World!"在第二行中，JavaScript被指示打印的值message，而这正是它所做的。您可以通过重新分配另一个值来更改变量的值，如下所示：message

=

"Hello

World!"print(message)message

=

"Nice

weather!"print(message)运行该文件，您将看到打印的两行输出：Hello

World!Nice

weather!变量用于引用数据，以便您可以在程序中多次使用相同的数据。接下来，让我们看看JavaScript中变量命名的一些规则。变量命名JavaScript有一些命名规则，您需要了解这些规则以避免命名错误。变量名只能包含字母、数字和下划线(

_)。这意味着您可以将变量命名为message,

message_1,

message_2。变量名称的第一个字符不能是数字。message_1没关系。1_message不是。您不能使用保留关键字，因为consoleJavaScript使用它们来执行某些操作。JavaScript使用了许多其他关键字，您将在以下部分中了解这些关键字，例如if、for和while。变量名称区分大小写，这意味着Message、MESSAGE、和message可用于创建三个不同的变量。但当然，我不建议使用相似的名称，因为这会引起混乱。有时，您需要多个单词来声明变量名。JavaScript有两种全球通用的命名约定：camelCasesnake_case驼峰式命名约定是使用大写字母作为后续单词的第一个字符。这是一个例子：let

myAwesomeVariable蛇形命名约定使用下划线来分隔单词。这是一个例子：let

my_awesome_variable两者都是可接受的命名约定，但您应该在代码中坚持其中一种以避免混淆。常数变量有时您需要在变量中存储永远不会改变的值。常量变量是在程序运行期间其值不会改变的变量。在其他编程语言中，更改常量的值会产生错误。在JavaScript中，常量变量是使用const关键字声明的。下面展示了如何在JavaScript中声明2个常量：const

FILE_SIZE_LIMIT

=

2000const

MAX_SPEED

=

300常量的命名约定是全部使用大写字母，但也可以使用小写字母。大写只是一个标准，让常量更加突出。var关键字该var关键字用于声明具有全局作用域的变量。在JavaScript于2015年发布newlet和const关键字之前，该关键字是唯一可以用来声明变量的关键字。从今天开始，您应该var尽可能避免使用，因为var可能会引入错误，而您可以通过使用该let关键字来避免。为了向您展示我的意思，请考虑以下示例：if(true)

{

var

name

=

"Nathan";}console.log(name)上面的代码可以name很好地打印变量，但实际上不应该，因为变量name是在if块内声明的。这是因为使用var关键字声明的任何变量都可以从任何地方访问。该变量的范围是全局的。另一方面，let关键字具有块作用域，这意味着该变量只能从该块及其所有子块访问。但为什么要费心确定变量的范围呢？这是因为，当您有数百或数千行代码时，跟踪由于全局变量而发生的错误可能会变得令人沮丧。软件开发中有一个原则称为“最少暴露原则”，这意味着您不会暴露程序中不必要的任何部分。对变量进行块作用域可确保变量仅在需要该变量的代码库部分中公开和访问。使用关键字声明的变量let与使用关键字声明的变量相同，var但范围级别除外。if(true)

{

let

name

=

"Nathan";}console.log(name)

//

Error:

name

is

not

defined这也意味着您现在可以使用var、let和const关键字来声明变量。使用哪一个？一般来说，你可以用constfirst声明一个变量。当您编写应用程序并意识到需要更改变量分配时，可以将声明更改为let.如果你从一开始就知道变量的值会改变，那么你可以let立即使用。只是今天不要使用var，否则人们可能会生你的气。练习#2编写一个包含三个变量的程序，每个变量具有以下值：第一个变量包含您的名字第二个变量包含您的年龄第三个变量包含您的职业然后使用该方法打印变量console.log()。这是示例输出：John

DoeStudent19概括如何使用变量来编写一个程序来完成您想要它做的事情是作为程序员可以拥有的最重要的技能之一。但在详细了解如何使用变量之前，让我们先了解一下JavaScript中的数据类型。7-JavaScript基本数据类型数据类型只是编程语言已知的不同数据类型的定义。数据类型包含有关可以使用该数据执行哪些操作和不能执行哪些操作的规范。向您展示一个对大脑友好的例子，我相信您同意这一点2+2=4？嗯，JavaScript也同意这一点：console.log(2

+

2);//

Output:

4但是，如果您尝试添加带有字母的数字（如下所示）怎么办？console.log(2

+

"ABC");输出：2ABC将数字和字母添加在一起将导致JavaScript将这些值连接或连接在一起。在本节中，您将学习JavaScript知道的基本数据类型：弦乐数字布尔值无效的不明确的您还将看到这些不同类型如何对运算符做出反应，+如上例所示。首先，我们从字符串开始。JavaScript中的字符串字符串只是定义为一系列字符的数据。console.log()您之前在调用函数打印消息时已经看到过字符串数据的示例：let

message

=

"Hello,

Sunshine!";console.log(message);

//

Hello,

Sunshine!字符串需要用引号引起来。您可以使用双引号或单引号，但它们必须匹配。当您使用不同的引号时，会出现错误，如下所示：//

Invalid

or

unexpected

tokenlet

message

=

"Hello';您可以使用加号将两个或多个字符串连接为一个+。不要忘记在下一个字符串之前添加空格，否则您将得到一个没有空格的字符串！let

message

=

"Hello

"

+

"and

"

+

"Goodbye!";console.log(message);//

Output:

Hello

and

Goodbye!打印变量值时，还可以console.log()直接在函数中添加字符串，如下所示：let

message

=

"Hello,

Dave!";console.log("The

message

is:

"

+

message);//

Output:

The

message

is:

Hello,

Dave!当您在一个句子中有多个字符串到console.log时，这一点特别有用，如下所示：let

name

=

"John";let

topic

=

"JavaScript";console.log(name

+

"

is

learning

"

+

topic

+

"

today");//

Output:

John

is

learning

JavaScript

today或者您也可以使用模板字符串格式，它允许您直接在字符串中嵌入变量，如下所示：let

name

=

"John";let

topic

=

"JavaScript";console.log(`${name}

is

learning

${topic}

today`);//

Output:

John

is

learning

JavaScript

today要使用模板字符串格式，您需要使用反引号(`)字符而不是引号来包裹字符串。使用美元符号和大括号将变量嵌入到字符串中，如中所示${variable}。这样，JavaScript就知道您正在引用字符串内的变量。当您要在一行中打印多个字符串时，模板字符串格式会更方便，因为您不必使用引号和连接来断开字符串。接下来，字符串也可以表示数字。您可以将数字括在引号中，如下所示：let

score

=

"10"

+

"30";console.log(score);//

Output:

1030当您用符号连接两个字符串数字时+，JavaScript将连接这两个数字而不是执行算术加法。这就是字符串在JavaScript中的工作原理。接下来我们看一下数字。JavaScript中的数字（整数和浮点数）数字数据类型代表不同类型的数字。JavaScript中有两种类型的数字：整数花车整数是没有小数和分数的整数。下面，您将看到两个整数x和的示例y：let

x

=

1;let

y

=

2;console.log(x

+

y);//

Output:

3另一方面，浮点数是指带有小数点的数字，如下所示：let

f

=

1.2;let

z

=

2.35;console.log(f

+

z);//

Output:

3.55要创建浮点数，您需要编写一个数字并用于.定义小数值。使用数字类型，您可以执行算术运算，例如加法+、减法-、除法/和乘法，*就像使用计算器一样。JavaScript中的布尔值trueBoolean是一种表示和值的类型false。您可以将布尔值视为只能处于两个位置之一的电灯开关：开或关。编程语言中的布尔值也是如此。当JavaScript需要做出决定时使用它们：向左还是向右？对还是错？以下是在JavaScript中创建布尔值的方法：let

on

=

true;let

off

=

false;当您需要使用控制流做出决策时，经常使用此数据类型。您将在第9节中看到为什么布尔值在开发程序时非常有用。JavaScript中未定义未定义是JavaScript中的一种数据类型，用于表示尚未分配任何值的变量。每当您声明变量而不分配任何值时，该undefined值都会分配给该变量。例如：let

first_name;console.log(first_name);

//

undefined您还可以undefined显式分配给变量，如下所示：let

last_name

=

undefined;但通常不建议这样做，因为JavaScript有另一个值叫做null，用于将变量标记为空。JavaScript中的空值该null值是一种特殊的数据类型，表示空值或未知值。以下是将变量指定为null的方法：let

first_name

=

null;上面的代码意味着的值为first_name空或未知。此时，您可能会想undefined和之间有什么区别null？他们似乎有类似的目的。你是对的。和undefined都是null不代表任何内容的值，而其他编程语言通常只有一个，那就是null。在JavaScript中，undefined当声明变量时，该值被保留为默认值，而null意味着您故意为该变量分配一个“空”值。当您稍后了解第11节中的函数时，这种细微的差异将会发挥作用。现在，请记住JavaScript将其视为undefined“默认”空值和null“有意”空值。8-类型转换和强制有时，您可能希望将一种数据类型转换为另一种数据类型，以便程序按预期运行。例如，假设您需要将字符串转换为整数，以便可以在数字之间执行加法。如果您将其中一个数字作为字符串，JavaScript会将它们连接在一起而不是相加：let

x

=

"7";let

y

=

5;console.log(x

+

y);

//

75要正确添加两个数字，您需要将x变量转换为整数。将数据从一种类型更改为另一种类型也称为类型转换或类型转换。有3个函数经常用于进行类型转换：Number()String()Boolean()顾名思义，这些类型转换函数将尝试将您在括号内指定的任何值转换为同名类型。要将字符串转换为整数，可以使用以下int()函数：let

x

=

"7";let

y

=

5;//

Convert

x

to

integerx

=

Number(x);console.log(x

+

y);

//

12另一方面，该String()函数将另一种类型的值转换为字符串。如果你输入String(true)，那么你会得到“true”。传递与函数相同类型的值没有任何效果。它只会返回相同的值。类型强制在JavaScript中，类型强制是一种将一种类型的值隐式转换为另一种类型的过程。这是由JavaScript自动完成的，因此您的代码不会导致错误。但正如您将在本节中看到的，类型强制实际上可能会导致程序出现不良行为。让我们考虑一下在JavaScript中执行anumber和a之间的加法时会发生什么：stringconsole.log(1

+

"1");正如您在上一节中所见，JavaScript会将数字视为字符串并将两个字母连接为as而11不是将它们相加(

1+1=2)但您需要知道其他编程语言不会以相同的方式响应。Ruby或Python等编程语言将通过停止程序并给出错误作为反馈来做出响应。它将响应类似“无法在数字和字符串之间执行加法”的内容。但JavaScript会看到这一点并说：“我无法按原样执行您请求的操作，但如果将数字1转换为a我可以执行此操作string，所以我会这样做。”这正是类型强制。JavaScript注意到它不知道如何执行您的代码，但它不会停止程序并返回错误。相反，它会在不通知您的情况下更改其中一个值的数据类型。虽然类型强制不会导致任何错误，但输出实际上也是您不想要的。类型强制规则类型强制规则从来没有在任何地方明确说明过，但我自己通过尝试各种愚蠢的代码确实找到了一些规则。看来JavaScriptstring在发现不同的数据类型时会首先将数据类型转换为：1

+

"1"

//

"11"[1

,2]

+

"1"

//

"1,21"true

+

"1"

//

"true1"但是当你有一个对象时，值的顺序很重要。首先写入对象总是返回numeric

1：{

a:

1

}

+

"1"

//

1"1"

+

{

a:

1

}

//

"1[object

Object]"true

+

{

a:

1

}

//

"true[object

Object]"{

a:

1

}

+

1

//

1JavaScript可以在布尔类型和数值类型之间进行计算，因为布尔值true和隐式具有和false的数值：10true

+

1

//

1+1

=

1false

+

1

//

0+1

=

1[1,2]

+

1

//

"1,21"类型强制总是隐式执行的。当您将值分配为变量时，变量类型在操作之外永远不会改变：let

myNumber

=

1;console.log(myNumber

+

"1");

//

prints

11console.log(myNumber);

//

still

prints

number

1

and

not

string您可以尝试自己找到更多内容，但希望您现在已经了解强制转换是什么类型以及它是如何工作的。为什么应该避免类型强制在谈论类型强制时，JavaScript开发人员通常分为两个阵营：那些认为这是一个功能的人那些认为这是一个错误的人如果您问我，我建议您始终避免在代码中使用类型强制。原因是我从未发现解决方案需要类型强制的问题，并且当我需要将一种类型转换为另一种类型时，最好明确地这样做：let

price

=

"50";let

tax

=

5;let

totalPrice

=

Number(price)

+

Number(tax);console.log(totalPrice);使用显式类型转换函数（例如Number()和）String()将使您的代码清晰透明。您无需猜测程序中所需的正确数据类型。类型强制是JavaScript中可能会让初学者感到困惑的独特功能之一，因此最好尽早弄清楚。接下来，我们将学习JavaScript运算符。9-JavaScript中的运算符顾名思义，运算符是可用于对数据执行操作的符号。+您已经看到了一些使用加号运算符连接多个字符串并将两个数字相加的示例。当然，正如您将在本节中发现的那样，JavaScript有多个运算符。由于您之前已经了解了数据类型和转换，因此学习运算符应该相对容易。算术运算符算术运算符用于执行加法和减法等数学运算。这些运算符经常与数字数据类型一起使用。这是一个例子：console.log(10

-

3);

//

7console.log(2

+

4);

//

6JavaScript中总共有8个算术运算符：姓名操作示例意义添加x+y返回两个操作数之间的和减法x-y返回两个操作数之间的差乘法x*y返回两个操作数之间的乘法求幂x**y返回左操作数的右操作数次方的值分配x/y返回左操作数除以右操作数的值余x%y返回左操作数除以右操作数后的余数增量x++返回操作数加一递减x--返回操作数减一这些运算符非常简单，因此您可以自己尝试。正如您在上一节中所看到的，该+运算符还可以用于字符串数据以将多个字符串合并为一个：let

message

=

"Hello

"

+

"human!";console.log(message);

//

Hello

human!当您添加数字和字符串时，JavaScript将执行类型强制并将数字值视为字符串值：let

sum

=

"Hi

"

+

89;console.log(sum);

//

Hi

89对字符串使用任何其他算术运算符都会导致JavaScript返回一个NaN值。赋值运算符下一个要学习的运算符是赋值运算符，它由等号表示=。在JavaScript中，赋值运算符用于将数据或值分配给变量。您之前已经看过一些使用赋值运算符的示例，所以这里有一个提醒：//

Assign

the

string

value

'Hello'

to

the

'message'

variablelet

message

=

"Hello";//

Assign

the

Boolean

value

true

to

the

'on'

variablelet

on

=

true;您可能已经注意到，等号在编程中的含义与在数学中的含义略有不同，您是对的！在编程中，赋值运算符不用于比较一个数字是否等于另一个数字。如果你想进行这种比较，那么你需要使用等于==运算符。赋值运算符还可以与算术运算符组合使用，以便您可以从左侧操作数中添加或减去值。赋值运算符的类型见下表：姓名操作示例意义任务x=yx=y加法作业x+=yx=x+y减法作业x-=yx=x-y乘法作业x*=yx=x*y分区分配x/=yx=x/y余数分配x%=yx=x%y接下来，我们来看看比较运算符。比较运算符比较运算符用于比较两个值。此类别中的运算符将返回布尔值：true或false。下表显示了JavaScript中可用的所有比较运算符：姓名操作示例意义平等的x==ytrue如果操作数相等则返回不等于x!=ytrue如果操作数不相等则返回严格等于x===y返回true操作数是否相等且类型相同严格不等于x!==ytrue如果操作数不相等或具有不同类型则返回比...更棒x>ytrue如果左操作数大于右操作数则返回大于或等于x>=ytrue如果左操作数大于或等于右操作数则返回少于x<ytrue如果左操作数小于右操作数则返回小于或等于x<=ytrue如果左操作数小于或等于右操作数则返回以下是使用这些运算符的一些示例：console.log(9

==

9);

//

trueconsole.log(9

!=

20);

//

trueconsole.log(2

>

10);

//

falseconsole.log(2

<

10);

//

trueconsole.log(5

>=

10);

//

falseconsole.log(10

<=

10);

//

true比较运算符也可用于比较字符串，如下所示：console.log("ABC"

==

"ABC");

//

trueconsole.log("ABC"

==

"abc");

//

falseconsole.log("Z"

==

"A");

//

false字符串比较区分大小写，如上面的示例所示。JavaScript每个比较运算符也有两个版本：宽松的和严格的。在严格模式下，JavaScript将比较类型而不执行类型强制。您需要=在运算符中再添加一个等号，如下所示console.log("9"

==

9);

//

trueconsole.log("9"

===

9);

//

falseconsole.log(true

==

1);

//

trueconsole.log(true

===

1);

//

false您应该使用严格的比较运算符，除非您有特定的理由不这样做。逻辑运算符逻辑运算符用于检查一个或多个表达式的结果是否为True或False。JavaScript具有三个逻辑运算符：姓名操作示例意义逻辑与x&&ytrue如果所有操作数均为则返回true，否则返回false逻辑或x||ytrue如果操作数之一为则返回true，否则返回false逻辑非!x反转结果：返回trueif

false，反之亦然这些运算符只能返回布尔值。例如，您可以确定“7是否大于2”和“5是否大于4”：console.log(7

>

2

&&

5

>

4);

//

true这些逻辑运算符遵循数理逻辑定律：&&AND运算符-如果有任何表达式返回false，则结果为false||OR运算符-如果有任何表达式返回true，则结果为true!NOT运算符-对表达式求反，返回相反值。我们来做点运动吧。尝试在您的计算机上运行这些语句。你能猜出结果吗？console.log(true

&&

false);console.log(false

||

false);console.log(!true);当您需要断言代码中满足特定要求时，这些逻辑运算符将派上用场。typeofJavaScript允许您使用运算符检查数据类型typeof。要使用该运算符，您需要在指定数据之前调用它：let

x

=

5;console.log(typeof

x)

//

'number'console.log(typeof

"Nathan")

//

'string'console.log(typeof

true)

//

'boolean'该typeof运算符以字符串形式返回数据类型。“数字”类型代表整数和浮点类型，字符串和布尔值代表它们各自的类型。练习#3猜猜这些运算符的实际结果：console.log(19

%

3);console.log(10

==

3);console.log(10

!==

"10");console.log(2

<

"10");console.log("5"

>

2);console.log((false

&&

true)

||

false);10-JavaScript数组数组是一种对象数据类型，可用于保存多个值。数组可以是字符串、数字、布尔值、对象或它们的组合的列表。要创建数组，您需要使用方括号[]并使用逗号分隔各个项目。创建字符串列表的方法如下：let

birds

=

['Owl',

'Eagle',

'Parrot',

'Falcon'];您可以将数组视为项目列表，每个项目都存储在一个储物柜隔间中：​编辑您还可以声明一个没有任何值的空数组：let

birds

=

[];数组还可以包含如下值的混合：let

mixedArray

=

['Bird',

true,

10,

5.17]上面的数组包含一个字符串、一个布尔值、一个整数和一个浮点数。数组索引位置JavaScript会记住数组中元素的位置。元素的位置也称为索引号。回到储物柜的例子，您可以将索引号视为储物柜号。索引号从0以下开始：​编辑[x]要访问或更改数组的值，您需要在数组名称旁边添加方括号符号，其中x是该元素的索引号。这是一个例子：//

Access

the

first

element

in

the

arraymyArray[0];//

Access

the

second

element

in

the

arraymyArray[1];假设您想从数组中打印字符串“Owl”

birds。以下是您可以如何做到这一点。let

birds

=

['Owl',

'Eagle',

'Parrot',

'Falcon'];console.log(birds[0]);

//

Owlconsole.log(birds[1]);

//

Eagle就这样吧。您需要键入数组的名称，然后键入用方括号括起来的索引号。您还可以使用赋值运算符将新值分配给特定索引。让我们将“Parrot”替换为“Vulture”：let

birds

=

['Owl',

'Eagle',

'Parrot',

'Falcon'];birds[2]

=

'Vulture';console.log(birds);//

['Owl',

'Eagle',

'Vulture',

'Falcon']由于数组索引从零开始，因此值“Parrot”存储在索引2而不是3处。数组操作的特殊方法由于数组是一个对象，因此您可以调用JavaScript提供的方法来操作数组值。例如，您可以使用该push()方法将一个项目添加到数组的末尾：let

birds

=

['Owl',

'Eagle'];birds.push('Sparrow');console.log(birds);//

['Owl',

'Eagle',

'Sparrow']调用的另一个方法pop()可用于从数组末尾删除项目：let

birds

=

['Owl',

'Eagle',

'Sparrow'];birds.pop();console.log(birds);//

['Owl',

'Eagle']该unshift()方法可用于从索引0处的前面添加一个项目：let

fishes

=

['Salmon',

'Goldfish',

'Tuna'];fishes.unshift('Sardine');console.log(fishes);//

['Sardine',

'Salmon',

'Goldfish',

'Tuna']另一方面，该shift()方法可用于从索引0中删除项目：let

fishes

=

['Salmon',

'Goldfish',

'Tuna'];fishes.shift();console.log(fishes);//

['Goldfish',

'Tuna']该indexOf()方法可用于查找并返回数组中项目的索引。-1当在数组中找不到该项目时，该方法将返回：let

fishes

=

['Salmon',

'Goldfish',

'Tuna'];let

pos

=

fishes.indexOf('Tuna');console.log(pos);

//

2要获取数组的大小，您可以访问该length属性：let

fishes

=

['Salmon',

'Goldfish',

'Tuna'];console.log(fishes.length);

//

3请注意，我们不会在length上面的关键字旁边添加括号。这是因为length是数组对象的属性而不是方法。我们将在接下来的教程中了解有关对象的更多信息。练习#4创建一个名为colors包含“红色”、“绿色”和“蓝色”颜色的数组。首先，在数组的最后一个索引后添加“黑色”颜色。然后打印数组。接下来，删除值“红色”并交换“绿色”和“蓝色”的位置。打印数组。最后，在数组的第一个索引上添加颜色“黄色”，然后打印数组。结果输出如下：[

'red',

'green',

'blue',

'black'

][

'blue',

'green',

'black'

][

'yellow',

'blue',

'green',

'black'

]您需要使用本节中介绍的方法修改原始数组。11-JavaScript中的控制流（条件）到目前为止，您编写的JavaScript代码都是从上到下逐行执行的。但是，如果您只想在满足特定条件时运行某些代码行怎么办？计算机程序通常需要考虑程序执行期间可能出现的许多不同条件。这类似于人类在生活中做出决定的方式。例如，您有钱去日本度假吗？如果是的话，就去吧。如果没有，那就多存点钱吧！这就是控制流的用武之地。控制流是编程语言中的一项功能，允许您根据可能出现的不同条件有选择地运行特定代码。使用控制流允许您根据程序中存在的条件定义程序可以采用的多个路径。JavaScript中常用的控制流有两种类型：条件和循环。本节将重点介绍条件语句，例如：if...else陈述switch...case陈述您将在下一节中了解循环语句。if...else语句该if语句允许您创建一个仅在满足特定条件时运行的程序。该if语句的语法如下：if

(condition)

{

//

code

to

execute

if

condition

is

true}让我们看一个例子。假设你想去度假，需要5000美元。使用该if语句，您可以通过以下方式检查您是否有足够的余额：let

balance

=

7000;if

(balance

>

5000)

{

console.log("You

have

the

money

for

this

trip.

Let's

go!");}运行上面的代码一次，您将看到终端上打印的字符串。balance现在更改to的值3000，您将不会得到任何响应。发生这种情况是因为语句内的代码if仅在条件为时才执行true。在该if语句之后，您可以在其下面再编写一行代码，如下所示：let

balance

=

7000;if

(balance

>

5000)

{

console.log("You

have

the

money

for

this

trip.

Let's

go!");}console.log("The

end!");console.log()无论您为变量分配什么值，上面的第二个调用都会执行balance。如果您希望它仅在满足条件时执行if，则也将该行放在大括号内：let

balance

=

7000;if

(balance

>

5000)

{

console.log("You

have

the

money

for

this

trip.

Let's

go!");

console.log("The

end!");}接下来，假设您只需要在if不满足语句条件时运行一些代码。这就是else语句的用武之地。语句仅在语句未满足else时才用于运行代码。if这是一个例子：let

balance

=

7000;if

(balance

>

5000)

{

console.log("You

have

the

money

for

this

trip.

Let's

go!");}

else

{

console.log("Sorry,

not

enough

money.

Save

more!");}console.log("The

end!");现在将的值更改balance为小于5000，您将触发else示例中的块。JavaScript还具有elseif语句，允许您编写另一个条件来检查if语句条件是否不满足。考虑下面的例子：let

balance

=

7000;if

(balance

>

5000)

{

console.log("You

have

the

money

for

this

trip.

Let's

go!");}

else

if

(balance

>

3000)

{

console.log("You

only

have

enough

money

for

a

staycation");}

else

{

console.log("Sorry,

not

enough

money.

Save

more!");}console.log("The

end!");当balance金额小于时5000，elseif报表将检查是否balance大于3000。如果是这样，程序将继续建议您在家度假。您可以根据需要编写任意数量的elseif语句，并且仅当前一条语句不满足时才会执行每一条语句。这些语句一起if..else..elseif允许您根据程序面临的条件执行不同的代码块。switch...case语句该switch语句是核心JavaScript语法的一部分，可让您控制代码的执行流程。它通常被认为是语句的替代方案if..else，可以为您提供更具可读性的代码，尤其是当您有许多不同的条件需要评估时。这是工作声明的示例switch。我将解释下面的代码：let

age

=

15;switch

(age)

{

case

10:

console.log("Age

is

10");

break;

case

20:

console.log("Age

is

20");

break;

default:

console.log("Age

is

neither

10

or

20");}首先，您需要将要由语句计算的表达式传递switch到括号中。在示例中，age变量作为求值的参数传递。然后，您需要编写语句将尝试与表达式匹配case的值。switch该case值后面紧跟一个冒号(

:)以标记case块的开始：case

"apple":case请记住要与表达式匹配的值的数据类型。如果你想匹配a

string，那么你需要放置a

string。当您有a作为参数但为case放置a时，switch语句不会执行类型强制：numberstringswitch

(1)

{

case

"1":

console.log("Hello

World!");

break;}数字表达式与字符串大小写值不匹配，因此JavaScript不会将任何内容记录到控制台。布尔值也会发生同样的情况。该数字1不会被强制，因为true并且该数字0不会被强制为false：switch

(0)

{

case

true:

console.log("Hello

True!");

break;

case

false:

console.log("Bonjour

False!");

break;

default:

console.log("No

matching

case");}switch语句体语句主体switch由三个关键字组成：case用于启动case块的关键字break用于停止switch语句运行下一个的关键字casedefault未找到匹配时运行一段代码的关键字case。当您的表达式找到匹配的时case，JavaScript将执行该case语句后面的代码，直到找到break关键字。如果省略关键字break，则代码将继续执行到下一个块。看一下下面的例子：switch

(0)

{

case

1:

console.log("Value

is

one");

case

0:

console.log("Value

is

zero");

default:

console.log("No

matching

case");}当您执行上面的代码时，JavaScript将打印以下日志：>

"Value

is

zero">

"No

matching

case"这是因为如果没有break关键字，switch即使已经找到匹配的情况，也会继续根据剩余的情况评估表达式。您的switch评估可能会匹配多个案例，因此break关键字通常用于在找到匹配项后退出流程。最后，您还可以将表达式作为case值：switch

(20)

{

case

10

+

10:

console.log("value

is

twenty");

break;}但您需要记住，case块的值必须与参数完全匹配switch。使用该语句时最常见的错误之一switch是人们认为case价值被评估为true或false。以下case块在语句中不起作用switch：let

age

=

5;switch

(age)

{

case

age

<

10:

console.log("Value

is

less

than

ten");

break;

case

age

<

20:

console.log("Value

is

less

than

twenty");

break;

default:

console.log("Value

is

twenty

or

more");}if您需要记住和评估之间的差异case：if当测试条件评估为时，块将被执行truecase当测试条件与给定参数完全匹配时，块将被执行switchSwitch语句用例if当你考虑和之间的经验法则switch是：switch仅当代码编写起来很麻烦时才使用if例如，假设您想根据工作日编号编写工作日名称您可以这样写：let

weekdayNumber

=

1;if

(weekdayNumber

===

0)

{

console.log("Sunday");}

else

if

(weekdayNumber

===

1)

{

console.log("Monday");}

else

if

(weekdayNumber

===

2)

{

console.log("Tuesday");}

else

if

(weekdayNumber

===

3)

{

console.log("Wednesday");}

else

if

(weekdayNumber

===

4)

{

console.log("Thursday");}

else

if

(weekdayNumber

===

5)

{

console.log("Friday");}

else

if

(weekdayNumber

===

6)

{

console.log("Saturday");}

else

{

console.log("The

weekday

number

is

invalid");}我不了解你，但上面的代码对我来说确实看起来很麻烦！尽管上面的代码没有任何问题，但您可以使用以下命令使其更漂亮switch：let

weekdayNumber

=

1;switch

(weekdayNumber)

{

case

0:

console.log("Sunday");

break;

case

1:

console.log("Monday");

break;

case

2:

console.log("Tuesday");

break;

case

3:

console.log("Wednesday");

break;

case

4:

console.log("Thursday");

break;

case

5:

console.log("Friday");

break;

case

6:

console.log("Saturday");

break;

default:

console.log("The

weekday

number

is

invalid");}当您有很多条件要评估同一块时，您可能会if使用逻辑运算符AND(

&&)或OR(

||)组合多个条件：let

myFood

=

"Banana";if

(myFood

===

"Banana"

||

myFood

===

"Apple")

{

console.log("Eat

fruits

everyday

to

keep

you

healthy.");}if

(myFood

===

"Chocolate

Cake")

{

console.log("Enjoy

the

sweet

treat.");}您可以使用switch语句替换上面的代码。关键是你需要将多个堆叠cases为一个，如下所示：let

myFood

=

"Banana";switch

(myFood)

{

case

"Banana":

case

"Apple":

console.log("Eat

fruits

everyday

to

keep

you

healthy.");

break;

case

"Chocolate

Cake":

console.log("Enjoy

the

sweet

treat.");

break;}不幸的是，由于评估的工作方式，switch无法替换if使用运算符的多个条件。您需要为此使用该语句。&&caseif练习#5小学根据学生的成绩给予不同的奖励：获得A的学生将获得巧克力获得B的学生将获得一块Cookie获得C的学生将获得糖果对于任何其他值，请打印“无奖励”。创建一个名为的变量grade来存储学生的成绩。输出示例：You

got

an

A,

so

here's

a

Chocolate

for

you!You

got

a

B,

here's

a

Cookie

for

you!You

got

a

C,

there's

room

for

improvement

and

here's

your

Candy!您可以使用theif...else或该switch...case语句。12-JavaScript中的控制流（循环）当您使用JavaScript编写应用程序时，您通常需要编写一段需要重复执行的代码。假设您要编写一个在控制台中打印数字1到10的程序。console.log您可以通过像这样调用10次来完成：console.log(1);console.log(2);console.log(3);console.log(4);console.log(5);//

and

so

on..这是可行的，但是有更好的方法来编写这种重复性任务。循环语句是另一类控制流语句，用于多次执行代码块直到满足特定条件。JavaScript中有两种循环语句：声明for_声明while_让我们学习如何在实践中使用这些语句。for语句您可以使用该for语句并只编写一行代码，而不是重复10次来打印数字1到10，如下所示：for

(let

x

=

0;

x

<

10;

x++)

{

console.log(x);}就这样吧！该for语句后面是括号(

())，其中包含3个表达式：表达式initialization，在其中声明要用作循环条件源的变量。x=1如示例中所示。表达式condition，其中初始化中的变量将根据特定条件进行评估。x<11如示例中所示。表达式arithmetic，其中变量值在每个循环结束时递增或递减。这些表达式由分号(

;)分隔在表达式之后，大括号(

{})将用于创建一个代码块，只要表达式condition返回，JavaScript就会执行该代码块true。您可以通过注意语句结尾的分号(

;)来识别哪个表达式是哪个。for

(

[initialization];

[condition];

[arithmetic

expression])

{

//

As

long

as

condition

returns

true,

//

This

block

will

be

executed

repeatedly}算术表达式可以是自增(

++)或自减(

--)表达式。每次大括号内的代码执行结束时都会运行一次：for

(let

x

=

10;

x

>=

1;

x--)

{

console.log(x);}或者您也可以使用简写算术运算符，例如+=和，-=如下所示：//

for

statement

with

shorthand

arithmetic

expressionfor

(let

x

=

1;

x

<

20;

x

+=

3)

{

console.log(x);}这里，每次执行循环时x都会增加3。循环结束后，JavaScript将继续执行您在正文下方编写的任何代码for：for

(let

x

=

1;

x

<

2;

x++)

{

console.log(x);}console.log("The

for

loop

has

ended");console.log("Continue

code

execution");何时使用for循环当您知道需要执行重复任务多少次时，

for循环非常有用。例如，假设您正在编写一个抛硬币的程序。您需要计算抛掷10次硬币时正面朝上的次数。您可以使用以下方法来完成Math.random：当数字低于0.5您需要增加tails计数器时当数字大于0.5或等于时，您必须递增heads计数器let

heads

=

0;let

tails

=

0;for

(x

=

1;

x

<=

10;

x++)

{

if

(Math.random()

<

0.5)

{

tails++;

}

else

{

heads++;

}}console.log("Tossed

the

coin

ten

times");console.log(`Number

of

heads:

${heads}`);console.log(`Number

of

tails:

${tails}`);上面的示例显示了for循环在何处提供最有效的方法。现在让我们看一个关于抛硬币的替代练习，其中for循环无效：找出需要抛硬币多少次才能使其正面朝上。这一次，你不知道需要抛硬币多少次。这是您需要使用while循环语句的地方，您接下来将要学习它。while语句只要条件计算结果为，语句或循环就用于运行代码while块。whiletrue您可以按如下方式定义循环的条件和语句：while

(condition)

{

statement;}就像for循环一样，while循环用于一遍又一遍地执行一段代码，直到达到所需的条件。在下面的示例中，下面将继续执行语句块，直到条件表达式返回false：let

i

=

0;while

(i

<

6)

{

console.log(`The

value

of

i

=

${i}`);

i++;}这里，只要小于，while循环就会重复打印的值。在每次迭代中，的值都会增加1，直到达到6并终止循环。ii6i请记住，您需要包含一段代码，最终将评估条件变为false，否则while循环将永远执行。下面的例子将导致无限循环：let

i

=

0;while

(i

<

6)

{

console.log(`The

value

of

i

=

${i}`);}因为的值i永远不会改变，所以while循环将永远持续下去！何时使用while循环既然whileand都for可以用于重复执行一段代码，那么什么时候应该使用while循环而不是for？知道何时应该使用的一个简单方法while是当您不知道需要执行代码多少次时。回到抛硬币的例子，有一种情况非常适合循环while：找出需要抛硬币多少次才能使其正面朝上。您还需要显示抛硬币的次数，直到硬币正面朝上：let

flips

=

0;let

isHeads

=

false;while

(!isHeads)

{

flips++;

isHeads

=

Math.random()

<

0.5;}console.log(`It

took

${flips}

flips

to

land

on

heads.`);在这里，该条件isHead=Math.random()<0.5模拟了掷硬币的情况。当结果为时true，表示硬币正面朝上，退出循环。因为在得到数字8之前你无法知道需要循环多少次，所以需要使用循环while而不是循环for。练习#6编写一个程序，使用星号打印半金字塔，*如下所示：***************接下来，打印一个反向半金字塔，如下所示：***************13-JavaScript中的函数函数只是为执行特定任务而编写的一段（或一块）代码。例如，类型转换函数String()用于将另一种类型的数据转换为字符串。我们在前面的章节中学到的各种数组方法console.log()也是函数。但因为这些函数是从对象调用的，所以它们被称为方法。您将在第11章后面了解有关方法的更多信息。现在，只需知道函数和方法本质上是相同的，只是方法是从对象调用的。除了JavaScript提供的内置函数之外，您还可以创建自己的函数。如何创建自己的函数创建函数首先键入function关键字，后跟函数名称、一对圆括号，然后是一对大括号。这是一个例子：function

greet()

{

//

function

body

here

console.log("Hello!");}要调用函数，您需要指定函数名称，后跟括号：greet();

//

Hello!当您调用该函数时，将执行该函数内部的代码。函数参数和参数参数是用于接受调用函数时给出的输入的变量。您可以在函数头中的括号内指定参数。以下示例显示了一个具有一个名为的参数的函数name：function

greet(name)

{

//

function

body}如何name在函数内使用该参数取决于您。您可以在函数内部使用参数，print()如下所示：function

greet(name)

{

console.log(`Hello,

${name}!`);

console.log("Nice

weather

today,

right?");}现在，每当您需要调用该greet()函数时，您都需要传递一个输入来填充name参数。您传递来填充参数的输入称为参数，具体操作方法如下：greet("Peter");调用函数时括号内的“Peter”字符串greet()将作为name参数传递。运行代码以接收此输出：Hello,

Peter!Nice

weather

today,

right?定义函数时可以有多个参数，但需要用逗号分隔每个参数，如下所示：function

greet(name,

weather)

{

console.log(`Hello,

${name}!`);

console.log(`It's

${weather}

today,

right?`);}greet("Nathan",

"rainy");输出：Hello,

Nathan!It's

rainy

today,

right?当在函数头中指定两个参数时，需要传递两个参数。如果您调用该函数而不传递参数，则该值将为undefined。在下一节中，您将学习如何创建具有默认值的参数，这样您就可以调用函数而无需向其传递参数。但现在，我希望您能看到使用参数的便利性。它们通过采用不同的输入值来覆盖函数可