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

本手册的目的是迅速向你介绍JavaScript的基础知识，以便你可以开始编写应

用程序。

它并不包括JavaScript的所有理论和概念，而是只教授语言中最重要的构件。

它包括变量、数据类型、函数、对象、数组和类。你还将学习如何结合它们来

构建小型、可靠的程序。

本教程只关注作为编程语言的JavaScript和使用终端来执行代码。

本教程还包括每个部分的练习，让你有时间练习你所学到的知识，并将这些知

识〃打入“你的大脑。

目录

1-JavaScript简介

为什么要学习JavaScript

JavaScript与Java

2-如何设置您的计算机

如何安装VSCode

如何安装Node.js

3-快速控制台介绍

4-是时候向世界问好了！

5-JavaScript代码结构

声明

评论

执行流程

练习#1

6-JavaScript变量

变量命名

常数变量

var关键字

练习#2

概括

7-JavaScript基本数据类型

JavaScript中的字符串

JavaScript中的数字（整数和浮点数）

JavaScript中的布尔值

JavaScript中未定义

JavaScript中的空值

8-类型转换和强制

类型强制

类型强制规则

为什么应该避免类型强制

9-JavaScript中的运算符

算术运算符

赋值运算符

比较运算符

逻辑运算符

运算符的类型

练习#3

10-JavaScript数组

数组索引位置

数组操作的特殊方法

练习#4

11-JavaScript中的控制流（条件）

if...else语句

switch...case语句

switch语句体

Switch语句用例

练习#5

12-JavaScript中的控制流（循环）

for语句

什么时候使用for循环？

while语句

何时使用while循环？

练习#6

13-JavaScript中的函数

如何创建自己的函数

函数参数和参数

默认参数

默认参数和null

返回语句

变量范围

其余参数

箭头功能

单行和多行箭头函数

不带圆括号的箭头函数

箭头函数没有参数绑定

如何轻松地将普通函数转换为箭头函数

练习#7

14-JavaScript中的对象

如何访问对象值

如何向对象添加新属性

如何修改对象属性

如何删除对象属性

如何检查对象中是否存在属性

练习#8

最后练习：构建一台收银机

结论

解决方案

1-JavaScript简介

JavaScript是由BrendanEich在1995年4月左右创建的。当时，他正在为一

家名为Netscape的公司开发一款浏览器。他被告知，他只有10天时间来设计

和编写一种可以在浏览器上运行的编程语言的原型。

他需要创造一种能够吸引非专业程序员的语言，比如微软的VisualBasico

他只得到了10天的时间，因为网景公司需要发布一个当时与微软竞争的浏览

器。

最初，JavaScript并不像今天这样强大，因为它被设计用来给网页添加交互和

动画。直到2005年，jQuery和AJAX发布后，JavaScript才被用于所有网站。

在执行D0M操作和发送异步请求方面，没有比jQuery和AJAX更容易的选择。

此外，一个活跃的JavaScript开发者社区继续为该库添加新的功能。

然后，谷歌推出了最新的Chrome浏览器，Facebook也开始吸引更多的人进入

互联网。JavaScript开始随着这些互联网巨头的野心而发展。

浏览器开始开发可以在JavaScript中使用的API,JS能够从浏览器中检索IP

地址和地理位置等信息，使互联网公司能够更好地将其网站的功能本地化。

随后，另一项创新的出现，使JavaScript变得更加强大。

一个名为Node,js的服务器端环境于2009年发布，使JavaScript能够像

PHP、Java、Python和Ruby一样在服务器端运行。它还使开发者能够只用

JavaScript来开发全栈网络应用。

今天，JavaScript是一种可以支持网络、桌面和移动应用的语言。

用0'ReillyMedia的创始人Tim0'Reilly的话说：

学习JavaScript曾经意味着你不是一个严肃的开发者。今天，不学习

JavaScript也意味着同样的事情。

现在，对于任何想成为网络开发者的人来说，学习JavaScript是必须的。

现在，学习JavaScript对于那些想成为Web开发人员的人来说至关重要。

为什么要学习JavaScript?

您需要学习并深入理解JavaScript有4个充分的理由：

1.JavaScript是唯一可以在浏览器中运行的语言

2.它很容易学习（但很难掌握）

3.它是制作Web应用程序的必备语言

4.JavaScript开发人员有很多职业机会

学习JavaScript为您提供了成为前端、后端或移动开发人员的巨大机会。

基本上，学习JavaScript是技术职业发展的门户。

JavaScript与Java

最开始，JavaScript实际上被命名为LiveScript。它被重命名为

JavaScript,因为Java是一种非常流行的编程语言。

由于大多数软件开发人员已经熟悉Java,因此JavaScript这个名称被认为有

助于将JavaScript作为一种出色的编程语言进行营销，并吸引了当时开发人

员的兴趣。

需要明确的是，JavaScript和Java是两种完全不同的编程语言。您无需了解

