ES6中的一些重要方法与概念

1. 计算属性名称

const prop = 'foo';
const obj = {
[prop]:'test',
}

2. 对象新增方法

Object.is():用来比较两个值是否严格相等，与===的行为基本一致，不同之处有两个：+0和-0不相等，NaN等于NaN

Object.is(+0,-0); // false
+0===-0; // true
Object.is(NaN,NaN); // true
NaN===NaN; // false

Object.assign():用于对象的合并，将源对象source的所有可枚举属性复制到目标对象target
Object(target,source1,source2,...)
当目标对象和源对象有同名属性时，后边的属性会覆盖前面的属性；
Object.assign()方法实行的是浅拷贝，而不是深拷贝。如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
Object.getOwnPropertyDescriptors()：返回对象的所有自身属性（非继承属性）的描述对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象。

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

Object.getOwnPropertyDescriptor(obj,key)方法是返回指定属性的描述对象，如果是访问器属性，这个对象的属性有configurable、enumerable、get和set；如果是数据属性，这个对象的属性有configurable、enumerable、writable和value。

__proto__属性、Object.setPrototypeOf()，Object.getPrototypeOf()：操作原型对象

__proto__:myObj.__proto__读取或者设置myObj的原型对象，属于浏览器自定义支持的，依赖浏览器
Object.setPrototypeOf用来设置一个对象的原型对象（prototype），返回参数对象本身。

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

Object.getPrototypeOf(myObj):读取原型对象

3. 类

在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的默认存取行为

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

存值函数和取值函数是设置在属性的 Descriptor 对象上的

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。如果静态方法包含this关键字，这个this指的是类，而不是实例。父类的静态方法，可以被子类继承

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  count1 = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

实例属性this._count定义在constructor()方法里面。实例属性count1与取值函数value()和increment()方法，处于同一个层级，定义在类的最顶层，这时，不需要在实例属性前面加上this，_count和count1两者使用是一样的

类的装饰器Decorator

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

装饰器装饰整个类

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

上面代码中，@testable就是一个装饰器。它修改了MyTestableClass这个类的行为，为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

可以在装饰器外面再封装一层函数,这样可以自定义传参,@testable(true)就是一个装饰器
实际开发中，React 与 Redux 库结合使用时，常常需要写成下面这样。

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

类组件使用装饰器可以写成如下：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

装饰类的属性

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

装饰器函数readonly一共可以接受三个参数:类的原型对象，所要装饰的类实例的属性名，指定属性的描述对象。

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false, 是否可枚举
  //   configurable: true,可配置性
  //   writable: true 是否可修改
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升

Generator函数

是一个异步变成解决方案，执行generator函数会返回一个遍历器对象
Generator函数两个特征：一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态

function* test(){
   yield 1;
   yield 2; 
   return 3
}
const t = test();
t.next(); // {value:1, done: false}
t.next(); // {value:2, done: false}
t.next(); // {value:3, done: true}

调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束
redux-saga就是使用Generator函数和自身的一些辅助函数实现对整个流程的管控

Promise对象

async函数

运算符的扩展

链式运算符?. 有三种写法：
obj?.prop // 对象属性是否存在
obj?.[expr] // 同上
func?.(...args) // 函数或对象方法是否存在

a?.b // 等同于a == null ? undefined : a.b
a?.[x] // 等同于a == null ? undefined : a[x]
a?.b() // 等同于a == null ? undefined : a.b()
a?.() // 等同于a == null ? undefined : a()

Null判断运算符??
读取对象属性的时候，当某个属性的值是null或undefined，指定一个默认值。
const value = data.value ?? '--'
使用||，当属性的值如果为空字符串或false或0，默认值也会生效。??只在值是null或undefined时默认值生效

module

通过export命令显式指定输出的代码，再通过import命令输入

// ES6模块
import { stat, exists, readFile } from 'fs';
// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}
// main.js
import { area, circumference } from './circle';

// 或者采用整体加载
import * as cricle from './cricle';
console.log(cricle.area(), cricle.circumference ())

// export default 命令
export defalut function test() { }
export function test2() { }
// 导入
import test from './test';
import { test } from './test';

import * 将模块整体导入加载
export default 指定模块的默认输出，一个模块只能有一个默认输出，本质上，export default就是输出一个叫做default的变量或方法