ES6进阶记录

目录

类

概述：

定义：

声明：

继承实例：

模块化

export 导出

 import 导入

可迭代对象

Set

特殊值

常用方法：

WeakSet

Map

WeakMap

for of ：

Symbol

迭代器（Iterators）

Generator生成器

Generator 函数组成

基本用法实例：

 Proxy 代理

概述

基本用法

Proxy

类

概述：

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

定义：

// 匿名类

let Example = class { constructor(a) { this.a = a; } }

// 命名类

let Example = class Example { constructor(a) { this.a = a; } }

声明：

class Example { constructor(a) { this.a = a; } }

继承实例：

模块化

在html中模块化引入js

1. 有http服务器

2. <script type="module">

export 导出

在一个js文件中：

           

 import 导入

        

 

可迭代对象

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

• +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
• undefined 与 undefined 是恒等的，所以不重复；
• NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

常用方法：

• add添加
• delete 删除
• clear 清空
• has  检查是否有
• size  长度

数组去重实例：

     let arr = [1,2,1,2,5,2,5];

     arr =[...new Set(arr)]         

      console.log(arr)

WeakSet

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

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

Map

       ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

方法 set get  delete  clear  has  size

WeakMap

就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。

另一个需要注意的点是，WeakMap 的所有 key 必须是对象。没有size

for of ：

 for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

var arr1 = ["mumu","age","木木","曾庆林"];

for(v of arr1){     console.log(v); }

 可比遍历元素：

字符串，数组，set，map

Symbol

Symbol 是一种新的数据类型，它的值是唯一的，不可变的

var sym = Symbol( "符号" );

console.log(typeof sym); // symbol

这里 Symbol 前面不能使用 new 操作符。 如果它被用作一个对象的属性，那么这个属性会是不可枚举的

迭代器（Iterators）

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。

它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。

基本用法实例：

var arr = [11,12,13];

var itr = arr[Symbol.iterator]();  

itr.next(); // { value: 11, done: false }

itr.next(); // { value: 12, done: false }

itr.next(); // { value: 13, done: false }  

itr.next(); // { value: undefined, done: true }

Generator生成器

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

Generator 函数组成

Generator 有两个区分于普通函数的部分：

• 一是在 function 后面，函数名之前有个 * ；

• 函数内部有 yield 表达式。

其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

基本用法实例：

 Proxy 代理

概述

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。

它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

基本用法

Proxy

一个 Proxy 对象由两个部分组成： target 、 handler 。

在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。

target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。

 这里的 handler 可以是 set get has hasOwn keys 等等方法

实例：