ES6 on Last Stand

Let/Const

Wed, 02 Oct 2024 00:00:00 +0800

Var

在 ES6 出现之前，必须使用 var 声明。但是，前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先，让我们在讨论这些问题之前更多地了解 var。

var 的作用域

作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。

当在最外层函数的外部声明var变量时，作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。

当在函数中声明var时，作用域是局部的。这意味着它只能在函数内访问。

要进一步了解，请查看下面的示例。

var greeter = 'hey hi';

function newFunction() {
 var hello = 'hello';
}

这里，greeter是全局范围的，因为它存在于函数外部，而hello是函数范围的。因此，我们无法在函数外部访问变量hello。因此，如果我们这样做：

var tester = 'hey hi';
function newFunction() {
 var hello = 'hello';
}
console.log(hello); // error: hello is not defined

我们会收到错误消息，这是由于函数外部没有hello导致的。

var 变量可以重新声明和修改

这意味着我们可以在相同的作用域内执行下面的操作，并且不会出错

var greeter = 'hey hi';
var greeter = 'say Hello instead';

又比如

var greeter = 'hey hi';
greeter = 'say Hello instead';

var 的变量提升

变量提升是 JavaScript 的一种机制:在执行代码之前，变量和函数声明会移至其作用域的顶部。这意味着如果我们这样做:

console.log(greeter);
var greeter = 'say hello';

生面的代码会被解释为:

var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';

因此，将var声明的变量会被提升到其作用域的顶部，并使用 undefined 值对其进行初始化.

模版字符串

Wed, 02 Oct 2024 00:00:00 +0800

未见过的函数用法：

function fun(strings,params1){
 console.log(strings);
 console.log(params1)
}

fun`params1 = ${333}`
// 输出分别为
// ['params1 = ', '']
// 333

不知道各位在学习或开发中有没有遇到过这样的函数调用方式呢？秉承着我没遇到的东西就要发文章来分享分享的原则，经过我查阅资料并加以学习，就让本文来带大家了解一下JS中的标签函数吧。

模板字符串

标签函数的主要作用就是处理模板字符串，所以在了解标签函数之前先了解一下模板字符串（模板字面量）吧。

基本用法

模板字符串是ES6新增的使用模板字面量定义字符串的能力，用反引号```````` 进行分隔。与使用''或""的定义的字符串字面量不同是模板字面量保留换行字符，可以跨行定义字符串。例如：

let str1 = 'xxhh\n2233'
let str2 = `xxhh
2233`
console.log(str1 === str2) // 结果为true

要注意的是模板字符串中的所有字符都会包含在字符串中，特别在使用缩进的时候，缩进的空格都会包含在字符串中。

let str = `
 <div>
 <h1>xxhh</h1>
 </div>
`
console.log(str.length) // 结果为44，包含了缩进所产出的所有空格

字符串插值

在没有模板字符串时，我们通常会使用+加法运算符来进行字符串的拼接，但有了模板字符串后我们并可通过插值占位符${}来将各字面量、变量或表达式结果来进行拼接，这样可以更容易地创建复杂和动态的字符串，同时保持代码的可读性和简洁性。这是模板字符串最常用的一个特性。

let name = 'xxhh';
let str1 = "name:"+name;
let str2 = `name:${name}`;
console.log(str1,str2) // name:xxhh name:xxhh
console.log(str1 === str2) // true

要注意的是使用字符串插值的所有插入的值都会使用toString()强制转型为字符串，而且任何JavaScript 表达式都可以用于插值。

默认参数

Wed, 02 Oct 2024 00:00:00 +0800

一、参数传递

代码语言：javascript

function foo(a, b) {
 console.log([a, b]);
}

foo(1, 2); // 输出 [1, 2]

这个例子中，a 和 b 属于函数中的局部变量，只能在函数中访问。调用函数时，传递的数据会根据位置来匹配对应，分别赋值给 a 和 b。

创建函数时，function 函数名后面括号中设定的参数被称为形参；调用函数时，函数名后面括号中传入的参数被称为实参。上面例子中，a 和 b 是形参，传入的 1 和 2 是实参。

