第三章 JavaScript 基础知识

JavaScript

解释JavaScript的基础知识，例如如何使用JavaScript编写程序以及如何编写注释。

目录

3-1 编写 JavaScript 代码的基本规则
3-2 编写评论
3-3 JavaScript 保留字
3-4 数据类型
3-5 包装器对象和原始类型
3-6 启用Strict模式
3-7 认为正确的值（true）和认为错误的值（false)
3-8 类型转换规则（字符串、数字、布尔值）
3-9 JavaScript 和 ECMAScript 之间的区别

3-1 编写 JavaScript 代码的基本规则

在使用 JavaScript 编写代码时，我们将解释一些基础知识，例如区分大小写、处理空格和换行符以及分隔代码语句。

区分大小写

JavaScript 显然区分大小写。命名变量或使用已定义的保留字时，必须正确拼写大小写。

请参见下面的示例。

let name = 'Yuhua';
console.log(name);
>> Yuhua

console.log(Name);
>> Uncaught ReferenceError: Name is not defined

给变量名赋值后，输出变量名的值和变量Name的值到控制台。变量名称和变量名称是不同的变量，因为 JavaScript 区分大小写。因此，console.log(Name) 将导致错误，因为未定义变量 Name。

处理代码中的空格和换行符

为执行某些处理而编写的代码称为“语句”，可以在语句中自由插入空格、制表符和换行符等空白字符。（当然，在单词中插入空格和换行符会改变意思，所以单词之间和整个句子前后只有空格）。

例如，可以如下在句子的开头插入空格和制表符以缩进它们，或者在中间打断长句。

let num = 10;
    let num = 10;
let num  =   10;
let num =
10;

以上两条都被视为同一条语句。但是，不要在单词中间放置空格，如下所示。

let nu m = 10;
>> Uncaught SyntaxError: Unexpected identifier

在其他编程语言中，换行符表示断句，有的将缩进视为块，但在 JavaScript 中，换行符可以随意插入。

句子分隔符

JavaScript 使用分号 (;) 作为语句分隔符。您也可以省略分号。以下两行在 JavaScript 中都没有错。

let num1 = 10;
let num2 = 10

在JavaScript中，它自动判断from where to where是一个句子，并自动处理，就好像有一个分号（;）作为分隔符一样。如前所述，代码中是否有空格或换行符并不重要。

    let num1 = 10
let num2 = 
20

但是，如果让 JavaScript 决定何时断句，它可能会在意想不到的位置断句，从而导致难以理解的错误。此外，在查看代码时，可能很难分辨一个句子从哪里到哪里结束。在这种情况下，建议显式编写分号。

let num = 
20;

也可以使用分号将多个语句放在一行中。

let num1 = 10;let num2 = 20;

3-2 编写评论

可以在使用 JavaScript 编写的程序中留下评论作为备忘录。注释在程序执行过程中被忽略，对程序没有影响。在这里，我将解释如何用 JavaScript 编写注释。

JavaScript 中的注释

使用以下格式之一在 JavaScript 中编写注释：

//单行注释
/* 单行注释  */
跨多行
评论
*/

如果“//”出现在 JavaScript 代码中，则从“//”到行尾的所有内容都将被视为注释并在运行时被忽略。可以写在行首，也可以写在代码之后。

<script>
// author Yuhua
let num = 10;
num = num + 5;  // 变量值加 5
</script>

如果“/*”出现在脚本中，则“*/”之前的所有字符都将被视为注释并在运行时被忽略。可以写在行首，也可以写在代码之后。

<script>
/* author Yuhua */
let num = 10;
num = num + 5;  /* 变量值加 5 */
</script>

由于从“/*”到“*/”的所有内容都是注释，因此您可以将注释写在多行上。

<script>
 /*
 * 创建日期 202x 年 8 月 8 日
 * 部门发展部
 * author Yuhua
 */
let num = 10;
num = num + 5;  /* 変数の値に5を加算 */
</script>

两种方法都具有与评论相同的功能，因此请使用更容易使用的方法。

HTML 中的注释

尽管与 JavaScript 无关，但以下格式用于在 HTML 页面中编写注释。

<!-- 评论-->

HTML ページの中で JavaScript を記述する場合などに、コメントの書式が異なりますのでご注意ください。

