JavaScript红皮书学习笔记

1.什么是javaScript

JavaScript 历史回顾
JavaScript 是什么（实现）

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。

ECMAScript：由 ECMA-262 定义并提供核心功能。

文档对象模型（DOM）：提供与网页内容交互的方法和接口。

浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。

JavaScript 与 ECMAScript 的关系

ECMAScript是JavaScript的规格，JavaScript 实现了ECMAScript

JavaScript 的不同版本

2.HTML中的JavaScript

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把JavaScript 代码嵌入到

HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可以总结如下。

要包含外部JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。
可以使用defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

3.语言基础

3.1 变量

let 跟 var 最明显的区别是，let 声明的范围是块作用域，而 var 声明的范围是函数作用域。

var函数作用域：

if (true) {
var name = 'Matt';
console.log(name); // Matt
}
console.log(name); // Matt

let块作用域：

 if (true) { let age = 26; console.log(age); // 26
}
console.log(age); // ReferenceError: age 没有定义

const 的行为与 let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改 const 声明的变量会导致运行时错误。

3.2 数据类型

ECMAScript 有 6 种简单数据类型（也称为原始类型）：Undefined、Null、Boolean、Number、String 和 Symbol。Symbol（符号）是ECMAScript 6 新增的。

还有一种复杂数据类型叫 Object（对象）。Object 是一种无序名值对的集合。

typeof操作符

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型。typeof操作符就是为此而生的。对一个值使用 typeof 操作符会返回下列字符串之一：
"undefined"表示值未定义；
"boolean"表示值为布尔值；
"string"表示值为字符串；
"number"表示值为数值；
"object"表示值为对象（而不是函数）或 null；

"function"表示值为函数；
"symbol"表示值为符号。

下面是使用 typeof 操作符的例子：
```
let message = "some string";
console.log(typeof message); // "string"
console.log(typeof(message)); // "string"
console.log(typeof 95); // "number"
```
在这个例子中，我们把一个变量（message）和一个数值字面量传给了 typeof 操作符。注意，因为 typeof 是一个操作符而不是函数，所以不需要参数（但可以使用参数）。
注意typeof在某些情况下返回的结果可能会让人费解，但技术上讲还是正确的。比如，调用typeof null 返回的是"object"。这是因为特殊值 null 被认为是一个对空对象的引用。

