速读《JavaScript权威指南（第7版）》 - 上

咱们先来看表达式的内容，这部分内容比较简单，我们快速过一下。

作者把%20JS%20中的所有表达式分为六类：

• 主表达式：所谓主表达式指的是%20独立存在，不再包含更简单表达式的表达式%20的内容。这类表达式是最简单的表达式。
• 对象和数组初始化程序：我们可以通过 字面量 的形式来创建对象或者数组，这样的代码也是一个表达式。
• 函数定义表达式：函数的定义也是一个表达式%20
• 属性访问表达式：对象或者数组的属性访问
• 调用表达式：函数或者方法的调用
• 对象创建表达式：通过 new 关键字生成对象实例

整个表达式的概念是比较简单的，经过这六点我们可以知道的是： 在 JS 中你的每一行语句，都可以被称为是一个表达式。

操作符

操作符的内容相对会多一些，里面会涉及到一些关键字或者语法的使用。

条件式调用

首先是 条件式调用：在我们的日常开发中，如果一个对象为 假性值，那么当我们获取这个对象的属性时，会得到一个错误：

为了解决这样的问题，在 ES2020 中提供了一个新的语法 条件式调用，可以让我们避免这种错误：

在 obj 后面加上一个 ?，如果 obj 为假性值，则会得到一个 undefined。而不会抛出异常。

in 操作符

in 操作符用来判断 左侧值是否是右侧对象的属性名，返回一个 boolean 类型的值。

instanceof 操作符

instanceof 操作符用来判断 左侧值是否是右侧类的实例，返回一个 boolean 类型的值。

typeof 操作符

typeof 操作符 我们在前面使用过，它可以用来 判断一个值的类型。它可以判断的所有类型如下表所示：

delete 操作符

delete 操作符可以用来 删除一个对象或数组的指定属性或元素：

赋值操作符

赋值操作符相对而言比较简单，但是 JS 中的赋值操作符非常多，大家可以参考下表：

eval() 函数（操作符）

eval() 是一个函数，但是在这里作者把它作为操作符来进行讲解。

eval() 可以接收一个 字符串，这个字符串应该是一段表达式。然后 JS引擎 会把这段字符串当做 JavaScript 代码来进行执行。

?? 先定义操作符

?? 先定义操作符 有点类似于 || 操作符。但是不同的地方在于 || 操作符 中 数字 0 会被作为假性值判断为假，但是在 ?? 先定义操作符 中 数字 0 会被作为真来进行处理。

void 操作符

void 操作符 平时不是特别常见，他可以配合箭头函数来进行使用。标记当前箭头函数什么都不会返回。

await 操作符

await 操作符 代表的是一个异步的场景，咱们把它放到 第13章 异步JavaScript 中进行解释。

第四章总结

整个第四章中，表达式的内容其实非常简单，我们只需要知道 在 JS 中你的每一行语句，都可以被称为是一个表达式。 其实就可以了。

而操作符部分，相对而言内容量其实并不少，他里面涉及到了很多的基本 JS 语法，这里可能需要大家多多练习才可以。

第5章 语句

这一章中，作者主要讲解了 JS 中所有的语句类型。

在 JS 中语句一共可以被分为 7 类：

• 表达式语句：

  会产生副作用（改变值）的表达式 被称为表达式语句。

  以这段代码为例：

  

  这段代码改变了 greeting 的值，那么这段代码就被称为 表达式语句。

• 复合语句与空语句

  所谓复合语句指的是 将多个语句组合成一个语句块，那么这多个语句就被称为是一个复合语句。

  

  而空语句更加简单，通常情况下一个 ; 就是一个空语句。

• 条件语句

  所谓条件语句，指的就是 包含条件判断的语句，比如我们常见的 if/else/if 和 switch 语句

• 循环语句

  循环语句指的是 包含循环的语句。在 JS 中可以产生循环功能的语法非常多，比如：while、do/while、for 这三个都是基本的循环语法，这里咱们不去详细说。

  除此之外，还有一些 ES6 之后新增的循环方式：

  首先是 for/of 循环： for/of 循环，不可以循环对象，只能循环非对象，比如 Array、Map 都可以利用 for/of 进行循环操作。当数组使用 for/of 进行循环时，每个循环对象表示数组的 item。当 Map 进行循环时，每个循环对象是一个 数组，我们可以通过 [] 解构 的方式，拿到对应 item 的 key 和 value。

  其次是 for/in 循环： for/in 循环比较简单，它既可以循环对象，也可以循环数组。

  最后是 for/await与异步迭代 循环：这一块涉及到了迭代器和异步的部分，咱们把它放到 第12章 迭代器与生成器 和 第13章 异步JavaScript 中在进行讲解。

