现代 JavaScript 教程 — JavaScript 编程语言篇

最权威的信息来源(语言细节)，每年都会发布一个新版本的规范

- 新的特性被加入，旧的功能也没有改变 这么做有利于兼容旧代码，

- 但缺点是 JavaScript 创造者的任何错误或不完善的决定也将永远被保留在 JavaScript 语言中

- 这种情况一直持续到 2009 年 ECMAScript 5 (ES5) 的出现

- ES5 规范增加了新的语言特性并且修改了一些已经存在的特性

- 为了保证旧的功能能够使用，大部分的修改是默认不生效的

- 【需要一个特殊的指令 —— "use strict" 来明确地激活这些特性】

- 脚本文件的顶部

- 函数体的开头

- “classes” 和 “modules”自动启用`'use strict'`

---

- 没有办法取消 `'use strict'`

- console控制台`'use strict'; <Shift+Enter 换行>`

一个普遍的做法是将常量用作别名，以便记住那些在执行之前就已知的难以记住的值

const COLOR_RED = "#F00"
const COLOR_GREEN = "#0F0"
const COLOR_BLUE = "#00F"
const COLOR_ORANGE = "#FF7F00"
 
// ……当我们需要选择一个颜色
let color = COLOR_ORANGE
alert(color) // #FF7F00

-  `COLOR_ORANGE` 比 `"#FF7F00"` 更容易记忆

- 比起 `COLOR_ORANGE` 而言，`"#FF7F00"` 更容易输错

- 阅读代码时，`COLOR_ORANGE` 比 `#FF7F00` 更易懂

- 作为一个“常数”，意味着值永远不变

- **但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值之后就不会改变**

const pageLoadTime = /* 网页加载所需的时间 */;
 
 
// **`pageLoadTime` 的值在页面加载之前是未知的，所以采用常规命名,但是它仍然是个常量，因为赋值之后不会改变**
 
// 换句话说，**大写命名的常量仅用作“硬编码（hard-coded）”值的别名**。**当值在执行之前或在被写入代码的时候，就知道值是什么了**。

在 JavaScript 中有 8 种基本的数据类型（译注：**7 种原始类型(基本数据类型)和 1 种引用类型(复杂数据类型)**）

- `number`

- `bigint`

- `string`

- `boolean`

- `null`

- `undefined`

- `symbol`

- `object`

- 两种形式：`typeof x` 或者 `typeof(x)`

- 以字符串的形式返回类型名称，例如 `"string"`

- `typeof null` 会返回 `"object"` —— 这是 JavaScript 编程语言的一个错误，实际上它并不是一个 object

- `typeof alert` 的结果是 `"function"`。在 JavaScript 语言中没有一个特别的 `“function”` 类型。函数隶属于 object 类型。但是 `typeof` 会对函数区分对待，并返回 `"function"`。这也是来自于 JavaScript 语言早期的问题。*从技术上讲，这种行为是不正确的，但在实际编程中却非常方便。*

number 类型代表整数和浮点数;除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于这种类型：Infinity、-Infinity 和 NaN。

- `alert( 1 / 0 ); // Infinity`

- `alert( "not a number" / 2 + 5 ); // NaN` **NaN 是粘性的。任何对 NaN 的进一步操作都会返回 NaN**

- 转换发生在输出内容的时候

- 或通过 String(value) 进行显式转换

- 转换发生在进行算术操作时

- 或通过 Number(value) 进行显式转换

- 规则：

 - Number(undefined);// NaN

 - Number(null);// 0

 - Number(true);// 1

 - Number(false);// 0

 - Number(str);// 原样读取str字符串，忽略两端空白，空字符串转换为0，出错则为NaN

- 转换发生在进行逻辑操作时

- 可以通过 Boolean(value) 进行显式转换

    - Boolean(0);//false

    - Boolean(null);//false

    - Boolean(undefined);//false

    - Boolean(NaN);//false

    - Boolean("");//false

    - Boolean(" ");//true

    - Boolean("0");//true

**所有的运算符都有返回值**，自增/自减也不例外


- 前置形式返回一个新的值

- 后置返回原来的值（做加法/减法之前的值）

在 JavaScript 中，大多数运算符都会返回一个值

- 这对于 + 和 - 来说是显而易见的

- 但对于 = 来说也是如此

let a = 1
let b = 2
 
let c = 3 - (a = b + 1)
 
alert(a) // 3
alert(c) // 0
 
// 上面这个例子，(a = b + 1) 的结果是赋给 a 的值（也就是 3）。然后该值被用于进一步的运算。
 
// 有时会在 JavaScript 库中看到它。不过，请不要写这样的代码。这样的技巧绝对不会使代码变得更清晰或可读。

换言之，字符串是按字符（母）逐个进行比较的。

alert("Z" > "A") // true
alert("Glow" > "Glee") // true
alert("Bee" > "Be") // true

- 首先比较两个字符串的首位字符大小

- 如果一方字符较大（或较小），则该字符串大于（或小于）另一个字符串。算法结束。

- 否则，如果两个字符串的首位字符相等，则继续取出两个字符串各自的后一位字符进行比较

- 重复上述步骤进行比较，直到比较完成某字符串的所有字符为止

- 如果两个字符串的字符同时用完，那么则判定它们相等，否则未结束（还有未比较的字符）的字符串更大

这是因为在 JavaScript 使用的内部编码表中（Unicode），小写字母的字符索引值更大

避免问题：

- 除了严格相等 === 外，其他但凡是有 undefined/null 参与的比较，我们都需要格外小心

- 除非你非常清楚自己在做什么，否则永远不要使用 >= > < <= 去比较一个可能为 null/undefined 的变量

- 对于取值可能是 null/undefined 的变量，请按需要分别检查它的取值情况

''一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值''

返回的值是操作数的初始形式，不会做布尔转换

// 例如，有变量 firstName、lastName 和 nickName，都是可选的（即可以是 undefined，也可以是假值）。
 
// 用或运算 || 来选择有数据的那一个，并显示出来（如果没有设置，则用 "Anonymous"）：
 
let firstName = ""
let lastName = ""
let nickName = "SuperCoder"
 
alert(firstName || lastName || nickName || "Anonymous") // SuperCoder
 
// 如果所有变量的值都为假，结果就是 "Anonymous"。

// 或运算符 || 的另一个用途是所谓的“短路求值”。
 
// 这指的是，|| 对其参数进行处理，直到达到第一个真值，然后立即返回该值，而无需处理其他参数。
 
//如果操作数不仅仅是一个值，而是一个有副作用的表达式，例如变量赋值或函数调用，那么这一特性的重要性就变得显而易见了。
 
//在下面这个例子中，只会打印第二条信息：
 