因为形参是已声明的变量，所以不能再用 let 和 const 重复声明。

代码语言：javascript

function foo(a, b) {
 let a = 1; // 报错，a 已声明
 const b = 1; // 报错，b 已声明
}

JavaScript 中所有函数传递都是按值传递的，不会按引用传递。所谓的值，就是指直接保存在变量上的值，如果把对象作为参数传递，那么这个值就是这个对象的引用，而不是对象本身。这里实际上是一个隐式的赋值过程，所以给函数传递参数时，相当于从一个变量赋值到另一个变量。

原始值：

代码语言：javascript

function add(num) {
 return num + 1;
}

let count = 5;
let result = add(count); // 此处参数传递的过程可以看作是 num = count

console.log(count); // 5
console.log(result); // 6

引用值：

箭头函数

Wed, 02 Oct 2024 00:00:00 +0800

一、箭头函数的特点

1. 相比普通函数，箭头函数有更加简洁的语法。

普通函数

function add(num) {
 return num + 10
}

箭头函数

const add = num => num + 10;

2. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。

这句话需要注意的是，箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。

下面这个例子是箭头函数的外层有普通函数。

let obj = {
 fn:function(){
 console.log('我是普通函数',this === obj) // true
 return ()=>{
 console.log('我是箭头函数',this === obj) // true
 }
 }
}
console.log(obj.fn()())

下面这个例子是箭头函数的外层没有普通函数。

let obj = {
 fn:()=>{
 console.log(this === window);
 }
}
console.log(obj.fn())
// true

3. 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则后抛出错误。

解构赋值

Wed, 02 Oct 2024 00:00:00 +0800

解构赋值概念

解构赋值语法是一种 Javascript 表达式。

通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。
解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。

数组解构

基本使用

📖 可以在定义变量的同时，使用解构进行赋值

let [one, two, three] = foo;

//等同于

let one = foo[0];
let two = foo[1];
let three = foo[2];

📖 也可以先声明变量，在进行解构赋值

设置默认值

当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成undefined

剩余值处理

可以使用三个点 "..."+ 参数来接收剩余的所有元素，变量名称随意，必须在最后一个参数的位置上

进阶用法

🎨 可以和split 函数结合使用，比如

let [Mother,Father] = "judy,pete".split(',');

console.log(Mother) //judy
console.log(Father) //pete

🎨 可以使用逗号忽略元素，比如

let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"]

🎨 可以直接赋值给对象的属性，比如

let user = {};
[user.name, user.surname] = ["Ilya","Kantor"]

展开运算符

Wed, 02 Oct 2024 00:00:00 +0800

ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号，让原本繁琐的代码瞬间变得简洁、优雅。就让我们看看它有哪些常见用法吧。

让函数的 Apply 调用方式成为过去

有时候我们需要通过 Function.prototype.apply 来调用函数，参数就放在一个数组里。

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// 调用函数并传参
doStuff.apply(null, args);

现在有了展开运算符，我们可以完全避免使用 apply，只需在调用函数时在数组前加上展开运算符：

doStuff(...args);

代码变得更短、更简洁，也不需要一个毫无用处的 null！

合并数组

合并数组有各种方式，但是展开运算符为我们提供了一种新思路：

arr1.push(...arr2) // 在数组后面添加 arr2 里的元素
arr1.unshift(...arr2) //在数组前面添加 arr2 里的元素

如果你想合并两个数组，并且想把元素放到数组中的任何位置，你可以这么做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

代码少了很多，还可以随意控制位置！

拷贝数组

拷贝数组是个常见的任务，过去我们使用 Array.prototype.slice
来完成，但现在我们可以通过展开运算符得到数组的副本：

var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)

这里要注意，数组里的对象仍然是引用类型的，因此实际上并不是所有内容都被“拷贝”了。

将参数或 NodeList 转成数组

跟拷贝数组类似，我们用 Array.Prototype.slice 将 NodeList和 arguments 对象转成真正的数组，但是现在我们可以使用展开运算符完成这个任务：

export/import

Wed, 02 Oct 2024 00:00:00 +0800

export，import 是什么

