高阶JavaScript笔记（四）

七、ES6

认识class定义类

• 我们会发现，按照前面的构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。

  • 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类；
  • 但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；

• 所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系；

• 那么，如何使用class来定义一个类呢？

  • 可以使用两种方式来声明类：类声明和类表达式；

// 类的声明
class Person {}
​
// babel
​
// 类的表达式
var Animal = class {
}

类和构造函数的异同

我们来研究一下类的一些特性：

• 你会发现它和我们的构造函数的特性其实是一致的；

// 研究一下类的特性
console.log(Person.prototype);  // {}
console.log(Person.prototype.__proto__); // [Object: null prototype] {}
console.log(Person.prototype.constructor);  // [class Person]
console.log(typeof Person); // function
​
var p = new Person();
console.log(p.__proto__ === Person.prototype); // true

类的构造函数

如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？

• 每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor；
• 当我们通过new操作符，操作一个类的时候会调用这个类的构造函数constructor；
• 每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常；

当我们通过new关键字操作类的时候，会调用这个constructor函数，并且执行如下操作：

0. 在内存中创建一个新的对象（空对象）；
1. 这个对象内部的[[prototype]]属性会被赋值为该类的prototype属性；
2. 构造函数内部的this，会指向创建出来的新对象；
3. 执行构造函数的内部代码（函数体代码）；
4. 如果构造函数没有返回非空对象，则返回创建出来的新对象；

class Person {
  // 类的构造方法
  // 注意: 一个类只能有一个构造函数
  // 1.在内存中创建一个对象 moni = {}
  // 2.将类的原型prototype赋值给创建出来的对象 moni.__proto__ = Person.prototype
  // 3.将对象赋值给函数的this: new绑定 this = moni
  // 4.执行函数体中的代码
  // 5.自动返回创建出来的对象
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
​
var p1 = new Person("why", 18);
var p2 = new Person("kobe", 30);
console.log(p1, p2);

类的实例方法

在上面我们定义的属性都是直接放到了this上，也就意味着它是放到了创建出来的新对象中：

• 在前面我们说过对于实例的方法，我们是希望放到原型上的，这样可以被多个实例来共享；
• 这个时候我们可以直接在类中定义；

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this._address = "广州市";
  }
​
  // 普通的实例方法
  // 创建出来的对象进行访问
  // var p = new Person()
  // p.eating()
  eating() {
    console.log(this.name + " eating~");
  }
​
  running() {
    console.log(this.name + " running~");
  }
}  

类的访问器方法

我们之前讲对象的属性描述符时有讲过对象可以添加setter和getter函数的，那么类也是可以的：

class Person {
// 类的访问器方法
  get address() {
    console.log("拦截访问操作");
    return this._address;
  }
​
  set address(newAddress) {
    console.log("拦截设置操作");
    this._address = newAddress;
  }
}

类的静态方法

静态方法通常用于定义直接使用类来执行的方法，不需要有类的实例，使用static关键字来定义：

class Person {
// 类的静态方法(类方法)
  // Person.createPerson()
  static randomPerson() {
    var nameIndex = Math.floor(Math.random() * names.length);
    var name = names[nameIndex];
    var age = Math.floor(Math.random() * 100);
    return new Person(name, age);
  }
}

ES6类的继承 - extends

在ES6中新增了使用extends关键字，可以方便的帮助我们实现继承：

class Person {
}
class Student extends Person {
}

super关键字

我们会发现在上面的代码中我使用了一个super关键字，这个super关键字有不同的使用方式：

• 注意：在子（派生）类的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！
• super的使用位置有三个：子类的构造函数、实例方法、静态方法；

// 父类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
​
  running() {
    console.log(this.name + " running~");
  }
​
  eating() {
    console.log(this.name + " eating~");
  }
​
  personMethod() {
    console.log("处理逻辑1");
    console.log("处理逻辑2");
    console.log("处理逻辑3");
  }