<!--  示例代码 -->
<p>
JavaScrpt のサンプルです。
</p>

<script>
let num = 10;
num = num + 5; // 变量值加 5
</script>

3-3 JavaScript 保留字

在 JavaScript 语言规范中具有特殊含义的词被注册为保留词（实际上，它们是在 ECMAScript 中定义的）。例如，如果在描述条件分支时使用是保留字。JavaScript 保留字不能用作变量名或函数名的标识符。这是 JavaScript 中保留字的列表。

保留字列表（ECMAScript 2020）

ECMAScript 2020 (ES11) 中定义的保留字是：（原文见 11.6.2关键字和保留字）。

await	do	import	TRUE
break	else	in	try
case	enum	instanceof	typeof
catch	export	new	var
class	extends	null	void
const	FALSE	return	while
continue	finally	super	with
debugger	for	switch	yield
default	function	this	
delete	if	throw

还有一些在strict模式下被注册为保留字。

let	package
static	private
implements	protected
interface	public

以下被注册为未来的保留字。

enum

禁止使用保留字

注册为保留字的字不能用作变量名或函数名。例如，如果您尝试使用保留字 if 作为变量名，则会发生错误。

let if = 10;
>> Uncaught SyntaxError: Unexpected token 'if'

此外，如果您尝试使用保留字 try 作为函数名，也会发生错误。

function try(){
}
>> Uncaught SyntaxError: Unexpected token 'try'

请注意，JavaScript 中像这样的保留字不能用作变量名或函数名。

3-4 数据类型

在 JavaScript 中处理的数据类型可以大致分为原始类型和对象类型。原始类型包括数字和字符串之类的东西，对象类型包括数组和正则表达式之类的东西。本节介绍 JavaScript 处理的数据类型的基础知识。

原始类型和对象类型

JavaScript 中的数据类型可以大致分为原始类型和对象类型。原始类型有七种类型：

数值
长整型 ※ ES2020～
字符串
布尔值
undefined
null
象征

原始值有一个单一的值，比如 10 或 3.14 代表数字，’Hello’ 代表字符串。

所有非原始类型都是对象类型。对象类型有很多种，下面列出了其中的一些。

Object(对象)
Array(排列)
Function(函数)
String 或者Number包装对象
Date(日期)
RegExp(正则表达式)
JSON

对象类型值有多个值。例如，[‘apple’, ‘orange’, ‘lemon’] 用于数组，或 {width:100, height:80} 用于对象。

变量的数据类型

其他一些编程语言在声明变量时指定数据类型，而JavaScript在声明变量时不指定数据类型。因此，变量可以存储任何数据类型的值。

let num;
num = 10;

let name = 'Yuhua';

还可以将另一种数据类型的值重新分配给已经包含值的变量。

let name;
name = 'Yuhua';

name = [45, 78, 95];

关于原始数据类型

简要解释每种原始数据类型。

数值

数值类型包括整数和浮点数。整数是 10 和 324，浮点数是 7.52 和 4e5。其他一些编程语言对整数和浮点数有单独的数据类型，但在 JavaScript 中它们都是相同的数值类型，64 位浮点数。

数字类型可以使用运算符执行四种算术运算。

let num = 10;
console.log(num);
>> 10

num = 70 + 45 * 3;
console.log(num);
>> 205

当作为测试数据类型的 typeof 运算符的参数给出时，数字类型的值返回数字。

console.log(typeof(10));
>> number

console.log(typeof(3.14));
>> number

长整数

长整数类型是一种可以处理数值类型无法处理的极大整数的数据类型。将 n 附加到数字的末尾，表示它是一个长整数类型。

let num = 52n;
console.log(num);
>> 52n

可以对长整数类型的值进行算术运算，但不能对数值类型的值进行运算（会出错）。执行操作时必须转换任何一种类型。

let num;
num = 21n + 8n;
console.log(num);
>> 29n

num = 47n + 19;
>> Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

当指定为检查数据类型的 typeof 运算符的参数时，长整型值返回 bigint。

console.log(typeof(12n));
>> bigint

※ 长整数类型是 ECMAScript 2020 (ES11) 中可用的新规范，因此根据浏览器的不同，可能不支持它。

字符串

字符串类型是零个或多个字符的集合。每个字符都是 16 位 Unicode。用单引号（’）或双引号（”）将整个括起来表示。