Java即可学习JavaScript（反之亦然）。：）

2-如何设置您的计算机

要使用JavaScript编写程序，您需要安装2个可用于所有操作系统的免费工

具。

第一个要安装的工具是VisualStudioCode。

如何安装VSCode

VisualStudioCode或简称VSCode是一个为编写代码而创建的文本编辑器程

序。除了免费之外，VSCode也是开源的，并且可在所有主要操作系统上使用。

您可以在Windows>macOS和Linux上使用VSCode,因此如果您的计算机上

没有文本编辑器，我建议您在此处安装VSCodeo

现在您已经有了一个文本编辑器来编写JavaScript代码，您还需要一个软件

来运行JavaScript代码。接下来让我们安装Node.js0

如何安装Node.js

要在浏览器外部运行JavaScript,您需要安装Node,js,它本质上是一个

JavaScript运行器。

只需访问Node,js网站(nodejs.org)并下载适合您计算机的最新LTS版

本。下载完成后，将其安装到您的系统上。

您需要使用控制台运行Node,js,因此打开命令行或终端应用程序并运行以下

命令：

node-v

此命令会将新安装的Node,js的版本输出到控制台。

3-快速控制台介绍

控制台是一个基于文本的界面，可用于在计算机上键入和运行命令。在

Windows上，它称为命令行。在macOS和Linux上，它称为终端。

您不会使用控制台中可用的所有命令。事实上，您只需要了解7个基本命令即

可帮助您运行JavaScript代码。

首先，打开计算机上的控制台程序并输入命令pwd：

pwd

这是您用来查找终端当前所在目录的命令。pwd是打印工作目录的缩写。

要更改工作目录，您需要运行该cd命令。

下面是移动到子目录的示例：

cddirectory_name/directory_name

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

cd..

要向上移动多个目录，请使用

要清除控制台上以前的命令和输出，请使用以下clear命令：

clear

要打印当前目录中的文件和目录列表，请运行以下1s命令：

1s

要创建新文件，请使用以下touch命令，后跟文件名和扩展名:

touchindex,js

上面的命令将创建一个index,js以当前工作目录命名的新JavaScript文件。

要创建新目录，请使用mkdir命令后跟目录名称：

mkdirmy_project

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

nodeindex.js

您将在同一控制台中看到代码的所有输出。

您可以使用控制台做很多事情，但这7个命令就足够了，因为我们只需要它来

运行JavaScript代码。

接下来，让我们运行您的第一个JavaScript程序！

4-是时候向世界问好了！

是时候使用Node运行您的第一个JavaScript程序了。

从控制台中，创建一个index.js使用touch以下命令命名的新JavaScript文

件。

touchindex,js

接下来，使用VSCode打开该文件并将以下代码行写入该文件中：

console.log（，/HelloWorld!，z）;

返回控制台，使用Node运行此脚本：

nodeindex.js

控制台应该执行该index,js文件并打印“Hell。World!”。

您刚刚使用Node,js运行了第一个JavaScript程序。出色的！

当您运行该nodeindexes命令时，Node.js程序开始从上到下逐行读取脚

本。

程序node发现您写了单词，console.log后跟括号0，因此它知道您正在指示

它打印某些内容。然后程序读取您在括号中输入的内容并将其打印在控制台

上。

在VSCode或其他文本编辑器程序中，您应该看到代码的不同部分以不同的颜

色突出显示。这是文本编辑器的一项功能，称为语法突出显示，它对于帮助您

区分代码的不同部分非常有用。

关键字log是一个函数，因此它以一种颜色突出显示，而括号中的单词则具有

另一种颜色。

函数只是用于执行特定任务的一段代码。该log()函数用于“打印”您放在括

号内的任何内容。

另一方面，console关键字是一个对象，它是一个独立的属性，可以访问某些

功能。

稍后我们将了解有关函数和对象的更多信息。现在，只需记住console.log。

关键字用于将内容打印到控制台即可。

接下来，我们就开始学习JavaScript代码结构。

5-JavaScript代码结构

计算机程序是写在文本文件中的一系列代码段。然后，这些文本文件通过专门

为运行代码而设计的软件来运行。您之前下载的Node.js软件是处理

JavaScript代码的工具。

在进一步讨论之前，让我们先了解一下代码的结构。

声明

语句是计算机运行的一条指令。把它想象成一个句子，但是对于计算机来说。

我们可以使用分号结束语句，；就像我们可以使用点结束句子一样.

您可以在一行中编写多个语句，但约定是每行编写一个语句：

//Thisishardtoreadconsole,log("HelloWorld!z/);console.Io