true || alert("not printed")
false || alert("printed")
 
// 在第一行中，或运算符 || 在遇到 true 时立即停止运算，所以 alert 没有运行。
 
// 有时，人们利用这个特性，只在左侧的条件为假时才执行命令。

与运算返回第一个假值，如果没有假值就返回最后一个值

返回的值是操作数的初始形式，**不会做布尔转换**

alert(1 && 2 && null && 3) // null

alert(1 && 2 && 3) // 3，最后一个值

逻辑非运算符接受一个参数，并按如下运作：

- 将操作数转化为布尔类型：true/false。

- **返回相反的值**

**两个非运算 !! 有时候用来将某个值转化为布尔类型**

- 将值既不是 null 也不是 undefined 的表达式**定义为**“已定义的（defined）


a ?? b 的结果是：

- 如果 a 是已定义的，则结果为 a

- 如果 a 不是已定义的，则结果为 b


- 换句话说，如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数

result = a ?? b
 
// 等价于
 
result = a !== null && a !== undefined ? a : b

// 1. 为可能是未定义的变量提供一个默认值
 
let user
 
alert(user ?? "Anonymous") // Anonymous
 
// 2. 可以使用 ?? 序列从一系列的值中选择出第一个非 null/undefined 的值
 
let firstName = null
let lastName = null
let nickName = "Supercoder"
 
// 显示第一个已定义的值：
alert(firstName ?? lastName ?? nickName ?? "Anonymous") // Supercoder

- || 返回第一个 真 值

- ?? 返回第一个 已定义的 值

// 被比较的值必须是相同的类型才能进行匹配
 
let arg = prompt("Enter a value?")
switch (arg) {
  case "0":
  case "1":
    alert("One or zero")
    break
 
  case "2":
    alert("Two")
    break
 
  case 3:
    alert("Never executes!")
    break
  default:
    alert("An unknown value")
}
 
// 输入 3，因为 prompt 的结果是字符串类型的 "3"，不严格相等 === 于数字类型的 3，所以 case 3 不会执行！因此 case 3 部分是一段无效代码。所以会执行 default 分支。

1.**空值的 return 或没有 return 的函数返回值为 undefined**

2.**不要在 return 与返回值之间添加新行**

return
some + long + expression + or + whatever * f(a) + f(b)

return
some + long + expression + or + whatever * f(a) + f(b)

function sayHi() {
  // ...
}
 
let sayHi = function () {
  // ...
}

- 在代码块的结尾不需要加分号 ;

    - if { ... }

    - for { }

    - function f { }

    - 等语法结构后面都不用加


- 函数表达式是在语句内部的：

    - `let sayHi = ...;`

    - 作为一个值，它不是代码块而是一个赋值语句

    - 不管值是什么，都建议在语句末尾添加分号 ;

    - 所以这里的分号与函数表达式本身没有任何关系，它只是用于终止语句

- 当使用语言的一些现代特性时，一些引擎可能无法支持这样的代码


- 正如上所述，并不是所有功能在任何地方都有实现


- 这就是 Babel 来拯救的东西

1.第一，用于重写代码的 transpiler 程序

- 开发者在自己的电脑上运行它,它以之前的语言标准对代码进行重写

- 然后将代码传到面向用户的网站