我们知道，JS 模块导入导出，使用 import , export 这两个关键字

export 用于对外输出本模块
import 用于导入模块

也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了

下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）

1 导出单个变量

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出： www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量，那么如何导出多个变量呢

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"

 //将上面的变量导出
 export { siteUrl ,siteName }

 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl) //输出： www.helloworld.net
 console.log(siteName) //输出： helloworld开发者社区

```

### 3 导出函数

导出函数和导出变量一样，需要添加`{ }`

````js
//a.js 中定义并导出一个函数
function sum(a, b) {
 return a + b
}
//将函数sum导出
export { sum }

//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

```

### 4 导出对象

js中一切皆对象，所以对象一定是可以导出的，并且有两种写法

#### 4.1 第一种写法

使用 `export default` 关键字导出，如下

````js
//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
 siteUrl:'www.helloworld.net',
 siteName:'helloworld开发者社区'
}

//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区

```

#### 4.2 第二种写法

同样是使用`export default` 关键字，如下

````js
//a.js 中定义对象，并在最后导出
var obj = {
 siteUrl:'www.helloworld.net',
 siteName:'helloworld开发者社区'
}

export default obj //导出对象obj

//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区

```

### 5 导出类

导出类与上面的导出对象类似，同样是用 `export default` 关键字，同样有两种写法

#### 5.1 第一种写法

````js
//a.js 中定义一个类并直接导出
export default class Person {
 //类的属性
 site = "www.helloworld.net"

 //类的方法
 show(){
 console.log(this.site)
 }
}

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show() //输出：www.helloworld.net

```

#### 5.2 第二种写法

````js
//a.js 中定义一个类，最后导出
class Person {
 //类的属性
 site = "www.helloworld.net"

 //类的方法
 show(){
 console.log(this.site)
 }
}

//导出这个类
export default Person

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show() //输出：www.helloworld.net

```

### 小结

下面我们简单总结一下

`export`与`export default`的区别

* export与export default均可用于导出常量、函数、文件、模块等
* 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
* export default后面不能跟const或let的关键词
* export、import可以有多个，export default仅有一个。
* 通过export方式导出，在导入时要加 { }，export default则不需要
* export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
* 模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个

对于 `import` ,`export` , `export default` ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看

最重要的还是要明白为什么要这么写，实在不明白记住就行了。

常见考点

1. `export` 的基本使用

export 用于导出模块中的内容（如变量、函数、类等），使得其他模块能够导入这些内容。

Promise

Wed, 02 Oct 2024 00:00:00 +0800

Promise 是在 ES6 出现的新功能，并且是用来优化过去回调函式 callback 的写法。这篇面试详解中会讨论到， promise 是什么、为什么需要有 Promise，以及延伸到 async/await 相关问题。

为什么要使用 Promise？

在探讨 Promise 之前，我们先来看一下为什么需要它的出现。

JavaScript 中有一个重要概念 - 异步 (async)，它允许我们在执行耗时任务时，不必等待程式完成，而是继续执行下面的代码，直到任务完成再通知。常用的异步操作有：文件操作、数据库操作、AJAX 以及定时器等。

JavaScript 有两种实现异步的方式：

第一种：回调函式 callback function

在 ES6 promise 出现之前，通常使用回调函式 (callback) 实现异步操作。但使用回调函式 callback 存在一个明显的缺点，当需要执行多个异步操作时，代码会不断往内嵌套，这种情况通常被称为「callback 地狱」(callback hell)。

callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 }, 200);
 }, 200);
 }, 200);
}, 200);

而为了解决这种问题，就出现了第二种方法 - promise。

什么是 Promise？

上一段提到 Promise 出现的原因，这一段我们来看那到底 Promise 是什么。

Generator

Wed, 02 Oct 2024 00:00:00 +0800

聊聊 `for of`

说起 for of 相信每个写过 JavaScript 的人都用过 for of ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 map() 或者 filer() 来遍历一个数组。但是就像我们标题里面说的，它跟 Generator 能扯上什么关系呢？

首先我们想一个问题，为什么使用 for of 或者 map()/filer() 方法就可以遍历一个数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 呢？为什么不能用他们来遍历一个对象呢？