g(TmlearningJavaScript");"Nowit,sbetterconsole.logC^Hell

oWorld!7");console.log(zzTmlearningJavaScript^);

每个语句都是执行代码的软件需要执行的某些操作的表达式。

评论

在编程中，注释是我们用来传达文件中编写的代码上下文的文本。

要在JavaScript中编写注释，您需要〃在注释前添加两个正斜杠，如下所

示：

//Thisisacomment//Thisisalsoacomment//Belowprin

ttwolinesofstatementsconsole,log("HelloWorld!/?);console,log

(TmlearningJavaScript");

语言处理器会忽略注释，因此您可以使用注释来禁用某些代码，而不必删除该

代码。

下面的代码显示了如何禁用第二个打印语句：

console.log(，/HelloWorld!");〃console,log(TmlearningJavaScri

pt");

执行流程

Node,js等语言处理器以自上而下的方法执行语句。第一行写入的语句将在第

二行之前执行，然后继续执行到最后一行：

console.log(z/HelloWorld!");console,log(TmlearningJavaScript")

;//Printingnumbersconsole,log(1);console,log(2);console,log(3);

输出：

HelloWorld!TmlearningJavaScriptl23

如果你想在文本之前打印数字，那么你需要将相应的console,log()行移到顶

部。

练习#1

尝试在控制台上打印您的姓名、年龄和职业。

输出如下所示：

JohnDoel9Student

现在你已经了解了JavaScript的基本代码结构，接下来我们继续学习变量。

6-JavaScript变量

在解释变量是什么之前，我希望您更改在index.js文件中编写的代码。

更改该文件中的代码如下:

letmessage“HelloWorld!zzconsole.log(message)

接下来，使用命令运行代码nodeindex.jso您将看到与编写“Hell。

World!”时相同的输出。直接在console.log()函数内部发送消息。怎么会这

样？

这是因为上面代码中写的消息是一个变量。

在编程中，变量只是您赋予值的名称，以便您稍后可以访问该值。您可以将变

量视为可以标记为某个值的标签，因此您可以使用该标签来引用该值。

要声明变量，您需要键入关键字，let后跟变量名称。

代码中的第一行告诉JavaScript将message变量与值关联起来Hello

World!：

letmessage=z/HelloWorld!”

在第二行中，JavaScript被指示打印的值message,而这正是它所做的。

您可以通过重新分配另一个值来更改变量的值，如下所示：

message="HelloWorld!Sprint(message)message="Niceweather!z/

print(message)

运行该文件，您将看到打印的两行输出：

HelloWorld!Niceweather!

变量用于引用数据，以便您可以在程序中多次使用相同的数据。

接下来，让我们看看JavaScript中变量命名的一些规则。

变量命名

JavaScript有一些命名规则，您需要了解这些规则以避免命名错误。

变量名只能包含字母、数字和下划线(_)。这意味着您可以将变量命名为

message,message_l,message_2。

变量名称的第一个字符不能是数字。message」没关系。l_message不是。

您不能使用保留关键字，因为consoleJavaScript使用它们来执行某些操作。

JavaScript使用了许多其他关键字，您将在以下部分中了解这些关键字，例如

if、for和while。

变量名称区分大小写，这意味着Message、MESSAGE、和message可用于创建

三个不同的变量。但当然，我不建议使用相似的名称，因为这会引起混乱。

有时，您需要多个单词来声明变量名。JavaScript有两种全球通用的命名约

定：

1.camelCase

2.snake_case

驼峰式命名约定是使用大写字母作为后续单词的第一个字符。这是一个例子：

letmyAwesomeVariable

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

letmy_awesome_variable

两者都是可接受的命名约定，但您应该在代码中坚持其中一种以避免混淆。

常数变量

有时您需要在变量中存储永远不会改变的值。

常量变量是在程序运行期间其值不会改变的变量。在其他编程语言中，更改常

量的值会产生错误。

在JavaScript中，常量变量是使用const关键字声明的。

下面展示了如何在JavaScript中声明2个常量：

constFILE_SIZE_LIMIT=2000constMAX_SPEED=300

常量的命名约定是全部使用大写字母，但也可以使用小写字母。大写只是一个

标准，让常量更加突出。

var关键字

该

var关键字用于声明具有全局作用域的变量。在JavaScript于2015年发

布

newlet和const关键字之前，该关键字是唯一可以用来声明变量的关键

字

从今天开始，您应该var尽可能避免使用，因为var可能会引入错误，而您可

以通过使用该let关键字来避免。

为了向您展示我的意思，请考虑以下示例:

if(true){

varname=zzNathanz/;}console,log(name)

上面的代码可以name很好地打印变量，但实际上不应该，因为变量name是在

if块内声明的。

这是因为使用var关键字声明的任何变量都可以从任何地方访问。该变量的范

围是全局的。

另一方面，let关键字具有块作用域，这意味着该变量只能从该块及其所有子

块访问。

但为什么要费心确定变量的范围呢？这是因为，当您有数百或数千行代码时，

跟踪由于全局变量而发生的错误可能会变得令人沮丧。

软件开发中有一个原则称为“最少暴露原则”，这意味着您不会暴露程序中不

必要的任何部分。

对变量进行块作用域可确保变量仅在需要该变量的代码库部分中公开和访问。

使用关键字声明的变量let与使用关键字声明的变量相同，var但范围级别除

外。

if(true){

letname=/，Nathan，/;}console,log(name)//Error:name

isnotdefined

这也意味着您现在可以使用var、let和const关键字来声明变量。使用哪一

个？

一般来说，你可以用constfirst声明一个变量。当您编写应用程序并意识到需

要更改变量分配时，可以将声明更改为let.

如果你从一开始就知道变量的值会改变，那么你可以let立即使用。只是今天

不要使用var,否则人们可能会生你的气。

练习#2

编写一个包含三个变量的程序，每个变量具有以下值：

1.第一个变量包含您的名字

2.第二个变量包含您的年龄

3.第三个变量包含您的职业

然后使用该方法打印变量console.log()。这是示例输出:

JohnDoeStudentl9

概括

如何使用变量来编写一个程序来完成您想要它做的事情是作为程序员可以拥有

的最重要的技能之一。

但在详细了解如何使用变量之前，让我们先了解一下JavaScript中的数据类

型。

7-JavaScript基本数据类型

数据类型只是编程语言已知的不同数据类型的定义。

数据类型包含有关可以使用该数据执行哪些操作和不能执行哪些操作的规范。

向您展示一个对大脑友好的例子，我相信您同意这一点2+2=4?

嗯，JavaScript也同意这一点：

console,log(2+2);//Output:4

但是，如果您尝试添加带有字母的数字(如下所示)怎么办？

console.log(2+“ABC");

输出：

2ABC

将数字和字母添加在一起将导致JavaScript将这些值连接或连接在一起。

在本节中，您将学习JavaScript知道的基本数据类型：

弦

乐

数

字

布

尔

值

无

效

的

不

明

确

的

您还将看到这些不同类型如何对运算符做出反应，+如上例所示。

首先，我们从字符串开始。

JavaScript中的字符串

字符串只是定义为一系列字符的数据。

console.log。您之前在调用函数打印消息时已经看到过字符串数据的示例：

letmessage="Hello,Sunshine!，z;console,log(message);//Hello

,Sunshine!

字符串需要用引号引起来。您可以使用双引号或单引号，但它们必须匹配。

当您使用不同的引号时，会出现错误，如下所示：

//Invalidorunexpectedtokenletmessage="Hello';

您可以使用加号将两个或多个字符串连接为一个+。不要忘记在下一个字符串之

前添加空格，否则您将得到一个没有空格的字符串！

letmessage="Hello〃+“and〃+“Goodbye!〃；console,log(mes

sage);//Output:HelloandGoodbye!

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

letmessage="Hello,Dave!z，;console.log(，zThemessageis:〃+

message);//Output:Themessageis:Hello,Dave!

当您在一个句子中有多个字符串到console,log时，这一点特别有用，如下所

示：

letname=〃John〃；lettopic="JavaScript”;console,log(name+

〃islearning〃+topic+〃today");〃Output:Johnis

learningJavaScripttoday

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

所示：

letname="John";lettopic=z，JavaScriptz，;console,log(${name}

islearning${topic}today');//Output:JohnislearningJa

vaScripttoday

要使用模板字符串格式，您需要使用反引号(')字符而不是引号来包裹字符串。

使用美元符号和大括号将变量嵌入到字符串中，如中所示${variable}。

这样，JavaScript就知道您正在引用字符串内的变量。

当您要在一行中打印多个字符串时，模板字符串格式会更方便，因为您不必使

用引号和连接来断开字符串。

接下来，字符串也可以表示数字。您可以将数字括在引号中，如下所示：

letscore="10"+"30";console,log(score);〃Output:1030

当您用符号连接两个字符串数字时+,JavaScript将连接这两个数字而不是执

行算术加法。

这就是字符串在JavaScript中的工作原理。接下来我们看一下数字。

JavaScript中的数字(整数和浮点数)

数字数据类型代表不同类型的数字。JavaScript中有两种类型的数字：

・整数

・花车

整数是没有小数和分数的整数。下面，您将看到两个整数x和的示例y：

letx=1;lety=2;console.log(x+y);//Output:3

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

letf=1.2;letz=2.35;console.log(f+z);//Output:3.55

要创建浮点数，您需要编写一个数字并用于.定义小数值。

使用数字类型，您可以执行算术运算，例如加法+、减法-、除法/和乘法，*就

像使用计算器一样。

JavaScript中的布尔值

trueBoolean是一种表示和值的类型false。

您可以将布尔值视为只能处于两个位置之一的电灯开关：开或关。

编程语言中的布尔值也是如此。当JavaScript需要做出决定时使用它们：向

左还是向右？对还是错？

以下是在JavaScript中创建布尔值的方法：

leton=true;letoff=false;

当您需要使用控制流做出决策时，经常使用此数据类型。您将在第9节中看到

为什么布尔值在开发程序时非常有用。

JavaScript中未定义

未定义是JavaScript中的一种数据类型，用于表示尚未分配任何值的变量。

每当您声明变量而不分配任何值时，该undefined值都会分配给该变量。例

如：

letfirst_name;console.log(first_name);//undefined

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

letlast_name=undefined;

但通常不建议这样做，因为JavaScript有另一个值叫做null,用于将变量标

记为空。

JavaScript中的空值

该null值是一种特殊的数据类型，表示空值或未知值。以下是将变量指定为

null的方法：

letfirst_name=null;

上面的代码意味着的值为first_name空或未知。

此时，您可能会想undefined和之间有什么区别null?他们似乎有类似的目

的。

你是对的。和undefined都是null不代表任何内容的值，而其他编程语言通常

只有一个，那就是null。

在JavaScript中，undefined当声明变量时，该值被保留为默认值，而null

意味着您故意为该变量分配一个“空”值。

当您稍后了解第11节中的函数时，这种细微的差异将会发挥作用。

现在,请记住JavaScript将其视为undefined“默认”空值和null“有意”

空值。

8-类型转换和强制

有时，您可能希望将一种数据类型转换为另一种数据类型，以便程序按预期运

行。

例如，假设您需要将字符串转换为整数，以便可以在数字之间执行加法。

如果您将其中一个数字作为字符串，JavaScript会将它们连接在一起而不是相

加：

letx="7";lety=5;console.log(x+y);//75

要正确添加两个数字，您需要将x变量转换为整数。

将数据从一种类型更改为另一种类型也称为类型转换或类型转换。有3个函数

经常用于进行类型转换：

•Number()

•String()

•Boolean()

顾名思义，这些类型转换函数将尝试将您在括号内指定的任何值转换为同名类

型。

要将字符串转换为整数，可以使用以下int()函数：

letx="1";lety=5;//Convertxtointegerx=Number(x

);console.log(x+y);//12

另一方面，该String。函数将另一种类型的值转换为字符串。如果你输入

String(true),那么你会得到"true"。

传递与函数相同类型的值没有任何效果。它只会返回相同的值。

类型强制

在JavaScript中，类型强制是一种将一种类型的值隐式转换为另一种类型的

过程。

这是由JavaScript自动完成的，因此您的代码不会导致错误。但正如您将在

本节中看到的，类型强制实际上可能会导致程序出现不良行为。

让我们考虑一下在JavaScript中执行anumber和a之间的加法时会发生什

么：string

console,log(1+"1”);

正如您在上一节中所见，JavaScript会将数字视为字符串并将两个字母连接为

as而11不是将它们相加(1+1=2)

但您需要知道其他编程语言不会以相同的方式响应。

Ruby或Python等编程语言将通过停止程序并给出错误作为反馈来做出响应。

它将响应类似“无法在数字和字符串之间执行加法”的内容。

但JavaScript会看到这一点并说：“我无法按原样执行您请求的操作，但如

果将数字1转换为a我可以执行此操作string,所以我会这样做。”

这正是类型强制。JavaScript注意到它不知道如何执行您的代码，但它不会停

止程序并返回错误。

相反，它会在不通知您的情况下更改其中一个值的数据类型。

虽然类型强制不会导致任何错误，但输出实际上也是您不想要的。

类型强制规则

类型强制规则从来没有在任何地方明确说明过，但我自己通过尝试各种愚蠢的

代码确实找到了一些规则。

看来JavaScriptstring在发现不同的数据类型时会首先将数据类型转换为：

1+"1〃//,2]+"1"//"l,21"true+"1"//"true

1”

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

numeric1：

{a:1}++{a:1}//[objectObject]

“true+{a:1}//，/true[objectObject]”{a:1}+1/

/1

JavaScript可以在布尔类型和数值类型之间进行计算，因为布尔值true和隐

式具有和false的数值：10

true+1//1+1=Ifalse+1//0+1=1[1,2]+1//”

1,21〃

类型强制总是隐式执行的。当您将值分配为变量时，变量类型在操作之外永远

不会改变：

letmyNumber=1;console,log(myNumber+T);//printsllcon

sole,log(myNumber);//stillprintsnumber1andnotstring

您可以尝试自己找到更多内容，但希望您现在已经了解强制转换是什么类型以

及它是如何工作的。

为什么应该避免类型强制

在谈论类型强制时，JavaScript开发人员通常分为两个阵营:

・那些认为这是一个功能的人

・那些认为这是一个错误的人

如果您问我，我建议您始终避免在代码中使用类型强制。

原因是我从未发现解决方案需要类型强制的问题，并且当我需要将一种类型转

换为另一种类型时，最好明确地这样做：

letprice="50";lettax=5;lettotalPrice=Number(price)

+Number(tax);console,log(totalPrice);

使用显式类型转换函数(例如Number。和)String。将使您的代码清晰透

明。您无需猜测程序中所需的正确数据类型。

类型强制是JavaScript中可能会让初学者感到困惑的独特功能之一，因此最

好尽早弄清楚。

接下来，我们将学习JavaScript运算符。

9-JavaScript中的运算符

顾名思义，运算符是可用于对数据执行操作的符号。

+您已经看到了一些使用加号运算符连接多个字符串并将两个数字相加的示例。

当然，正如您将在本节中发现的那样，JavaScript有多个运算符。

由于您之前已经了解了数据类型和转换，因此学习运算符应该相对容易。

算术运算符

算术运算符用于执行加法和减法等数学运算。

这些运算符经常与数字数据类型一起使用。这是一个例子：

console.log(10-3);//7console.log(2+4);//6

JavaScript中总共有8个算术运算符：

姓名操作示例意义添加x+y返回两个操作数之间的和减法x-y返回两个操

作数之间的差乘法x*y返回两个操作数之间的乘法求事x**y返回左操作数

的右操作数次方的值分配x/y返回左操作数除以右操作数的值余x%y返回

左操作数除以右操作数后的余数增量x++返回操作数加一递减X一返回操作数减

这些运算符非常简单，因此您可以自己尝试。

正如您在上一节中所看到的，该+运算符还可以用于字符串数据以将多个字符串

合并为一个：

letmessage="Hello"+z/human!zz;console,log(message);//He

llohuman!

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

值：

letsum="Hi"+89;console,log(sum);//Hi89

对字符串使用任何其他算术运算符都会导致JavaScript返回一个NaN值。

赋值运算符

下一个要学习的运算符是赋值运算符，它由等号表示=。

在JavaScript中，赋值运算符用于将数据或值分配给变量。

您之前已经看过一些使用赋值运算符的示例，所以这里有一个提醒：

//Assignthestringvalue'Hello'tothe'message'variable

letmessage="Hello”;〃AssigntheBooleanvaluetruetot

he'on'variableleton=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);//truecons

ole.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);//fals

econsole,log(true==1);//trueconsole.log(true===1);//f

alse

您应该使用严格的比较运算符，除非您有特定的理由不这样做。

逻辑运算符

逻辑运算符用于检查一个或多个表达式的结果是否为True或False。

JavaScript具有三个逻辑运算符:

姓名操作示例意义逻辑与X&&ytrue如果所有操作数均为则返回true,否则

返回false逻辑或x||ytrue如果操作数之一为则返回true,否则返回

false逻辑非!x反转结果：返回trueiffalse,反之亦然

这些运算符只能返回布尔值。例如，您可以确定“7是否大于2”和“5是否大

于4”：

console,log(7>2&&.5>4);//true

这些逻辑运算符遵循数理逻辑定律：

1.&&AND运算符-如果有任何表达式返回false,则结果为false

2.||0R运算符-如果有任何表达式返回true,则结果为true

3.!N0T运算符-对表达式求反，返回相反值。

我们来做点运动吧。尝试在您的计算机上运行这些语句。你能猜出结果吗？

console,log(true&&false);console,log(false|false);console.Io

g(!true);

当您需要断言代码中满足特定要求时，这些逻辑运算符将派上用场。

typeof

JavaScript允许您使用运算符检查数据类型typeof。要使用该运算符，您需

要在指定数据之前调用它：

letx=5;console,log(typeofx)//'number'console,log(typeof

“Nathan")//"string'console,log(typeoftrue)//'boolean'

该typeof运算符以字符串形式返回数据类型。“数字”类型代表整数和浮点类

型，字符串和布尔值代表它们各自的类型。

练习#3

猜猜这些运算符的实际结果：

console,log(19%3);console,log(10==3);console,log(10!=="10

zz);console,log(2<"10");console.log("5">2);console.log((false

&&true)||false);

10-JavaScript数组

数组是一种对象数据类型，可用于保存多个值。数组可以是字符串、数字、布

尔值、对象或它们的组合的列表。

要创建数组，您需要使用方括号口并使用逗号分隔各个项目。

创建字符串列表的方法如下：

letbirds=VOwl','Eagle','Parrot?'Falcon'];

您可以将数组视为项目列表，每个项目都存储在一个储物柜隔间中:

ILLUS

letbirds=。

T

'Owl'

编辑

您还可以声明一个没有任何值的空数组：

letbirds=[];

数组还可以包含如下值的混合：

letmixedArray=["Bird",true,10,5.17]

上面的数组包含一个字符串、一个布尔值、一个整数和一个浮点数。

数组索引位置

JavaScript会记住数组中元素的位置。元素的位置也称为索引号。

回到储物柜的例子，您可以将索引号视为储物柜号。索引号从0以下开始:

ARRA

o

J

letbirds=。

?

'Owl'

编辑

[x]要访问或更改数组的值，您需要在数组名称旁边添加方括号符号，其中X是

该元素的索引号。这是一个例子：

//AccessthefirstelementinthearraymyArray[0];//Access

thesecondelementinthearraymyArray[1];

假设您想从数组中打印字符串“Owl”birdso以下是您可以如何做到这一

点。

letbirds=['Owl','Eagle','Parrot',,Falcon，];console.log(bi

rds[0]);//Owlconsole,log(birds[1]);//Eagle

就这样吧。您需要键入数组的名称，然后键入用方括号括起来的索引号。

您还可以使用赋值运算符将新值分配给特定索引。

让我们将"Parrot"替换为"Vulture"：

letbirds=['Owl','Eagle',5Parrot*,'Falcon'];birds[2]='

Vulture，;console,log(birds);//['Owl','Eagle','Vulture','Falco

n]

由于数组索引从零开始，因此值“Parrot”存储在索引2而不是3处。

数组操作的特殊方法

由于数组是一个对象，因此您可以调用JavaScript提供的方法来操作数组

值。

例如，您可以使用该push。方法将一个项目添加到数组的末尾：

letbirds=['Owl',JEagle，];birds.push(，Sparrow，);console,log(bi

rds);//['Owl','Eagle','Sparrow']

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

letbirds=['Owl','Eagle',JSparrow，];birds.popO;console.log(

birds);//['Owl','Eagle']

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

letfishes=['Salmon','Goldfish','Tuna'];fishes,unshift('Sard

ine，);console.log(fishes);//['Sardine','Salmon','Goldfish','T

una，]