在其他地方看到前端判断数据类型的方法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99ATwSTN-1610439473146)(blob:file:///8740607f-d149-4616-8e5e-292f4bc32df4)]
Undefined类型

⚠️：即使未初始化的变量会被自动赋予 undefined 值，但我们仍然建议在声明变量的同时进行初始化。这样，当 typeof 返回"undefined"时，你就会知道那是因为给定的变量尚未声明，而不是声明了但未初始化。
Null类型

Null 类型同样只有一个值，即特殊值 null。逻辑上讲，null 值表示一个空对象指针，这也是给
typeof 传一个 null 会返回"object"的原因：
```
let car = null;
console.log(typeof car); // "object"
```

Boolean类型

Boolean()转型函数可以在任意类型的数据上调用，而且始终返回一个布尔值。什么值能转换为 true
或 false 的规则取决于数据类型和实际的值。下表总结了不同类型与布尔值之间的转换规则。

数据类型	转换为 true 的值	转换为 false 的值
Boolean	true	false
String	非空字符串	“”（空字符串）
Number	非零数值（包括无穷值）	0、NaN（参见后面的相关内容）
Object	任意对象	null
Undefined	N/A（不存在）	undefined

Number 类型
1. 浮点值
  
  要定义浮点值，数值中必须包含小数点，而且小数点后面必须至少有一个数字。永远不要测试某个特定的浮点值
```
if (a + b == 0.3) { // 别这么干！console.log("You got 0.3.");
}
```
2. 值的范围
  
  由于内存的限制，ECMAScript 并不支持表示这个世界上的所有数值。ECMAScript 可以表示的最小数值保存在 Number.MIN_VALUE 中，这个值在多数浏览器中是 5e324；可以表示的最大数值保存在Number.MAX_VALUE 中，这个值在多数浏览器中是 1.797 693 134 862 315 7e+308。如果某个计算得到的数值结果超出了 JavaScript 可以表示的范围，那么这个数值会被自动转换为一个特殊的 Infinity（无穷）值。
3. NaN
  
  NaN 不等于包括 NaN 在内的任何值。例如，下面的比较操作会返回 false：
```
console.log(NaN == NaN); // false
```
4. 数值转换
  
  有 3 个函数可以将非数值转换为数值：Number()、parseInt()和 parseFloat()
  
  Number()是转型函数，可用于任何数据类型。后两个函数主要用于将字符串转换为数值。

String 类型

String（字符串）数据类型表示零或多个 16 位 Unicode 字符序列。字符串可以使用双引号（"）、

单引号（’）或反引号（`）标示，因此下面的代码都是合法的：

let firstName = "John";
let lastName = 'Jacob';
let lastName = `Jingleheimerschmidt`

转换为字符串

toString()方法

⚠️：toString()方法可见于数值、布尔值、对象和字符串值。（没错，字符串值也有 toString()方法，该方法只是简单地返回自身的一个副本。）null 和 undefined 值没有 toString()方法。
```
let age = 11;
let ageAsString = age.toString(); // 字符串"11"
let found = true;
let foundAsString = found.toString(); // 字符串"true"
```

String()转型函数

⚠️：如果你不确定一个值是不是 null 或 undefined，可以使用 String()转型函数，它始终会返回表示相应类型值的字符串。

let value1 = 10;
let value2 = true;
let value3 = null;
let value4;
console.log(String(value1)); // "10"
console.log(String(value2)); // "true"
console.log(String(value3)); // "null"
console.log(String(value4)); // "undefined"

用加号操作符给一个值加上一个空字符串""也可以将其转换为字符串

模板字面量

ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串：

let myMultiLineString = 'first line\nsecond line';
let myMultiLineTemplateLiteral = `first line
second line`;
console.log(myMultiLineString);
// first line
// second line"
console.log(myMultiLineTemplateLiteral);
// first line
// second line
console.log(myMultiLineString === myMultiLinetemplateLiteral); // true

字符串插值

字符串插值通过在${}中使用一个 JavaScript 表达式实现：

let value = 5;
let exponent = 'second';
// 以前，字符串插值是这样实现的：
let interpolatedString = value + ' to the ' + exponent + ' power is ' + (value * value);
// 现在，可以用模板字面量这样实现：
let interpolatedTemplateLiteral = `${ value } to the ${ exponent } power is ${ value * value }`;
console.log(interpolatedString); // 5 to the second power is 25
console.log(interpolatedTemplateLiteral); // 5 to the second power is 25

Symbol 类型

Symbol（符号）是 ECMAScript 6 新增的数据类型。符号是原始值，且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。
Object 类型

ECMAScript 中的对象其实就是一组数据和功能的集合。对象通过 new 操作符后跟对象类型的名称

来创建。开发者可以通过创建 Object 类型的实例来创建自己的对象，然后再给对象添加属性和方法：

let o = new Object();

3.3操作符

一元操作符

只操作一个值的操作符叫一元操作符（unary operator）

（1）递增/递减操作符（a++或–a）

（2）一元加和减（a=+a或a=-a）

（3）位操作符（按位非（～），按位与（&），按位或（|），按位异或（^），左移（<<），右移（>>），无符号右移（>>>））
布尔操作符

布尔操作符一共有 3 个：逻辑非(!)、逻辑与(&&)和逻辑或(||)。
乘性操作符

ECMAScript 定义了 3 个乘性操作符：乘法（*）、除法（/）和取模（%）。

指数操作符

ECMAScript 7 新增了指数操作符，Math.pow()现在有了自己的操作符**，结果是一样的：
```
console.log(Math.pow(3, 2); // 9
console.log(3 ** 2); // 9
```
不仅如此，指数操作符也有自己的指数赋值操作符**=，该操作符执行指数运算和结果的赋值操作：
```
let squared = 3;
squared **= 2;
console.log(squared); // 9
```
加性操作符

加性操作符，即加法（+）和减法（-）操作符，一般都是编程语言中最简单的操作符。加性操作符在后台会发生不同数据类型的转换。
关系操作符

关系操作符执行比较两个值的操作，包括小于（<）、大于（>）、小于等于（<=）和大于等于（>=），

用法跟数学课上学的一样。
相等操作符

ECMAScript提供了两组操作符。第一组是等于和不等于，它们在比较之前执行转换。第二组是全等和不全等，它们在比较之前不执行转换。

（1）等于和不等于

ECMAScript 中的等于操作符用两个等于号（==）表示，如果操作数相等，则会返回 true。不等于操作符用叹号和等于号（!=）表示，如果两个操作数不相等，则会返回 true。这两个操作符都会先进行类型转换（通常称为强制类型转换）再确定操作数是否相等。

（2）全等和不全等

全等和不全等操作符与相等和不相等操作符类似，只不过它们在比较相等时不转换操作数。全等操

作符由 3 个等于号（===）表示，只有两个操作数在不转换的前提下相等才返回 true，比如：
```
let result1 = ("55" == 55); // true，转换后相等
let result2 = ("55" === 55); // false，不相等，因为数据类型不同
```
条件操作符

条件操作符是 ECMAScript 中用途最为广泛的操作符之一，语法跟 Java 中一样：
```
variable = boolean_expression ? true_value : false_value;
```
上面的代码执行了条件赋值操作，即根据条件表达式 boolean_expression 的值决定将哪个值赋

给变量 variable 。如果 boolean_expression 是 true ，则赋值 true_value ；如果

boolean_expression 是 false，则赋值 false_value。
赋值操作符

简单赋值用等于号（=）表示，将右手边的值赋给左手边的变量，如下所示：
```
let num = 10;
```
复合赋值使用乘性、加性或位操作符后跟等于号（=）表示。这些赋值操作符是类似如下常见赋值

操作的简写形式：
```
let num = 10;
num += 10;
```
逗号操作符

逗号操作符可以用来在一条语句中执行多个操作，如下所示：
```
let num1 = 1, num2 = 2, num3 = 3;
```
在一条语句中同时声明多个变量是逗号操作符最常用的场景。不过，也可以使用逗号操作符来辅助

赋值。在赋值时使用逗号操作符分隔值，最终会返回表达式中最后一个值：
```
let num = (5, 1, 4, 8, 0); // num 的值为 0
```
在这个例子中，num 将被赋值为 0，因为 0 是表达式中最后一项。逗号操作符的这种使用场景并不

多见，但这种行为的确存在。

3.4语句

if 语句

if 语句是使用最频繁的语句之一，语法如下：
```
if (condition) statement1 else statement2
```
do-while 语句

do-while 语句是一种后测试循环语句，即循环体中的代码执行后才会对退出条件进行求值。换句话说，循环体内的代码至少执行一次。do-while 的语法如下：
```
do { statement
} while (expression);
```
while 语句

while 语句是一种先测试循环语句，即先检测退出条件，再执行循环体内的代码。因此，while 循

环体内的代码有可能不会执行。下面是 while 循环的语法：

while(expression) statement

这是一个例子：
```
let i = 0; while (i < 10) { i += 2;
}
```
for 语句

for 语句也是先测试语句，只不过增加了进入循环之前的初始化代码，以及循环执行后要执行的表达式，语法如下：

for (initialization; expression; post-loop-expression) statement

下面是一个用例：
```
let count = 10;
for (let i = 0; i < count; i++) { console.log(i);
}
```
for-in 语句

for-in 语句是一种严格的迭代语句，用于枚举对象中的非符号键属性，语法如下：

for (property in expression) statement

下面是一个例子：
```
for (const propName in window) { document.write(propName);
}
```
for-of 语句

for-of 语句是一种严格的迭代语句，用于遍历可迭代对象的元素，语法如下：

for (property of expression) statement

下面是示例：
```
for (const el of [2,4,6,8]) { document.write(el);
}
```
标签语句

标签语句用于给语句加标签，语法如下：

label: statement

下面是一个例子：
```
start: for (let i = 0; i < count; i++) { console.log(i);
}
```
在这个例子中，start 是一个标签，可以在后面通过 break 或 continue 语句引用。标签语句的

典型应用场景是嵌套循环。
break 和 continue 语句

break 和 continue 语句为执行循环代码提供了更严格的控制手段。其中，break 语句用于立即退

出循环，强制执行循环后的下一条语句。而 continue 语句也用于立即退出循环，但会再次从循环顶部

开始执行。
with 语句

with 语句的用途是将代码作用域设置为特定的对象，其语法是：

with (expression) statement;

⚠️：由于 with 语句影响性能且难于调试其中的代码，通常不推荐在产品代码中使用 with

语句。
switch 语句

switch 语句是与 if 语句紧密相关的一种流控制语句，从其他语言借鉴而来。

3.5 函数

函数对任何语言来说都是核心组件，因为它们可以封装语句，然后在任何地方、任何时间执行。

ECMAScript 中的函数使用 function 关键字声明，后跟一组参数，然后是函数体。

以下是函数的基本语法：

function functionName(arg0, arg1,...,argN) { statements
}

下面是一个例子：

function sayHi(name, message) { console.log("Hello " + name + ", " + message);
}

4 变量、作用域与内存

JavaScript 变量是松散类型的，而且变量不过就是特定时间点一个特定值的名称而已。

4.1 原始值与引用值

ECMAScript 变量可以包含两种不同类型的数据：原始值和引用值。原始值（primitive value）就是

最简单的数据，引用值（reference value）则是由多个值构成的对象。

保存引用值的变量是按引用（by reference）访问的

动态属性

原始值和引用值的定义方式很类似，都是创建一个变量，然后给它赋一个值。不过，在变量保存了

这个值之后，可以对这个值做什么，则大有不同。对于引用值而言，可以随时添加、修改和删除其属性

和方法。
```
let person = new Object();
person.name = "Nicholas";
console.log(person.name); // "Nicholas"
```
原始值不能有属性，尽管尝试给原始值添加属性不会报错。比如：
```
let name = "Nicholas";
name.age = 27;
console.log(name.age); // undefined
```
复制值

除了存储方式不同，原始值和引用值在通过变量复制时也有所不同。在通过变量把一个原始值赋值

到另一个变量时，原始值会被复制到新变量的位置。

在把引用值从一个变量赋给另一个变量时，存储在变量中的值也会被复制到新变量所在的位置。区

别在于，这里复制的值实际上是一个指针，它指向存储在堆内存中的对象。操作完成后，两个变量实际

上指向同一个对象，因此一个对象上面的变化会在另一个对象上反映出来
传递参数

ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数

中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是

引用值，那么就跟引用值变量的复制一样。对很多开发者来说，这一块可能会不好理解，毕竟变量有按

值和按引用访问，而传参则只有按值传递。

很多开发者错误地认为，当在局部作用域中修改对象而变化反映到全局时，就意味着参数是按引用传递的。
确定类型

typeof 操作符最适合用来判断一个变量是否为原始类型。更确切地说，它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。如果值是对象或 null，那么 typeof返回"object"。

typeof 虽然对原始值很有用，但它对引用值的用处不大。我们通常不关心一个值是不是对象，而是想知道它是什么类型的对象。为了解决这个问题，ECMAScript 提供了 instanceof 操作符，语法如下：

result = variable instanceof constructor

例子：
```
console.log(person instanceof Object); // 变量 person 是 Object 吗？
console.log(colors instanceof Array); // 变量 colors 是 Array 吗？
console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗？
```