你能学到什么

对 for of 更深入的理解
iterator 到底是何方神圣?
数组也是对象，为什么不能用 for of 来遍历对象呢？
如何实现对象的 for of?
Generator 又是何方神圣？他有什么用呢？

类数组对象的玄机

在真正揭开谜底之前，站在 for of 的角度想一下，现在让你去遍历一个数组，你需要知道什么信息呢？

对应下标的值
是否遍历结束的标志

带着这样的思考，我们打印一个数组来看看这里面的玄机：

const numbersArray = [1, 2, 3];

console.dir(numbersArray);

数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 的原型中都实现了一个方法 Symbol.iterator，问题来了，那么这个 Symbol.iterator 又有什么用呢？拿出来试一下就知道了：

Async/Await

Wed, 02 Oct 2024 00:00:00 +0800

async/await用法

其实你要实现一个东西之前，最好是先搞清楚这两样东西

这个东西有什么用？
这个东西是怎么用的？

有什么用？

async/await的用处就是：用同步方式，执行异步操作，怎么说呢？举个例子

比如我现在有一个需求：先请求完接口1，再去请求接口2，我们通常会这么做

function request(num) { // 模拟接口请求
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(num * 2)
 }, 1000)
 })
}

request(1).then(res1 => {
 console.log(res1) // 1秒后 输出 2

 request(2).then(res2 => {
 console.log(res2) // 2秒后 输出 4
 })
})

或者我现在又有一个需求：先请求完接口1，再拿接口1返回的数据，去当做接口2的请求参数，那我们也可以这么做

request(5).then(res1 => {
 console.log(res1) // 1秒后 输出 10

 request(res1).then(res2 => {
 console.log(res2) // 2秒后 输出 20
 })
})

其实这么做是没问题的，但是如果嵌套的多了，不免有点不雅观，这个时候就可以用async/await来解决了

async function fn () {
 const res1 = await request(5)
 const res2 = await request(res1)
 console.log(res2) // 2秒后输出 20
}
fn()

是怎么用？

还是用刚刚的例子

Class

Wed, 02 Oct 2024 00:00:00 +0800

Class 的基本语法

简介

类的由来

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) {
 this.x = x;
 this.y = y;
}

Point.prototype.toString = function () {
 return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }

 toString() {
 return '(' + this.x + ', ' + this.y + ')';
 }
}

上面代码定义了一个“类”，可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。这种新的 Class 写法，本质上与本章开头的 ES5 的构造函数Point是一致的。

Point类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

class Point {
 // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

class Bar {
 doStuff() {
 console.log('stuff');
 }
}

const b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

Map与Set

Wed, 02 Oct 2024 00:00:00 +0800

每当去学习ES6的时候，我都会不由自主的打开阮一峰老师的《ES6入门》去学习和查找用法，相信大多数同学也都和我一样看过阮老师写的文章。

当然大家也都知道ES6里常用的API就那么些，不多不少，用在项目中也是刚刚好。

不过在每次读到Set和Map数据结构那一章的时候，总是有点不知所措，因为我不明白实现这样的数据结构，目的是什么，意义又是什么呢

Set和Map主要的应用场景在于数组去重和数据存储，幸运的是在读了关于数据结构和算法之类的书籍后，恍然大悟的发现

原来Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

那么下面就来了解下这两种数据结构，最后来亲手实现的一个ES6中的Set和Map吧

集合

集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set 本身是一个构造函数，用来生成 Set 数据结构
这里说的Set其实就是我们所要讲到的集合，先来看下基础用法

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
 console.log(i); // 2 3 5 4
}

// 去除数组的重复成员
let array = [1,2,1,4,5,3];
[...new Set(array)] // [1, 2, 4, 5, 3]

具体用法如果还有不清楚的，这里我会在后面一一细说。现在还是来看一下以ES6中Set类(数据结构)为基础实现的集合吧

Set实例的属性和方法

Set的属性：
- size：返回集合所包含元素的数量
Set的方法：
- 操作方法
  - add(value)：向集合添加一个新的项
  - delete(value)：从集合中移除一个值
  - has(value)：如果值在集合中存在，返回true,否则false
  - clear(): 移除集合里所有的项