• 跳转语句

  所谓跳转语句指的是：会修改代码执行顺序的语句。

  JS 中的跳转语句一共分为 7 类：break、container、return、yield、throw、try/catch/finally，咱们一个一个来说。

  首先是 break：它通常配合循环或者 switch 进行使用，表示退出当前循环或 switch 条件判断。

  container：通常配合循环使用，它表示 跳出当前循环，继续进行下一次循环。

  return：return 语句只能出现在函数体内，表示返回值，并终止函数执行。

  yield： 主要配合生成器函数来进行使用，这个咱们等到 第12章 迭代器与生成器 时再进行说明。

  throw：表示抛出一个异常，通常情况下，这会终止程序的执行。

  try/catch/finally：可以捕获异常。当 try 中的代码块出现异常时，代码会进入 catch 执行，最终无论结果如何都会执行 finally。

• 其他语句

• 作者把 with、debugger、"use strict" 称之为 “其他语句”。

  witch：接受一个参数，并且会运行一个代码块。代码块中的代码会自动沿用参数的作用域，就好像 “直接从参数对象中取值一样”

  debugger：是我们常见的一个调试方式。在浏览器中打开控制台，代码运行到 debugger 处，会停止运行，等待调试。

  "use strict"：表示开启严格模式。

• “非正式语句”

• 作者把一些关键字，称为非正式语句，这些关键字有 const、let、var、funtion、class、import、export。

  这些是日常开发中的一些常见关键字，咱们这里就不再多描述了。

第五章总结

作者在第五章中，介绍了 JS 的所有常见语句。

这一章的内容其实还是比较多的，我们需要消耗大量的精力才能熟练以上所有的语法。

所以说，如果大家在看完之后发现有不太熟悉的语法的话，那么需要拿出来一些时间练习才可以哦~~

第6章 对象

作者花了一章的内容，来介绍对象的一些基本操作，共计 8 个部分。本章的内容虽然不少，但是从难度上来看应该还是比较简单的。

在 JS 中，对象是一个属性的 无序集合，所有用 {} 包裹，并且包含 key:value 结构的值都是一个对象。

想要创建一个对象的话，一共有三种方式：

• 对象字面量：这是最常用的一种方式 const obj = { name: '张三' }
• new 创建：利用 Object 构造函数，配合 new 关键字，创建对象实例 const obj = new Object
• 原型创建：通过 Object.create 方法创建对象实例

而想要创建对象属性的话，那么一共有两种方式：

• . 操作符：obj.key
• [key]：obj[key]

想要删除对象中的某个属性，可以利用咱们前面提到的 delete 关键字。

在 JS 中，如果想要测试某个属性是否属于指定对象，那么一共有三种方式：

• in 操作符：咱们之前有提到过这个操作符，这里就不再多说了。
• hasOwnProperty 方法：当前方法可以 测试指定属性是否为对象的自有属性。
• propertyIsEnumerable 方法：当前方法可以 测试指定属性是否为对象的可枚举属性。

而如果想要 依赖现有对象，扩展出其他对象的话，那么有两种方式：

• Object.assign()：该方法可以将所有可枚举（Object.propertyIsEnumerable() 返回 true）的自有（Object.hasOwnProperty() 返回 true）属性从一个或多个源对象复制到目标对象，返回修改后的对象。
• 扩展操作符...：利用 ES6 提供的 扩展操作符，可以把多个对象合并成一个新的对象。

除此之外，JS 还提供了序列化的方法，所谓的序列化指的是 把对象的状态转换为字符串的过程，之后可以从中恢复对象的状态 。在 JS 中，可以通过 JSON.parse 和 JSON.stringify 来完成对象的序列化过程。

最后就是 对象字面量扩展语法，这些扩展方法有些可能比较冷僻，但是有的确实在日常开发中存在一些价值，所以我们这里需要拿出来一些时间来说一下。

