JAVASCRIPT 简介

javascript 最初被创建的原因是作在浏览器环境中使得浏览器的交互效果更加生动

javascript 这种编程语言写出来的程序称之为脚本 ，即是可以被直接写在网页的 HTML 中，在页面加载的时候自动执行。脚本被以纯文本的形式提供和执行。它们不需要特殊的准备或编译即可运行

发展到如今 JavaScript 不仅能在浏览器中执行，也可以在服务端执行，甚至可以在任意存在 Javascript 引擎的设置中执行

浏览器中嵌入了 JavaScript 引擎，有时也称作“JavaScript 虚拟机”。

比如：V8(javascript engine)、SpiderMonkey 等

引擎很复杂，但是基本原理很简单。

• 引擎（如果是浏览器，则引擎被嵌入在其中）读取（“解析”）脚本。
• 然后，引擎将脚本转化（“编译”）为机器语言。
• 然后，机器代码快速地执行。

引擎会对流程中的每个阶段都进行优化。它甚至可以在编译的脚本运行时监视它，分析流经该脚本的数据，并根据获得的信息进一步优化机器代码。

浏览器中的 JavaScript 能做什么？

现代的 JavaScript 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问，因为它最初是为浏览器创建的，不需要这些功能。

JavaScript 的能力很大程度上取决于它运行的环境。例如，Node.js 支持允许 JavaScript 读取/写入任意文件，执行网络请求等的函数。

JavaScript 的上层语言

不同的人想要不同的功能。JavaScript 的语法也不能满足所有人的需求。

这是正常的，因为每个人的项目和需求都不一样。

因此，最近出现了许多新语言，这些语言在浏览器中执行之前，都会被 编译（转化）成 JavaScript。

现代化的工具使得编译速度非常快且透明，实际上允许开发者使用另一种语言编写代码并会将其“自动转换”为 JavaScript。

此类语言的示例有：

• CoffeeScript 是 JavaScript 的一种语法糖。它引入了更加简短的语法，使我们可以编写更清晰简洁的代码。
• TypeScript 专注于添加“严格的数据类型”以简化开发，以更好地支持复杂系统的开发。由微软开发。
• Flow 也添加了数据类型，但是以一种不同的方式。由 Facebook 开发。
• Dart 是一门独立的语言。它拥有自己的引擎，该引擎可以在非浏览器环境中运行（例如手机应用），它也可以被编译成 JavaScript。由 Google 开发。
• Brython 是一个 Python 到 JavaScript 的转译器，让我们可以在不使用 JavaScript 的情况下，以纯 Python 编写应用程序。
• Kotlin 是一个现代、简洁且安全的编程语言，编写出的应用程序可以在浏览器和 Node 环境中运行。

这样的语言还有很多。当然，即使我们在使用此类编译语言，我们也需要了解 JavaScript。因为了解 JavaScript 才能让我们真正明白我们在做什么。

基础知识

JavaScript 中的数据类型

原始数据类型：

Number

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

• Infinity表示数学概念上的无穷大 ∞ console.log(1/0) || console.log(Infinity)

• NaN代表一个计算错误它是一个不正确的或者一个未定义的数学操作所得到的结果

  1	console.log('not a number' / 2) //NaN

  NaN 是粘性的。任何对 NaN 的进一步数学运算都会返回 NaN：

  1 2 3

  alert(NaN + 1) // NaN alert(3 * NaN) // NaN alert('not a number' / 2 - 1) // NaN

  数学运算是安全的,脚本永远不会因为一个致命的错误（“死亡”）而停止。最坏的情况下，我们会得到 NaN 的结果。

编写数字的更多方法：

1
2
3
4
5
6
7
8

let billion = 1000000000
// 可以使用 _ 这种语法糖
billio = 1_000_000_000
// 使用 e 来缩短
billio = 1e9
console.log(7.3e9)
let msc = 0.000001
msc = 1e-6

十进制、二进制、八进制

十六进制 数字在 JavaScript 中被广泛用于表示颜色，编码字符以及其他许多东西。所以自然地，有一种较短的写方法：0x，然后是数字。

1
2
3
4

console.log(0xff) // 255
console.log(0xff) // 255（一样，大小写没影响）
let a = 0b11111111 // 二进制形式的 255
let b = 0o377 // 八进制形式的 255

toString(base)

方法 num.toString(base) 返回在给定 base 进制数字系统中 num 的字符串表示形式。

1
2
3
4

let num = 255

alert(num.toString(16)) // ff
alert(num.toString(2)) // 11111111

base 的范围可以从 2 到 36。默认情况下是 10。

舍入

• Math.floor: 向下舍入

• Math.ceil: 向上舍入

• Math.round: 最近舍入

• Math.trunc: 移除小数点后的所有内容

• toFixed(n): 将数字舍入到小数点后 n 位，并以字符串形式返回结果。

  1 2 3 4 5 6

  let num = 12.34 alert(num.toFixed(1)) // "12.3" num = 12.36 alert(num.toFixed(1)) // "12.4" let num = 12.34 alert(num.toFixed(5)) // "12.34000"，在结尾添加了 0，以达到小数点后五位

  我们可以使用一元加号或 Number() 调用，将其转换为数字，例如 + num.toFixed(5)

不精确的计算：
在内部，数字是以 64 位格式IEEE-754，如果一个如果一个数字真的很大，则可能会溢出 64 位存储，变成一个特殊的数值 Infinity

1
2

console.log(0.1 + 0.2 == 0.3) // false
console.log(0.1 + 0.2) // 0.30000000000000004

一个数字以其二进制的形式存储在内存中，一个 1 和 0 的序列。但是在十进制数字系统中看起来很简单的 0.1，0.2 这样的小数，实际上在二进制形式中是无限循环小数。

使用二进制数字系统无法 精确 存储 0.1 或 _0.2_，就像没有办法将三分之一存储为十进制小数一样。
IEEE-754 数字格式通过将数字舍入到最接近的可能数字来解决此问题。这些舍入规则通常不允许我们看到“极小的精度损失”，但是它确实存在。

最可靠的方法是借助方法 toFixed(n) 对结果进行舍入：

1
2

let sum = 0.1 + 0.2
alert(sum.toFixed(2)) // "0.30"

isNaN 和 isFinite

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

  1 2 3 4

  alert(isNaN(NaN)) // true alert(isNaN('str')) // true console.log(isNaN('123')) // false alert(NaN === NaN) // false

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

  1 2 3

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

parseInt 和 pareseFloat：

使用加号 + 或 Number() 的数字转换是严格的。如果一个值不完全是一个数字，就会失败：

1

alert(+'100px') // NaN

但在现实生活中，我们经常会有带有单位的值，例如 CSS 中的 "100px" 或 "12pt"。

它们可以从字符串中“读取”数字，直到无法读取为止。如果发生 error，则返回收集到的数字。函数 parseInt 返回一个整数，而 parseFloat 返回一个浮点数：

1
2
3
4
5

alert(parseInt('100px')) // 100
alert(parseFloat('12.5em')) // 12.5

alert(parseInt('12.3')) // 12，只有整数部分被返回了
alert(parseFloat('12.3.4')) // 12.3，在第二个点出停止了读取

某些情况下，parseInt/parseFloat 会返回 NaN。当没有数字可读时会发生这种情况：

1

alert(parseInt('a123')) // NaN，第一个符号停止了读取

parseInt() 函数具有可选的第二个参数。它指定了数字系统的基数，因此 parseInt 还可以解析十六进制数字、二进制数字等的字符串：

1
2
3

alert(parseInt('0xff', 16)) // 255
alert(parseInt('ff', 16)) // 255，没有 0x 仍然有效
alert(parseInt('2n9c', 36)) // 123456

其他数学函数：

Math.random()：返回一个从 0 到 1 的随机数（不包括 1

Math.max(a, b, c...)和Math.min(a, b, c...)： 从任意数量的参数中返回最大值和最小值。

Math.pow(n, power)：返回 n 的给定（power）次幂。

Math.sqrt(100)： 取根号

String

• 单引号： let str = 'hello'
• 双引号：let str = "hello"
• 反引号： let str = `hello`

字符串中的方法

常用

• toUpperCase() || toLowerCase()：改变大小写

• substring(start||0,end?length)：获得子串

  MDN 已经不推荐使用 substr 方法了 属于遗留特性 建议使用slice