- 遍历方法
  - keys()：返回一个包含集合中所有键的数组
  - values()：返回一个包含集合中所有值的数组
  - entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了)
  - forEach()：用于对集合成员执行某种操作，没有返回值

创建一个集合

function Set(arr = []) { // 可以传入数组
 let items = {};
 this.size = 0; // 记录集合中成员的数量
}

module.exports = Set;

这里用{}对象来表示集合，也是因为对象不允许一个键指向两个不同的属性，保证了集合里的元素都是唯一的

WeakMap 和 WeakSet

Wed, 02 Oct 2024 00:00:00 +0800

1. 什么是 WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合，具备

WeakSet.prototype.add(value) ：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value) ：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value) ：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。这三个方法。但是，它与 Set 有两个区别。

区别一：WeakSet 的成员只能是对象和Symbol类型，而不能是其他类型的值，我们用代码演示一下

从代码中可以看到，想像Set一样直接往 WeakSet 中添加原始类型化会报错，只能添加对象和Symbol

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

（这句解释来自ECMAScript 6 入门,第一眼看到这句话这话会觉得有点晦涩，我们来解释一下）

弱引用：垃圾回收机制有一套自己的回收算法，我们都知道一个函数执行完成后该函数在调用栈中创建的执行上下文会被销毁，这里说的销毁，其实指的就是执行上下文中环境变量、词法变量中的数据存储所占据的内存空间被垃圾回收机制所回收，那么垃圾回收机制不考虑 WeakSet 对该对象的引用是不是就意味着垃圾回收机制不会回收 WeakSet 对象里面的数据所占据的内存呢？不！不是的！代码是最好的解释

我们用 ws 中存放一个对象，然后再将该对象置为null，（这里要说明一下，一个变量被置为null，就意味着这个变量的内存可以被回收了）看着这个打印结果有没有突然明白了点什么，对！没错！只要 WeakSet 结构中的对象不再需要被引用，那么 WeakSet 就直接为空了，这不就意味着WeakSet中的数据所占据的内存被释放了吗。好的，你或许还会有疑问，难道不用 WeakSet 存储数据，结果就不是这样的吗，来打消你的疑虑

不使用 WeakSet 存放数据，当变量obj为null时，fistName依旧是有值的，对比这段代码，我们可以清晰的看出, WeakSet中 - 垃圾回收机制会自动回收该对象所占用的内存

2. 这里有’BUG'

可能已经有小伙伴拔出了他40米长的大剑了，上图二中的代码其实有问题，真实的打印应该是

各位手中的长剑收一收，先别急，其实我们前面聊的没有问题，为什么这里真是打印能出来结果呢？这个问题在国外某技术论坛上也是一度出现在 WeakSet 话题榜首位，解释为：因为浏览器的垃圾回收机制是不受我们控制的，我们无法知道垃圾回收机制什么时候执行，之所以打印能出现内容，其实是因为打印的时候垃圾回收机制没有启动。所以我们可以认为，上图二中的打印在垃圾回收启动之后，它就是空的

我们可以这样来证明它:

如果这样你觉得依旧不够睡服你自己的话，我们把这段代码搬到node中：

defineProperty 与 proxy

Wed, 02 Oct 2024 00:00:00 +0800

前言

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

definePropety

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj: 要在其上定义属性的对象。

prop: 要定义或修改的属性的名称。

descriptor: 将被定义或修改的属性的描述符。

举个例子：

var obj = {};
Object.defineProperty(obj, "num", {
 value : 1,
 writable : true,
 enumerable : true,
 configurable : true
});
// 对象 obj 拥有属性 num，值为 1

虽然我们可以直接添加属性和值，但是使用这种方式，我们能进行更多的配置。

函数的第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。

两者均具有以下两种键值：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。

enumerable

当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable

当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

值得注意的是：

Reflect

Wed, 02 Oct 2024 00:00:00 +0800

一、Reflect有什么用？

一句话，Reflect没什么用，除了装装逼，让人看起来高大上以外，并不具有什么牛逼之处。

