Set

set是放不重复的项，也就是去重

let set = new Set([1,2,3,4,3,2,1])
console.log(set) // Set { 1, 2, 3, 4 }

Set有几个常用的方法，add clear delete entries

// add
let set = new Set([1,2,3,4,3,2,1])
set.add(5)
console.log(set) // Set { 1, 2, 3, 4, 5 }
// 添加一个已有的值，则不会添加进去
set.add(1)
console.log(set) // Set { 1, 2, 3, 4, 5 }
// delete
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }
// entries
console.log(set.entries()) // SetIterator { [ 1, 1 ],
                                            [ 2, 2 ],
                                            [ 4, 4 ], 
                                            [ 5, 5 ] }
// clear
set.clear()
console.log(set) // Set {}

Set常用于去重（并集）

function distinct(arr1,arr2){
    return [...new Set([...arr1,...arr2])]
}
let arr = distinct([1,2,3],[2,3,4,5])
console.log(arr) // [1,2,3,4,5]

求交集

function intersect(arr1,arr2) {
  // 利用Set里的方法has，来判断new Set(arr2)中是否含有item，
  // 如果含有，那么则是true，当为true时，filter函数则会保留该项
  // 如果没有，则是false,当为false时，filter函数则不会保留该项
  return arr1.filter(item => new Set(arr2).has(item))
}
console.log(intersect([1,2,3],[2,3,4,5])) // [2,3]

求差集

function difference(arr1,arr2){
    return arr1.filter(item => !new Set(arr2).has(item))
}
console.log(difference([1,2,3],[2,3,4,5])) // [1]

Map

也是集合，主要格式是 key => value，同样是不能放重复的key

// 如果放重复的key会怎样呢？会被覆盖
let map = new Map()
map.set('name','邵威儒')
map.set('name','swr')
console.log(map) // Map { 'name' => 'swr' }
// 取的话用get
map.get('name') // 'swr'
// 删的话用delete
map.delete('name')
console.log(map) // Map {}
// 很多方法和set差不多
let map = new Map()
map.set('name','邵威儒')
map.set('age',28)
// 一般使用for ... of ... 遍历
for(let [key,value] of map.entries()){
    console.log(key,value) // name 邵威儒
                           // age 28
}
// 也可以用forEach
map.forEach(item => {
    console.log(item) // 邵威儒
                      // 28
})

Set我用得最多的就是去重了，实际上Set Map我在开发中还是比较少会用到

Class类

核心还是继承，而Class我认为是es5面向对象的语法糖。

在看Class之前建议看一下js的面向对象 https://juejin.im/post/5b8a8724f265da435450c591

看完后，我们开始进入es6的class

// 语法
// 声明一个类
Class Person{ 
    // 在constructor中写实例属性、方法
    constructor(){ 
        this.name = "邵威儒" // 实例属性
        this.say = function(){ // 实例方法
            console.log("我是实例方法上的say")
        }
    }
    // 原型方法
    eat(){
        console.log("我是原型方法上的eat")
    }
    // 静态方法 也会被继承
    static myName(){ 
        return "我是静态方法的myName"
    }
    // 在es6中静态属性不能这样写 static name = "邵威儒"  这样会报错
    // 在es7中可以这样写static name = "邵威儒"
}
let p = new Person() // new一个对象
console.log(p.name) // 邵威儒
p.eat() // 我是原型方法上的eat
console.log(Person.myName()) // 我是静态方法的myName

那么子类怎么继承父类呢？

// 父类
class Person{
    constructor(){
        this.name = "swr"
    }
    static myName(){
        return "Person"
    }
    eat(){
        console.log('eat')
    }
}
// 子类
// 子类Child继承父类Person
// class Child extends Person实际上相当于
// Child.prototype = Object.create(Person.prototype)
// 打印出来可以看到
// console.log(Child.prototype === Person.prototype) // false
// console.log(Child.prototype.__proto__ === Person.prototype) // true
class Child extends Person{
    constructor(){
        super() // 此处的super相当于Person.call(this)
    }
}

前面我说了Class就类型es5面向对象的语法糖，为什么这样说呢？

接下来我们看一下通过es5怎么模拟实现一个Class（可以用babel转一下，看看转为es5的代码是怎样的）

