ES6学习笔记

ES6学习笔记

Tags
JavaScript
ES6
哈希算法
集合算法
代理模式
元编程
协程
CreatedTime
Aug 18, 2022 10:04 AM
Slug
2019-06-06-es-learn
UpdatedTime
Last updated August 18, 2022

let 和 const 对比

ES6 新增了letconst,它们声明的变量,都处于“块级作用域”。并且不存在“变量提升”,不允许重复声明。
同时,const声明的变量所指向的内存地址保存的数据不得改变:
  • 对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
  • 对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),不能保证指向的数据结构不可变。
如果要保证指向的数据结构也不可变,需要自行封装:
/** * 冻结对象 * @param {Object} obj * @return {Object} */ function constantize(obj) { if (Object.isFrozen(obj)) { return obj; } Reflect.ownKeys(obj).forEach(key => { // 如果属性是对象,递归冻结 typeof obj[key] === "object" && (obj[key] = constantize(obj[key])); }); return Object.freeze(obj); } /********测试代码 **********/ const obj = { a: 1, b: { c: 2, d: { a: 1 } }, d: [1, 2] }; const fronzenObj = constantize(obj); try { fronzenObj.d = []; fronzenObj.b.c = 3; } catch (error) { console.log(error.message); }

Set 和 Map对比

题目:解释下Set和Map。
  • Set 元素不允许重复
  • Map 类似对象,但是它的键(key)可以是任意数据类型
①Set 常用方法
// 实例化一个set const set = new Set([1, 2, 3, 4]); // 遍历set for (let item of set) { console.log(item); } // 添加元素,返回Set本身 set.add(5).add(6); // Set大小 console.log(set.size); // 检查元素存在 console.log(set.has(0)); // 删除指定元素,返回bool let success = set.delete(1); console.log(success); set.clear();
其他遍历方法:由于没有键名,values()keys()返回同样结果。
for (let item of set.keys()) { console.log(item); } for (let item of set.values()) { console.log(item); } for (let item of set.entries()) { console.log(item); }
②Map 常用方法
Map 接口基本和 Set 一致。不同的是增加新元素的 API 是:set(key, value)
const map = new Map(); // 以任意对象为 Key 值 // 这里以 Date 对象为例 let key = new Date(); map.set(key, "today"); console.log(map.get(key));

Proxy

他可以实现 js 中的“元编程”:在目标对象之前架设拦截,可以过滤和修改外部的访问。
它支持多达 13 种拦截操作,例如下面代码展示的setget方法,分别可以在设置对象属性和访问对象属性时候进行拦截。
const handler = { // receiver 指向 proxy 实例 get(target, property, receiver) { console.log(`GET: target is ${target}, property is ${property}`); return Reflect.get(target, property, receiver); }, set(target, property, value, receiver) { console.log(`SET: target is ${target}, property is ${property}`); return Reflect.set(target, property, value); } }; const obj = { a: 1, b: { c: 0, d: { e: -1 } } }; const newObj = new Proxy(obj, handler); /** * 以下是测试代码 */ newObj.a; // output: GET... newObj.b.c; // output: GET... newObj.a = 123; // output: SET... newObj.b.c = -1; // output: GET...
运行这段代码,会发现最后一行的输出是 GET ...。也就是说它触发的是get拦截器,而不是期望的set拦截器。这是因为对于对象的深层属性,需要专门对其设置 Proxy

generator 函数

generator函数是 es6 提供的新特性,它的最大特点是:控制函数的执行。让我们从网上最火的一个例子来看:
function* foo(x) { var y = 2 * (yield x + 1); var z = yield y / 3; return x + y + z; } var b = foo(5); b.next(); // { value:6, done:false } b.next(12); // { value:8, done:false } b.next(13); // { value:42, done:true }
通俗的解释下为什么会有这种输出:
  1. 给函数 foo 传入参数 5,但由于它是 generator,所以执行到第一个 yield 前就停止了。
  1. 第一次调用 next(),这次传入的参数会被忽略暂停\\
  1. 第二次调用 next(12),传入的参数会被当作上一个 yield 表达式的返回值。因此,y = 2 \* 12 = 24。执行到第二个 yield,返回其后的表达式的值 24 / 3 = 8。然后函数在此处暂停。
  1. 第三次调用 next(13),没有 yield,只剩 return 了,按照正常函数那样返回 return 的表达式的值,并且donetrue
难点:在于为什么最后的value是 42 呢?
首先,x的值是刚开始调用 foo 函数传入的 5。而最后传入的 13 被当作第二个 yield 的返回值,所以z的值是 13。对于y的值,我们在前面第三步中已经计算出来了,就是 24。
所以,x + y + z = 5 + 24 + 13 = 42
看懂了上面的分析,再看下面这段代码就很好理解了:
function* foo(x) { var y = 2 * (yield x + 1); var z = yield y / 3; return x + y + z; } var a = foo(5); a.next(); // Object{value:6, done:false} a.next(); // Object{value:NaN, done:false} a.next(); // Object{value:NaN, done:true}
只有第一次调用 next 函数的时候,输出的 value 是 6。其他时候由于没有给 next 传入参数,因此 yield 的返回值都是undefined,进行运算后自然是NaN