ES6（持续更新中...）

喜欢ヅ旅行 2023-07-23 09:57 155阅读 0赞

**ES6 是 ECMAScript 标准十余年来变动最大的一个版本,主要是为了解决 ES5 的先天不足,主要添加了 类、模块、promise 等,是前端基础 ，请看ES6表格**

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>方法</th> 
   <th>细节</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>声明与表达式</td> 
   <td>let与const</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>声明与表达式</td> 
   <td>解构赋值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>声明与表达式</td> 
   <td>symbol</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>内置对象(新增)</td> 
   <td>map与set</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>内置对象(新增)</td> 
   <td>proxy与reflect</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>内置对象(扩展)</td> 
   <td>字符串</td> 
   <td>扩展的方法、模板字符串</td> 
  </tr> 
  <tr> 
   <td>内置对象(扩展)</td> 
   <td>数值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>内置对象(扩展)</td> 
   <td>对象</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>内置对象(扩展)</td> 
   <td>数组</td> 
   <td>创建 扩展 缓冲</td> 
  </tr> 
  <tr> 
   <td>运算符与语句</td> 
   <td>函数</td> 
   <td>箭头函数</td> 
  </tr> 
  <tr> 
   <td>运算符与语句</td> 
   <td>迭代器</td> 
   <td>for…of</td> 
  </tr> 
  <tr> 
   <td>运算符与语句</td> 
   <td>class类</td> 
   <td>用法 decorator 封装继承</td> 
  </tr> 
  <tr> 
   <td>运算符与语句</td> 
   <td>模块</td> 
   <td>export 与import 基本用法</td> 
  </tr> 
  <tr> 
   <td>异步编程</td> 
   <td>promise对象</td> 
   <td>状态 用法</td> 
  </tr> 
  <tr> 
   <td>异步编程</td> 
   <td>Generator函数</td> 
   <td>用法 场景</td> 
  </tr> 
  <tr> 
   <td>异步编程</td> 
   <td>async函数</td> 
   <td>语法 场景 async await</td> 
  </tr> 
 </tbody> 
</table>

## ES6 let与const 关键字及变量的区别 ##

js声明变量有三个关键字，分别是 var let const  
**作用域**  
var 属于函数作用域（局部作用域）或者全局作用域，存在变量提升，  
let const 属于块级作用域，只能在\{\}内访问，不存在变量提升  
**变量定义**  
*var* 声明变量未赋值不会报错,允许修改值，  
*let* 声明变量未赋值不会报错,允许修改值，  
*const* 声明变量未赋值会报错,不允许修改值，  
**区别**

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>作用域</th> 
   <th>变量提升</th> 
   <th>声明</th> 
   <th>赋值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>var</td> 
   <td>函数/全局</td> 
   <td>存在</td> 
   <td>可以重复声明，在块中重新声明变量也会重新声明块外的变量</td> 
   <td>声明变量未赋值不会报错,允许修改值</td> 
  </tr> 
  <tr> 
   <td>let</td> 
   <td>块级</td> 
   <td>不存在</td> 
   <td>可以重复声明，在块中重新声明变量不会影响块外的变量</td> 
   <td>声明变量未赋值不会报错,允许修改值</td> 
  </tr> 
  <tr> 
   <td>const</td> 
   <td>块级</td> 
   <td>不存在</td> 
   <td>同一块内不允许重复声明，在块中重新声明变量不会影响块外的变量</td> 
   <td>声明时必须进行初始化，声明变量未赋值会报错,不允许修改值</td> 
  </tr> 
 </tbody> 
</table>

总结：  
使用var关键字声明的全局作用域变量属于window对象。  
使用let关键字声明的全局作用域变量不属于window对象。  
使用var关键字声明的变量在任何地方都可以修改。  
在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。  
在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。  
let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。  
在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。  
在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量  
const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:  
var关键字定义的变量可以先使用后声明。  
let关键字定义的变量需要先声明再使用。  
const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改。

## ES6 解构赋值 ##