- 像 [webpack](http://webpack.github.io/) 这样的现代项目构建系统，提供了在每次代码改变时自动运行 transpiler 的方法，因此很容易集成在开发过程中

2.第二，polyfill

- 新的语言特性可能不仅包括语法结构，还包括新的内建函数

- Transpiler 会重写代码，将语法结构转换为旧的结构

- 但是对于新的内建函数，需要我们去实现

- JavaScript 是一个高度动态化的语言，脚本可以添加/修改任何函数，从而使它们的行为符合现代标准

- 更新/添加新函数的脚本称为 “polyfill”，它“填补”了缺口，并添加了缺少的实现

- [core js](https://github.com/zloirock/core-js) 支持很多，允许只包含需要的功能

- [polyfill.io](http://polyfill.io/) 根据功能和用户的浏览器，为脚本提供 polyfill 的服务

如果要使用现代语言功能，transpiler 和 polyfill 是必要的

let user = {
  name: "John",
  age: 30,
}

- 列表中的最后一个属性应以逗号结尾,叫做尾随（trailing）或悬挂（hanging）逗号

- 这样便于添加、删除和移动属性，因为所有的行都是相似的

// 这将提示有语法错误
user.likes birds = true
 
// JavaScript 理解不了。它认为我们在处理 user.likes，然后在遇到意外的 birds 时给出了语法错误。

- 点符号要求 key 是''有效的变量标识符''。这意味着：''不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 _）''。


- 另一种方法，就是使用方括号，可用于任何字符串

let user = {}
 
// 设置
user["likes birds"] = true
 
// 读取
alert(user["likes birds"]) // true
 
// 删除
delete user["likes birds"]
 
// 请注意方括号中的字符串要放在引号中，单引号或双引号都可以

let key = "likes birds"
 
// 跟 user["likes birds"] = true; 一样
user[key] = true

let user = {
  name: "John",
  age: 30,
}
 
let key = prompt("What do you want to know about the user?", "name")
 
// 访问变量
alert(user[key]) // John（如果输入 "name"）

let user = {
  name: "John",
  age: 30,
}
 
let key = "name"
alert(user.key) // undefined

let fruit = prompt("Which fruit to buy?", "apple")
 
let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
}
 
alert(bag.apple) // 5 如果 fruit="apple"

let fruit = prompt("Which fruit to buy?", "apple")
let bag = {}
 
// 从 fruit 变量中获取值
bag[fruit] = 5

变量名不能是编程语言的某个保留字，如 “for”、“let”、“return” 等……

// 这些属性都没问题
let obj = {
  for: 1,
  let: 2,
  return: 3,
}
 
alert(obj.for + obj.let + obj.return) // 6

- ''属性名可以是任何字符串或者 symbol（一种特殊的标志符类型，将在后面介绍）''


- ''其他类型会被自动地转换为字符串''

名为 `__proto__ `的属性。不能将它设置为一个''非对象''的值

let obj = {}
obj.__proto__ = 5 // 分配一个数字
alert(obj.__proto__) // [object Object] — 值为对象，与预期结果不同

对象有顺序吗？换句话说，如果我们遍历一个对象，我们获取属性的顺序是和属性添加时的顺序相同吗？这靠谱吗？

- 简短的回答是：“有特别的顺序”：''整数属性会被进行排序，其他属性则按照创建的顺序显示''

> 这里的“整数属性”指的是一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串

let codes = {
  49: "Germany",
  41: "Switzerland",
  44: "Great Britain",
  // ..,
  1: "USA",
}
 
for (let code in codes) {
  alert(code) // 1, 41, 44, 49
}

let user = {
  name: "John",
  surname: "Smith",
}
user.age = 25 // 增加一个
 
// 非整数属性是按照创建的顺序来排列的
for (let prop in user) {
  alert(prop) // name, surname, age
}

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA",
}
 
for (let code in codes) {
  alert(+code) // 49, 41, 44, 1
}

JavaScript内存管理得重要概念-可达性（Reachability）

- ''可达值：以某种方式可访问或可用的值''

- ''根（roots）''：固有的可达值的基本集合（这些值明显不能被释放）：

    * 当前函数的局部变量和参数

    * 嵌套调用时，当前调用链上所有函数的变量与参数

    * 全局变量

    * 还有一些内部的

''被引用与可访问（从一个根）不同''：一组相互连接的对象可能整体都不可达

* 如果你经常使用其他的编程语言，那么你可能已经习惯了“绑定 this”的概念，即在对象中定义的方法总是有指向该对象的 this


* 在 JavaScript 中，this 是“自由”的，它的值是在调用时计算出来的，它的值并不取决于方法声明的位置，而是取决于在“点符号前”的是什么对象


* 在运行时对 this 求值的这个概念既有优点也有缺点

    - 一方面，函数可以被重用于不同的对象

    - 另一方面，更大的灵活性造成了更大的出错的可能

如果 `obj.f()` 被调用了，则 `this` 在 `f` 函数调用期间是 `obj`

当一个函数被使用 new 操作符执行时，它按照以下步骤：

- 一个新的空对象被创建并分配给 this

- 函数体执行.通常它会修改 this，为其添加新的属性

- 返回 this 的值

// `new User(...)` 做的就是类似的事情
function User(name) {
  // this = {};（隐式创建）
 
  // 添加属性到 this
  this.name = name
  this.isAdmin = false
 
  // return this;（隐式返回）
}

- 通常，构造器没有 return 语句,任务是将所有必要的东西写入 this，并自动转换为结果

- 但是，如果这有一个 return 语句，那么规则就简单了：

    * ''如果 return 返回的是一个对象，则返回这个对象，而不是 this''

    * ''如果 return 返回的是一个原始类型，则忽略''

function A() { ... }
function B() { ... }
 
let a = new A;
let b = new B;
 
alert( a == b ); // true

这是构造器的主要目的 —— 实现''可重用的对象创建''代码

在一个函数内部，可以使用 new.target 属性来检查/判断该函数是被

- 通过 new 调用的“构造器模式”

- 还是没被通过 new 调用的“常规模式”

function User() {
  alert(new.target)
}
 
// 不带 "new"：
User() // undefined
 
// 带 "new"：
new User() // function User { ... }

function User(name) {
  if (!new.target) {
    // 如果你没有通过 new 运行我
    return new User(name) // ……我会给你添加 new
  }
 
  this.name = name
}
 
let john = User("John") // 将调用重定向到新用户
alert(john.name) // John

// 获取 user.address.street，而该用户恰好没提供地址信息，会收到一个错误：
 
let user = {} // 一个没有 "address" 属性的 user 对象
 
alert(user.address.street) // Error!

这是预期的结果

- JavaScript 的工作原理就是这样的,但是在很多实际场景中，我们''更希望得到的是 undefined 而不是一个错误''

let user = {}
 
alert(user.address ? user.address.street : undefined)

// 例如，让我们尝试获取 user.address.street.name。既需要检查 user.address，又需要检查 user.address.street：
 
let user = {} // user 没有 address 属性
 
alert(
  user.address ? (user.address.street ? user.address.street.name : null) : null,
)

let user = {} // user 没有 address 属性
 
alert(user.address && user.address.street && user.address.street.name) // undefined（不报错

''如果可选链 ?. 前面的部分是 undefined 或者 null，它会停止运算并返回该部分''

''应该只将 ?. 使用在一些东西`可以不存在(null/undefined)`的地方''

- 例如，如果根据的代码逻辑，user 对象必须存在，但 address 是可选的，那么我们应该这样写 user.address?.street，而不是这样 user?.address?.street

- 所以，如果 user 恰巧因为失误变为 undefined，我们会看到一个编程错误并修复它。否则，代码中的错误在不恰当的地方被消除了，这会导致调试更加困难

如果 ?. 左边部分不存在，就会立即停止运算（“短路效应”）

- 可选链 ?. 不是一个运算符，而是一个特殊的语法结构

- 它还可以与函数和方括号一起使用

// id1 id2 是 symbol 的一个实例化对象, 描述都为"id"
let id1 = Symbol("id")
let id2 = Symbol("id")
 
// 描述相同的 Symbol —— 它们不相等
alert(id1 == id2) // false
 
alert(id1) // 类型错误：无法将 Symbol 值自动转换为字符串。
 
alert(id1.toString()) // 通过 toString 显示转化，现在它有效了
 
alert(id.description) // 或者获取 symbol.description 属性，只显示描述（description）

- ''Symbol 允许创建对象的“隐藏”属性

- 代码的任何其他部分都不能意外访问或重写这些属性''

// 属于另一个代码
let user = {
  name: "John",
}
 
// 使用 Symbol("id") 作为键
let id = Symbol("id")
 
user[id] = 1
 
// 使用 Symbol 作为键来访问数据
alert(user[id])

- 因为 user 对象属于其他的代码，那些代码也会使用这个对象，所以不应该在它上面直接添加任何字段，这样很不安全

- 但是添加的 Symbol 属性不会被意外访问到，''第三方代码根本不会看到它''，所以使用 Symbol 基本上不会有问题

- 另外，假设另一个脚本希望在 user 中有自己的标识符，以实现自己的目的

- 这可能是另一个 JavaScript 库，因此脚本之间完全不了解彼此

- 然后该脚本可以创建自己的 Symbol("id")

// ...
let id = Symbol("id")
 
user[id] = "Their id value"

- 我们的标识符和它们的标识符之间不会有冲突

- 因为 Symbol 总是不同的，即使它们有相同的名字

- ……但如果我们处于同样的目的，使用字符串 "id" 而不是用 symbol，那么 就会 ''出现冲突''

let user = { name: "John" }
 
// 我们的脚本使用了 "id" 属性。
user.id = "Our id value"
 
// ……另一个脚本也想将 "id" 用于它的目的……
user.id = "Their id value"
 
// 砰！无意中被另一个脚本重写了 id！

''Symbol 属性不参与 for..in 循环''

let id = Symbol("id")
let user = {
  name: "John",
  age: 30,
  [id]: 123,
}
 
for (let key in user) alert(key) // name, age (no symbols)
 
// 使用 Symbol 任务直接访问
alert("Direct: " + user[id])

- ''Object.keys(xxx)也会忽略'',“隐藏符号属性”原则的一部分

- 相反，''Object.assign 会同时复制字符串和 symbol 属性''，

这里并不矛盾，就是这样设计的

- 这里的想法是当克隆或者合并一个 object 时，通常希望'' 所有 ''属性被复制（包括像 id 这样的 Symbol）

`有时想要名字相同的 Symbol 具有相同的实体`

// 从全局注册表中读取
let id = Symbol.for("id") // 如果该 Symbol 不存在，则创建它
 
// 再次读取（可能是在代码中的另一个位置）
let idAgain = Symbol.for("id")
 
// 相同的 Symbol
alert(id === idAgain) // true

Symbol 不是 100% 隐藏的

- 内置方法 Object.getOwnPropertySymbols(obj) 允许获取所有的 Symbol

- 还有一个名为 Reflect.ownKeys(obj) 的方法可以返回一个对象的 所有 键，包括 Symbol

alert((123456).toString(36)) // 2n9c

如果放置一个点：`123456.toString(36)`，那么就会出现一个 error，因为 JavaScript 语法隐含了第一个点之后的部分为小数部分

如果再放一个点，那么 JavaScript 就知道小数部分为空，现在使用该方法

也可以写成 `(123456).toString(36)`

alert(0.1 + 0.2 == 0.3) // false
 
alert(0.1 + 0.2) // 0.30000000000000004

- 在十进制数字系统中，可以保证以 10 的整数次幂作为除数能够正常工作，但是以 3 作为除数则不能(1/3 * 3 = 1 1/3 = 0.3333... 无限循环)

- 也是同样的原因，在二进制数字系统中，可以保证以 2 的整数次幂作为除数时能够正常工作，但 1/10 就变成了一个无限循环的二进制小数

- 使用二进制数字系统无法 精确 存储 0.1 或 0.2，就像没有办法将三分之一存储为十进制小数一样

- IEEE-754 数字格式通过将数字舍入到最接近的可能数字来解决此问题,这些舍入规则通常不允许看到的“极小的精度损失”，但是它确实存在。

- 不仅仅是 JavaScript
许多其他编程语言也存在同样的问题
 
- PHP，Java，C，Perl，Ruby 给出的也是完全相同的结果，因为它们基于的是相同的数字格式

- 有时候我们可以尝试完全避免小数

- 例如，正在创建一个电子购物网站，那么可以用角而不是元来存储价格。但是，如果要打 30% 的折扣呢？

- ''实际上，完全避免小数处理几乎是不可能的。只需要在必要时剪掉其“尾巴”来对其进行舍入即可''

数字内部表示的另一个有趣结果是存在两个零：

- 0

- -0

这是因为在存储时，使用一位来存储符号，因此对于包括零在内的任何数字，可以设置这一位或者不设置

在大多数情况下，这种区别并不明显，因为运算符将它们视为相同的值

两个特殊的数值

- Infinity（和 -Infinity）是一个特殊的数值，比任何数值都大（小）

- NaN 代表一个 error

isNaN(value) 将其参数转换为数字，然后测试它是否为 NaN

alert(isNaN(NaN)) // true
alert(isNaN("str")) // true

但是需要这个函数吗？不能只使用 `=== NaN` 比较吗？

- 不好意思，这不行

- `值 “NaN” 是独一无二的，它不等于任何东西，包括它自身`

alert(NaN === NaN) // false

isFinite(value) 将其参数转换为数字，如果是常规数字，则返回 true，而不是 NaN/Infinity/-Infinity

alert(isFinite("15")) // true
alert(isFinite("str")) // false，因为是一个特殊的值：NaN
alert(isFinite(Infinity)) // false，因为是一个特殊的值：Infinity

有时 isFinite 被用于验证字符串值是否为常规数字

let num = +prompt("Enter a number", "")
 
// 结果会是 true，除非你输入的是 Infinity、-Infinity 或不是数字
alert(isFinite(num))

有一个特殊的内建方法 Object.is，它类似于 === 一样对值进行比较，但它对于`两种边缘情况`更可靠：

* 它适用于 `NaN`：`Object.is（NaN，NaN）=== true`，这是件好事。

* 值 `0` 和 `-0` 是不同的：`Object.is（0，-0）=== false`，从技术上讲这是对的，因为在内部，数字的符号位可能会不同，即使其他所有位均为零。

- ''在所有其他情况下，Object.is(a，b) 与 a === b 相同。''

- 这种比较方式经常被用在 JavaScript 规范中

- 当内部算法需要比较两个值是否完全相同时，它使用 Object.is（内部称为 SameValue）

- https://tc39.es/ecma262/#sec-samevalue

isFinite("") // true
isFinite("    ") // true
 
Number("") // 0
Number("    ") //0
;+"" //0
;+"    " //0

// 将区间 0…1 中的所有值“映射”为范围在 min 到 max 中的值
// 1.将 0…1 的随机数乘以 max-min，则随机数的范围将从 0…1 增加到 0..max-min
// 2.将随机数与 min 相加，则随机数的范围将为 min 到 max
 
function random(min, max) {
  return min + Math.random() * (max - min)
}
 
alert(random(1, 5))
alert(random(1, 5))
alert(random(1, 5))

function randomInteger(min, max) {
  let rand = min + Math.random() * (max - min)
  return Math.round(rand)
}
 
alert(randomInteger(1, 3))

values from 1    ... to 1.4999999999  become 1
values from 1.5  ... to 2.4999999999  become 2
values from 2.5  ... to 2.9999999999  become 3

方法一：调整取值范围的边界

//为了确保相同的取值范围，我们可以生成从 0.5 到 3.5 的值，从而将所需的概率添加到取值范围的边界
 
function randomInteger(min, max) {
  // 现在范围是从  (min-0.5) 到 (max+0.5)
  let rand = min - 0.5 + Math.random() * (max - min + 1)
  return Math.round(rand)
}
 
alert(randomInteger(1, 3))

方法二：使用 `Math.floor`

function randomInteger(min, max) {
  // here rand is from min to (max+1)
  let rand = min + Math.random() * (max + 1 - min)
  return Math.floor(rand)
}
 
alert(randomInteger(1, 3))

间隔都以这种方式映射

values from 1  ... to 1.9999999999  become 1
values from 2  ... to 2.9999999999  become 2
values from 3  ... to 3.9999999999  become 3

所有常用的字符都是一个 2 字节的代码

大多数欧洲语言，数字甚至大多数象形文字中的字母都有 2 字节的表示形式

但 2 字节只允许 65536 个组合，这对于表示每个可能的符号是不够的

所以稀有的符号被称为“''代理对''”的一对 2 字节的符号编码

alert("𝒳".length) // 2，大写数学符号 X
alert("😂".length) // 2，笑哭表情
alert("𩷶".length) // 2，罕见的中国象形文字

`String.fromCharCode` 和 `str.charCodeAt`

与

`String.fromCodePoint` 和 `str.codePointAt`，差不多


但是不适用于''代理对''

''JavaScript 中的数组

- 既可以用作队列，

- 也可以用作栈''

''允许从首端/末端来添加/删除元素''

- 这在计算机科学中，允许这样的操作的数据结构被称为 双端队列（deque）

- https://en.wikipedia.org/wiki/Double-ended_queue

// 1. 添加一个非数字的属性，比如 :
arr.test = 5。
 
 
// 2. 制造空洞，比如：添加 arr[0]，然后添加 arr[1000] (它们中间什么都没有)。
 
arr[0] = 'first';
arr[1000] = 'last';
 
 
// 3. 以倒序填充数组，比如 arr[1000]，arr[999] 等等。
 
arr[1000] = 1000;
arr[999] = 999;

JavaScript中数组是一种特殊的【对象】

- 请将数组视为作用于 ''有序数据'' 的特殊结构

- ''数组在 JavaScript 引擎内部是经过特殊调整的，使得更好地作用于连续的有序数据，所以请以正确的方式使用数组''

- 如果需要任意键值，那很有可能实际上需要的是常规对象 {}

一，当修改数组的时候，length 属性会自动更新

let fruits = []
fruits[123] = "Apple"
 
alert(fruits.length) // 124

二，数组的length 属性是可写的

// 如果手动增加它，则不会发生任何有趣的事儿。但是如果减少它，数组就会被截断。该过程是不可逆的，下面是例子：
 
let arr = [1, 2, 3, 4, 5]
 
arr.length = 2 // 截断到只剩 2 个元素
alert(arr) // [1, 2]
 
arr.length = 5 // 又把 length 加回来
alert(arr[3]) // undefined：被截断的那些数值并没有回来

用 users.filter(user => army.canJoin(user)) 替换对 users.filter(army.canJoin, army) 的调用

- 前者的使用频率更高

- 因为对于大多数人来说，它更容易理解

let str = "Hello"
 
// 和 for..of 做相同的事
// for (let char of str) alert(char);
 
let iterator = str[Symbol.iterator]()
 
while (true) {
  let result = iterator.next()
  if (result.done) break
  alert(result.value) // 一个接一个地输出字符
}

let range = {
  from: 1,
  to: 5,
}

for(let num of range) ... num=1,2,3,4,5

let range = {
  from: 1,
  to: 5,
}
 
// 1. for..of 调用首先会调用这个：
range[Symbol.iterator] = function () {
  // ……它返回迭代器对象（iterator object）：
  // 2. 接下来，for..of 仅与此迭代器一起工作，要求它提供下一个值
  return {
    current: this.from,
    last: this.to,
 
    // 3. next() 在 for..of 的每一轮循环迭代中被调用
    next() {
      // 4. 它将会返回 {done:.., value :...} 格式的对象
      if (this.current <= this.last) {
        return { done: false, value: this.current++ }
      } else {
        return { done: true }
      }
    },
  }
}
 
// 现在它可以运行了！
for (let num of range) {
  alert(num) // 1, 然后是 2, 3, 4, 5
}

- range 自身没有 next() 方法

- 相反，是通过调用 range[Symbol.iterator]() 创建了另一个对象，即所谓的“迭代器”对象，并且它的 next 会为迭代生成值。

''迭代器对象和与其进行迭代的对象是分开的''

* `obj[Symbol.iterator]()` 的结果被称为 `迭代器（iterator）`。由它处理进一步的迭代过程。

*一个迭代器必须有 `next()` 方法，它返回一个 `{done: Boolean, value: any}` 对象，这里 `done:true` 表明迭代结束，否则 value 就是下一个值

`Symbol.iterator `方法会被 `for..of `自动调用

内置的可迭代对象例如字符串和数组，都实现了 `Symbol.iterator`

Iterable 是实现了 Symbol.iterator 方法的对象

Array-like 是有索引和 length 属性的对象（所以它们看起来很像数组）

有一个全局方法 `Array.from` 可以接受一个`可迭代或类数组的值`，并从中获取一个“真正的”数组

然后就可以对其调用数组方法了

`Array.from(obj[, mapFn, thisArg])` 将`可迭代对象`或`类数组对象` obj 转化为`真正的数组 Array`

let john = { name: "John" }
 
// 存储每个用户的来访次数
let visitsCountMap = new Map()
 
// john 是 Map 中的键
visitsCountMap.set(john, 123)
 
alert(visitsCountMap.get(john)) // 123

- ''使用对象作为键是 Map 最值得注意和重要的功能之一''

- 对于字符串键，Object（普通对象）也能正常使用，但对于对象键则不行

let john = { name: "John" }
 
let visitsCountObj = {} // 尝试使用对象
 
visitsCountObj[john] = 123 // 尝试将 john 对象作为键
 
// 是写成了这样!
alert(visitsCountObj["[object Object]"]) // 123
 
// 因为 `visitsCountObj` 是一个对象，它会将所有的键如 john 转换为字符串，所以得到字符串键 `"[object Object]"`

* Map 使用 SameValueZero 算法来比较键是否相等

* 它和严格等于 === 差不多，但区别是

- NaN 被看成是等于 NaN所以 NaN 也可以被用作键

- 0 不等于 -0

这个算法不能被改变或者自定义

map.set("1", "str1").set(1, "num1").set(true, "bool1")

一，遍历所有的键

map.keys() —— 遍历并返回所有的键（returns an iterable for keys）

二，遍历所有的值

map.values() —— 遍历并返回所有的值（returns an iterable for values）

三，遍历所有的实体

map.entries() —— 遍历并返回所有的实体（returns an iterable for entries）
 
[key, value]，for..of 在默认情况下使用的就是这个

* 迭代的顺序与插入值的顺序相同

* 与普通的 Object 不同，Map 保留了此顺序'

let recipeMap = new Map([
  ["cucumber", 500],
  ["tomatoes", 350],
  ["onion", 50],
])
 
// 对每个键值对 (key, value) 运行 forEach 函数
recipeMap.forEach((value, key, map) => {
  alert(`${key}: ${value}`) // cucumber: 500 etc
})

如果想从一个已有的普通对象（plain object）来创建一个 Map

那么可以使用内建方法 `Object.entries(obj)`

''该方法返回对象的键/值对数组，该数组格式完全按照 Map 所需的格式''

let obj = {
  name: "John",
  age: 30,
}
 
let map = new Map(Object.entries(obj))
 
alert(map.get("name")) // John

* `Object.entries` 返回`键/值对数组：[ ["name","John"], ["age", 30] ]`

* 这就是 Map 所需要的格式

`Object.fromEntries` 方法的作用和`Object.entries(obj)`的使用是相反的

给定一个具有 [key, value] 键值对的数组，它会根据给定数组创建一个对象

let prices = Object.fromEntries([
  ["banana", 1],
  ["orange", 2],
  ["meat", 4],
])
 
// 现在 prices = { banana: 1, orange: 2, meat: 4 }
 
alert(prices.orange) // 2

可以使用

- `for..of`

- 或 `forEach`

来遍历 `Set`

一，使用  `for..of`

let set = new Set(["oranges", "apples", "bananas"])
 
for (let value of set) {
  alert(value)
}

二，使用 `forEach` 来遍历

let set = new Set(["oranges", "apples", "bananas"])
 
// 于数组 forEach 类似 ，与  Map forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value)
})