• slice(start,end):参数可以为负数，不破坏原来的串返回新的串

• replace(pattern:(string|regex,replacement:(string|function)))：替换(pattern 是如果是 string,则只会替换第一项) –> replaceAll

• split(separator:(undefined||string||regex),limit?)：分割字符形成数组，如果separator为undefined则会形成['str']

• includes(searchString,position?):boolean： 查找是否包含

• indexof(serchValue,position?):index||-1：查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

• lastIndexOf(serchValue,position?)

不常用

• at()
• charAt
• charCodeAt()
• match(regexp)
• startsWith(searchString,position?)
• endsWith(...)
• trim()

Boolean(逻辑类型)

布尔转换时

• 空值：即 0、” “、undefined、NaN、null 转换为false
• 其余为 true

注意 “0” 是 true 噢

逻辑运算

或运算(||)

传统的比如 if中使用 就不提了

1
2
3
4
5
6

let res = value1 || value2 || value3
// 处理每一个操作数时，都将其转化为布尔值。如果结果是 true，就停止计算，返回这个操作数的初始值。

// 调用处理逻辑
flag || function()
false || alert("printed");

与运算(&&)

1
2
3

console.log(1 && 0) // 0
console.log(1 && 5) // 5
// 在处理每一个操作数时，都将其转化为布尔值。如果结果是 false，就停止计算，并返回这个操作数的初始值。

非运算(!)

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

1
2

alert(!!'non-empty string') // true
alert(!!null) // false

值比较

严格相等

普通的相等性检查 == 存在一个问题，会先转换类型才会进行比较

1
2

console.log(0 == false) //true
console.log('' == false) // true

严格相等运算符 === 在进行比较时不会做任何的类型转换。

1

alert(0 === false) // false，因为被比较值的数据类型不同

null和undefined进行比较

1
2
3
4
5
6
7
8

alert(null === undefined) // false
alert(null == undefined) // true
alert(null > 0) // (1) false
alert(null == 0) // (2) false
alert(null >= 0) // (3) true
alert(undefined > 0) // false (1)
alert(undefined < 0) // false (2)
alert(undefined == 0) // false (3)

?和??运算符

?运算符

1
2
3
4

let result = condition ? value1 : value2
// 计算条件结果，如果结果为真，则返回 value1，否则返回 value2。
let accessAllowed = age > 18 ? true : false
// 上面写法有点多余 因为 accessAllowed 如果写成 age > 18 本来就会返回一个boolean

使用一系列问号 ? 运算符可以返回一个取决于多个条件的值

1
2
3
4
5
6
7
8
9
10
11
12

let age = prompt('age?', 18)

let message =
  age < 3
    ? 'Hi, baby!'
    : age < 18
    ? 'Hello!'
    : age < 100
    ? 'Greetings!'
    : 'What an unusual age!'

alert(message)

? 有时候能代替if但是可读性并不强 赋值的时可以考虑使用 ? 做逻辑判断的时候 if 更佳

空值合并运算符??

对待 null 和 undefined 的方式类似,所以当一个值既不是 null 也不是 undefined 时，我们将其称为“已定义的（defined）否则为未定义

a ?? b 的结果是：

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

1
2
3
4
5

let result = a !== null && a !== undefined ? a : b
let user
alert(user ?? '匿名') // 匿名（user 未定义）
let user = 'John'
alert(user ?? '匿名') // John（user 已定义）

1
2
3
4
5

let firstName = null
let lastName = null
let nickName = 'Supercoder'
// 显示第一个已定义的值：
alert(firstName ?? lastName ?? nickName ?? '匿名') // Supercoder

与||比较

它们之间重要的区别是：

• || 返回第一个 真 值。
• ?? 返回第一个 已定义的 值。

换句话说，|| 无法区分 false、0、空字符串 "" 和 null/undefined。它们都一样 —— 假值（falsy values）。如果其中任何一个是 || 的第一个参数，那么我们将得到第二个参数作为结果。

不过在实际中，我们可能只想在变量的值为 null/undefined 时使用默认值。也就是说，当该值确实未知或未被设置时。

1
2
3
4

let height = 0

alert(height || 100) // 100
alert(height ?? 100) // 0

Null

特殊的null值不属于任何一种类型构成了独立类型，仅代表无、空、值未知等状态

1
2

let age = null
// 表示age是未知的

Undefined

特殊值 undefined 和 null 一样自成类型。
如果一个变量已被声明，但未被赋值，那么它的值就是 undefined

1
2

let age
alert(age) // 弹出 "undefined"

通常，使用 null 将一个“空”或者“未知”的值写入变量中，而 undefined 则保留作为未进行初始化的事物的默认初始值。

Symbol

“symbol” 值表示唯一的标识符,可以使用 Symbol() 来创建这种类型的值

1

let id = Symbol('id')

隐藏属性

symbol 允许我们创建对象的“隐藏”属性，代码的任何其他部分都不能意外访问或重写这些属性。

例如，如果我们使用的是属于第三方代码的 user 对象，我们想要给它们添加一些标识符。

我们可以给它们使用 symbol 键：

1
2
3
4
5
6
7

let user = {
  // 属于另一个代码
  name: 'John'
}
let id = Symbol('id')
user[id] = 1
console.log(user[id]) // 我们可以使用 symbol 作为键来访问数据

我们的标识符和它们的标识符之间不会有冲突，因为 symbol 总是不同的，即使它们有相同的名字。

对象字面量中的 symbol

如果我们要在对象字面量 {...} 中使用 symbol，则需要使用方括号把它括起来。

1
2
3
4
5

let id = Symbol('id')
let user = {
  name: 'John',
  [id]: 123 // 而不是 "id"：123
}

Symbol 会在 for in 中跳过

symbol 属性不参与 for..in 循环。

1
2
3
4
5
6
7
8
9

let id = Symbol('id')
let user = {
  name: 'John',
  age: 30,
  [id]: 123
}
for (let key in user) alert(key) // name, age（没有 symbol）
// 使用 symbol 任务直接访问
alert('Direct: ' + user[id]) // Direct: 123

Object.keys(user) 也会忽略它们。这是一般“隐藏符号属性”原则的一部分。如果另一个脚本或库遍历我们的对象，它不会意外地访问到符号属性。

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

1
2
3
4
5
6

let id = Symbol('id')
let user = {
  [id]: 123
}
let clone = Object.assign({}, user)
alert(clone[id]) // 123

全局 Symbol

要从注册表中读取（不存在则创建）symbol，请使用 Symbol.for(key)。
该调用会检查全局注册表，如果有一个描述为 key 的 symbol，则返回该 symbol，否则将创建一个新 symbol（Symbol(key)），并通过给定的 key 将其存储在注册表中。

1
2
3
4
5
6

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

Symbol.keyFor

1
2
3
4
5
6

// 通过 name 获取 symbol
let sym = Symbol.for('name')
let sym2 = Symbol.for('id')
// 通过 symbol 获取 name
alert(Symbol.keyFor(sym)) // name
alert(Symbol.keyFor(sym2)) // id

BigInt

BigInt 是一种特殊的数字类型，它提供了对任意长度整数的支持。

创建 bigint 的方式有两种：在一个整数字面量后面加 n 或者调用 BigInt 函数，该函数从字符串、数字等中生成 bigint。

1
2
3

const bigint = 1234567890123456789012345678901234567890n
const sameBigint = BigInt('1234567890123456789012345678901234567890')
const bigintFromNumber = BigInt(10) // 与 10n 相同

非原始数据类型:

Object

Object 表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法
let user = {
  name: "John",
  age: 30,
}
// 这将提示有语法错误
user.likes birds = true
// 下面这样不会报错
let user = {};
// 设置
user["likes birds"] = true;
// 读取
alert(user["likes birds"]); // true
// 删除
delete user["likes birds"];

object 中 key 的计算属性

1
2
3
4
5
6

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

Object 的引用和复制

对象与原始类型的根本区别之一是，对象是“通过引用”存储和复制的，而原始类型：字符串、数字、布尔值等 —— 总是“作为一个整体”复制。

当一个对象变量被复制 —— 引用被复制，而该对象自身并没有被复制。

1
2

let user = { name: 'John' }
let admin = user // 复制引用