let Child = (function(){
    // 这种闭包的写法，好处可以把作用域封闭起来 
    // 在Child构造函数外写一系列变量
    // 如 let name = "邵威儒";let age = 28 等等…
    function Child(){
        console.log(this) // 打印内部this，看看指向哪里
    }
    return Child
})()
// 通过直接调用函数，看看什么情况
console.log(Child()) // 此时里面的this是指向全局的
// 通过new来生成对象
console.log(new Child()) // 此时里面的this是指向这个new出来的新对象

在es6中，不使用new来调用类，会报错 ClassconstructorChildcannot be invoked without'new'

class Child {
}
Child() // TypeError: Class constructor Child cannot be invoked without 'new'

也就是说，想在es5中，模拟类，那么没使用new来调用构造函数时，也要抛出一个错误，那么我们会想到类的校验方法

// * 1.声明一个类的校验方法
// *   参数一：指向的构造函数
// *   参数二：被调用时，this的指向
function _classCallCheck(constructor,instance) {
  // * 2.如果这个instance指向的不是constructor的话，意味着不是通过new来调用构造函数
  if(!(instance instanceof constructor)){
    // * 3.不满足时，则抛出异常
    throw TypeError("Class constructor Child cannot be invoked without 'new'")
  }
}
let Child = (function(){
  function Child(){
    // * 4.在调用该构造函数的时候，先执行以下类的校验方法
    _classCallCheck(Child,this)
  }
  return Child
})()
// 不通过new调用时，会报错
Child() // 报错 Class constructor Child cannot be invoked without 'new'

那么我们类上，有实例属性方法、原型属性方法、静态属性方法

function _classCallCheck(constructor,instance) {
  if(!(instance instanceof constructor)){
    throw TypeError("Class constructor Child cannot be invoked without 'new'")
  }
}
// * 4.描述器 descriptor
//     参数一：构造函数
//     参数二：描述原型属性方法数组
//     参数三：描述静态属性方法数组
function _createClass(constructor,protoProperties,staticProperties) {
  // * 5.如果protoProperties数组有数组成员
  if(protoProperties.length){
    // * 6.遍历
    for(let i = 0;i < protoProperties.length;i++){
      // * 7.通过Object.defineProperty把属性方法添加到constructor的原型对象上
      Object.defineProperty(constructor.prototype,protoProperties[i].key,{
        // * 8.利用扩展运算符，把{key:"say",value:function(){console.log("hello swr")}}展开
        ...protoProperties[i]
      })
    }
  }
}
// * 1.实例属性方法、原型属性方法、静态属性方法
//     在es6中，原型属性方法不是通过prototype实现的
//     而是通过一个叫描述器的东西实现的
let Child = (function(){
  function Child(){
    _classCallCheck(Child,this)
    // * 2.实例属性方法还是写在构造函数内
    this.name = '邵威儒'
  }
  // * 3.描述器 descriptor
  //     参数一：构造函数
  //     参数二：描述原型属性方法
  //     参数三：描述静态属性方法
  _createClass(Child,
    [
      {key:"say",value:function(){console.log("hello swr")}},
      {key:"myname",value:"iamswr"}
    ],
    [
      {key:"total",value:function(){return 100}}
    ])
  return Child
})()
// * 9.最后我们new一个对象出来，并且调用原型属性方法，看能否调用成功
let c = new Child()
c.say() // 'hello swr'    调用成功

接下来，我们把静态方法，staticProperties也处理一下，

此时会发现，protoProperties和staticProperties都会遍历然后使用Object.defineProperty

那么我们封装一个方法进行处理

function _classCallCheck(constructor,instance) {
  if(!(instance instanceof constructor)){
    throw TypeError("Class constructor Child cannot be invoked without 'new'")
  }
}
// * 1.封装一个方法，处理遍历和Object.defineProperty
function _defineProperty(target,properties) {
  for (let i = 0; i < properties.length; i++) {
    Object.defineProperty(target, properties[i].key, {
      ...properties[i]
    })
  }
}
function _createClass(constructor,protoProperties,staticProperties) {
  if(protoProperties.length){
    _defineProperty(constructor.prototype, protoProperties)
  }
  // * 2.如果staticProperties数组有数组成员
  if(staticProperties.length){
    // * 3.静态方法需要添加在constructor
    _defineProperty(constructor, staticProperties)
  }
}
let Child = (function(){
  function Child(){
    _classCallCheck(Child,this)
    this.name = '邵威儒'
  }
  _createClass(Child,
    [
      {key:"say",value:function(){console.log("hello swr")}},
      {key:"myname",value:"iamswr"}
    ],
    [
      {key:"total",value:function(){return 100}}
    ])
  return Child
})()
let c = new Child()
c.say()
// * 4.最后我们通过Child来调用静态方法
console.log(Child.total())  // 100