forEach 的回调函数有三个参数：

- 一个 value

- 然后是 同一个值 valueAgain

- 最后是目标对象

没错，同一个值在参数里出现了两次

* 👍forEach 的回调函数有三个参数，是为了与 Map 兼容 - 底层实现是一致的

一，`set.keys()`

set.keys() —— 遍历并返回所有的值（returns an iterable object for values）

二，`set.values()`

set.values() —— 与 set.keys() 作用相同，这是为了兼容 Map

三，`set.entries()`

set.entries() —— 遍历并返回所有的实体（returns an iterable object for entries）[value, value]，它的存在也是为了兼容 Map

`''Set 和 Map 是兼容的''`

一，WeakMap 的键必须是对象，不能是原始值

let weakMap = new WeakMap()
 
let obj = {}
 
weakMap.set(obj, "ok") // 正常工作（以对象作为键）
 
// 不能使用字符串作为键
weakMap.set("test", "Whoops") // Error，因为 "test" 不是一个对象

二，如果在 WeakMap 中使用一个对象作为键，并且没有其他对这个对象的引用 —— 该对象将会被从内存（和Map）中''自动清除''

let john = { name: "John" }
 
let weakMap = new WeakMap()
weakMap.set(john, "...")
 
john = null // 覆盖引用
 