​
  static staticMethod() {
    console.log("PersonStaticMethod");
  }
}
​
// Student称之为子类(派生类)
class Student extends Person {
  // JS引擎在解析子类的时候就有要求, 如果我们有实现继承
  // 那么子类的构造方法中, 在使用this之前
  constructor(name, age, sno) {
    super(name, age);
    this.sno = sno;
  }
​
  studying() {
    console.log(this.name + " studying~");
  }
​
  // 类对父类的方法的重写
  running() {
    console.log("student " + this.name + " running");
  }
​
  // 重写personMethod方法
  personMethod() {
    // 复用父类中的处理逻辑
    super.personMethod();
​
    console.log("处理逻辑4");
    console.log("处理逻辑5");
    console.log("处理逻辑6");
  }
​
  // 重写静态方法
  static staticMethod() {
    super.staticMethod();
    console.log("StudentStaticMethod");
  }
}
​
var stu = new Student("why", 18, 111);
console.log(stu);

继承内置类

我们也可以让我们的类继承自内置类，比如Array：

class HYArray extends Array {
  firstItem() {
    return this[0]
  }
​
  lastItem() {
    return this[this.length-1]
  }
}
​
var arr = new HYArray(1, 2, 3)
console.log(arr.firstItem())
console.log(arr.lastItem())

类的混入mixin

JavaScript的类只支持单继承：也就是只能有一个父类

• 那么在开发中我们我们需要在一个类中添加更多相似的功能时，应该如何来做呢？
• 这个时候我们可以使用混入（mixin）；

class Person {}
​
function mixinRunner(BaseClass) {
  class NewClass extends BaseClass {
    running() {
      console.log("running~");
    }
  }
  return NewClass;
}
​
function mixinEater(BaseClass) {
  return class extends BaseClass {
    eating() {
      console.log("eating~");
    }
  };
}
​
// 在JS中类只能有一个父类: 单继承
class Student extends Person {}
​
var NewStudent = mixinEater(mixinRunner(Student));
​
var ns = new NewStudent();
ns.running();
ns.eating();

JavaScript中的多态

• 面向对象的三大特性：封装、继承、多态。

  • 前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。

• JavaScript有多态吗？

  • 维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型。
  • 非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

• 那么从上面的定义来看，JavaScript是一定存在多态的。

传统面向对象的多态

TS代码

// 传统的面向对象多态是有三个前提:
// 1> 必须有继承(是多态的前提)
// 2> 必须有重写(子类重写父类的方法)
// 3> 必须有父类引用指向子类对象
​
// Shape形状
class Shape {
  getArea() {}
}
​
class Rectangle extends Shape {
  getArea() {
    return 100;
  }
}
​
class Circle extends Shape {
  getArea() {
    return 200;
  }
}
​
var r = new Rectangle();
var c = new Circle();
​
// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(shape: Shape) {
  console.log(shape.getArea());
}
​
calcArea(r);
calcArea(c);
​
export {};

JS中多态的体现

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(foo) {
  console.log(foo.getArea());
}
​
var obj1 = {
  name: "why",
  getArea: function () {
    return 1000;
  },
};
​
class Person {
  getArea() {
    return 100;
  }
}
​
var p = new Person();
​
calcArea(obj1);
calcArea(p);
​
// 也是多态的体现
function sum(m, n) {
  return m + n;
}
​
console.log(sum(20, 30));
console.log(sum("abc", "cba"));

字面量的增强

• ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）。

• 字面量的增强主要包括下面几部分：

  • 属性的简写：Property Shorthand
  • 方法的简写：Method Shorthand
  • 计算属性名：Computed Property Names

var name = "why";
var age = 18;
​
var obj = {
  // 1.property shorthand(属性的简写)
  name,
  age,
​
  // 2.method shorthand(方法的简写)
  foo: function () {
    console.log(this);
  },
  bar() {
    console.log(this);
  },
  baz: () => {
    console.log(this);
  },
​
  // 3.computed property name(计算属性名)
  [name + 123]: "hehehehe",
};
​
obj.baz();
obj.bar();
obj.foo();
​
// obj[name + 123] = "hahaha"
console.log(obj);

解构Destructuring

• ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。

• 我们可以划分为：数组的解构和对象的解构。

• 数组的解构： 基本解构过程

  • 顺序解构
  • 解构出数组
  • 默认值

• 对象的解构：

  • 基本解构过程
  • 任意顺序
  • 重命名
  • 默认值