这样完成了一个雏形，但是还有最重要的继承还没实现，接下来我们实现继承。

function _classCallCheck(constructor,instance) {
  if(!(instance instanceof constructor)){
    throw TypeError("Class constructor Parent cannot be invoked without 'new'")
  }
}
function defineProperty(target,properties) {
  for (let i = 0; i < properties.length; i++) {
    Object.defineProperty(constructor.prototype, properties[i].key, {
      ...properties[i]
    })
  }
}
function _createClass(constructor,protoProperties,staticProperties) {
  if(protoProperties.length){
    defineProperty(constructor.prototype, protoProperties)
  }
  if(staticProperties.length){
    defineProperty(constructor, staticProperties)
  }
}
// * 6.继承方法
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  // * 7.把子类的原型对象指向新的原型对象 组合寄生式继承 继承原型属性方法
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass, // 把constructor指向子类
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  // * 8.继承父类的静态方法
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
// * 1.父类
let Parent = (function(){
  function Parent(){
    _classCallCheck(Parent,this)
    this.name = '父类实例属性'
  }
  _createClass(Parent,
    [
      {key:"say",value:function(){console.log("父类原型方法say")}},
      {key:"myname",value:"父类原型属性myname"}
    ],
    [
      {key:"total",value:function(){return 100}}
    ])
  return Parent
})()
// * 2.子类
let Child = (function (Parent) { // * 4.这里接收传进的参数 父类
  // * 5.写一个继承方法，继承原型属性方法和静态方法
  _inherits(Child, Parent);
  function Child() {
    _classCallCheck(Child, this)
    // * 9.继承实例属性方法
    return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).apply(this, arguments));
  }
  return Child
})(Parent) // * 3.在这里通过传参，把父类传进去
let c = new Child()
console.log(c.name) // '父类实例属性'

这样就可以用es5模拟es6的class了，会发现其实es6的class是es5面向对象的一个语法糖，经过这样解剖一下源码实现，会对class有更深刻的理解。

还有个问题，我们在react中，会这样写class

class Parent{
    name = "邵威儒"
}
// 在正常情况下会报错，但是因为平时项目是使用了babel插件
// 会帮我们自动编译语法，这种写法目前还处于草案阶段
// 上面的写法实际等价于下面的写法
class Parent{
    constructor(){
        this.name = "邵威儒"
    }
}

decorator 装饰器

装饰器是用来装饰类的

class Person {
}
function myFunction(target) {
  target['myName'] = "邵威儒"
}
myFunction(Person)
console.log(Person['myName']) // 邵威儒

这种写法，相当于给Person这个类添加了myName的属性

那么换成decorator该怎么写呢？

// 在类前面写@myFunction
@myFunction
class Person {
}
function myFunction(target) {
  target['myName'] = "邵威儒"
}
// myFunction(Person)  这一步可以不写
console.log(Person['myName']) // 邵威儒

那么我们该怎么给myName传参呢？

@myFunction('邵威儒')
class Person {
}
function myFunction(value) {
  return function(target){ // target代表的是类
      target['myName'] = value
  }
}
console.log(Person['myName']) // 邵威儒

修饰符也可以修饰类的方法

class Person {
    @myFunction
    say(){}
}
// 如果修饰的是方法
// 参数一：是Person.prototype
// 参数二：是say
// 参数三：是描述器
function myFunction(target,key,descriptor){
    // 给这个类添加一个原型属性
    Object.assign(target,{name:"邵威儒"})
}
let p = new Person()
console.log(p.name) // 邵威儒

修饰符也可以修饰类的属性，比如我们有个不可修改的属性

class Person {
    @onlyRead
    name = '邵威儒'
}
function onlyRead(target,key,descriptor){
    descriptor.writable = false
}
let p = new Person()
p.name = 'swr' // 报错，不能赋值

decorator的用处很多，包括重写函数

function myFunction(target,key,descriptor){
    // 拿出原本的函数
    let fn = descriptor.value
    // 并且在原有的fn上加上自己的业务逻辑，比如console.log('哈哈哈')
    descriptor.value = function(){
        // 这里写我们需要加入的内容
        console.log('哈哈哈')
        // 这里执行原来的fn
        fn()
    }
}