// john 被从内存中删除了！

let john = { name: "John" }
 
// 该对象能被访问，john 是它的引用
 
// 覆盖引用
john = null
 
// 该对象将会被从内存中清除

通常，当对象、数组这类数据结构在内存中时，它们的子元素，如对象的属性、数组的元素都是可以访问的

例如，如果把一个对象放入到数组中，那么只要这个数组存在，那么这个对象也就存在，即使没有其他对该对象的引用

let john = { name: "John" }
 
let array = [john]
 
john = null // 覆盖引用
 
// 前面由 john 所引用的那个对象被存储在了 array 中
 
// 所以它不会被垃圾回收机制回收

💡类似的，如果使用对象作为常规 Map 的键，那么当 Map 存在时，该对象也将存在；它会占用内存，并且应该不会被（垃圾回收机制）回收

let john = { name: "John" }
 
let map = new Map()
map.set(john, "...")
 
john = null // 覆盖引用
 
// john 被存储在了 map 中，
// 我们可以使用 map.keys() 来获取它

👍WeakMap 在这方面有着根本上的不同；它不会阻止垃圾回收机制对作为键的对象（key object）的回收

三，WeakMap 不支持''迭代''以及 `keys()`，`values()` 和 `entries()` 方法;所以没有办法获取 WeakMap 的所有键或值