let msg;
msg = 'Hello';
console.log(msg);
>> Hello

let address = "山东省青岛市市南区";
console.log(address);
>> 山东省青岛市市南区

当指定为检查数据类型的 typeof 运算符的参数时，字符串类型的值返回字符串。

console.log(typeof('汉字'));
>> string

布尔值

布尔值可以为 true 或 false。true 代表 true，false 代表 false。

布尔值主要用在if语句、while语句等条件表达式中。例如，表达式 10 > 5 如果为真则返回真，如果为假则返回假。这次是真的，所以它返回真。

console.log(10 > 5);
>> true

console.log('ABC' == 'abc');
>> false

还可以像存储任何其他值一样在变量中存储诸如 true 或 false 之类的值。

let flag;
flag = true;
console.log(flag);
>> true

布尔值在作为测试数据类型的 typeof 运算符的参数给出时返回布尔值。

console.log(typeof(true));
>> boolean

undefined和null

undefined是表示值存在的特殊值之一。不是将 undefined 赋给变量，而是返回 undefined 以指示在引用已声明但尚未赋值的变量的值时该值仍未定义。（并不是说你不能将 undefined 赋值给变量）。

var num;
console.log(num);
>> undefined

undefined 在作为 typeof 运算符的参数给出时返回 undefined，它检查数据类型。

console.log(typeof(undefined));
>> undefined

null 也是一个特殊值，表示没有值。通过将 null 显式分配给变量，当您想要显式指示该变量不引用特定值或对象时使用它。

var name = null;
console.log(name);
>> null

null 作为 typeof 运算符的参数给出时返回对象，该运算符检查数据类型。（ null 返回 object 似乎没有深层原因）。

console.log(typeof(null));
>> object

符号

符号是 ECMAScript 2015 (ES6) 中引入的一种数据类型，其中每次创建都会创建一个不同于已创建符号的唯一值。

let s1 = Symbol();
let s2 = Symbol();

console.log(s1 === s2);
>> false

符号使得创建唯一值变得容易，所以当需要唯一值时使用它们，例如对象键。每次你创建一个符号，你总是创建一个唯一的值，所以你不必担心匹配其他。

当作为 typeof 运算符的参数给出时，Symbol 返回 symbol，该运算符测试其数据类型。

console.log(typeof(Symbol()));
>> symbol

3-5 包装器对象和原始类型

在JavaScript数据类型中，原始类型中包含的数字和字符串不是对象，而是准备了相应的包装对象，这样就可以像对象一样引用属性和执行方法。在这里，我将解释 JavaScript 中包装对象和原始类型之间的关系。

什么是包装对象

JavaScript中的数据类型大致可以分为原始类型和对象类型，原始类型有七种：

数值，长整数，字符串，布尔值，undefined，null，象征

※ JavaScript のデータ型に関して詳しくは「JavaScriptのデータ型」を参照してください。

为除 undefined 和 null 之外的每一个都准备了一个包装器对象。

原始类型	包装对象
数值	Number
长整数	BigInt
字符串	String
布尔值	Boolean
象征	Symbol

对于不是对象的数值、字符串等原始类型没有提供方法，但是如果你为一个原始类型的值调用相应的包装对象提供的方法，那么原始类型的值会自动被返回转换为相应的包装器对象，在其上调用包装器对象的方法。

下面的示例为数字调用相应包装对象的 Number 对象的方法，该数字是基本类型之一。

let num = 17;

console.log(num.toString(2));
>> 10001

这与从原始类型值创建包装器对象并调用方法相同，如下所示。

let num = 17;
let obj = new Number(num);

console.log(obj.toString(2));
>> 10001

由于提供了这样的包装对象，即使是原始类型也可以像处理对象一样处理。由于向包装对象的转换是自动完成的，除非有特定原因不创建包装对象，否则建议直接调用方法或引用原始类型字面量的属性。

关于包装器对象的注释

Number 和 String 对象等包装器对象可以创建自己的对象。

let numObj = new Number(10);

创建的 Number 对象是一个对象，与数字的原始类型不同。检查数据类型的 typeof 运算符在给定数字参数时返回数字，但在给定数字对象时返回对象。

let num = 10;
console.log(typeof num);
>> number