克隆和合并,Object.assign

拷贝一个对象变量会又创建一个对相同对象的引用,复制一个对象，那该怎么做呢？
最先想到的就是遍历一份

1
2
3
4
5
6
7
8
9
10
11

let user = {
  name: '月晕',
  age: 20
}
let clone = {}
for (let key in user) {
  clone[key] = user[key]
}

// 使用 es6 对象展开符
let clone1 = { ...user }

Object.assign来实现

1
2
3
4
5
6
7
8

// Object.assign(dest, src1, src2, src3,...)
let let user = { name: "yueyun" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
// 将 permissions1 和 permissions2 中的所有属性都拷贝到 user 中
Object.assign(user, permissions1, permissions2);
// 现在 user = { name: "John", canView: true, canEdit: true }
// 如果被拷贝的属性的属性名已经存在，那么它会被覆盖

深层克隆：

到现在为止，我们都假设 user 的所有属性均为原始类型。但属性可以是对其他对象的引用。
当数组中存在对象抑或是对象中存在对象就要使用深拷贝

深拷贝可以使用 JSON 序列化(有优缺点)来做或者是自己手写一个深拷贝函数

lodash库中的.cloneDeep(obj)

使用 structuredClone() 去拷贝

Object 中的 this

this 即是函数的上下文，this 出现的值取决于它出现的上下文：函数、类或全局

函数写在对象中称之为对象的方法

方法中的this

通常, 对象方法需要访问对象中存储的信息才能完成其工作。
this 会指向一个对象：

• 以函数形式调用时、this 指向的是 widow(浏览器环境)/globalThis(nodejs 环境)
• 以方法的形式调用、this 指向的是调用方法的对象

1
2
3
4
5
6
7
8

let user = {
  name: 'John',
  age: 30,
  sayHi() {
    // this 指的是当前对象 John
    console.log(this.name)
  }
}

this 的值是在代码运行时计算出来的，它取决于代码上下文。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let user = { name: 'John' }
let admin = { name: 'Admin' }

function sayHi() {
  alert(this.name)
}

// 在两个对象中使用相同的函数
user.f = sayHi
admin.f = sayHi

// 这两个调用有不同的 this 值
// 函数内部的 "this" 是“点符号前面”的那个对象
user.f() // John（this == user）
admin.f() // Admin（this == admin）
admin['f']() // Admin（使用点符号或方括号语法来访问这个方法，都没有关系。）

箭头函数没有自己的this

箭头函数有些特别：它们没有自己的 this。如果我们在这样的函数中引用 this，this 值取决于外部“正常的”函数。

1
2
3
4
5
6
7
8

let user = {
  firstName: 'Ilya',
  sayHi() {
    let arrow = () => alert(this.firstName)
    arrow()
  }
}
user.sayHi() // Ilya

可选链？

可选链?. 是一种访问嵌套对象属性的安全的方式，即使中间属性不存在也不会出现错误

不存在属性问题：

如果我们有很多个 user 对象其中存储了我们的用户数据，我们大多数用户的地址都存储在 user.address 中，街道地址存储在 user.address.street 中，但有些用户没有提供这些信息。在这种情况下，当我们尝试获取 user.address.street，而该用户恰好没提供地址信息，我们则会收到一个错误：

1
2

let user = {} // 一个没有 "address" 属性的 user 对象
console.log(user.address.street) // Error!

javascritp 会把 user.address 识别为 undefined 尝试读取user.address.street 即是undefined.street自然是会失败并返回一个错误

在 Web 开发中，我们可以使用特殊的方法调用（例如 document.querySelector('.elem')）以对象的形式获取一个网页元素，如果没有这种对象，则返回 null。

1
2

let html = document.querySelector('.elem').innerHTML
// 如果 document.querySelector('.elem') 的结果为 null，则会出现错误

同样，如果该元素不存在，则访问 null 的 .innerHTML 属性时会报错。在某些情况下，当元素的缺失是没问题的时候，我们希望避免出现这种错误，而是接受 html = null 作为结果。

首先我们想到的肯定是可以用if条件语句判断或者?运算符来解决

1
2

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

当层级多了之后显示会很臃肿而且不优雅 即引入了可选链?

1
2
3
4

let user = {} // user 没有 address 属性
alert(user?.address?.street) // undefined（不报错）
let html = document.querySelector('.elem')?.innerHTML
// 如果没有符合的元素，则为 undefined

如果未声明变量 user，那么 user?.anything 会触发一个错误
?. 前的变量必须已声明（例如 let/const/var user 或作为一个函数参数）。可选链仅适用于已声明的变量。

当然也存在*?.() 和 ?.[]

Javascript 中的方法

原始类型的方法

string number bigInt boolean symbol null undefined

比如下面的这样

1
2

let str = 'Hello'
console.log(str.toUpperCase())

str.toUpperCase()中实际发生的情况

• 字符串str是一个原始值。因此，在访问其属性时，会创建一个包含字符串字面值的特殊对象，并且具有可用的方法，例如 toUpperCase()。
• 该方法运行并返回一个新的字符串（由 console.log 显示）。
• 特殊对象被销毁，只留下原始值 str。

所以原始类型可以提供方法，但它们依然是轻量级的。

JavaScript 引擎高度优化了这个过程。它甚至可能跳过创建额外的对象。但是它仍然必须遵守规范，并且表现得好像它创建了一样。

数字有其自己的方法，例如，toFixed(n) 将数字舍入到给定的精度

数组中的方法

但很多时候我们发现还需要 有序集合，里面的元素都是按顺序排列的。例如，我们可能需要存储一些列表，比如用户、商品以及 HTML 元素等，这时一个特殊的数据结构数组（Array）就派上用场了，它能存储有序的集合。

从 JS 的数据类型本质上面来说 数组属于是一种特殊的对象

• 添加/删除元素
  • push(...items) —— 向尾端添加元素，
  • pop() —— 从尾端提取一个元素，
  • shift() —— 从首端提取一个元素，
  • unshift(...items) —— 向首端添加元素，
  • splice(pos, deleteCount, ...items) —— 从 pos 开始删除 deleteCount 个元素，并插入 items。
  • slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制进去。
  • concat(...items) —— 返回一个新数组：复制当前数组的所有元素，并向其中添加 items。如果 items 中的任意一项是一个数组，那么就取其元素。
• 搜索元素
  • indexOf/lastIndexOf(item, pos) —— 从索引 pos 开始搜索 item，搜索到则返回该项的索引，否则返回 -1。
  • includes(value) —— 如果数组有 value，则返回 true，否则返回 false。
  • find/filter(func) —— 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值。
  • findIndex 和 find 类似，但返回索引而不是值。
• 遍历元素
  • forEach(func) —— 对每个元素都调用 func，不返回任何内容。
• 转换数组
  • map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
  • sort(func) —— 对数组进行原位（in-place）排序，然后返回它。
  • reverse() —— 原位（in-place）反转数组，然后返回它。
  • split/join —— 将字符串转换为数组并返回。
  • reduce/reduceRight(func, initial) —— 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果。
• 其他方法
  • Array.isArray(value) 检查 value 是否是一个数组，如果是则返回 true，否则返回 false。

请注意，sort，reverse 和 splice 方法修改的是数组本身。

• 杂
  • arr.some(fn)/arr.every(fn) 检查数组
  • arr.fill(value, start, end) —— 从索引 start 到 end，用重复的 value 填充数组。
  • arr.copyWithin(target, start, end) —— 将从位置 start 到 end 的所有元素复制到 自身 的 target 位置（覆盖现有元素）。
  • arr.flat(depth)/arr.flatMap(fn) 从多维数组创建一个新的扁平数组。

Iterable object(可迭代对象)

可迭代(Iterable) 对像是数组的泛化，即是对象可以在for of循环中使用

数组是可迭代的。但不仅仅是数组。很多其他内建对象也都是可迭代的。例如字符串也是可迭代的。

如果从技术上讲，对象不是数组，而是表示某物的集合（列表，集合），for..of 是一个能够遍历它的很好的语法，因此，让我们来看看如何使其发挥作用。

Symbol.iterator

比如现在有一个range对象代表了一个数字区间

1
2
3
4
5
6

let range = {
  from: 1,
  to: 5
}
// 我们希望
// for(let num of range) {console.log(num) ...1 2 3 4 5}

为了让range对象可以迭代我们需要手动为其添加一个Symbol.iterator方法

1. 当 for..of 循环启动时，它会调用这个方法（如果没找到，就会报错）。这个方法必须返回一个 迭代器（iterator） —— 一个有 next 方法的对象。
2. 从此开始，for..of 仅适用于这个被返回的对象。
3. 当 for..of 循环希望取得下一个数值，它就调用这个对象的 next() 方法。
4. next() 方法返回的结果的格式必须是 {done: Boolean, value: any}，当 done=true 时，表示循环结束，否则 value 是下一个值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

const range = {
  from: 1,
  to: 5,
  [Symbol.iterator]: function () {
    return {
      current: this.from,
      last: this.to,
      next() {
        if (this.current <= this.last) {
          console.log('explosion')
          return { done: false, value: this.current++ }
        } else {
          return { done: true }
        }
      }
    }
  }
}

for (let i of range) {
  console.log(i)
}

const personInfo = {
  name: '月晕',
  age: 18,
  hobby: ['code', 'play Game', 'sleep'],
  [Symbol.iterator]: function () {
    let that = this
    return {
      keys: Object.keys(this),
      index: 0,
      next() {
        if (this.index < this.keys.length) {
          return { done: false, value: that[this.keys[this.index++]] }
        } else {
          return { done: true }
        }
      }
    }
  }
}
for (let i of personInfo) {
  console.log(i)
}

const personInfo = {
  name: '月晕',
  age: 18,
  hobby: ['code', 'play Game', 'sleep'],
  [Symbol.iterator]: function () {
    let keys = Object.keys(this)
    let index = 0
    return {
      next: () => {
        if (index < keys.length) {
          return { done: false, value: this[keys[index++]] }
        } else {
          return { done: true }
        }
      }
    }
  }
}
for (let i of personInfo) {
  console.log(i)
}

无穷迭代器（iterator）

无穷迭代器也是可能的。例如，将 range 设置为 range.to = Infinity，这时 range 则成为了无穷迭代器。或者我们可以创建一个可迭代对象，它生成一个无穷伪随机数序列。也是可能的。

next 没有什么限制，它可以返回越来越多的值，这是正常的。

当然，迭代这种对象的 for..of 循环将不会停止。但是我们可以通过使用 break 来停止它。

字符串迭代

1
2
3
4

const chars = 'abcdef'
for (let char of chars) {
  console.log(char)
}

显示调用迭代器

为了更深层地了解底层知识，让我们来看看如何显式地使用迭代器。

我们将会采用与 for..of 完全相同的方式遍历字符串，但使用的是直接调用。这段代码创建了一个字符串迭代器，并“手动”从中获取值。

1
2
3
4
5
6
7
8
9
10
11
12

let str = 'yueyun'

// 和 for..of 做相同的事
// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]()

while (true) {
  let result = iterator.next()
  if (result.done) break
  console.log(result.value) // 一个接一个地输出字符
}

很少需要我们这样做，但是比 for..of 给了我们更多的控制权。例如，我们可以拆分迭代过程：迭代一部分，然后停止，做一些其他处理，然后再恢复迭代。

可迭代(iterable)和类数组(array-like)

• Iterable 如上所述，是实现了 Symbol.iterator 方法的对象。
• Array-like 是有索引和 length 属性的对象，所以它们看起来很像数组。

Array.from

有一个全局方法 Array.from 可以接受一个可迭代或类数组的值，并从中获取一个“真正的”数组。然后我们就可以对其调用数组方法了。

1
2
3
4
5
6
7
8
9

let arrayLike = {
  0: 'yueyun',
  1: 'suki',
  length: 2
}

const arr = Array.from(arrayLike)
console.log(arr)
console.log(arr.pop())

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 接受上面的range 生成数组
const range = {
  from: 1,
  to: 5,
  [Symbol.iterator]: function () {
    return {
      current: this.from,
      last: this.to,
      next() {
        if (this.current <= this.last) {
          return { done: false, value: this.current++ }
        } else {
          return { done: true }
        }
      }
    }
  }
}
const rangeArr = Array.from(range)
console.log(rangeArr) // [1 2 3 4 5]

可选的第二个参数 mapFn 可以是一个函数，该函数会在对象中的元素被添加到数组前，被应用于每个元素，此外 thisArg 允许我们为该函数设置 this。

1
2
3
4

// 求每个数的平方
let arr = Array.from(range, (num) => num * num)

alert(arr) // 1,4,9,16,25

Map 和 Set(映射和集合)

Map

Map是一个带键的数据项集合.就跟Object一样,区别就是Map的key允许是任意类型
Map 的方法和属性如下

• new Map() —— 创建 map。
• map.set(key, value) —— 根据键存储值。
• map.get(key) —— 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined。
• map.has(key) —— 如果 key 存在则返回 true，否则返回 false。
• map.delete(key) —— 删除指定键的值。
• map.clear() —— 清空 map。
• map.size —— 返回当前元素个数。

Map 可以使用对象来做键

1 2 3 4 5 6

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

使用对象作为键是 Map 最值得注意和重要的功能之一。在 Object 中，我们则无法使用对象作为键。在 Object 中使用字符串作为键是可以的，但我们无法使用另一个 Object 作为 Object 中的键

Map 迭代

如果要在Map里使用循环 可以使用下面的方法

• map.keys() 遍历并返回一个包含所有键的可迭代对象
• map.values() —— 遍历并返回一个包含所有值的可迭代对象，
• map.entries() —— 遍历并返回一个包含所有实体 [key, value] 的可迭代对象，for..of 在默认情况下使用的就是这个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 300],
  ['onion', 50]
])
// 遍历所有的键（vegetables）
for (let vegetable of recipeMap.keys()) {
  console.log(vegetable) // cucumber, tomatoes, onion
}