WeakMap 只有以下的方法：
 
- weakMap.get(key)
 
- weakMap.set(key, value)
 
- weakMap.delete(key)
 
- weakMap.has(key)

从技术上讲，WeakMap 的当前元素的数量是[未知的]

- JavaScript 引擎可能清理了其中的垃圾

- 可能没清理

- 也可能清理了一部分

因此，暂不支持访问 WeakMap 的所有键/值的方法

假如正在处理一个“属于”另一个代码的一个对象，也可能是第三方库，并想存储一些与之相关的数据，那么这些数据就应该与这个对象【共存亡】

—— 这时候 WeakMap 正是我们所需要的利器👍


- 将这些数据放到 WeakMap 中，并使用该对象作为这些数据的键，那么当该对象被垃圾回收机制回收后，这些数据也会被自动清除

weakMap.set(john, "secret documents")
// 如果 john 消失，secret documents 将会被自动清除

收集到的信息被存储在 map 中：

- 一个用户对象作为键，其访问次数为值

- 当一个用户离开时（该用户对象将被垃圾回收机制回收），这时我们就不再需要他的访问次数了

// 📁 visitsCount.js
let visitsCountMap = new Map() // map: user => visits count
 
// 递增用户来访次数
function countUser(user) {
  let count = visitsCountMap.get(user) || 0
  visitsCountMap.set(user, count + 1)
}
 
/** 其他部分的代码，可能是使用它的其它代码 **/
 
// 📁 main.js
let john = { name: "John" }
 
countUser(john) // count his visits
 
// 不久之后，john 离开了
john = null
 
/**
 
现在 john 这个对象应该被垃圾回收，但他仍在内存中，因为它是 visitsCountMap 中的一个键
 
当移除用户时，需要清理 visitsCountMap，否则它将在内存中无限增大。在复杂的架构中，这种清理会成为一项繁重的任务
 
**/

// 📁 visitsCount.js
let visitsCountMap = new WeakMap() // weakmap: user => visits count
 
// 递增用户来访次数
function countUser(user) {
  let count = visitsCountMap.get(user) || 0
  visitsCountMap.set(user, count + 1)
}
 
/** 
现在不需要去清理 visitsCountMap 了。当 john 对象变成不可访问时，即便它是 WeakMap 里的一个键，它也会连同它作为 WeakMap 里的键所对应的信息一同被从内存中删除
**/

当一个函数的结果需要被记住（“缓存”）

这样在后续的对同一个对象的调用时，就可以重用这个被缓存的结果

/ 📁 cache.js
let cache = new Map();
 
// 计算并记住结果
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* calculations of the result for */ obj;
 
    cache.set(obj, result);
  }
 
  return cache.get(obj);
}
 
// 现在我们在其它文件中使用 process()
 
// 📁 main.js
let obj = {/* 假设我们有个对象 */};
 
let result1 = process(obj); // 计算完成
 
// ……稍后，来自代码的另外一个地方……
let result2 = process(obj); // 取自缓存的被记忆的结果
 
// ……稍后，我们不再需要这个对象时：
obj = null;
 