let numObj = new Number(num);
console.log(typeof numObj);
>> object

console.log(num === numObj);
>> false

基本类型的值会在必要时自动转换为它们对应的包装对象，但要注意包装对象是一种对象类型，与基本类型有着根本的区别。

如果不使用 new 运算符的情况下编写以下内容，它将创建相应原始类型的值。

let num = Number(10);
console.log(typeof num);
>> number

3-6 启用Strict模式

虽然不是JavaScript的语法错误，但是有一种写法是不推荐的。例如，在不声明的情况下为变量赋值。如果开启了JavaScript提供的严格模式，那么这种不太理想的写法就会报错。在这里，我将解释如何在 JavaScript 中启用严格模式。

启用strict模式

JavaScript 中的严格模式可以应用于整个程序，也可以只应用于特定的函数。要将其应用于整个程序，请在程序开头编写以下内容。

'use strict';
・・・
・・・

※ 您也可以使用“use strict”；带双引号。

当严格模式应用于函数时，只有函数块的内部受strict模式约束。

function myFunc(){
  'use strict';
  ・・・
  ・・・
}

当严格模式应用于函数时，只有函数块的内部受严格模式约束。。

什么样的描述方式在严格模式下会报错？

介绍一些在严格模式下会出错的实际描述方法。

1）为未声明的变量赋值

在 JavaScript 中，甚至可以为没有变量声明的变量赋值。因此，即使变量有拼写错误，也不会报错，会被当作一个新的全局变量来处理。

let qingdao;
qindao = 20;  //如果拼写错误则不会出错

启用严格模式后，你将无法为未声明的变量赋值。

'use strict';

let qingdao;
qindao = 20;
>> Uncaught ReferenceError: qindao is not defined

2）函数定义中的重复参数名称

定义函数时，即使作为自变量记述的变量名重复，也不会发生错误。

function test(a, a, b){
  console.log('a = ' + a);
  console.log('b = ' + b);
}

test(1, 2, 3);
>> a = 2
>> b = 3

如果参数名称重复，则最后一个参数有效。但是，没有理由故意这样写，所以如果参数名重复，很可能是写错了。

如果启用了严格模式，如果在函数中写入相同的参数名称将出错。

'use strict';

function test(a, a, b){
  console.log('a = ' + a);
  console.log('b = ' + b);
}

>> Uncaught SyntaxError: Duplicate parameter name not allowed in this context

3）使用 0xxx 格式的八进制表示法

目前描述八进制数时提供0oxxx格式，但之前使用的0xxx格式也被当作八进制数处理。

let num = 0164;

console.log(num);
>> 116

启用strict模式后，以 0xxx 格式写入数字是错误的。

'use strict';

let num = 0164;

>> Uncaught SyntaxError: Octal literals are not allowed in strict mode.

4）使用 with 语句

with 语句允许您在要调用方法或多次引用同一对象的属性时省略对象名称。

with(Math){
  console.log(min(10,20,30));
  console.log(max(10,20,30));
  console.log(pow(4, 2));
}

>> 10
>> 30
>> 16

在此示例中，本来应该编写 Math.min Math.max Math.pow。但是使用 with 语句来省略 Math。

我们不推荐使用with语句，因为省略了哪些对象很难理解，速度上也有问题。在启用严格模式的情况下写 with 语句是错误的。

'use strict';

with(Math){
  console.log(min(10,20,30));
  console.log(max(10,20,30));
  console.log(pow(4, 2));
}

>> Uncaught SyntaxError: Strict mode code may not include a with statement
我们介绍了一些在启用严格模式时不再允许的语句类型。以use strict模式编写可以减少出错的可能性，但请注意，将其应用于现有程序可能会导致程序停止运行。

3-7 认为正确的值（true）和认为错误的值（false)

if 语句和 for 语句中的条件表达式评估表达式是真还是假。如果在这样的条件表达式中写入逻辑值以外的值，例如数字或字符串，则存在判断其是否为真或假的规则。这里我们讨论什么值被认为是 true 和 false 。

false值被认为是错误的

在需要逻辑值的地方，比如if语句或者for语句的条件表达式，下面的值都被认为是false。

false
0
-0
0n
"" (空字符串)
null
undefined
NaN

数值 0、空字符串、null 和 undefined 都被视为 false。

示例代码