准确讲应该是这样的，Reflect更像是一种语法变体，其挂在的所有方法都能找到对应的原始语法，也就是Reflect的替代性非常强。

其实从Reflect这个单词本身字面意思就能体会出Reflect的神韵，Reflect的中文意思是“反射”，阳光照在镜子上反射，其实光子还是那些光子，只是变化了方向。

举例说明：

Reflect对象挂载了很多静态方法，所谓静态方法，就是和Math.round()这样，不需要new就可以直接使用的方法。

比较常用的两个方法就是get()和set()方法：

Reflect.get(target, propertyKey\[, receiver\])
Reflect.set(target, propertyKey, value\[, receiver\])

就作用而言，等同于：

target[propertyKey]
target[propertyKey] = value;

比方说页面上有个输入框，其DOM对象变量是input，平时我们对整个输入框赋值使用的语句多半是：

input.value = 'zhangxinxu';

就可以直接使用Reflect.set()方法代替：

Reflect.set(input, 'value', 'zhangxinxu')

效果是一模一样的。

又例如，我们希望对input的value属性重新定义，使该输入框value属性发生变化的时候可以同时触发'change'事件，下面是使用大家普遍比较熟悉的Object.defineProperty()方法实现的示意：

const props = Object.getOwnPropertyDescriptor(input, 'value');
Object.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

上述代码我们完全可以使用Reflect对象实现，具体的JavaScript代码如下所示。

const props = Reflect.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Reflect.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

我们可以测试下，假设页面HTML如下：

<input id="input">

测试代码为：

input.addEventListener('change', () => {
 document.body.append('变化啦~');
});

input.value = 'zhangxinxu';

此时，就可以看到页面上出现了“变化啦~”文字

数组扩展

Wed, 02 Oct 2024 00:00:00 +0800

ES6（ECMAScript 2015）为JavaScript数组引入了多项扩展功能，这些功能不仅简化了数组操作，还提高了代码的可读性和效率。本文将详细介绍ES6数组扩展的主要功能和用法。

一、扩展运算符（…）

扩展运算符可以用于数组的赋值、合并、解构赋值以及将字符串转为数组。

赋值数组：

let arr1 = [100, 200, 300, [500]];
let arr2 = [...arr1]; // 浅拷贝
console.log(arr2 == arr1); // false
arr1[0] = 400;
console.log(arr2); // 不受影响
arr1[3][0] = 600;
console.log(arr2); // 受影响（只拷贝了一层）

合并数组：

console.log([...[1, 2, 3], ...[4, 5, 6]]); // [1, 2, 3, 4, 5, 6]

解构赋值：

let [a, ...list] = [1, ...["a", "b"]];
console.log(a); // 1
console.log(list); // ["a", "b"]

将字符串转为数组：

console.log([..."str"]); // ["s", "t", "r"]

二、Array.from()

Array.from()方法用于将类数组对象或可迭代对象转换为真正的数组。

let arrLike = {
 "0": "内容",
 "1": "内容2",
 "2": "内容3",
 length: 3
};
console.log(Array.from(arrLike)); // ["内容", "内容2", "内容3"]

此外，Array.from()还可以接受一个回调函数，用于对数组中的每个元素进行处理。

let arr = Array.from({ length: 2 }, () => "jack");
console.log(arr); // ["jack", "jack"]

三、Array.of()

Array.of()方法用于将一组值转换为数组，与Array构造函数的行为不同，Array.of()不会把一个参数作为数组的长度。

尾部优化

Wed, 02 Oct 2024 00:00:00 +0800

ES6 引入了尾调用优化（Tail Call Optimization，TCO）的规范，但它的实现依赖于 JavaScript 引擎的支持（比如 V8 并未开启 TCO），所以这是一个理论上重要、实践中需要谨慎对待的考点。

一、什么是尾调用（Tail Call）？

尾调用是指：

函数的最后一步是调用另一个函数，并直接返回这个函数的执行结果。

例如：

function foo() {
 return bar(); // bar 是 foo 的尾调用
}

尾调用意味着：

当前函数的调用栈帧不需要再做任何事。
调用栈可以复用，不需要为当前函数保留栈帧，从而节省内存。