另一方面，该shift。方法可用于从索引0中删除项目：

letfishes=['Salmon",'Goldfish",,Tuna'];fishes,shift();conso

le.log(fishes);//[,Goldfish','Tuna']

该indexOf()方法可用于查找并返回数组中项目的索引。

-1当在数组中找不到该项目时，该方法将返回：

letfishes=['Salmon",'Goldfish","Tuna'];letpos=fishes.

indexOfCTuna");console,log(pos);//2

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

letfishes=[,Salmon",'Goldfish','Tuna)];console,log(fishes.1

ength);//3

请注意，我们不会在length上面的关键字旁边添加括号。这是因为length是

数组对象的属性而不是方法。

我们将在接下来的教程中了解有关对象的更多信息。

练习#4

创建一个名为colors包含“红色”、“绿色”和“蓝色”颜色的数组。

首先，在数组的最后一个索引后添加“黑色”颜色。然后打印数组。

接下来，删除值“红色”并交换“绿色”和“蓝色”的位置。打印数组。

最后，在数组的第一个索引上添加颜色“黄色”，然后打印数组。

结果输出如下：

['red",'green",'blue",'black']['blue",'green",'black)

][,yellow','blue",'green','black']

您需要使用本节中介绍的方法修改原始数组。

11-JavaScript中的控制流(条件)

到目前为止，您编写的JavaScript代码都是从上到下逐行执行的。但是，如

果您只想在满足特定条件时运行某些代码行怎么办？

计算机程序通常需要考虑程序执行期间可能出现的许多不同条件。

这类似于人类在生活中做出决定的方式。例如，您有钱去日本度假吗？如果是

的话，就去吧。如果没有，那就多存点钱吧！

这就是控制流的用武之地。控制流是编程语言中的一项功能，允许您根据可能

出现的不同条件有选择地运行特定代码。

使用控制流允许您根据程序中存在的条件定义程序可以采用的多个路径。

JavaScript中常用的控制流有两种类型：条件和循环。

本节将重点介绍条件语句，例如：

1.if...else陈述

2.switch...case陈述

您将在下一节中了解循环语句。

if...else语句

该if语句允许您创建一个仅在满足特定条件时运行的程序。

该if语句的语法如下：

if(condition){

//codetoexecuteifconditionistrue}

让我们看一个例子。假设你想去度假，需要5000美元。

使用该if语句，您可以通过以下方式检查您是否有足够的余额：

letbalance=7000;if(balance>5000){

console.log(z，Youhavethemoneyforthistrip.Let,sgo!

)；)

运行上面的代码一次，您将看到终端上打印的字符串。

balance现在更改to的值3000,您将不会得到任何响应。

发生这种情况是因为语句内的代码if仅在条件为时才执行trueo

在该if语句之后，您可以在其下面再编写一行代码，如下所示：

letbalance=7000;if(balance>5000){

console.log(z/Youhavethemoneyforthistrip.Let'sgo!

);}console.log(//Theend!”);

console.log()无论您为变量分配什么值，上面的第二个调用都会执行

balance0

如果您希望它仅在满足条件时执行if,则也将该行放在大括号内：

letbalance=7000;if(balance>5000){

console,log("Youhavethemoneyforthistrip.Let,sgo!”

)；

console.log(，zTheend!");}

接下来，假设您只需要在if不满足语句条件时运行一些代码。

这就是else语句的用武之地。语句仅在语句未满足else时才用于运行代码。

if

这是一个例子：

letbalance=7000;if(balance>5000){

console.log(，zYouhavethemoneyforthistrip.Let,sgo!”

)；}else(

console.log(z，Sorry,notenoughmoney.Savemore!，z);}console,

log("Theend!");

现在将的值更改balance为小于5000,您将触发else示例中的块。

JavaScript还具有elseif语句，允许您编写另一个条件来检查if语句条件

是否不满足。

考虑下面的例子：

letbalance=7000;if(balance>5000){

console.log(，zYouhavethemoneyforthistrip.Let*sgo!”

);}elseif(balance>3000){

console,log("Youonlyhaveenoughmoneyforastaycation")

;}else{

console.log(z，Sorry,notenoughmoney.Savemore!/z);}console,

log("Theend!，z);

当balance金额小于时5000,elseif报表将检查是否balance大于3000o如

果是这样，程序将继续建议您在家度假。

您可以根据需要编写任意数量的elseif语句，并且仅当前一条语句不满足时

才会执行每一条语句。

这些语句一起if..else..elseif允许您根据程序面临的条件执行不同的代码

块。

switch...case语句

该switch语句是核心JavaScript语法的一部分，可让您控制代码的执行流

程。

它通常被认为是语句的替代方案if..else,可以为您提供更具可读性的代码，

尤其是当您有许多不同的条件需要评估时。

这是工作声明的示例switch。我将解释下面的代码：

letage=15;switch(age){

case10:

console.log(z，Ageis10〃)；

break;

case20:

console.log(〃Ageis20〃)；

break;

default:

console,log(z，Ageisneither10or20〃)；}

首先，您需要将要由语句计算的表达式传递switch到括号中。在示例中，age

变量作为求值的参数传递。

然后，您需要编写语句将尝试与表达式匹配case的值。switch该case值后面

紧跟一个冒号(:)以标记case块的开始：

case"apple〃：

case请记住要与表达式匹配的值的数据类型。如果你想匹配astring,那么

你需要放置astringo当您有a作为参数但为case放置a时，switch语

句不会执行类型强制：numberstring

switch(1){

case1:

console,log("HelloWorld!z，);

break;}

数字表达式与字符串大小写值不匹配，因此JavaScript不会将任何内容记录

到控制台。

布尔值也会发生同样的情况。该数字1不会被强制，因为true并且该数字0不

会被强制为false：

switch(0){

casetrue:

console,log("HelloTrue!”);

break;

casefalse:

console,log(，zBonjourFalse!，z);

break;

default:

console.logC^Nomatchingcase");}

switch语句体

语句主体switch由三个关键字组成：

•case用于启动case块的关键字

•break用于停止switch语句运行下一个的关键字case

•default未找到匹配时运行一段代码的关键字case。

当您的表达式找到匹配的Incase,JavaScript将执行该case语句后面的代

码，直到找到break关键字。如果省略关键字break,则代码将继续执行到下

一个块。

看一下下面的例子：

switch(0){

case1:

console.log("Valueisone");

case0:

console.log("Valueiszero");

default:

console.log(z，Nomatchingcase");}

当您执行上面的代码时，JavaScript将打印以下日志：

>“Valueiszero〃>“Nomatchingcase”

这是因为如果没有break关键字，switch即使已经找到匹配的情况，也会继续

根据剩余的情况评估表达式。

您的switch评估可能会匹配多个案例，因此break关键字通常用于在找到匹

配项后退出流程。

最后，您还可以将表达式作为case值：

switch(20){

case10+10:

console.log("valueistwenty");

break;}

但您需要记住，case块的值必须与参数完全匹配switcho

使用该语句时最常见的错误之一switch是人们认为case价值被评估为true或

false。

以下case块在语句中不起作用switch：

letage=5;switch(age){

caseage<10:

console.log(z，Valueislessthanten");

break;

caseage<20:

console,log("Valueislessthantwenty");

break;

default:

console.log(z，Valueistwentyormore");}

if您需要记住和评估之间的差异case：

•if当测试条件评估为时，块将被执行true

•case当测试条件与给定参数完全匹配时，块将被执行switch

Switch语句用例

if当你考虑和之间的经验法则switch是：

switch仅当代码编写起来很麻烦时才使用if

例如，假设您想根据工作日编号编写工作日名称

您可以这样写:

letweekdayNumber=1;if(weekdayNumber===0){

console.log(，，Sundayz，);}elseif(weekdayNumber===1){

console.log(，，Mondayz，);}elseif(weekdayNumber===2){

console,log("Tuesday");}elseif(weekdayNumber===3){

console,log("Wednesday");}elseif(weekdayNumb