通读JavaScript红皮书（第二三章）

朱雀 2023-07-13 12:18 134阅读 0赞

> 总结红皮书JavaScript高级程序设计的精髓知识点，感谢红皮书原作者Nicholas C. Zakas

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]  
和博主一起走入JavaScript界的圣经，红皮书，JavaScript高级程序设计第三版。  
我们尽量用最短的时间读完这本书，并且总结出整书的精华知识点。go！

## 2.1.defer和async属性 ##

### defer： ###

> 表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。 相当于告诉浏览器立即下载，但延迟执行。

### async： ###

> 表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。  
> 异步脚本并不保证按照指定它们的先后顺序执行，一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

换言之，  
只要不存在defer和async属性，浏览器都会按照`<script>`元素在页面中出现的先后顺序对它们依次进行解析。

## 2.2.`<script>`标签的位置 ##

JavaScript代码放在`<body>`的最后，先呈现浏览器的内容，因为浏览器在遇到body标签时才开始呈现内容。

## 2.3.CDATA片段 ##

指不应被XML解析器进行解析的文本数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

## 2.4.外部js的优势 ##

*  可维护性
 *  可缓存（两个页面引入一个js只需下载一次）
 *  适应未来

## 2.5.`<noscript>`元素 ##

*  浏览器不支持脚本
 *  浏览器支持脚本但脚本被禁用  
    满足以上任一条件，浏览器会显示的内容。

## 原书第二章小结在此 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]  
基本和博主总结的一致。下面我们进军**第三章**。

## 3.1区分大小写 ##

ECMAScript中一切区分大小写，也就是说Baby和baby是代表两个宝贝。

## 3.2标识符第一个字符不能是数字 ##

> 第一个字符：必须是一个字母，下划线或一个$  
> 其他字符：上面的，数字

## 3.3驼峰命名规则 ##

myHouse  
yourBaby  
iLoveYou  
第一个字母小写，遇到一个单词大写

## 3.4注释 ##

单行 ：

//xxx

多行:

/*
     *
     *
     */

## 3.5严格模式 ##

"use strict";

可在：

1.  整个脚本代码中启用严格模式
2.  也可以在某个函数体内启用严格模式

## 3.6没有分号和大括号也可运行，但是不建议！！！！ ##

### 可能导致： ###

程序判断结束耗费不必要的性能  
压缩代码多余空格时报错等

## 3.7关键字 ##

这就是即使不是数字开头也不能命名标识符的大佬们  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]  
✳为ECMA5新增

## 3.8保留字 ##

尽管没有用途，但是以后可能会有用途，也不让你随便用，懂？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]  
第三版定义了如上的保留字，但是第五版增加了两个新的保留字`let` ， `yield`

## 3.9var-var-var ##

var应该是JavaScript里用的最多的一个字符了，他有资格被写三遍在这里。

### var定义的是局部变量 ###

如果在函数中定义一个var则，这个变量在函数推出后就会被销毁。  
例如：

function(){ 
    var abc="hi";//局部变量
    }
    test();
    alert(message);//错误

可以省略var 则，abc则是全局变量，  
但是不建议如此操作为生命的变量，在严格模式下会抛出ReferenceError

## 3.10JavaScript 的五种数据类型 ##

这应该是大家背的最熟的了，反正我能被出来  
Undefined，Null，Boolean，Number，String  
还有更酷一点的，复杂的Object，本质上是由一组无序的名值对组成的。

## 3.11typeof操作符 ##

ok只有六种数据类型，能表示出这么多种JavaScript的数据吗？  
所以应运而生的typeof（我用typeof好好看看不就得了）

*  如果是函数 -“function”,如果是除了Null的其他结构也是可以直接输出相应的

如果是其他也能测：

var abc=“some string”；
    alert（typeof message）；//"string"
    alert（typeof 17）；//"number"

### 如果typeof Null ###

what happen？

> 会返回object  
> 因为特殊值null被认为是一个空的对象的引用

## 3.12细说几种数据类型 ##

### 3.12.1 Undefined ###

只有一个值，undefined 。  
在var 只声明未赋值时，这个变量的值就是undefined

var abc；
    aleret（abc==undefined）;//true

### 3.12.2Null ###

var car = null; 
    alert(typeof car);     // "object"

null类型也是只有一个值的数据类型，null  
null表示一个空对象指针。  
对于将来想要用于保存对象的变量，初始赋值设为null。

### 3.12.3Boolean类型 ###

两个字面值，true false  
这两个值与数字值不是一回事，因此true不一定等于1，二false也不一定等于0。

*记得区分大小写，True 不是Boolean类型*

#### 其他数据类型与布尔类型的联动： ####

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>转换为true的值</th> 
   <th>转换为false的值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>boolean</td> 
   <td>true</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>任何非空字符串</td> 
   <td>“”(空字符串)</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>任何非零数字</td> 
   <td>0和NaN</td> 
  </tr> 
  <tr> 
   <td>Object</td> 
   <td>任何对象</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>Undefined</td> 
   <td>n/a（not applicable缩写（不适用））</td> 
   <td>undefined</td> 
  </tr> 
 </tbody> 
</table>

### 3.12.4Number类型 ###

#### 整数 ####

可以赋值为十进制，八进制，十六进制

但是，进行算术运算时，所有八进制，十六进制表示的数值最终都将被转换成十进制数值。

#### 浮点数 ####

所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。

浮点数值的高精度是 17位小数，但在进行算术计算时其精确度远远不如整数。

> 例如，0.1加 0.2 的结果不是 0.3，而是 0.30000000000000004。这个小小的舍入误差会导致无法测试特定的浮点数值。

所以不要不要不要这样测试：

if (a + b == 0.3){           // 不要做这样的测试！ 
      alert("You got 0.3."); }

#### NaN ####

即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数 未返回数值的情况（这样就不会抛出错误了）

NaN 本身有两个非同寻常的特点。首先，任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN，这 个特点在多步计算中有可能导致问题。其次，NaN 与任何值都不相等，包括 NaN 本身.

关于isNaN()  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]

#### 数值转换 ####

有 3个函数可以把非数值转换为数值：Number()、parseInt()和 parseFloat()。

var num1 = parseInt("10", 2);     //2 （按二进制解析） 
    var num2 = parseInt("10", 8);      //8 （按八进制解析） 
    var num3 = parseInt("10", 10);     //10 （按十进制解析） 
    var num4 = parseInt("10", 16);     //16 （按十六进制解析）

var num1 = parseFloat("1234blue");        //1234 （整数） 
     var num2 = parseFloat("0xA");              //0 
     var num3 = parseFloat("22.5");             //22.5 
     var num4 = parseFloat("22.34.5");          //22.34 
     var num5 = parseFloat("0908.5");          //908.5 
     var num6 = parseFloat("3.125e7");          //31250000

已经凌晨两点了，读不动了，明天醒了继续，争取尽快搞定这本红皮书。  
晚安。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200312010441434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312005139299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200312010222123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200312012117351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200312012336608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200312020923216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70