var names = ["abc", "cba", "nba"];
// var item1 = names[0]
// var item2 = names[1]
// var item3 = names[2]
​
// 对数组的解构: []
var [item1, item2, item3] = names;
console.log(item1, item2, item3);
​
// 解构后面的元素
var [, , itemz] = names;
console.log(itemz);
​
// 解构出一个元素,后面的元素放到一个新数组中
var [itemx, ...newNames] = names;
console.log(itemx, newNames);
​
// 解构的默认值
var [itema, itemb, itemc, itemd = "aaa"] = names;
console.log(itemd);
​
var obj = {
  name: "why",
  age: 18,
  height: 1.88,
};
​
// 对象的解构: {}
var { name, age, height } = obj;
console.log(name, age, height);
​
var { age } = obj;
console.log(age);
​
var { name: newName } = obj;
console.log(newName);
​
var { address: newAddress = "广州市" } = obj;
console.log(newAddress);
​
function foo(info) {
  console.log(info.name, info.age);
}
​
foo(obj);
​
function bar({ name, age }) {
  console.log(name, age);
}
​
bar(obj);

解构的应用场景

• 解构目前在开发中使用是非常多的：

  • 比如在开发中拿到一个变量时，自动对其进行解构使用；
  • 比如对函数的参数进行解构

let/const基本使用

• 在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

  • let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；
  • 但是let、const确确实实给JavaScript带来一些不一样的东西；

• let关键字：

  • 从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量

• const关键字：

  • const关键字是constant的单词的缩写，表示常量、衡量的意思；
  • 它表示保存的数据一旦被赋值，就不能被修改；
  • 但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；

• let、const不允许重复声明变量

var foo = "foo"
let bar = "bar"
​
// const constant(常量/衡量)
const name = "abc"
name = "cba"
​
// 注意事项一: const本质上是传递的值不可以修改
// 但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的
const obj = {
  foo: "foo"
}
​
// obj = {}
obj.foo = "aaa"
console.log(obj.foo)
​
// 注意事项二: 通过let/const定义的变量名是不可以重复定义
var foo = "abc"
var foo = "cba"
// SyntaxError: Identifier 'foo' has already been declared
​
console.log(foo);

let/const作用域提升

• let、const和var的另一个重要区别是作用域提升：

  • 我们知道var声明的变量是会进行作用域提升的；
  • 但是如果我们使用let声明的变量，在声明之前访问会报错；

• 那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？

  • 事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；
  • 这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；

// console.log(foo)
// var foo = "foo"
​
// Reference(引用)Error: Cannot access 'foo' before initialization(初始化)
// let/const他们是没有作用域提升
// foo被创建出来了, 但是不能被访问
// 作用域提升: 能提前被访问
console.log(foo);
let foo = "foo";

• 从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。

  • 那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？

• 事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；

  • 作用域提升： 在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；
  • 在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；

• 所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来

Window对象添加属性

• 我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：

  • 但是let、const是不会给window上添加任何属性的。

• 那么我们可能会想这个变量是保存在哪里呢？

• 我们先回顾一下最新的ECMA标准中对执行上下文的描述

变量被保存到VariableMap中

• 也就是说我们声明的变量和环境记录是被添加到变量环境中的：

  • 但是标准有没有规定这个对象是window对象或者其他对象呢？
  • 其实并没有，那么JS引擎在解析的时候，其实会有自己的实现；
  • 比如v8中其实是通过VariableMap的一个hashmap来实现它们的存储的。
  • 那么window对象呢？而window对象是早期的GO对象，在最新的实现中其实是浏览器添加的全局对象，并且一直保持了window和var之间值的相等性；

var的块级作用域

• 在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。

• ES5中放到一个代码中定义的变量，外面是可以访问的：

// 声明对象的字面量
var obj = {
  name: "why",
};
​
// ES5中没有块级作用域
// 块代码(block code)
{
  // 声明一个变量
  var foo = "foo";
}
​
// console.log(foo);
​
// 在ES5中只有两个东西会形成作用域
// 1.全局作用域
// 2.函数作用域
function foo() {
  var bar = "bar";
}
​
console.log(bar);
​
function foo() {
  function demo() {}
}

