Js进阶26-ES6新增（2）

1. Set 结构（集合）

Set 集合是默认去重复的，但前提是两个添加的元素严格相等。所以5和"5"不相等，两个 new 出来的字符串不相等。

Set集合，本质上就是对数组的一种包装。例如： 

const imgs = new Set();
imgs.add(1);
imgs.add(1);
imgs.add(5);
imgs.add("5");
imgs.add(new String("abc"));
imgs.add(new String("abc"));
console.log(imgs); // Set(5) {1, 5, '5', String, String}

实例方法：

(1) add(value)：添加某个值，返回 Set 结构本身；

(2) delete(value)：删某个值，返回一个布尔值，表示删除是否成功；

(3) has(value)：返回一个布尔值，表示该值是否为 Set 的成员；

(4) clear()：清除所有成员，没有返回值。

下面展示了一种极为精巧的数组去重的方法： 

const newarr = [...new Set(array)];

Set 结构的实例与数组一样，也拥有 forEach 方法，用于对每个成员执行某种操作，没有返回值。

imgs .forEach(value => console.log(value));

2. Map结构（字典）

Map集合，即映射表。

Map 是一组键值对的结构，具有极快的查找速度。

let map = new Map();
map.set("S230", "张三");
map.set("S231", "李四");
map.set("S232", "王五");
map.get("s232"); // 获取某一个元素   王五
for(let [key,value] of map) {
  console.log(key,value);
}
// 循环遍历，配合解构赋值

初始化Map需要一个二维数组，或者直接初始化一个空 Map。Map 具有以下方法

var m = new Map(); // 空 Map
m.set('Adam', 67); // 添加新的 key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个 key 只能对应一个 value，所以，多次把一个 key 放入 value，后面的值会把前面的值覆盖掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

3. class写法

class保留字终于成了关键字。

以前编写一个构造函数（类）：

function Pad(color) {
  this.color = color;
}

现在的写法跟 Java 更接近了：

class Iphone {
  constructor(color, size){
    this.color = color;
    this.size = size;    
  }    
  playgame(){
    //.............    
  }    
  toString(){
    return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;
  }
}

定义了一个类，名字叫 Iphone 通过类生成一个实例：

var iphone = new Iphone(“白色”, 5);

其中 constructor 被称之为构造方法，在 new 一个对象的时候，自动被调用。 

不过本质上，JS 依然使用了原型来实现，也就是说，这不过是一个语法糖写法而已，跟以前的构造函数没有区别。

要注意的是，使用了 class 来定义类，必须先定义再使用。

4. Array 的扩展方法

详见 Js进阶18-数组方法。

5. String 的扩展方法

详见 Js进阶19-字符串方法。

(1) startsWith(str) 和 endsWith(str)

startsWith：表示参数字符串是否在原字符串的头部，返回布尔值。

endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值。

let str = 'Hello world!';
str.startsWith('Hello'); // true 
str.endsWith('!'); // true

(2) repeat(n)

repeat 方法表示将原字符串重复 n 次，返回一个新字符串。

'x'.repeat(3); // "xxx" 
'hello'.repeat(2); // "hellohello"

6. Proxy代理

Proxy 对象是 ES6 新出的一个特性，用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

需要知道的是，在 Vue2 中双向数据绑定原理（数据劫持）采用 Object.defineProperty，而在 Vue3 中数据劫持原理采用的是 Proxy 代理。

Object.defineProperty 只能劫持对象的属性，不能监听数组。也不能对 es6 新产生的 Map、Set 这些数据结构做出监听。也不能监听新增和删除操作等等。

Proxy 可以直接监听整个对象而非属性，可以监听数组的变化，具有多达13种拦截方法。

使用：

let p = new Proxy(target, handler);

具体拦截方法：

(1) get方法

get(target, property, receiver) 方法用于拦截某个属性的读取操作，可以接受三个参数，分别为目标对象（target）、属性名（property）和 proxy 实例本身（receiver），其中最后一个参数可选。看下面例子能不能拦截：

let obj = { name: "jack", age: "20" };
// 给 obj设置一个代理
let p = new Proxy(obj, {
  get(target, property) {
    console.log("我拦截了" + target + "读取" + property); // 我拦截了[object Object]读取age
    console.log("它的值为" + target[property]); // 它的值为20
    // 定义你要返回的值
    return target[property];
  },
});