• 首先是 简写属性：这种语法是开发中非常常见的语法，当 key 和 value 为相同的名称时，可以简写
• 其次是 计算的属性名：有些时候我们可能期望使用 变量来作为对象的 key ，此时就需要用到这种计算的属性名。
• 然后是 简写方法：这个也是非常常见的一种写法。常见到很多同学都不认为这是一种简写的写法
• 最后是 属性的获取方法与设置方法：我们可以通过 set 和 get 表示来标记一个对象的方法，这样这个方法就可以像调用属性一样进行调用了。vue3 中的 ref 就是通过这种方式实现的响应性

第六章总结

整个第六章作者把对象几乎所有的概念全部灌输给了我们。在咱们的讲解中对作者提到的内容进行了一些适当的简化，差不多包含了书中 70% - 80% 的内容。花 不到 10 分钟 了解这些内容还是挺有价值的。

第7章 数组

第七章、第八章的内容和第六章非常相似，作者几乎是把数组和函数中涉及到的所有内容一股脑的都灌输给了我们。所以说在这两章中，我会对内容进行一些删减，只会保留 对大家企业开发有价值的部分。

OK，那么咱们先来看数组。

在 JS 中，对象是无序的集合，而数组是有序的集合。数组中的值叫作元素，每个元素有一个数值表示的位置，叫作索引。

创建数组的方式有很多，这里我们主要来看 4 种方式：

• 首先是通过数组字面量的方式进行创建：这种方式在实际开发中，时最常见的一种形式

• 其次，数组也可以通过扩展操作符来进行合并、和创建

• 而如果我们想要创建一个 有长度，但是没有具体值 的数组的话，那么可以通过 Array()构造函数 的方式来进行创建

• 除此之外，JS 还提供了两个 工厂方法 来创建数组：

  • 第一个是 Array.of()：可以通过 可变数量的参数 创建一个新的 Array 实例，而不需要考虑参数的数量或类型。

  • 第二个是 Array.from()：这个方法的主要价值是可以把 把类数组转化为真实数组。关于类数组我们会在下面讲解到

想要对数组的元素进行读写，其实是比较简单的，我们可以直接来看对应的代码内容：

有些数组，可能空有长度，但是在 0 下标下却没有元素，这种数组被称为 稀疏数组，比如：

想要获取数组长度的话，可以直接通过 length 属性获取：

而想要添加或者删除数组元素的话，这里咱们各列举三种方式：

• 添加

  • Array.prototype.push()：把指定元素添加对数组的最后
  • Array.prototype.unshift()：把指定元素添加到数组的最前
  • arr[1] = 'xx'：把指定元素添加到数组的指定位置

• 删除

  • Array.prototype.pop()：从数组的最后删除元素
  • Array.prototype.shift()：从数组的最前删除元素
  • delete 操作符：删除数组指定位置元素

对于数组迭代的话，我们日常开发中常用的其实只有两种：

• 传统 for 循环：
• forEach 循环：

另外在 JS 中，没有专门的多维数组的概念，所谓的多维数组其实只不过是用 数组的元素也为数组 这种方式来进行的模拟

在 JS 中存在一个特殊的数组概念，叫做 类数组对象。在 JS 中，所有的数组都拥有如下四个特性：

• ① 数组的length属性会在新元素加入时自动更新
• ② 设置length为更小的值会截断数组
• ③ 数组从Array.prototype继承有用的方法
• ④ Array.isArray()对数组返回true

而类数组，虽然也具备 length 属性，但是却没有以上这四个特性。比如：arguments。如果想要把类数组对象转化为数组对象，可以使用我们之前提到的 Array.from() 方法

第8章 函数

接下来，咱们来看函数模块。作者通过 7 个小节来描述了函数的所有操作。

首先在 js 中，把函数定义为了一个 代码块，只不过这个代码块拥有一个名字，定义之后，可以被执行或调用 任意多次。

想要定义函数有三种常见的形式：

• 利用 function 进行函数声明：
• 创建匿名函数，也就是函数表达式：
• 创建箭头函数，箭头函数只能是匿名函数：

而想要调用定义的函数，一共有 5 种形式：

• 普通的函数调用：

• 以对象方法的形式进行调用：

• 通过构造函数的形式进行调用：

• 利用 JS API 进行间接调用，这里主要用到三个 API：

  • call
  • apply
  • bind

• 通过隐式的函数调用：比如之前看到的 get || set 标记

