ECMAScript 复习笔记

若尘的技术之旅
72 阅读19分钟

  1. ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现

  2. ES6 ，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

  3. Node.js 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。使用下面的命令，可以查看 Node.js 默认没有打开的 ES6 实验性语法。

    // Linux & Mac
$ node --v8-options | grep harmony
// Windows
$ node --v8-options | findstr harmony

  4. Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

    ​ 安装 Babel

    $ npm install --save-dev @babel/core

  5. Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。

    Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator. Generator. Set. Map. Proxy. Reflect. Symbol. Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

  6. var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。

  7. 暂时性死区：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

  8. let不允许在相同作用域内，重复声明同一个变量。

  9. ES6 规定暂时性死区和let. const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。

  10. ES5 只有全局作用域和函数作用域，没有块级作用域。

  11. 块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

    // IIFE 写法
(function () {  var tmp = ...;  ...}());
// 块级作用域写法
{  let tmp = ...;  ...}

  12. ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

  13. const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值. 字符串. 布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

  14. 顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

  15. 每个函数都有一个name属性，返回该函数的函数名

  16. 如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

    如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

  17. Function构造函数返回的函数实例，name属性的值为anonymous。

    (new Function).name // "anonymous"

  18. bind返回的函数，name属性值会加上bound前缀。

    function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

  19. 箭头函数有几个使用注意点。

    （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

    （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

    （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

    （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

    上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

  20. 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。

    this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

  21. 由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

  22. 如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性

  23. ES6 一共有 5 种方法可以遍历对象的属性。

    （1）for…in

    for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

    （2）Object.keys(obj)

    Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

    （3）Object.getOwnPropertyNames(obj)

    Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

    （4）Object.getOwnPropertySymbols(obj)

    Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

    （5）Reflect.ownKeys(obj)

    Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

    以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

    • 首先遍历所有数值键，按照数值升序排列。
    • 其次遍历所有字符串键，按照加入时间升序排列。
    • 最后遍历所有 Symbol 键，按照加入时间升序排列。

  24. 链判断运算符

    const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

    等同于

    const firstName = message?.body?.user?.firstName || 'default';

  25. Null 判断运算符

    ??只有运算符左侧的值为null或undefined时，才会返回右侧的值。

    const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

    并不等同于

    const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

    ||运算符指定默认值的逻辑是：

    属性的值为null或undefined、空字符串、false、0，默认值也会生效

  26. Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

  27. Object.assign可以用来处理数组，但是会把数组视为对象。

    Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

  28. Object.assign 常见用途:为对象添加属性、为对象添加方法、克隆对象、合并多个对象、为属性指定默认值

  29. Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

    Object.fromEntries([  ['foo', 'bar'],  ['baz',42]])