// 遍历所有的值（amounts）
for (let amount of recipeMap.values()) {
  console.log(amount) // 500, 350, 50
}

// 遍历所有的实体 [key, value]
for (let entry of recipeMap) {
  // 与 recipeMap.entries() 相同
  console.log(entry) // cucumber,500 (and so on)
}

迭代的顺序与插入值的顺序相同。与普通的 Object 不同，Map 保留了此顺序。

Map中有内建的forEach

1
2
3
4

// 对每个键值对 (key, value) 运行 forEach 函数
recipeMap.forEach((value, key, map) => {
  console.log(`${key}: ${value}`) // cucumber: 500 etc
})

Map 和对象的转换

Object.entries：从对象创建 Map

1
2
3
4
5
6

let obj = {
  name: 'yueyun',
  age: 18
}
let map = new Map(Object.entries(obj))
console.log(map.get('name')) // yueyun

Object.fromEntries：从 Map 创建对象

1
2
3
4
5
6
7
8
9
10
11
12
13

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
])

// 现在 prices = { banana: 1, orange: 2, meat: 4 }
console.log(prices.orange) // 2
let map = new Map()
map.set('banana', 1)
map.set('orange', 2)
map.set('meat', 4)
let obj = Object.fromEntries(map.entries())

当 Map 中含有对象作为 key 时 专成对象时的 key 会变成'[object object]'

Set

Set 是一个特殊的类型集合 —— “值的集合”（没有键），它的每一个值只能出现一次。 它的主要方法如下：

• new Set(iterable) —— 创建一个 set，如果提供了一个 iterable 对象（通常是数组），将会从数组里面复制值到 set 中。
• set.add(value) —— 添加一个值，返回 set 本身
• set.delete(value) —— 删除值，如果 value 在这个方法调用的时候存在则返回 true ，否则返回 false。
• set.has(value) —— 如果 value 在 set 中，返回 true，否则返回 false。
• set.clear() —— 清空 set。
• set.size —— 返回元素个数。

它的主要特点是，重复使用同一个值调用 set.add(value) 并不会发生什么改变。这就是 Set 里面的每一个值只出现一次的原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let set = new Set()

let john = { name: 'John' }
let pete = { name: 'Pete' }
let mary = { name: 'Mary' }
// visits，一些访客来访好几次
set.add(john)
set.add(pete)
set.add(mary)
set.add(john)
set.add(mary)
// set 只保留不重复的值
alert(set.size) // 3
for (let user of set) {
  alert(user.name) // John（然后 Pete 和 Mary）
}