// 读取 obj 的 age 属性看看,注意定义代理后得用代理来调用属性或方法
console.log(p.age); // 20

可以发现当我们想输出 obj.age 时被 proxy 代理拦截到了，并且我们可以通过代理的 get 方法自定义实际要返回的值是什么。就是说虽然我们读取 obj.age 的值为20，但是我可以通过代理拦截，想返回多少就多少，当然我们上面返回的是真实的值 target[property]。 

(2) set方法

set(target, property, value, receiver) 方法用来拦截某个属性的赋值操作，四个参数依次为目标对象（target）、属性名（property）、属性值（value）和 proxy 实例本身（receiver），其中最后一个参数可选。看下面例子：

let obj = { name: "jack", age: "20" };
let p = new Proxy(obj, {
  set(target, property, value) {
    console.log("要设置对象属性？我拦截到了~"); // 要设置对象属性？我拦截到了~
    console.log("要修改成" + value + "?"); // 要修改成30?
    console.log("我就不给你改，我改成666"); // 我就不给你改，我改成666
    target[property] = 666;
  },
  get(target, property) {
    return target[property];
  },
});
// 修改 obj.age 的值为30;
p.age = 30;
// 读取 obj 的 age 属性看看，注意定义代理后得用代理来调用属性或方法
console.log(p.age); // 666

可以看到，想修改 obj.age 为30，但是没成功，因为在代理拦截 set 方法里把 age 值改为666了，所以 age 值变成了666。

(3) apply方法

apply 方法能拦截函数的调用、call 和 apply 操作。apply(target, thisArg, argumentsList) 三个参数，分别是目标对象（target）、被调用时的上下文对象（thisArg）、被调用的参数数组（argumentsList）。如下：

function add(a, b) {
  console.log(a + b);
}
//给add函数设置一个代理
let p = new Proxy(add, {
  apply(target, thisArg, argumentsList) {
    console.log("拦截"); // 拦截
    // 正常应该如下设置：
    target.apply(this.Arg, argumentsList);
  },
});
p(1, 2); //3
p.call(null, 13, 22); // 35
p.apply(null, [5, 3]); // 8

可以看到，函数调用，call 调用，apply 调用，都执行了代理 apply 方法里定义的代码。

(4) constructor 方法

construct(target, argumentsList, newTarget) 拦截的是 new操作，三个参数，分别是 target（目标对象），argumentsList（参数列表），newTarget（最初被调用的构造函数）。简单来说就是拦截 new一个构造函数的方法。

function Animal(name) {
  this.name = name;
}
let p = new Proxy(Animal, {
  construct(target, argumentsList, newTarget) {
    // 我直接返回一个空对象
    return {};
    // 正常应该如下设置：
    // return new target(...argumentsList);
  },
});
// new 一个Animal实例
let dog = new p("dog");
console.log(dog); // {}

13种拦截方法如下：

序号	拦截方法	拦截内容	返回值
1	get(target, propKey, receiver)	对象属性的读取	读取的对象的属性值
2	set(target, propKey, value, receiver)	对象属性的设置，比如 proxy.foo = v 或proxy[‘foo’] = v	一个布尔值
3	has(target, propKey)	propKey in proxy 的操作	一个布尔值
4	deleteProperty(target, propKey)	delete proxy[propKey] 的操作	一个布尔值
5	ownKeys(target)	Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环	一个数组。该方法返回目标对象所有自身的属性的属性名，而 Object.keys 的返回结果仅包括目标对象自身的可遍历属性
6	getOwnPropertyDescriptor(target, propKey)	Object.getOwnPropertyDescriptor(proxy, propKey)	属性的描述对象
7	defineProperty(target, propKey, propDesc)	Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)	一个布尔值
8	preventExtensions(target)	Object.preventExtensions(proxy)	一个布尔值
9	getPrototypeOf(target)	Object.getPrototypeOf(proxy)	一个对象
10	isExtensible(target)	Object.isExtensible(proxy)	一个布尔值
11	setPrototypeOf(target, proto)	Object.setPrototypeOf(proxy, proto)	一个布尔值。
12	apply(target, object, args)	Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)	无
13	construct(target, args)	Proxy 实例作为构造函数调用的操作，比如new proxy(…args)	一个对象

最后2种拦截操作在目标对象是函数时生效。