let/const的块级作用域

• 在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：

• 但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：

  • 这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升；

// ES6的代码块级作用域
// 对let/const/function/class声明的类型是有效
{
  let foo = "why";
  function demo() {
    console.log("demo function");
  }
  class Person {}
}
​
// console.log(foo) // foo is not defined
// 不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
// demo()
var p = new Person(); // Person is not defined

if-switch-for块级代码作用域

{
}
​
// if语句的代码就是块级作用域
if (true) {
  var foo = "foo";
  let bar = "bar";
}
​
console.log(foo);
console.log(bar);
​
// switch语句的代码也是块级作用域
var color = "red";
​
switch (color) {
  case "red":
    var foo = "foo";
    let bar = "bar";
}
​
console.log(foo);
console.log(bar);
​
// for语句的代码也是块级作用域
for (var i = 0; i < 10; i++) {
  console.log("Hello World" + i);
}
​
// console.log(i)
​
for (let i = 0; i < 10; i++) {}
​
console.log(i);

块级作用域的应用

实际的案例：获取多个按钮监听点击

  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>

const btns = document.getElementsByTagName("button");
​
// ES5对for循环的操作
for (var i = 0; i < btns.length; i++) {
  立即执行函数(function (n) {
    btns[i].onclick = function () {
      console.log("第" + n + "个按钮被点击");
    };
  })(i);
}
​
// console.log(i)
​
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log("第" + i + "个按钮被点击");
  };
}
​
// console.log(i)
​

暂时性死区

在ES6中，我们还有一个概念称之为暂时性死区：

• 它表达的意思是在一个代码中，使用let、const声明的变量，在声明之前，变量都是不可以访问的；
• 我们将这种现象称之为 temporal dead zone（暂时性死区，TDZ）；

var foo = "foo";
​
// if (true) {
//   console.log(foo)
//   暂时性死区：在let/const声明变量前不能访问
//   let foo = "abc"
// }
​
function bar() {
  console.log(foo);
  let foo = "abc";
}
​
bar();
​
var name1 = "abc";
let name2 = "cba";
const name3 = "nba";
​
// 构建工具的基础上创建项目\开发项目 webpack/vite/rollup
// babel
// ES6 -> ES5
​
const info = { name: "why" };
​
info = { name: "kobe" };
​

var、let、const的选择

• 那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？

• 对于var的使用：

  • 我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
  • 其实是JavaScript在设计之初的一种语言缺陷；
  • 当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；
  • 但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；

• 对于let、const：

  • 对于let和const来说，是目前开发中推荐使用的；
  • 我们会有限推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
  • 只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
  • 这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

var foo = "foo";
​
// if (true) {
//   console.log(foo)
​
//   let foo = "abc"
// }
​
function bar() {
  console.log(foo);
​
  let foo = "abc";
}
​
bar();
​
var name1 = "abc";
let name2 = "cba";
const name3 = "nba";
​
// 构建工具的基础上创建项目\开发项目 webpack/vite/rollup
// babel
// ES6 -> ES5
​
const info = { name: "why" };
​
info = { name: "kobe" };

字符串模板基本使用

• 在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

• ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

  • 首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
  • 其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

// ES6之前拼接字符串和其他标识符
const name = "why";
const age = 18;
const height = 1.88;
​
// console.log("my name is " + name + ", age is " + age + ", height is " + height)
​
// ES6提供模板字符串 ``
const message = `my name is ${name}, age is ${age}, height is ${height}`;
console.log(message);
​
const info = `age double is ${age * 2}`;
console.log(info);
​
function doubleAge() {
  return age * 2;
}
​
const info2 = `double age is ${doubleAge()}`;
console.log(info2);

标签模板字符串使用

• 模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

• 我们一起来看一个普通的JavaScript的函数：

• 如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：

  • 模板字符串被拆分了；
  • 第一个元素是数组，是被模块字符串拆分的字符串组合；
  • 后面的元素是一个个模块字符串传入的内容；