Set 迭代(iteration)

我们可以使用 for..of 或 forEach 来遍历 Set：

1
2
3
4
5
6
7
8

let set = new Set(['oranges', 'apples', 'bananas'])

for (let value of set) alert(value)

// 与 forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value)
})

WeakMap 和 WeakSet

在垃圾回收中 Javascript 引擎在值“可达”和“可使用”时会将其保存在内存中

1
2
3
4
5

let yueyun = { name: 'yueyun', age: 18 }
// 该对象能访问 yueyun是它的引用
// 覆盖
yueyun = null
// 该对象将会被从内存中清除

通常 当对象，数组之类的数据结构在内存中时，它们的子元素 如对象的属性，数组的元素都是认为可达的 例如，如果把一个对象放入到数组中，那么只要这个数组存在，那么这个对象也就存在，即使没有其他对该对象的引用。

1
2
3
4
5
6
7

let yueyun = { name: 'yueyun', age: 18 }
let arr = [yueyun]
// 覆盖
yueyun = null
// 前面由 yueyun 所引用的那个对象被存储在了 array 中
// 所以它不会被垃圾回收机制回收
// 我们可以通过 array[0] 获取到它

所以当我们使用对象作为 Map 的键的时 如果 Map 存在 那么对象就会一直存在占用内存不会被垃圾回收

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

WeakMap

WeakMap 和 Map 的第一个不同点就是，WeakMap 的键必须是对象，不能是原始值：

1
2
3
4
5

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

现在，如果我们在 weakMap 中使用一个对象作为键，并且没有其他对这个对象的引用 —— 该对象将会被从内存（和 map）中自动清除。

1
2
3
4
5

let yueyun = { name: 'yueyun' }
let weakMap = new WeakMap()
weakMap.set(yueyun, 'yueyun')
yueyun = null
console.log('weakMap', weakMap.get(yueyun)) // undefined

与常规的map相比 如果yueyun仅仅是作为 WeakMap 的键而存在 —— 它将会被从 map（和内存）中自动删除。

WeakMap 不支持迭代以及 keys()，values() 和 entries() 方法。所以没有办法获取 WeakMap 的所有键或值。
WeakMap 只有以下的方法：

• weakMap.get(key)
• weakMap.set(key, value)
• weakMap.delete(key)
• weakMap.has(key)

WeakSet

WeakSet 的表现类似：

• 与 Set 类似，但是我们只能向 WeakSet 添加对象（而不能是原始值）。
• 对象只有在其它某个（些）地方能被访问的时候，才能留在 WeakSet 中。
• 跟 Set 一样，WeakSet 支持 add，has 和 delete 方法，但不支持 size 和 keys()，并且不可迭代。

变“弱（weak）”的同时，它也可以作为额外的存储空间。但并非针对任意数据，而是针对“是/否”的事实。WeakSet 的元素可能代表着有关该对象的某些信息。

例如，我们可以将用户添加到 WeakSet 中，以追踪访问过我们网站的用户：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let visitedSet = new WeakSet()

let john = { name: 'John' }
let pete = { name: 'Pete' }
let mary = { name: 'Mary' }

visitedSet.add(john) // John 访问了我们
visitedSet.add(pete) // 然后是 Pete
visitedSet.add(john) // John 再次访问

// visitedSet 现在有两个用户了

// 检查 John 是否来访过？
alert(visitedSet.has(john)) // true

// 检查 Mary 是否来访过？
alert(visitedSet.has(mary)) // false

john = null

// visitedSet 将被自动清理(即自动清除其中已失效的值 john)

解构赋值

JavaScript 中最常用的数据结构是Object和Array 解构赋值是一种特殊的语法 将数组或对象拆包到一系列的变量中

数组解构

1
2
3

const [firstName, lastName] = 'yue yun'.split(' ')
console.log(firstName) // yue
console.log(lastName) // yun

有想忽略的元素

1
2

const [firstName, , title] = ['yueyun', 'megumi', 'korumi']
console.log(title) // korumi

1
2

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

1
2
3
4
5
6
7

let guest = 'yue'
let admin = 'yun'

// 让我们来交换变量的值：使得 guest = yue，admin = yun
;[guest, admin] = [admin, guest]

console.log(`${guest} ${admin}`) // yun yue（成功交换！）

其余的 ...

通常，如果数组比左边的列表长，那么“其余”的数组项会被省略。如果我们还想收集其余的数组项 —— 我们可以使用三个点 "..." 来再加一个参数以获取其余数组项：

1
2
3
4
5
6
7

const [name1, name2, ...rest] = [
  'Julius',
  'Caesar',
  'Consul',
  'of the Roman Republic'
]
//  rest 就是剩下元素的数组集合

我们也能使用...去快速浅拷贝或者赋值

1
2

const oldArr = ['yueyun', 'meigumi', 'kurumi', 'explosion']
const newArr = [...oldArr]

默认值

1
2
3

const [name = 'yueyun', age = 18] = ['yueyun2']
console.log(name) // yueyun
console.log(age) // 18 而不是undefined

对象解构

解构赋值同样适用于对象

1
2
3
4
5
6
7
8
9

// 基本情况是
const { v1, v2 } = { v1: '...', v2: '...' }
let options = {
  Dom: 'Nav',
  Height: 200,
  width: 100
}
let { Dom, Height, Width } = options
console.log(Dom, Height, Width)

属性 options.title、options.width 和 options.height 值被赋给了对应的变量。变量的顺序并不重要

可以取别名映射 也可以默认赋值 也可以使用 … 去解构

1
2
3
4
5
6
7
8
9

let options = {
  title: 'Menu'
}

let { width: w = 100, height: h = 200, title } = options

console.log(title) // Menu
console.log(w) // 100
console.log(h) // 200

嵌套解构

建议不要使用捏 会让简单的变得很烦

智能函数参数

有这样的场景 一个函数需要接受很多参数 而且大部分参数都是可选的
下面是很糟糕的写法

1
2
3

function showMenu(title = 'Untitled', width = 200, height = 100, items = []) {
  // ...
}

在实际开发中，记忆如此多的参数的位置是一个很大的负担。通常集成开发环境（IDE）会尽力帮助我们，特别是当代码有良好的文档注释的时候，但是…… 另一个问题就是，在大部分的参数只需采用默认值的情况下，调用这个函数时会需要写大量的 undefined。

1
2

// 在采用默认值就可以的位置设置 undefined
showMenu('My Menu', undefined, undefined, ['Item1', 'Item2'])

这太难看了。而且，当我们处理更多参数的时候可读性会变得很差。

解构赋值可以解决这些问题。我们可以用一个对象来传递所有参数，而函数负责把这个对象解构成各个参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 我们传递一个对象给函数
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)

我们也可以使用带有嵌套对象和冒号映射的更加复杂的解构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let options = {
  title: 'My menu',
  items: ['Item1', 'Item2']
}

function showMenu({
  title = 'Untitled',
  width: w = 100, // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert(`${title} ${w} ${h}`) // My Menu 100 200
  alert(item1) // Item1
  alert(item2) // Item2
}

showMenu(options)

完整语法和解构赋值是一样的：

1
2
3
4

function({
  incomingProperty: varName = defaultValue
  ...
})

我们可以通过指定空对象 {} 为整个参数对象的默认值来解决这个问题：

1
2
3
4
5

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

showMenu() // Menu 100 200

JSON 方法 toJSON

javascript 的一些数据结构是属于独有的 当传输网络数据或者在日志输出的时候需要传输数据

JSON.stringify

JSON（JavaScript Object Notation）是表示值和对象的通用格式。在 RFC 4627 标准中有对其的描述。最初它是为 JavaScript 而创建的，但许多其他编程语言也有用于处理它的库。因此，当客户端使用 JavaScript 而服务器端是使用 Ruby/PHP/Java 等语言编写的时，使用 JSON 可以很容易地进行数据交换。

JavaScript 提供了如下方法：

• JSON.stringify 将对象转换成JSON
• JSON.parse 将 JSON 转换成对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  spouse: null
}

let json = JSON.stringify(student)

alert(typeof json) // we've got a string!

alert(json)
/* JSON 编码的对象：
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "spouse": null
}
*/

方法JSON.stingify(stduent)接受对象并将其转换成字符串