看看下面的示例。

if (0){
  console.log('true');
}else{
  console.log('false');
}

>> false

我在if语句的条件表达式中写了0。0 被认为是 false，因此执行 else 之后的块。

true值被认为是真实的

在需要布尔值的地方，所有值都被认为是 true，除了被认为是 false 的值。例如：

true
43
'Red'
[3, 4]

任何非零数字、非空字符串或任何其他对象都被视为 true。

示例代码

看看下面的示例。

if ('Yes'){
  console.log('true');
}else{
  console.log('false');
}

>> true

在 if 语句的条件表达式中写了“是”。任何非空字符串都被认为是真的，所以执行 if 之后的块。

3-8 类型转换规则（字符串、数字、布尔值）

JavaScript中使用的各种数据类型的值会根据需要自动进行类型转换。例如，如果您尝试使用 + 运算符将字符串与另一种数据类型的值连接起来，它会在连接之前自动转换为字符串。在这里，我们将说明在进行类型转换时如何转换为数字、字符串等。

转换为字符串

该值被转换为字符串，例如，如果“+”运算符的左侧或右侧是字符串，则其他值会自动转换为字符串。

'num = ' + 値

您还可以像这样显式转换为字符串：

String(値)
値.toString()

以下是非字符串数据类型的值在转换为字符串时的转换方式：

种类值字符串
数值10“10”
数值-18.334“-18.334”
数值0x1A“3140000”
数值3.14e6“1250”
长整数1250n“true”
布尔值true“false”
布尔值false[object Object]
对象{1:’Apple’, 2:’Lemon’}Apple,Lemon
对象[‘Apple’, ‘Lemon’]function(x){return x;}
对象function(x){return x;}“undefined”
其他undefined“undefined”
其他null“null”
其他NaN“NaN”
其他Infinity“Infinity”

将数值转换为字符串时，写入的数值原样变为字符串，但在十六进制格式中，它被转换为十进制数并转换为字符串，而在指数表示法中，它被转换为小数点格式并转换为字符串。

此外，将长整型值转换为字符串时，删除尾随的“n”，字符串变为字符串。

当将对象类型转换为字符串时，结果是调用为每个对象提供的 toString 方法。它的转换方式因每个对象而异。

符号不会自动转换为字符串。

let symbol = Symbol();
let str = 'Symbol is ' + symbol;
>> Uncaught TypeError: Cannot convert a Symbol value to a string

如果需要将符号转换为字符串，请使用 toString 方法。

let symbol = Symbol();
console.log(symbol.toString());
>> Symbol()

转换为数字

值被转换为数字，例如，当您使用“-”或“*”运算符对数字进行运算时，目标值会自动转换为数字。（请注意，“+”运算符不同）。

num = 值 - 0

您还可以像这样显式转换为数字：

Number(值)

以下是非数字数据类型的值在转换为数字时的转换方式：

種類値数値
字符串“184”184
字符串“-25.42”-25.42
字符串“apple”NaN
长整数1250n1250
布尔值true1
布尔值false0
对象{1:’Apple’, 2:’Lemon’}NaN
对象[‘Apple’, ‘Lemon’]NaN
对象[78]78
对象function(x){return x;}NaN
其他
undefined		NaN
其他null0
其他NaNNaN

将字符串转换为数字时，如果字符串中包含数字（如’123’或’3.14’），则将其转换为字符串表示的数字（如123或3.14）。但是，在十六进制格式中，它将是一个十进制数，而在指数表示法中，它将是一个十进制数。如果字符串包含非数字字符，则为 NaN。

长整数值可以转换为数字，但是不能对长整数和整数进行算术运算，所以要用Number函数或者parseInt函数。

Null 在转换为数字时转换为 0。undefined 和 NaN 转换为数字时变为 NaN。

将对象类型转换为字符串时，会调用为每个对象准备的toString方法，一次转换为字符串，然后再转换为数字。大多数对象都转换为 NaN ，但具有单个元素且其值为数字或数字字符串的数组除外，它会转换为存储的数字。

console.log(Number(['abc']));
>> NaN

console.log(Number([45]));
>> 45

符号不会自动转换为数字。

let symbol = Symbol();
let num = symbol - 0;
>> Uncaught TypeError: Cannot convert a Symbol value to a number