*解构赋值是对赋值运算符的扩展  
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值  
书写简单易懂，语义清晰明了，方便了对复杂对象中数据字段获取*  
**解构模型分为**：  
解构的源，解构赋值表达式的右边部分。  
解构的目标，解构赋值表达式的左边部分。  
**解构赋值的用途**  
1 、交换变量的值

let x='1';
    let y='2';
    [x,y]=[y,x]

2、从函数返回多个值

3 、函数参数的定义

// 参数是一组有次序的值
    function f([x, y, z]) {  ... }
    f([1, 2, 3])
    // 参数是一组无次序的值
    function f({ x, y, z}) {  ... }
    f({ z: 3, y: 2, x: 1})

4、提取JSON数据

var jsonData = { 
      id: 42,
      status: "OK",
      data: [867, 5309]
    }
    let {  id, status, data: number } = jsonData;
     
    console.log(id, status, number)
    // 42, OK, [867, 5309]

5、函数参数的默认值

jQuery.ajax = function (url, { 
      async = true,
      beforeSend = function () { },
      cache = true,
      complete = function () { },
      crossDomain = false,
      global = true,
      // ... more config
    }) { 
      // ... do stuff
    };

6、 遍历Map结构

## ES6 Symbol ##

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。  
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。

let sy = Symbol("KK");
    console.log(sy);   // Symbol(KK)
    typeof(sy);        // "symbol"
     
    // 相同参数 Symbol() 返回的值不相等
    let sy1 = Symbol("kk"); 
    sy === sy1;       // false

## ES6 Map 与 Set ##

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。  
**maps和object的区别**  
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。  
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。  
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。  
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

<table> 
 <thead> 
  <tr> 
   <th>对象</th> 
   <th>键</th> 
   <th>键值顺序</th> 
   <th>个数</th> 
   <th>迭代</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>object</td> 
   <td>字符串/symbols</td> 
   <td>无序</td> 
   <td>手动计算</td> 
   <td>手动计算</td> 
  </tr> 
  <tr> 
   <td>maps</td> 
   <td>任意值 (字符串/对象/函数/NaN/)</td> 
   <td>有序（FIFO原则）</td> 
   <td>通过size</td> 
   <td>通过size</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6cTQyMjkxMTUzMQ_size_16_color_FFFFFF_t_70]  
*数据访问*  
Map 想要访问元素，可以使用 Map 本身的原生方法：

map.get(1)

Object 可以通过 . 和 \[ \] 来访问

obj.id;
    obj['id'];

判断某个元素是否在 Map 中可以使用

map.has(1);

判断某个元素是不是在 Object 中需要以下操作：

obj.id === undefined;
    	// 或者
    	'id' in obj;

## ES6 Reflect 与 Proxy ##

**proxy** 是设计模式的一种，代理模式  
**语法：**