得到的JSON字符串是一个被称之为JSON 编码（JSON-encoded）或 序列化 或 字符串化 或 编组化的对象
JSON.stringify 也可以应用于原始（primitive）数据类型。

JSON 支持的数据类型：

• Objects { ... }
• Arrays [ ... ]
• Primitives：
  • strings，
  • numbers，
  • boolean values true/false，
  • null

JSON 是语言无关的纯数据规范，因此一些特定于 JavaScript 的对象属性会被 JSON.stringify 跳过。即:

• 函数属性（方法）。
• Symbol 类型的键和值。
• 存储 undefined 的属性。

支持嵌套对象转换 但是不能循环引用
JSON.stringify的完整语法是
let json = JSON.stringify(value,replacer, space)
value:要编码的值、replacer:要编码属性数组活映射函数、space:用于美化输出的空格数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const room = {
  number: 23
}
let meetup = {
  title: 'Conference',
  participants: [{ name: 'John' }, { name: 'Alice' }],
  place: room // meetup 引用了 room
}
room.occupiedBy = meetup // room 引用了 meetup
// console.log(meetup)
console.log(
  JSON.stringify(meetup, function replacer(key, value) {
    console.log(`${key}: ${value}, type: ${typeof value}`)
    // return key != '' && value == meetup ? undefined : value
    return key == 'occupiedBy' ? undefined : value
  })
)
/**
  0: [object Object], type: object
  name: John, type: string
  1: [object Object], type: object
  name: Alice, type: string
  place: [object Object], type: object
  number: 23, type: number
  occupiedBy: [object Object], type: object
  {"title":"Conference","participants":[{"name":"John"},{"name":"Alice"}],"place":{"number":23}}
*/

JSON.parse

要解码 JSON 字符串 需要使用JSON.parse方法
let value = JSON.parse(str,reviver)
str:要解析的 JSON 字符串、reviver:可选的函数，将为每个（键，值）对调用此函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 字符串化数组
let numbers = '[0, 1, 2, 3]'
numbers = JSON.parse(numbers)
console.log(numbers[1]) // 1
let userData =
  '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }'
let user = JSON.parse(userData)
console.log(user.friends[1]) // 1
// 反序列化的时候如果遇到特殊对象会调用reviver函数
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'
let meetup = JSON.parse(str, function (key, value) {
  if (key == 'date') return new Date(value)
  return value
})
console.log(meetup.date.getDate()) // 现在正常运行了！

规范和调试

高级内容

函数

递归

在函数解决任务时 调用了自身就是所谓的递归

比如想在要完成一个函数pow(x, n)可以计算x的n次方 有两种解法

1. 迭代思路 使用for循环

   1 2 3 4 5 6 7

   function pow(x, n) { let result = 1 for (let i = 0; i < n; i++) { result *= x } return result }

2. 递归思路：简化任务 调用自身

   1 2 3 4 5 6 7

   function pow(x, n) { if (n === 1) { return x } else { return x * pow(x, n - 1) } }

当pow(x, n)被调用时 执行分为下面两个分支：

1
2
3
4
5

              if n==1  = x
             /
pow(x, n) =
             \
              else     = x * pow(x, n - 1)

• 当 n===1时 叫做基础递归 因为会产生明显的结果
• 可以使用 x * pow(x, n - 1)表示pow(x, n) 这就递归步骤将人物转化为更简单的行为和更简单的同类任务调用 （带有更小的 n 的 pow 运算）。接下来的步骤将其进一步简化，直到 n 达到 1。

递归将函数调用简化成为一个更简单的函数调用 然后在将其简化为一个更加简单的函数 以此类推 直到结果变得显而易见

最大的嵌套调用次数(包括首次)被称为递归深度 在上面这个例子正好为 n

执行上下文和堆栈

递归调用的工作 函数底层的工作原理

有关正在运行的函数的执行过程的相关信息被存储在其执行上下文中

执行上下文是一个内部据结构 他包含有关函数执行时的详细细节：

• 当前控制流所在的位置 (作用域链)：每个执行上下文都有一个与之相关联的作用域链。作用域链是一个对象列表，它定义了变量和函数的查找规则，决定了代码在哪些区域是有效的。当代码在一个执行上下文中查找变量时，如果在当前上下文的变量对象中找不到，它会沿着作用域链向上查找。
• 当前的变量：包含函数的参数、局部变量、函数声明、变量声明 在函数执行的初始阶段 函数所有的参数值、函数内部的函数声明以及变量声明都会被添加到变量对象中。
• this的值：表示调用上下文，依赖于函数的调用方式 全局执行上下文 函数执行上下文(如何被调用)
• 及内部的一些细节

一个函数调用仅具有一个与其关联的执行上下文

当一个函数进行嵌套调用的时候 将发生

• 当前函数被暂停
• 与它关联的执行上下文被一个叫做执行上下文堆栈而特殊数据结构保存
• 执行嵌套调用
• 嵌套调用结束后 从堆栈中恢复之前的执行上下文 并从停止的位置恢复外部函数

比如现在来分析上面 pow(2,3) 这个例子 使用抽象的来表示一下执行流程

1. 在调用pow(2, 3)而开始，执行上下文(context)会储存变量：x = 2, n = 3 执行流程在函数而第一行我们将其定义为
   Context： { x:2, n:3, at line 1 } call pow(2, 3)
   当函数开始执行的时 进入第二条分支 变量相同但是位置改变了
   **Context： { x:2, n:3, at line 5 } call pow(2, 3) **

   执行到计算 x * pow(x, n - 1) 需要带入新的参数新的pow子调用pow(2,2)

2. 为了执行嵌套调用，JavaScript 会在 执行上下文堆栈 中记住当前的执行上下文。

   这里我们调用相同的函数 pow，但这绝对没问题。所有函数的处理都是一样的：

   1. 当前上下文被“记录”在堆栈的顶部。
   2. 为子调用创建新的上下文。
   3. 当子调用结束后 —— 前一个上下文被从堆栈中弹出，并继续执行。

   下面是进入子调用pow(2, 2)时的上下文堆栈：

   **Context： { x:2, n:2, at line 5 } call pow(2, 2) **
   **Context： { x:2, n:3, at line 5 } call pow(2, 3) **
   当我们完成了子调用后 很容易恢复一个上下文 因为它既保留了变量 也保留了当时代码的确切位置

3. 执行pow(2, 1) 重复过程 现在的调用堆栈
   Context： { x:2, n:1, at line 5 } call pow(2, 1)

   **Context： { x:2, n:2, at line 5 } call pow(2, 2) **
   **Context： { x:2, n:3, at line 5 } call pow(2, 3) **

4. 出口 即使调用堆栈 出栈口

递归可以更加简单明了优雅的描述出一段代码的逻辑 虽然性能上可能不如循环但是在一些复杂的数据结构下面使用递归往往更好 (比如 树 链表等)

Rest 参数和 Spread 语法

简单来说就是

function sum (...args)

1
2

cosnt arr2 = [1,2,3,4,5]
const arr1 = [...arr2,6,7,8,9]

变量作用域和闭包

JavaScript是非常面向对象和函数的语言 会有很大的自由度和写法 我们可以随时创建函数可以将函数作为参数传递 在任意不同的代码位置调用 可以访问外部的环境

代码块

如果在{ ... }内声明变量 那么这个变量并不会向外传递 只能在内部访问该代码块内可见

1
2
3
4
5
6
7
8

let a = 10
{
  let a = 20
  console.log('2a', a)
}
console.log('a', a)
// 2a 20
// a 10

在if, for, while 中 {...}中声明的变量也仅在内部可见

嵌套函数

如果一个函数在另外一个函数中创建的 被称为高级函数或者嵌套函数

1
2
3
4
5
6
7
8
9

function sayHiBye(firstName, lastName) {
  // 辅助嵌套函数使用如下
  function getFullName() {
    return firstName + ' ' + lastName
  }

  console.log('Hello, ' + getFullName())
  console.log('Bye, ' + getFullName())
}

词法环境

变量:
在 Javascript 中每个 运行的函数 代码块 { ... } 以及整个脚本都有一个被称为词法**环境(Lexical Enviroment)**的内部的关联对象

该词法环境对象由两部分组成:

• 环境记录(Enviroment Record) 一个存储所有局部变量作为其属性 (包括一些其他的信息 例如this的值)的对象
• 对外部词法环境的引用 与外部代码相关联

一个变量只是**”环境记录”**这个特殊的内部对象的一个属性 获取或修改变量一味着获取或修改词法环境的一个属性 “获取或修改变量” 意味着 获取或修改词法环境的一个属性

比如下面的一个最简单的例子

1
2

let phrase = 'hello'
console.log(phrase)

这个就是所谓的与整个脚本相关联的全局词法环境

在上面的过程中 矩形区域表示环境记录(变量存储) 箭头表示外部引用 全局词法环境没有外部引用 所以箭头指向了null

随着代码的开始继续的执行 词法环境发生了变化

上面的图片中右侧演示了执行过程中词法环境的变化:

1. 当脚本开始运行 词法环境先填充了所有声明的变量
   在最初 它们处于未初始化的状态这是一种特殊的内部状态 这意味着引擎知道这个变量存在但是在 let 声明之前 不能引用它 几乎就跟不存在一样
2. let phrase 定义出现 尚未被赋值 因此值是undefined
3. phrase被赋予了一个值
4. phrase被修改

实际上执行的过程是

• 变量是特殊内部对象的属性 与当前正在执行的**(代码)块/函数/脚本** 有关
• 操作变量实际上是操作该对象的属性

函数声明:

一个函数其实就是一个值 就像变量一样

不同就在于 如果是函数声明的初始化会被立刻完成

当创建了一个词法环境时,函数会立即变成即用型函数( 并不像 let 那样到声明处才可以去使用)
例如 下面是添加一个函数时全局词法环境的初始状态

内部和外部的词法环境
当一个函数运行时 在调用刚开始 会自动创建一个新的词法环境以存储这个调用的局部变量和参数 例如对于say("yueyun") 的执行流程如下

1
2
3
4
5

let phrase = ' Hello '
function say(name) {
  cosole.log(`${phrase}, ${name}`)
}
say('yueyun')

在函数调用期间我们拥有两个词法环境 内部一个(用于函数调用) 和外部一个(全局)：

• 内部词法环境与say的当前执行相对应 它具有单独的属性：name 函数的参数 调用的是say("yueyun")所以name的值为yueyun
• 外部词法环境是全局词法环境 它具有phrase变量和函数本身

内部词法环境引用了outer

当代码要访问一个变量时 —— 首先会搜索内部词法环境，然后搜索外部环境，然后搜索更外部的环境，以此类推，直到全局词法环境。

返回函数：

比如下面的例子

1
2
3
4
5
6
7

function makeCounter() {
  let count = 0
  return function () {
    return count++
  }
}
let counter = makeCounter()

在每次makeCounter()调用的开始，都会创建一个新的词法环境对象，以存储该makeCounter运行时的变量

因此，我们有两层嵌套的词法环境

不一样的是 在执行 makeCounter()的过程中创建了一个仅占一行的嵌套函数 return count++ 我们并没有运行它 只是创建了这么一个函数

所有的函数在创建时都会记住它的词法环境 从技术上来说 所有的函数都有名为[[Environment]]的隐藏属性 该属性保存了对创建对象该函数的词法环境的应引用

因此 counter.[[Env]] 有对 {count: 0}词法环境的引用 这就是函数记住它创建于何处的方式与调用无关 [[Environment]] 引用在函数创建时被设置并永久保存。

稍后调用counter()时，会自动创建一个新的词法环境 并且其外部词法环境引用获取于counter.[[Environment]]

现在，当 counter() 中的代码查找 count 变量时，它首先搜索自己的词法环境（为空，因为那里没有局部变量），然后是外部 makeCounter() 的词法环境，并且在哪里找到就在哪里修改。

在变量所在的词法环境中更新变量

如果我们调用 counter() 多次，count 变量将在同一位置增加到 2，3 等。

垃圾回收

通常，函数调用完成后，会将词法环境和其中的所有变量从内存中删除。因为现在没有任何对它们的引用了。与 JavaScript 中的任何其他对象一样，词法环境仅在可达时才会被保留在内存中。

但是 如果有一个嵌套函数在函数结束后的语句任然可达 则它将具有引用词法环境的 [[Environment]] 属性。

1
2
3
4
5
6
7
8
9

function f() {
  let value = 123

  return function () {
    console.log(value)
  }
}

let g = f() // g.[[Environment]] 存储了对相应 f() 调用的词法环境的引用

如果多次调用 f()，并且返回的函数被保存，那么所有相应的词法环境对象也会保留在内存中。下面代码中有三个这样的函数：

1
2
3
4
5
6
7
8
9
10

function f() {
  let value = Math.random()

  return function () {
    alert(value)
  }
}

// 数组中的 3 个函数，每个都与来自对应的 f() 的词法环境相关联
let arr = [f(), f(), f()]

当词法环境对象变得不可达时，它就会死去（就像其他任何对象一样）。换句话说，它仅在至少有一个嵌套函数引用它时才存在。

在下面的代码中，嵌套函数被删除后，其封闭的词法环境（以及其中的 value）也会被从内存中删除：

1
2
3
4
5
6
7
8
9
10
11

function f() {
  let value = 123

  return function () {
    alert(value)
  }
}

let g = f() // 当 g 函数存在时，该值会被保留在内存中

g = null // ……现在内存被清理了

全局对象和函数对象

全局对象

全局对象提供可以在任何地方都使用的变量和函数 默认的情况下这些全局变量内建于语言或环境中

在浏览器环境中 全局对象是window 对于nodejs运行时环境 全局对象是global

在最新的规定中globalThis 被作为全局对象的标准名称加入到了 JavaScript 中，所有环境都应该支持该名称。所有主流浏览器都支持它。

全局对象的所有属性都可以直接被访问

1
2
3

alert('hello')
// 等同于
window.alert('Hello')

在浏览器中 使用var声明的全局函数和变量都会成为全局属性

1
2

var gVar = 10
console.log(window.gVar)

请不要这样去使用！这种行为是出于兼容性而存在的。现代脚本使用 JavaScript modules 所以不会发生这种事情。

如果我们使用 let，就不会发生这种情况

如果一个值非常重要你想让它在全局的范围中

1
2
3
4
5
6
7
8
9
10
11

// 将当前用户信息全局化，以允许所有脚本访问它
window.currentUser = {
  name: 'yueyun'
}

// 代码中的另一个位置
alert(currentUser.name) // yueyun

// 或者，如果我们有一个名为 "currentUser" 的局部变量
// 从 window 显式地获取它（这是安全的！）
alert(window.currentUser.name) // yueyun

函数对象

在 JavaScript 中函数也是一个值，函数值的类型是 object

可以把函数理解成为一个可调用的行为对象(action object) 同样可以传递属性和引用传递

比如属性 name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function sayHi() {
  console.log('Hi')
}
console.log(sayHi, sayHi.name) //[Function: sayHi] sayHi

//***********************************************************
let sayHi = function () {
  console.log('Hi')
}

console.log(sayHi.name) // sayHi（有名字！）

//***********************************************************
function f(sayHi = function () {}) {
  alert(sayHi.name) // sayHi（生效了！）
}

f()

规范中把这种特性叫做「上下文命名」。如果函数自己没有提供，那么在赋值中，会根据上下文来推测一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let user = {
  sayHi() {
    // ...
  },

  sayBye: function () {
    // ...
  }
}

alert(user.sayHi.name) // sayHi
alert(user.sayBye.name) // sayBye

// 函数是在数组中创建的
let arr = [function () {}]

alert(arr[0].name) // <空字符串>
// 引擎无法设置正确的名字，所以没有值

属性 length

1
2
3
4
5
6
7

function f1(a) {}
function f2(a, b) {}
function many(a, b, ...more) {}

alert(f1.length) // 1
alert(f2.length) // 2
alert(many.length) // 2

属性 length 有时在操作其它函数的函数中用于做 内省/运行时检查（introspection）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function ask(question, ...handlers) {
  let isYes = confirm(question)
  for (let handler of handlers) {
    if (handler.length === 0) {
      if (isYes) handler()
    } else {
      handler(isYes)
    }
  }
}
// 对于肯定的回答，两个 handler 都会被调用
// 对于否定的回答，只有第二个 handler 被调用
ask(
  'Question?',
  () => alert('You said yes'),
  (result) => alert(result)
)