二、什么是尾调用优化（TCO）？

尾调用优化的目标是：

当一个函数的最后一步是调用另一个函数，JS 引擎可以不再保留当前函数的调用记录，直接跳转执行被调用函数，复用当前栈帧。

也就是说：

不会形成函数调用嵌套的“栈帧链”；
可以避免函数递归导致的栈溢出（stack overflow）。

三、尾调用成立的条件

必须同时满足以下三个条件：

条件	说明
1. 在严格模式下	TCO 只在 strict mode 下才可能被引擎开启
2. 是函数的最后一步调用	return 后没有任何操作
3. 返回调用结果	return bar(x) 形式，不能是 `bar(x); return y`

✅ 尾调用示例：

'use strict';
function f(x) {
 return g(x); // 最后一步是返回 g(x)，符合尾调用优化条件
}

❌ 非尾调用：

function f(x) {
 const y = g(x);
 return y; // 不是直接返回函数调用
}

四、尾调用优化应用场景：尾递归

递归调用时，若能做到尾调用，就能避免栈溢出。

ES6 面试题

Mon, 01 Jan 0001 00:00:00 +0000

共 51 道 ES6 面试题。答案默认折叠，便于先自行作答。

1. 说说 Class 语法糖的底层实现

难度：3 · 类型：QA

题目要点

class 是基于函数构造器和原型链的语法封装，实例方法本质挂载在 prototype 上，继承通过 Object.create 构建原型链，同时通过构造函数原型链继承静态方法。super 依赖内部 [[HomeObject]] 机制定位父类方法。class 并未引入新的对象模型，而是在原型继承基础上增加语义约束与语法增强。

参考答案

这个问题的关键在于理解：class 并不是一种新的面向对象机制，而是对 原型继承（prototype-based inheritance） 的语法封装。底层仍然是函数构造器 + 原型链。

如果把 class 当作 Java 那种基于类的模型去理解，就会产生误解。

先看一个简单例子：

class Person {
 constructor(name) {
 this.name = name;
 }

 say() {
 console.log(this.name);
 }

 static create(name) {
 return new Person(name);
 }
}

它在底层大致等价于：

function Person(name) {
 this.name = name;
}

Person.prototype.say = function () {
 console.log(this.name);
};

Person.create = function (name) {
 return new Person(name);
};

一、实例方法的实现

ES6 on Last Stand

Let/Const

Var

var 的作用域

var 变量可以重新声明和修改

var 的变量提升

模版字符串

模板字符串

基本用法

字符串插值

默认参数

箭头函数

一、箭头函数的特点

1. 相比普通函数，箭头函数有更加简洁的语法。

2. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。

3. 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则后抛出错误。

解构赋值

解构赋值概念

数组解构

基本使用

设置默认值

剩余值处理

进阶用法

展开运算符

让函数的 Apply 调用方式成为过去

合并数组

拷贝数组

将参数或 NodeList 转成数组

export/import

export，import 是什么

1 导出单个变量

2 导出多个变量

常见考点

1. export 的基本使用

Promise

为什么要使用 Promise？

什么是 Promise？

Generator

聊聊 for of

你能学到什么

类数组对象的玄机

Async/Await

async/await用法

有什么用？

是怎么用？

Class

Class 的基本语法

简介

类的由来

Map与Set

集合

Set实例的属性和方法

创建一个集合

WeakMap 和 WeakSet

1. 什么是 WeakSet

区别一：WeakSet 的成员只能是对象和Symbol类型，而不能是其他类型的值，我们用代码演示一下

2. 这里有’BUG'

defineProperty 与 proxy

前言

definePropety

Reflect

一、Reflect有什么用？

数组扩展

一、扩展运算符（…）

二、Array.from()

三、Array.of()

尾部优化

一、什么是尾调用（Tail Call）？

二、什么是尾调用优化（TCO）？

三、尾调用成立的条件

四、尾调用优化应用场景：尾递归

ES6 面试题

1. 说说 Class 语法糖的底层实现

题目要点

1. `export` 的基本使用

聊聊 `for of`