// 第一个参数依然是模块字符串中整个字符串, 只是被切成多块,放到了一个数组中
// 第二个参数是模块字符串中, 第一个 ${}
function foo(m, n, x) {
  console.log(m, n, x, "---------");
}
​
// foo("Hello", "World")
​
// 另外调用函数的方式: 标签模块字符串
// foo``
​
// foo`Hello World`
const name = "why";
const age = 18;
​
foo`Hello${name}Wo${age}rld`; // 输出[ 'Hello', 'Wo', 'rld' ] why 18 ---------

函数的默认参数

• 在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

  • 传入了参数，那么使用传入的参数；
  • 没有传入参数，那么使用一个默认值

• 而在ES6中，我们允许给函数一个默认值：

• 另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：

  • 但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；

• 另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。

// ES5以及之前给参数默认值
/**
 * 缺点:
 *  1.写起来很麻烦, 并且代码的阅读性是比较差
 *  2.这种写法是有bug
 */
// function foo(m, n) {
//   m = m || "aaa"
//   n = n || "bbb"
​
//   console.log(m, n)
// }
​
// 1.ES6可以给函数参数提供默认值
function foo(m = "aaa", n = "bbb") {
  console.log(m, n);
}
​
// foo()
foo(0, "");
​
// 2.对象参数和默认值以及解构
function printInfo({ name, age } = { name: "why", age: 18 }) {
  console.log(name, age);
}
​
printInfo({ name: "kobe", age: 40 });
​
// 另外一种写法
function printInfo1({ name = "why", age = 18 } = {}) {
  console.log(name, age);
}
​
printInfo1();
​
// 3.有默认值的形参最好放到最后
function bar(x, y, z = 30) {
  console.log(x, y, z);
}
​
// bar(10, 20)
bar(undefined, 10, 20);
​
// 4.会影响有默认值的函数的length属性
function baz(x, y, n = 30, z, m) {
  console.log(x, y, z, m, n);
}
​
console.log(baz.length); // 2

函数的剩余参数

• ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

  • 如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

• 那么剩余参数和arguments有什么区别呢？

  • 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
  • arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
  • arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；

• 剩余参数必须放到最后一个位置，否则会报错

function foo(m, n, ...args) {
  console.log(m, n);
  console.log(args);
​
  console.log(arguments);
}
​
foo(20, 30, 40, 50, 60);
​
// rest paramaters必须放到最后
// Rest parameter must be last formal parameter

函数箭头函数的补充

• 箭头函数是没有显式原型的，所以不能作为构造函数，使用new来创建对象；

// function foo() {
​
// }
​
// console.log(foo.prototype)
// const f = new foo()
// f.__proto__ = foo.prototype
​
var bar = () => {
  console.log(this, arguments);
};
// 箭头函数没有显示原型
// undefined
console.log(bar.prototype);
​
// TypeError: bar is not a constructor
const b = new bar();

展开语法

• 展开语法(Spread syntax) ：

  • 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
  • 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

• 展开语法的场景：

  • 在函数调用时使用；
  • 在数组构造时使用；
  • 在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；

• 注意：展开运算符其实是一种浅拷贝；

const names = ["abc", "cba", "nba"];
const name = "why";
const info = { name: "why", age: 18 };
​
// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z);
}
​
// foo.apply(null, names)
foo(...names);
foo(...name);
​
// 2.构造数组时
const newNames = [...names, ...name];
console.log(newNames);
​
// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names };
console.log(obj);
​

进制的表示

• 在ES6中规范了二进制和八进制的写法：
• 另外在ES2021新增特性：数字过长时，可以使用_作为连接符

const num1 = 100; // 十进制
​
// b -> binary
const num2 = 0b100; // 二进制
// o -> octonary
const num3 = 0o100; // 八进制
// x -> hexadecimal
const num4 = 0x100; // 十六进制
​
console.log(num1, num2, num3, num4);
​
// 大的数值的连接符(ES2021 ES12)
const num = 10_000_000_000_000_000;
console.log(num);

Symbol的基本使用

• Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。

• 那么为什么需要Symbol呢？

  • 在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
  • 比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
  • 比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
  • 比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；

• Symbol就是为了解决上面的问题，用来生成一个独一无二的值。

  • Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；
  • 也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；

• Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；

• 我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；