自定义属性

我们可以在函数中添加counter属性记录被调用了多少次

1
2
3
4
5
6
7
8
9

function sayHi() {
  console.log('Hi')
  sayHi.counter++
}
sayHi.counter = 0 // 初始值
sayHi() // Hi
sayHi() // Hi

alert(`Called ${sayHi.counter} times`) // Called 2 times

函数属性有时会用来替代闭包 如下面修改之前写过的闭包

1
2
3
4
5
6
7
8
9
10

function makeCounter() {
  function counter() {
    return counter.count++
  }
  counter.count = 0
  return counter
}
let counter = makeCounter()
alert(counter()) // 0
alert(counter()) // 1

即count被直接存储在函数里，而不是它外部的词法环境

这种写法一般不太常见 因为可以在外部去修改它的属性 从而导致代码很混乱

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function makeCounter() {
  function counter() {
    return counter.count++
  }

  counter.count = 0

  return counter
}

let counter = makeCounter()
// 可以任意的修改
counter.count = 10
console.log(counter()) // 10

命名函数的表达式

命名函数表达式(NFE, Named Function Expression) 指带有名字的函数表达式术语

1
2
3

let sayHi = function func(who) {
  console.log(`Hello, ${who}`)
}

它仍然是一个函数表达式。在 function 后面加一个名字 "func" 没有使它成为一个函数声明，因为它仍然是作为赋值表达式中的一部分被创建的。

添加这个名字当然也没有打破任何东西。函数依然可以通过 sayHi() 来调用：

关于添加func的两个特殊的地方

• 允许函数在内部引用自己
• 它在函数外是引用不到的

1
2
3
4
5
6
7
8
9
10
11

let sayHi = function func(who) {
  if (who) {
    alert(`Hello, ${who}`)
  } else {
    func('Guest') // 使用 func 再次调用函数自身
  }
}

sayHi() // Hello, Guest
// 但这不工作：
func() // Error, func is not defined（在函数外不可见）

同样不适用sayHi()去写递归 因为 sayHi()很容易就被外部污染

1
2
3
4
5
6
7
8
9
10
11
12

let sayHi = function (who) {
  if (who) {
    console.log(`Hello, ${who}`)
  } else {
    sayHi('Guest') // Error: sayHi is not a function
  }
}

let welcome = sayHi
sayHi = null

welcome() // Error，嵌套调用 sayHi 不再有效！

当我们需要一个可靠的内部名时，这就成为了你把函数声明重写成函数表达式的理由了。

调度：setTimeout 和 setInterval

当我们并不想立刻执行一个函数，而是等待特定一段时间之后再执行。这就是所谓的“计划调用（scheduling a call）”。

目前的实现方式有下面两种方式实现

• setTimeout: 允许我们将函数推迟到一段时间间隔之后再执行
• setInterval: 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

setTimeout

1
2
3
4
5
6
7
8
9

let sayHi = function (who) {
  let count = 0
  return function () {
    count++
    console.log(`Hello, ${who}! ${count}`)
  }
}

setTimeout(sayHi('yueyun'), 1000)

setTimeout 期望得到一个对函数的引用

clearTimeout 来取消调度

setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，在我们的例子中是 timerId，我们可以使用它来取消执行。

1
2

let timerId = setTimeout(...);
clearTimeout(timerId);

setInterval

setInterval 方法和 setTimeout 的语法相同：不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行。

装饰器模式和转发：Call/apply

JavaScript在处理函数时提供了很高的灵活性，它们可以被传递 用作对象 下面将介绍它们之间的转发(forward)和装饰(decorate)

透明缓存

假设现在我们有一个 CPU 重负载的函数slow(x) 但是他纯函数 给定相同的参数总是会返回相同的结果 如果这个函数使用频繁 我们希望能记住这个缓存能记住 因此避免花费额外的时间 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function slow(x) {
  // big Clc
  return x
}

function cachingDecorator(func) {
  const cache = new Map()
  return function (x) {
    if (cache.has(x)) {
      return cache.get(x) // 从缓存中读取结果
    }
    let result = func(x)
    cache.set(x, result) // 将结果记录下来
    return result
  }
}
slow = cachingDecorator(slow)
consle.log(slow(1)) // 被缓存下 并返回结果
console.log('Again', slow(1)) //返回缓存记录的结果

在上面的例子中 cachingDecorator是一个装饰器(decorator)

这样我们可以为任何函数调用cachingDecorator 它将返回缓存包装器 这样别的函数需要这种特性就可以直接复用 还可以将缓存与主代码分开变得更加简单

cachingDecorator(func) 的结果是一个“包装器”：function(x) 将 func(x) 的调用“包装”到缓存逻辑中 从外部代码来看，包装的 slow 函数执行的仍然是与之前相同的操作。它只是在其行为上添加了缓存功能。

使用分离的 cachingDecorator 而不是改变 slow 本身的代码有几个好处

• cachingDecorator 是可重用的。我们可以将它应用于另一个函数。
• 缓存逻辑是独立的，它没有增加 slow 本身的复杂性（如果有的话）。
• 如果需要，我们可以组合多个装饰器（其他装饰器将遵循同样的逻辑）。

function.call 设定上下文

但是如果我们在对象中这样使用的话呢 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

let worker = {
  someMethod() {
    return 1
  },
  slow(x) {
    // calc
    return x * this.someMethod()
  }
}
function cachingDecorator(func) {
  let cache = new Map()
  return function (x) {
    if (cache.has(x)) {
      return cache.get(x)
    }
    let result = func(x) // (*step*)
    cache.set(x, result)
    return result
  }
}

alert(worker.slow(1)) // 原始方法有效

worker.slow = cachingDecorator(worker.slow) // 现在对其进行缓存

alert(worker.slow(2)) // 报错！Error: Cannot read property 'someMethod' of undefined

错误在于试图访问this.someMethod失败了 原因是包装器将原始函数调用为 (*step*) 行中的 func(x)。但是这样调用得到的this=undefined 这是因为包装器将调用传递给原始方法 但是并没有上下文的this

使用内建的函数方法function.call(context,...args)允许调用一个显示设置的this函数

例如，在下面的代码中，我们在不同对象的上下文中调用 sayHi：sayHi.call(user) 运行 sayHi 并提供了 this=user，然后下一行设置 this=admin

1
2
3
4
5
6
7
8
9
10

function sayHi() {
  console.log(this.name)
}

let user = { name: 'John' }
let admin = { name: 'Admin' }

// 使用 call 将不同的对象传递为 "this"
sayHi.call(user) // John
sayHi.call(admin) // Admin

在我们的例子中，我们可以在包装器中使用 call 将上下文传递给原始函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

let worker = {
  someMethod() {
    return 1
  },
  slow(x) {
    // calc
    return x * this.someMethod()
  }
}
function cachingDecorator(func) {
  let cache = new Map()
  return function (x) {
    if (cache.has(x)) {
      return cache.get(x)
    }
    let result = func.call(this, x)
    cache.set(x, result)
    return result
  }
}

alert(worker.slow(1))

worker.slow = cachingDecorator(worker.slow)

alert(worker.slow(1))

现在一切工作正常 this的传递过程

• 在经过装饰之后，worker.slow 现在是包装器 function (x) { ... }。
• 因此，当 worker.slow(2) 执行时，包装器将 2 作为参数，并且 this=worker（它是点符号 . 之前的对象）。
• 在包装器内部，假设结果尚未缓存，func.call(this, x) 将当前的 this（=worker）和当前的参数（=2）传递给原始方法。

传递多个参数

记住参数组合(min,max)的结果

• 实现一个新的类似于 map 的更通用的并且允许多个键的数据结构
• 使用嵌套的 map 去实现比如map.get(min).get(max)来获取 result
• 将两个值合并成一个 多为装饰器添加一个函数

现在以第三种方法写出带多个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

let worker = {
  slow(min, max) {
    return min + max
  }
}
function cachingDecorator(func) {
  const cache = new Map()
  return function (...args) {
    // **
    let key = hash(args)
    if (cache.has(key)) {
      return cache.get(key)
    }
    let result = func.call(this, ...args) //***
    cache.set(key, result)
    return result
  }
}

function hash(args) {
  return args.join(',')
}