// { foo: "bar", baz: 42 }

  30. Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

    注意，Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

    Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

  31. Symbol 作为属性名，遍历对象的时候，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。

    但是，它也不是私有属性，有一个Object.getOwnPropertySymbols()方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

  32. Set本身是一个构造函数，用来生成 Set 数据结构

    [...new Set(array)] // 去除数组的重复成员

    Array.from(new Set(array))

  33. 向 Set 实例添加两次NaN，但是只会加入一个。这表明，在 Set 内部，两个NaN是相等的。

    另外，两个对象总是不相等的。

  34. Set 实例的常见方法：add、delete、has、clear、size

  35. WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

    首先，WeakSet 的成员只能是对象，而不能是其他类型的值。

    其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

    这是因为垃圾回收机制依赖引用计数，如果一个值的引用次数不为0，垃圾回收机制就不会释放这块内存。结束使用该值之后，有时会忘记取消引用，导致内存无法释放，进而可能会引发内存泄漏。WeakSet 里面的引用，都不计入垃圾回收机制，所以就不存在这个问题。因此，WeakSet 适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在 WeakSet 里面的引用就会自动消失。

    由于上面这个特点，WeakSet 的成员是不适合引用的，因为它会随时消失。另外，由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。

  36. WeakSet 是一个构造函数，可以使用new命令，创建 WeakSet 数据结构。

    const ws = new WeakSet();

  37. WeakSet 可以接受一个数组或类似数组的对象作为参数。（实际上，任何具有 Iterable 接口的对象，都可以作为 WeakSet 的参数。）该数组的所有成员，都会自动成为 WeakSet 实例对象的成员。

  38. WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

  39. Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。

  40. WeakMap与Map的区别有两点。

    首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

    其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

  41. Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

    Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

    Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。

  42. Reflect 是一个内置对象，提供了一系列操作对象的方法，这些方法都是静态的（类似 Math），使用 Reflect 的方法可以做一些对象的基本操作。

    Reflect 意思是反射，反射是在程序运行中获取和动态操作自身内容的一项技术。其实对于 JavaScript 来说在出现 Reflect 之前就已经有反射的能力了，我们可以使用 Object.keys() 获取对象属性，可以使用 Object.defineProperty 定义属性，这些实际上都是反射的能力。

    Reflect 是一个内建的对象，用来提供方法去拦截 JavaScript 的操作。 Reflect 不是一个函数对象，所以它是不可构造的，也就是说它不是一个构造器，不能通过 new 操作符去新建或者将其作为一个函数去调用 Reflect 对象。 Reflect 的所有属性和方法都是静态的。 Reflect 内部封装了一系列对对象的底层操作。 Reflect 成员方法就是 Proxy 处理对象的默认实现。

  43. Promise对象有以下两个特点。

    （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

    （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

    Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

    Promise 几个方法：all、race、allSettled、any

    Promise.any()跟Promise.race()方法很像，只有一点不同，就是不会因为某个 Promise 变成rejected状态而结束。

  44. 所谓”异步”，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。

    比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。

    相应地，连续的执行就叫做同步。由于是连续执行，不能插入其他任务，所以操作系统从硬盘读取文件的这段时间，程序只能干等着。

  45. async 函数是什么？一句话，它就是 Generator 函数的语法糖。

    async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

    async函数的返回值是 Promise 对象

  46. ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

  47. Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多

  48. Object.getPrototypeOf(ColorPoint) === Point

    // true

    可以使用这个方法判断，一个类是否继承了另一个类

  49. ES6 要求，子类的构造函数必须执行一次super函数。

  50. 大多数浏览器的 ES5 实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。

    （1）子类的__proto__属性，表示构造函数的继承，总是指向父类。

    （2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

  51. import和export命令只能在模块的顶层，不能在代码块之中

  52. require是运行时加载模块，import命令无法取代require的动态加载功能。

  53. import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

  54. ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

    严格模式主要有以下限制。

    • 变量必须声明后再使用
    • 函数的参数不能有同名属性，否则报错
    • 不能使用with语句
    • 不能对只读属性赋值，否则报错
    • 不能使用前缀 0 表示八进制数，否则报错
    • 不能删除不可删除的属性，否则报错
    • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
    • eval不会在它的外层作用域引入变量
    • eval和arguments不能被重新赋值
    • arguments不会自动反映函数参数的变化
    • 不能使用arguments.callee
    • 不能使用arguments.caller
    • 禁止this指向全局对象
    • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
    • 增加了保留字（比如protected、static和interface）

  55. 本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

  56. export 与 import 的复合写法：

    export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

  57. const声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。

    // constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;
// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3
// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

  58. <script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。

    defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

  59. 浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

    <script type="module" src="./foo.js"></script>

  60. ES6 模块与 CommonJS 模块的差异：

    • CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
    • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

  61. Node.js 对 ES6 模块的处理比较麻烦，因为它有自己的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将两者分开，ES6 模块和 CommonJS 采用各自的加载方案。从 v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。

    Node.js 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。Node.js 遇到.mjs文件，就认为它是 ES6 模块，默认启用严格模式，不必在每个模块文件顶部指定"use strict"。

    如果不希望将后缀名改成.mjs，可以在项目的package.json文件中，指定type字段为module。

    {
   "type": "module"
}

    如果这时还要使用 CommonJS 模块，那么需要将 CommonJS 脚本的后缀名都改成.cjs。如果没有type字段，或者type字段为commonjs，则.js脚本会被解释成 CommonJS 模块。

    总结为一句话：.mjs文件总是以 ES6 模块加载，.cjs文件总是以 CommonJS 模块加载，.js文件的加载取决于package.json里面type字段的设置。

    注意，ES6 模块与 CommonJS 模块尽量不要混用。require命令不能加载.mjs文件，会报错，只有import命令才可以加载.mjs文件。反过来，.mjs文件里面也不能使用require命令，必须使用import。

  62. 立即执行函数可以写成箭头函数的形式。

    (() =&gt; {
  console.log('Welcome to the Internet.');
})();

  63. 柯里化（currying）指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只接受一个参数（unary）。

  64. 函数合成（function composition）指的是，将多个函数合成一个函数。

avatar
文章
阅读
粉丝