alert(cache.size); // 1（啊！该对象依然在 cache 中，并占据着内存！）
 
 
/**
对于多次调用同一个对象，它只需在第一次调用时计算出结果，之后的调用可以直接从 cache 中获取。这样做的缺点是，当不再需要这个对象的时候需要清理 cache
**/

// 📁 cache.js
let cache = new WeakMap()
 
// 计算并记结果
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* calculate the result for */ obj
 
    cache.set(obj, result)
  }
 
  return cache.get(obj)
}
 
// 📁 main.js
let obj = {
  /* some object */
}
 
let result1 = process(obj)
let result2 = process(obj)
 
// ……稍后，我们不再需要这个对象时：
obj = null
 
// 无法获取 cache.size，因为它是一个 WeakMap，
// 要么是 0，或即将变为 0
// 当 obj 被垃圾回收，缓存的数据也会被清除

一，只能向 WeakSet 添加对象（而不能是原始值）

二，对象只有在其它某个（些）地方能被访问的时候，才能留在 set 中

三，跟WeakMap类似 支持 `add`，`has` 和 `delete` 方法，但不支持 `size` 和 `keys()`，并且不可`迭代`

 `*.keys()，*.values()，*entries()`  对于 `Array`  `Map` `Set`是通用的，对于普通对象有所不同

一，对于对象使用的调用语法是 `Object.keys(obj)`，而不是 `obj.keys()`

主要原因是''灵活性''
 
- ''在 JavaScript 中，对象是所有复杂结构的基础''
 
- 因此，可能有一个自己创建的对象，比如 data，并实现了它自己的 data.values() 方法
 
- 同时，依然可以对它调用 Object.values(data) 方法

二，`Object.*` 方法返回的是''“真正的”数组''对象，而不只是一个可迭代项

这主要是历史原因

 `*.keys()，*.values()，*entries()`会忽略 `symbol` 属性

就像 `for..in` 循环一样，这些方法会忽略使用 `Symbol(...)` 作为键的属性

Object.getOwnPropertySymbols

- https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols

- 它会返回一个只包含 Symbol 类型的键的数组

另外，还有一种方法 Reflect.ownKeys(obj)

- https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys

- 它会返回 所有 键

let [item1 = default, item2, ...rest] = array

数组是一个存储数据的''有序''集合，`因此解构特征和数据顺序相关`

let [firstName, surname] = "Ilya Kantor".split(" ")
 
// 这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。
 
// 这只是下面这些代码的更精简的写法而已：
 
// let [firstName, surname] = arr;
let firstName = arr[0]
let surname = arr[1]

// 数组中不想要的元素也可以通过添加额外的逗号来把它丢弃
 
// 不需要第二个元素
let [firstName, , title] = [
  "Julius",
  "Caesar",
  "Consul",
  "of the Roman Republic",
]
 
alert(title) // Consul

let [a, b, c] = "abc" // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3])

// 可以在等号左侧使用任何“可以被赋值的”东西。
 
// 例如，一个对象的属性：
 
let user = {}
;[user.name, user.surname] = "Ilya Kantor".split(" ")

let user = {
  name: "John",
  age: 30,
}
 
// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`) // name:John, then age:30
}

let user = new Map()
user.set("name", "John")
user.set("age", "30")
 
for (let [key, value] of user) {
  alert(`${key}:${value}`) // name:John, then age:30
}

let guest = "Jane"
let admin = "Pete"
 
// 交换值：让 guest=Pete, admin=Jane
;[guest, admin] = [admin, guest]
 
alert(`${guest} ${admin}`) // Pete Jane（成功交换！）

let [name1, name2, ...rest] = [
  "Julius",
  "Caesar",
  "Consul",
  "of the Roman Republic",
]
 
alert(name1) // Julius
alert(name2) // Caesar
 
// 请注意，`rest` 的类型是数组
alert(rest[0]) // Consul
alert(rest[1]) // of the Roman Republic
alert(rest.length) // 2

let [firstName, surname] = []
 
alert(firstName) // undefined
alert(surname) // undefined

// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"]
 
alert(name) // Julius（来自数组的值）
alert(surname) // Anonymous（默认值被使用了）

let {prop : varName = default, ...rest} = object

对象是''通过键来存储数据项的单个实体''，`因此结构特征和键相关`

// 在简单的情况下，等号左侧的就是 被解构对象 中的变量名列表
 
let options = {
  title: "Menu",
  width: 100,
  height: 200,
}
 
let { title, width, height } = options
 
alert(title) // Menu
alert(width) // 100
alert(height) // 200

let options = {
  title: "Menu",
  height: 200,
  width: 100,
}
 
// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let { title, ...rest } = options
 
// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height) // 200
alert(rest.width) // 100

let options = {
  size: {
    width: 100,
    height: 200,
  },
  items: ["Cake", "Donut"],
  extra: true,
}
 
// 为了清晰起见，解构赋值语句被写成多行的形式
let {
  size: {
    // 把 size 赋值到这里
    width,
    height,
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu", // 在对象中不存在（使用默认值）
} = options
 
alert(title) // Menu
alert(width) // 100
alert(height) // 200
alert(item1) // Cake
alert(item2) // Donut

// 实现这种函数的一个很不好的写法
 
function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}
 
// 缺点一：参数的顺序
 
// 缺点二：可读性会变得很差

// 传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"],
}
 
// ……然后函数马上把对象展开成变量
function showMenu({
  title = "Untitled",
  width = 200,
  height = 100,
  items = [],
}) {
  // title, items – 提取于 options，
  // width, height – 使用默认值
  alert(`${title} ${width} ${height}`) // My Menu 200 100
  alert(items) // Item1, Item2
}
 
showMenu(options)

showMenu({}) // 不错，所有值都取默认值
 
showMenu() // 这样会导致错误

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert(`${title} ${width} ${height}`)
}
 
showMenu() // Menu 100 200

let title, width, height;
 
// 这一行发生了错误
{title, width, height} = {title: "Menu", width: 200, height: 100};

{
  // 一个代码块
  let message = "Hello"
  // ...
  alert(message)
}

let title,
  width,
  height
 
  // 现在就可以了
;({ title, width, height } = { title: "Menu", width: 200, height: 100 })
 
alert(title) // Menu

JSON （JavaScript Object Notation） 是一种数据格式（表示值和对象的通用格式），具有自己的独立标准和大多数编程语言的库

JSON 支持

    - Objects { ... }

    - Arrays [ ... ]

    - Primitives：

        - strings

        - numbers

        - boolean (true/false)

        - null

* JSON 是语言无关的纯数据规范