函数包含参数的概念，参数分为 形参 和 实参 。其中 形参 表示 定义函数时指定的参数。 实参 表示 调用函数时传递的参数。在 JS 中实参和形参并 不需要 是一一对应的，同时函数调用也不对传入的实参进行任何类型检查。那么这样的一个动态的形式，在 JS 中就被分为了 5 个概念：

• 可选形参与默认值：这样的代码表示，如果没有传入 a 形参，那么 a 默认为 []
• 剩余形参与可变长度实参列表：可以通过 ... 的形式来获取所有的剩余实参。在这里 rest = [10, 100, 2, 3, 1000, 4, 5, 6]
• Arguments 对象：表示或许所有的实参，它是一个伪数组，可以通过 Array.from 方法转化为真实数组
• 在函数调用中使用扩展操作符：在实参中可以使用扩展运算符，这表示把数组所有的元素作为一个一个的实参单独传入
• 把函数实参解构为形参：函数的形参可以直接进行解构

函数内部可以嵌套函数，如果 一个函数访问了其它函数作用域中才有的变量，那么这个函数可以叫做 闭包函数。闭包是在面试时的一个常见概念，需要大家能够掌握。

对于函数而言，它除了可以被调用之外，还拥有自己的 属性 和 方法。

• 属性：函数的属性有很多，咱们这里主要说三个

  • length 属性：形参的个数
  • name 属性：定义函数时使用的名字
  • prototype 属性：获取原型对象

• 方法

  • call()、apply()：这两个是函数的典型方法。call()和apply()允许间接调用一个函数，就像这个函数是某个其他 对象 的方法一样，同时会把该函数中的 this 修改为当前对象。
  • bind()：在函数 f 上调用 bind() 方法并传入对象 o，则这个方法会返回一个新函数。同时它也会修改函数 f 中的 this 指向
  • toString() 方法：返回一个符合函数声明语句的字符串
  • Function() 构造函数：使用 Function() 构造函数可以用来 创建新函数

最后如果一个函数 接收一个函数参数，并返回一个新函数 的话，那么这个函数可以被叫做 高阶函数

第9章 类

那么最后咱们来看下 第9章 类。

其实，书中对于 类 概念的介绍并不是特别的清晰，个人感觉不如 《深入理解现代 JavaScript》对类这一块的讲解。

但是好在，即使如此，书中依然有些可圈可点的地方。

首先 JS 中把 可以让一组对象在同一个原型对象中继承属性 的东西称之为 类。比如，我们可以简单的通过 Object.create() 创建实例 ，那此时 Object 其实就可以被称为一个类。

在 ES6 之前，类以构造函数的形式进行呈现，所谓构造函数其实就是一个 首字母大写的普通函数：

因为它是一个普通函数，所以它既可以通过 构造函数 的形式，配合 new 进行使用。也可以直接调用使用。如果我们想要判断当前的函数是否是通过 new 关键字使用的，那么可以通过 new.target 来进行判定“：

通过构造函数得到的实例，可以利用 instanceof 关键字进行判定

在 ES6 之后，ES 推出了 class 的语法，利用 class 语法可以直接创建类，而不需要在像之前通过构造函数进行创建了。我们可以使用 class 重写 Range 类：

有了 class 之后，如果想要实现继承，那么就非常简单了，可以直接通过 extends 实现继承：

利用 static 关键字，可以为类设置静态方法：静态方法是作为构造函数而非原型对象的属性定义的。

以上代码通过：Range.parse() 调用

因为 class 本质上依然是 原型继承 的机制，所以我们可以通过 prototype 属性来为已有的类添加方法：

第九章总结

关于类，其实书中介绍了挺多的内容。但是这一块对比 《深入理解现代 JavaScript》 来看并不够清晰，所以我们只是挑选了书中的一小部分精华来进行了讲解。如果大家想要更深入的了解类的概念，那么可以查看 《深入理解现代 JavaScript》。

总结

到这里，咱们就讲完了 《JavaScript权威指南（第7版）》的一半......

根据讲解其实咱们可以知道，《JavaScript权威指南（第7版）》中事无巨细的讲解了 JavaScript 的大量基础语法。前九章的内容，非常适合 JavaScript 的初学者进行阅读，你也一定可以得到不少的收获！

我是 Sunday，陪大家一起读书，一起分享技术知识，咱们下次再见，88~~~