转换为布尔值

例如，当一个值写入 if 语句的条件表达式中时，该值将转换为逻辑值。

if (值){
  ...
}

还可以显式转换为布尔值，如下所示：

Boolean(值)

下面是布尔值以外的数据类型的值在转换为布尔值时的转换方式：

种类值布尔值
数值45true
数值0false
数值-4.84true
长整数1250ntrue
长整数0nfalse
字符串“apple”true
字符串“”false
对象{1:’Apple’, 2:’Lemon’}true
对象{}true
对象[‘Apple’, ‘Lemon’]true
对象[]true
对象function(x){return x;}true
其他undefinedfalse
其他nullfalse
其他NaNfalse
其他Infinitytrue
符号符号true

将数字转换为逻辑值时，0 为假，所有非零数字为真。0n对于长整型也是假的，除0n以外的长整型值都为真。

将字符串转换为布尔值时，空字符串为假，任何非空字符串为真。

所有对象都是真实的。空数组和空对象也是如此。符号也是如此。

undefined 、 null 、 NaN 都是 false 。

console.log(Boolean(0));
>> false
console.log(Boolean(1));
>> true

console.log(Boolean(''));
>> false
console.log(Boolean('Hello'));
>> true

console.log(Boolean([]));
>> true
console.log(Boolean([120]));
>> true

3-9 JavaScript 和 ECMAScript 之间的区别

ECMAScript 定义了 JavaScript 基本部分的规范。这里是对 JavaScript 和 ECMAScript 之间差异的简要说明，以及作为 ECMAScript 发布的规范的链接。

什么是JavaScript

JavaScript 脚本语言，Netscape Communications 开发的一种编程语言。它与同一家公司开发的浏览器 Netscape Navigator 一起工作。之后，可以使用 Microsoft Corporation 开发的浏览器 Internet Explorer。

这就是 JavaScript 标准化发挥作用的地方。

什么是 ECMAScript

JavaScript 被标准化，基本规范被命名为 ECMAScript。ECMAScript 会定期修订。ECMAScript只是基础部分的规范，各个公司都是基于ECMAScript定义的基础规范来实现JavaScript的。在 JavaScript 中，除了基本功能外，还添加了与浏览器相关的功能。

ECMAScript 每次修订都会得到一个新版本，但 JavaScript 本身目前没有版本。例如，区分符合 ECMAScript 2019（ES2019）的 JavaScript。

支持哪些版本的 ECMAScript 取决于浏览器。此外，即使在支持的版本中，某些功能也可能不可用。您需要注意您在代码中使用的功能是否可用于使用以 JavaScript 编写的代码的浏览器。

ECMAScript 版本

以下是 ECMAScript 的早期版本：

Edition	       缩写	        发布日期
ECMAScript 1	ES1	        1997年6月
ECMAScript 2	ES2	        1998年6月
ECMAScript 3	ES3	        1999年12月
ECMAScript 4	ES4	        放弃
ECMAScript 5	ES5	        2009年12月
ECMAScript 5.1	ES5.1	        2011年6月
ECMAScript 2015	ES2015 / ES6	2015年6月
ECMAScript 2016	ES2016 / ES7	2016年6月
ECMAScript 2017	ES2017 / ES8	2017年6月
ECMAScript 2018	ES2018 / ES9	2018年6月
ECMAScript 2019	ES2019 / ES10	2019年6月
ECMAScript 2020	ES2020 / ES11	2020年6月

请参考以下链接了解 ECMAScript 2015 之后发布的规范。

https://262.ecma-international.org/11.0/

・ECMAScriptR 2015 Language Specification
・ECMAScriptR 2016 Language Specification
・ECMAScriptR 2017 Language Specification
・ECMAScriptR 2018 Language Specification
・ECMAScriptR 2019 Language Specification
・ECMAScriptR 2020 Language Specification

最初，JavaScript 主要用于执行运行在浏览器上的简单脚本，但现在它也被用于服务器上，使其成为一种应用范围更广的语言。

关联内容

JavaScript
第二章将JavaScript写到HTML编码中
JavaScript
第一章 在浏览器中启用 JavaScript
JavaScript
第四章 JavaScript的数值
JavaScript
第五章 長整数
JavaScript
第六章 字符串的基础
JavaScript
第七章 字符串的应用