* 因此一些特定于 JavaScript 的对象属性会被 JSON.stringify 跳过

    - 函数属性（方法）

    - Symbol 类型的属性

    - 存储 undefined 的属性

''重要的限制：不得有循环引用''

let user = {
  sayHi() {
    // 被忽略
    alert("Hello")
  },
  [Symbol("id")]: 123, // 被忽略
  something: undefined, // 被忽略
}
 
alert(JSON.stringify(user)) // {}（空对象）

JavaScript 提供序列化（serialize）成 JSON 的方法 JSON.stringify 和解析 JSON 的方法 JSON.parse

这两种方法都支持用于智能读/写的转换函数

`JSON.stringify(student)` 得到的 json 字符串是一个被称为'' JSON 编码（JSON-encoded'' 或  或 ''字符串化（stringified）'' 或 ''编组化（marshalled）'' 的对象''序列化（serialized）''

let json = JSON.stringify(value[, replacer, space])

let value = JSON.parse(str, [reviver]);

如果一个对象具有 toJSON，那么它会被 JSON.stringify 调用

其实 `任何可迭代对象都可以`

let str = "Hello"
 
alert([...str]) // H,e,l,l,o
 
// 对于一个字符串，for..of 会逐个返回该字符串中的字符，...str 也同理会得到 "H","e","l","l","o" 这样的结果。随后，字符列表被传递给数组初始化器 [...str]
 
// 还可以使用 Array.from 来实现，运行结果与 [...str] 相同
 
let str = "Hello"
 
// Array.from 将可迭代对象转换为数组
alert(Array.from(str)) // H,e,l,l,o

- Array.from 适用于类数组对象也适用于可迭代对象


- Spread 语法只适用于可迭代对象

Array.from 适用于类数组对象也适用于可迭代对象
 
 
Spread 语法只适用于可迭代对象

- Math.max(arg1, arg2, ..., argN) —— 返回入参中的最大值


- Object.assign(dest, src1, ..., srcN) —— 依次将属性从 src1..N 复制到 dest

闭包是指使用一个''特殊的属性'' ''[[Environment]]'' 来''记录函数自身的创建时的环境''的''函数''



- ''特殊的属性'' ''[[Environment]]''

- ''记录函数自身的创建时的环境''

- ''函数''

// 创建 IIFE 的方法
 
;(function () {
  alert("Parentheses around the function")
})()
;(function () {
  alert("Parentheses around the whole thing")
})()
 
!(function () {
  alert("Bitwise NOT operator starts the expression")
})()
;+(function () {
  alert("Unary plus starts the expression")
})()
 
void (function () {
  alert("Unary plus starts the expression")
})()

let func = new Function([arg1, arg2, ...argN], functionBody)

使用 new Function 创建函数的应用场景非常特殊


比如在复杂的 Web 应用程序中，需要从服务器获取代码或者动态地从模板编译函数时才会使用

如果使用 `new Function` 创建一个函数，那么该函数的 [[Environment]] 并不指向当前的词法环境，而是指向全局环境

function getFunc() {
  let value = "test"
 
  let func = new Function("alert(value)")
 
  return func
}
 
getFunc()() // error: value is not defined

function getFunc() {
  let value = "test"
 
  let func = function () {
    alert(value)
  }
 
  return func
}
 
getFunc()() // "test"，从 getFunc 的词法环境中获取的

在将 JavaScript 发布到生产环境之前，需要使用 压缩程序（minifier） 对其进行压缩(删除多余的注释和空格等压缩代码 —— 更重要的是，将局部变量命名为较短的变量)

如果使 new Function 可以访问自身函数以外的变量，它也很有可能无法找到重命名的 userName，这是因为新函数的创建发生在代码压缩以后，变量名已经被替换了

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

// 当一个函数传入 setInterval/setTimeout 时，将为其创建一个内部引用，并保存在调度程序中。这样，即使这个函数没有其他引用，也能防止垃圾回收器（GC）将其回收
 
 
// 在调度程序调用这个函数之前，这个函数将一直存在于内存中
setTimeout(function() {...}, 100);
 
 
// 一个副作用：
 
// 如果函数引用了外部变量（译注：闭包），那么只要这个函数还存在，外部变量也会随之存在。它们可能比函数本身占用更多的内存
 
// 💡因此，当不再需要调度函数时，最好通过''定时器标识符（timer identifier）'取消它，即使这是个（占用内存）很小的函数。

嵌套的 setTimeout 能够精确地设置两次执行之间的延时，而 setInterval 却不能

// setInterval
 
let i = 1
setInterval(function () {
  // 使用 setInterval 时，func 函数的实际调用间隔要比代码中设定的时间间隔要短！
  func(i++) // 这也是正常的，因为 func 的执行所花费的时间“消耗”了一部分间隔时间
}, 100)
 
//setTimeout
 
let i = 1
setTimeout(function run() {
  func(i++)
  setTimeout(run, 100)
}, 100)

setTimeout(func)

setTimeout(func, 0)

let start = Date.now()
let times = []
 
setTimeout(function run() {
  times.push(Date.now() - start) // 保存前一个调用的延时
 
  if (start + 100 < Date.now()) alert(times)
  // 100 毫秒之后，显示延时信息
  else setTimeout(run) // 否则重新调度
})

这个限制来自“远古时代”，并且许多脚本都依赖于此，所以这个机制也就存在至今

对于服务端的 JavaScript，就没有这个限制，并且还有其他调度即时异步任务的方式。例如 Node.js 的 setImmediate。因此，这个提醒只是针对浏览器环境的

- writable — 如果为 true，则值可以被修改，否则它是只可读的

- enumerable — 如果为 true，则会被在循环中列出，否则不会被列出

- configurable — 如果为 true，则此特性可以被删除，这些属性也可以被修改，否则不可以

- 属性描述符对象：它包含值和所有的属性标志

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName)

let user = {
  name: "John",
}
 
let descriptor = Object.getOwnPropertyDescriptor(user, "name")
 
alert(JSON.stringify(descriptor, null, 2))
/* 属性描述符：
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Object.defineProperty(obj, propertyName, descriptor)

let user = {}
 
Object.defineProperty(user, "name", {
  value: "John",
})
 
let descriptor = Object.getOwnPropertyDescriptor(user, "name")
 
alert(JSON.stringify(descriptor, null, 2))
/*
{
  "value": "John",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
 */

- 不能修改 configurable 标志

- 不能修改 enumerable 标志

- 不能将 writable: false 修改为 true（反过来则可以）

- 不能修改访问者属性的 get/set（但是如果没有可以分配它们）

let user = {
  name: "John",
}
 
Object.defineProperty(user, "name", {
  configurable: false,
})
 
user.name = "Pete" // 正常工作
delete user.name // Error