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的变量或方法