// 1.ES6之前, 对象的属性名(key)
var obj = {
  name: "why",
  friend: { name: "kobe" },
  age: 18,
};
​
obj["newName"] = "james";
console.log(obj);
​
// 2.ES6中Symbol的基本使用
const s1 = Symbol();
const s2 = Symbol();
​
console.log(s1 === s2);
​
// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol("aaa");
console.log(s3.description);
​
// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj = {
  [s1]: "abc",
  [s2]: "cba",
};
console.log(obj);
​
// 3.2.新增属性
obj[s3] = "nba";
​
// 3.3.Object.defineProperty方式
const s4 = Symbol();
Object.defineProperty(obj, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: "mba",
});
​
console.log(obj[s1], obj[s2], obj[s3], obj[s4]);
// 注意: 不能通过语法获取
// console.log(obj.s1)
​
// 4.使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值
// 需要Object.getOwnPropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj));
console.log(Object.getOwnPropertyNames(obj));
console.log(Object.getOwnPropertySymbols(obj));
const sKeys = Object.getOwnPropertySymbols(obj);
for (const sKey of sKeys) {
  console.log(obj[sKey]);
}
​
// 5.相同值的Symbol Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for("aaa");
const sb = Symbol.for("aaa");
console.log(sa === sb); // true
​
const key = Symbol.keyFor(sa);
console.log(key); // abc
const sc = Symbol.for(key);
console.log(sa === sc); // true

Set和WeakSet的基本使用

Set

• 在ES6之前，我们存储数据的结构主要有两种：数组、对象。

  • 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

• Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

  • 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

• 我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

// 10, 20, 40, 333
// 1.创建Set结构
const set = new Set();
set.add(10);
set.add(20);
set.add(40);
set.add(333);
​
set.add(10);
​
// 2.添加对象时特别注意:
set.add({});
set.add({});
​
const obj = {};
set.add(obj);
set.add(obj);
​
// console.log(set)
​
// 3.对数组去重(去除重复的元素)
const arr = [33, 10, 26, 30, 33, 26];
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }
​
const arrSet = new Set(arr);
// const newArr = Array.from(arrSet)
// const newArr = [...arrSet]
// console.log(newArr)
​
// 4.size属性
console.log(arrSet.size);
​
// 5.Set的方法
// add
arrSet.add(100);
console.log(arrSet);
​
// delete
arrSet.delete(33);
console.log(arrSet);
​
// has
console.log(arrSet.has(100));
​
// clear
// arrSet.clear()
console.log(arrSet);
​
// 6.对Set进行遍历
arrSet.forEach((item) => {
  console.log(item);
});
​
for (const item of arrSet) {
  console.log(item);
}

• Set常见的属性：

  • size：返回Set中元素的个数；

• Set常用的方法：

  • add(value)：添加某个元素，返回Set对象本身；
  • delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
  • has(value)：判断set中是否存在某个元素，返回boolean类型；
  • clear()：清空set中所有的元素，没有返回值；
  • forEach(callback, [, thisArg])：通过forEach遍历set；

• 另外Set是支持for of的遍历的。

WeakSet(少用)

和Set有什么区别呢？

• 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
• 区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

WeakSet常见的方法：

• add(value)：添加某个元素，返回WeakSet对象本身；
• delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
• has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

WeakSet不能遍历

• 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
• 所以存储到WeakSet中的对象是没办法获取的；

const weakSet = new WeakSet();
​
// 1.区别一: 只能存放对象类型
// TypeError: Invalid value used in weak set
// weakSet.add(10)
​
// 2.区别二: 对对象是一个弱引用
let obj = {
  name: "why",
};
​
// weakSet.add(obj)
​
const set = new Set();
// 建立的是强引用
set.add(obj);
​
// 建立的是弱引用
weakSet.add(obj);
​
// 3.WeakSet的应用场景
const personSet = new WeakSet();
class Person {
  constructor() {
    personSet.add(this);
  }
​
  running() {
    if (!personSet.has(this)) {
      throw new Error("不能通过非构造方法创建出来的对象调用running方法");
    }
    console.log("running~", this);
  }
}
​
let p = new Person();
p.running();
// p = null;
​
p.running.call({ name: "why" });