new Proxy(target,handler)
    	// target被代理的对象
    	// handler 对代理的对象做什么操作
    	
    	var obj = new Proxy({ }, { 
    	  get: function (target, key, receiver) { 
    	    console.log(`getting ${ key}!`);
    	    return Reflect.get(target, key, receiver);
    	  },
    	  set: function (target, key, value, receiver) { 
    	    console.log(`setting ${ key}!`);
    	    return Reflect.set(target, key, value, receiver);
    	  }
    	});

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>target</td> 
   <td>用Proxy包装的目标对象（可以是任何类型，数组/对象/函数/或者另一个代理）</td> 
  </tr> 
  <tr> 
   <td>handler</td> 
   <td>一个对象，其属性是当执行一个操作时定义代理的行为的函数</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>handler</th> 
   <th>方法</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>set(target,propkey,receiver)</td> 
   <td>修改</td> 
   <td>拦截对象属性的设置,（如 proxy.foo=v），返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>get(target, propKey, value, receiver)</td> 
   <td>读取</td> 
   <td>截对象属性的读取（如 proxy.foo），最后一个参数是可选参数，参见下面 Reflect.get 部分</td> 
  </tr> 
  <tr> 
   <td>has(target,propKye)</td> 
   <td>判断对象是否有该属性</td> 
   <td>拦截 propKey in proxy 的操作，返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>deleteProperty()</td> 
   <td>拦截 delete 操作</td> 
   <td>拦截 delete proxy[propKey] 的操作，返回一个布尔值，如果这个方法抛出错误或者返回 false，当前属性就无法被 delete 命令删除</td> 
  </tr> 
  <tr> 
   <td>ownKeys(target)</td> 
   <td></td> 
   <td>拦截 Object.getOwnPropertyNames(proxy) Object.getOwnPropertySymbols(proxy) Object.keys(proxy) 返回一个数组</td> 
  </tr> 
  <tr> 
   <td>getOwnPropertyDescriptor(target,propKey)</td> 
   <td>getOwnPropertyDescriptor 方法拦截 Object.getOwnPropertyDescriptor，返回一个属性描述对象或者 undefined</td> 
   <td>拦截 Object.getOwnPropertyDescriptor(proxy,propKey)，返回属性的描述对象</td> 
  </tr> 
  <tr> 
   <td>defineProperty(target,propKey,propDesc)</td> 
   <td>defineProperty 方法拦截了 Object.defineProperty 操作</td> 
   <td>拦截 Object.defineProperty(proxy,propKey,PropDesc) Object.defineProperties(propxy,propDescs) 返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>preventExtensions(target)</td> 
   <td>拦截 Object.preventExtensions</td> 
   <td>拦截 Object.preventExtensions(proxy)，返回一个对象</td> 
  </tr> 
  <tr> 
   <td>getPrototypeOf(target)</td> 
   <td>getPrototypeOf 方法主要用来拦截获取对象原型</td> 
   <td>拦截 Object.getPrototypeOf(proxy)，返回一个对象</td> 
  </tr> 
  <tr> 
   <td>isExtensible(target)</td> 
   <td></td> 
   <td>拦截 Object.isExtensible(proxy)，返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>setPrototypeOf(target,proto)</td> 
   <td>getPrototypeOf 方法主要用来拦截设置对象原型</td> 
   <td>拦截 Object.setPrototypeOf(proxy,proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截</td> 
  </tr> 
  <tr> 
   <td>apply(target,object,args)</td> 
   <td>拦截函数的调用、call 和 apply 操作，</td> 
   <td>拦截 Proxy 实例，并将其作为函数调用的操作，比如 proxy(…args) proxy.call(object,…args) proxy.apply(…)</td> 
  </tr> 
  <tr> 
   <td>construct(target,args)</td> 
   <td>拦截 new 命令</td> 
   <td>拦截 Proxy 实例作为构造函数调用的操作，比如 new proxy(…args)</td> 
  </tr> 
 </tbody> 
</table>

参考 [es6 proxy][]  
**Reflect** 映出  
ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。  
Reflect 对象对某些方法的返回结果进行了修改，使其更合理。  
Reflect 对象使用函数的方式实现了 Object 的命令式操作。  
静态方法

Reflect.get(target, name, receiver)
    Reflect.set(target, name, value, receiver)
    Reflect.has(obj, name)
    Reflect.deleteProperty(obj, property)
    Reflect.construct(obj, args)
    Reflect.getPrototypeOf(obj)
    Reflect.setPrototypeOf(obj, newProto)
    Reflect.apply(func, thisArg, args)
    Reflect.defineProperty(target, propertyKey, attributes)
    Reflect.getOwnPropertyDescriptor(target, propertyKey)
    Reflect.isExtensible(target)
    Reflect.preventExtensions(target)
    Reflect.ownKeys(target)

proxy与reflect的组合使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6cTQyMjkxMTUzMQ_size_16_color_FFFFFF_t_70]: /images/20230528/c4ffb43f8ec84a31b2966b18ef23842a.png
[es6 proxy]: https://blog.csdn.net/lucky541788/article/details/90141837?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159555710619724848347549%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159555710619724848347549&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-90141837.pc_ecpm_v3_pc_rank_v3&utm_term=es6%20proxy&spm=1018.2118.3001.4187