Map和WeakMap的基本使用

Map

• Map，用于存储映射关系。

  • 但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

• 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；

• 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "why" };
const obj2 = { name: "kobe" };
​
// const info = {
//   [obj1]: "aaa",
//   [obj2]: "bbb"
// }
​
// console.log(info)
​
// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map();
map.set(obj1, "aaa");
map.set(obj2, "bbb");
map.set(1, "ccc");
console.log(map);
​
const map2 = new Map([
  [obj1, "aaa"],
  [obj2, "bbb"],
  [2, "ddd"],
]);
console.log(map2);
​
// 3.常见的属性和方法
console.log(map2.size);
​
// set
map2.set("why", "eee");
console.log(map2);
​
// get(key)
console.log(map2.get("why"));
​
// has(key)
console.log(map2.has("why"));
​
// delete(key)
map2.delete("why");
console.log(map2);
​
// clear
// map2.clear()
// console.log(map2)
​
// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key);
});
​
for (const item of map2) {
  // console.log(item[0], item[1]);
  console.log(item);
}
​
for (const [key, value] of map2) {
  console.log(key, value);
}

• Map常见的属性：

  • size：返回Map中元素的个数；

• Map常见的方法：

  • set(key, value)：在Map中添加key、value，并且返回整个Map对象；
  • get(key)：根据key获取Map中的value；
  • has(key)：判断是否包括某一个key，返回Boolean类型；
  • delete(key)：根据key删除一个键值对，返回Boolean类型；
  • clear()：清空所有的元素；
  • forEach(callback, [, thisArg])：通过forEach遍历Map；

• Map也可以通过for of进行遍历。

WeakMap

和Map有什么区别呢？

• 区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
• 区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

WeakMap常见的方法有四个：

• set(key, value)：在Map中添加key、value，并且返回整个Map对象；
• get(key)：根据key获取Map中的value；
• has(key)：判断是否包括某一个key，返回Boolean类型；
• delete(key)：根据key删除一个键值对，返回Boolean类型；

注意：WeakMap也是不能遍历的

• 因为没有forEach方法，也不支持通过for of的方式进行遍历；

const obj = { name: "obj1" };
// 1.WeakMap和Map的区别二:
const map = new Map();
map.set(obj, "aaa");
​
const weakMap = new WeakMap();
weakMap.set(obj, "aaa");
​
// 2.区别一: 不能使用基本数据类型
// weakMap.set(1, "ccc")
​
// 3.常见方法
// get方法
console.log(weakMap.get(obj));
​
// has方法
console.log(weakMap.has(obj));
​
// delete方法
console.log(weakMap.delete(obj));
// WeakMap { <items unknown> }
console.log(weakMap);

WeakMap的应用

在Vue3响应式原理的使用

// 应用场景(vue3响应式原理)
const obj1 = {
  name: "why",
  age: 18,
};
​
function obj1NameFn1() {
  console.log("obj1NameFn1被执行");
}
​
function obj1NameFn2() {
  console.log("obj1NameFn2被执行");
}
​
function obj1AgeFn1() {
  console.log("obj1AgeFn1");
}
​
function obj1AgeFn2() {
  console.log("obj1AgeFn2");
}
​
const obj2 = {
  name: "kobe",
  height: 1.88,
  address: "广州市", 
};
​
function obj2NameFn1() {
  console.log("obj2NameFn1被执行");
}
​
function obj2NameFn2() {
  console.log("obj2NameFn2被执行");
}
​
// 1.创建WeakMap
const weakMap = new WeakMap();
​
// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const obj1Map = new Map();
obj1Map.set("name", [obj1NameFn1, obj1NameFn2]);
obj1Map.set("age", [obj1AgeFn1, obj1AgeFn2]);
weakMap.set(obj1, obj1Map);
​
// 2.2.对obj2收集的数据结构
const obj2Map = new Map();
obj2Map.set("name", [obj2NameFn1, obj2NameFn2]);
weakMap.set(obj2, obj2Map);
​
// 3.如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = "james";
const targetMap = weakMap.get(obj1);
const fns = targetMap.get("name");
fns.forEach((item) => item());