ES6常用语法记录（import，Promise，Generator ，Class）

深碍√TFBOYSˉ_ 2021-10-06 02:28 223阅读 0赞

**后续持续更新**

# 一. 扩展方法 #

##### 1. 函数扩展（箭头函数） #####

*  **函数传入默认值**

function log(x, y = 'World') {    //y默认等于world
      console.log(x, y);
      let x = 1;    // error，参数变量是默认声明的，不能用let或const再次声明。
    }
    log('Hello')          // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '')      // Hello

*  **rest 参数（…变量名）**

function add(...values) {  //values为参数数组。
      let sum = 0;
      for (var val of values) { 
        sum += val;
      }
      return sum;
    }
    add(2, 5, 3) // 10

*  **箭头函数**

//函数名=(参数)=>代码
    
    var f = () => 5;
    // 等同于
    var f = function () {  return 5 };
    
    var f = v => v;
    // 等同于
    var f = function (v) { return v;};
    
     //代码块部分多于一条语句，就要使用大括号将它们括起来
    var sum = (num1, num2) => { 
    	return num1 + num2; 
    }

**注意：**  
1.如果箭头函数**直接返回一个对象**，必须在**对象外面加上括号**，否则会报错。  
2.**（重要哟）函数体内的this对象，就是定义时所在的对象**，而不是使用时所在的对象。  
3.不可以当作构造函数，也就是说，**不可以使用new命令**。  
4.**不可以使用arguments对象**，可以用 rest 参数代替。  
5.箭头函数**不能用作 Generator 函数**。

##### 2. 数组扩展 #####

**扩展运算符**  
相当于 rest 参数的逆运算，把数组转为用逗号分隔的参数序列。

function add(x, y) { 
      return x + y;
    }
    add(...[4, 38])    // 42，把数组转为4 48两个参数

注意：只有函数调用时，扩展运算符才可以放在圆括号中

console.log((...[1, 2])) // Uncaught SyntaxError: Unexpected number
    console.log(...[1, 2])   // 1 2

##### 3. 对象的扩展 #####

*  **Object.assign（）**

用于对象的合并，该方法的**第一个参数是目标对象，后面的参数都是源对象**。将源对象的所有可枚举属性，复制到目标对象。

const target = {  a: 1, b: 1 };
    const source1 = {  b: 2, c: 2 };
    const source2 = {  c: 3 };
    
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}

**注意**：  
1.如果目标对象与源对象有同名属性，**后面的属性会覆盖前面的属性**。  
2.**参数不是对象，则会先转成对象**，字符串会以数组形式，拷贝入目标对象。其它基本类型不生效，undefined和null无法转成对象，所以它们不能作为目标对象，即不能放在首参数。  
3. 方法属于**浅拷贝**。对象的任何变化，都会反映到目标对象上面。

const obj1 = { a: { b: 1}};
    const obj2 = Object.assign({ }, obj1);
    obj1.a.b = 2;
    obj2.a.b // 2

*  **对象的扩展运算符（…）**

对象的扩展运算符用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = {  a: 3, b: 4 };
    let n = {  ...z };
    n // { a: 3, b: 4 }

# 二. Module模块语法 #

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

##### 1. export命令 #####

用于输入其他模块提供的功能，文件夹common.js 中

const year = 1958;
    const multiply= function(x, y) { 
      return x * y;
    };
    export { multiply, year };

可以使用as关键字重命名对象名称

export { 
      year as year111,
      multiply as function111
    };

##### 2. import 命令 #####

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（common.js）对外接口的名称相同。

import {  multiply, year } from './common.js';

输入的变量都是**只读的**，不允许在加载模块里改写接口。注意，import命令具有**提升效果**

// 整体加载的写法：
    import * as allconst from './common.js';
    
    console.log(allconst .year);  
    console.log(allconst .multiply(0,1));

##### 3. export default （默认输出） #####

export default function crc32() {  // 输出}
    
    import crc32 from '文件名'; // 输入

与export区别：  
（1）对应的import语句不需要使用大括号；  
（2）一个模块只能有一个默认输出；

本质上，export default就是输出一个叫做default的变量或方法：

export default 42;  // 正确
    export 42;    // 报错

同时输入默认方法和其他接口

export default function (obj) {   };
    export function each(obj, iterator, context) {    };
    
    import _, {  each } from 'lodash';

# 三. Promise对象 #

Promise 是异步编程的一种解决方案。包含三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。  
**特点**：（1）对象的状态不受外界影响。（2）一旦状态改变，就不会再变。

**Promise.all()：** 该方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例。

const p = Promise.all([p1, p2, p3]);

规则（类似于且逻辑）：
    （1）只有全部参数的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数，实例使用then。
    （2）只要其中之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数，实例使用catch。

**注意：** 如果作为参数的 Promise 实例，自己定义了catch方法，该实例执行完catch方法后，也会变成resolved。即最后p会调用then方法

const p1 = new Promise((resolve, reject) => { 
      resolve('hello');
    }).then(result => result).catch(e => e);
    
    const p2 = new Promise((resolve, reject) => { 
      throw new Error('报错了');
    }).then(result => result).catch(e => e);
    
    Promise.all([p1, p2]).then(result => console.log(result))
    .catch(e => console.log(e));
    // ["hello", Error: 报错了]

# 四. Generator 函数 #

**特征：**（1）function关键字与函数名之间有一个星号。（2）函数体内部使用yield表达式，定义不同的内部状态，yield表达式是暂停执行的标记，而next方法可以恢复执行。

function* helloWorldGenerator() { 
      yield 'hello';   
      yield 'world';
      return 'ending';   //没有return语句，返回的value属性值为undefined。
    }
    
    //调用 Generator 函数后，该函数并不执行。
    var hw = helloWorldGenerator();
    
    //调用遍历器对象的next方法在执行
    hw.next()  // { value: 'hello', done: false }
    
    hw.next()  // { value: 'world', done: false }
    
    hw.next()  // { value: 'ending', done: true }
    
    hw.next()  // { value: undefined, done: true }

# 五. async 函数 #

Generator 函数的语法糖。async函数返回一个 Promise 对象，可以使用then方法添加回调函数。

async function getStockPriceByName(name) { 
      const symbol = await getStockSymbol(name);//遇到await，等到异步操作完成，再接着执行函数体内后面的语句。
      const stockPrice = await getStockPrice(symbol);
      return stockPrice;//return语句返回的值，会成为then方法回调函数的参数。
    }
    
    getStockPriceByName('goog').then(function (result) { 
      console.log(result);
    });

注意：  
1.async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。//throw new Error(‘出错了’);  
2.必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。

# 六. Class类方法 #

class 类的本质还是一个函数,类本身就指向构造函数。

class Point {               //内部默认使用严格模式
      constructor(x, y) {      // 当new一个实例，默认有一个constructor，不管写没写
        this.x = x;          //this关键字则代表实例对象
        this.y = y;
      }
      //不需要逗号分隔
      toString() { 
        return '(' + this.x + ', ' + this.y + ')';
      }
      //类的内部所有定义的方法，都是不可枚举的
      doStuff() { 
        console.log('输出');
      }
    };
    // 等同于
    Point.prototype = { 
      constructor() { },
      toString() { },
      doStuff() { },
    };
    
    //给class类添加方法
    Object.assign(Point.prototype, { 
      toString(){ },
      toValue(){ }
    });
    
    var b = new Point (2, 3);   //类必须使用new调用
    b.constructor === Point .prototype.constructor    // true
    b.doStuff()       // "输出"

**1.类必须使用new调用，否则报错。  
2.类不存在变量提升。 即new必须在关键字class之后  
3.与 ES5 一样，类的所有实例共享一个原型对象。**

var p1 = new Point(2,3);
    var p2 = new Point(3,2);
    p1.__proto__ === p2.__proto__    //true

**4.class类的静态方法**  
如果在一个方法前，加上**static关键字**，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo { 
      constructor(x, y, color) {   
        this.x = x; 
        this.y = y;
        this.color= color;
      }
      static classMethod() { 
        return 'hello';
      }
    }
    Foo.classMethod()   // 'hello'
    var foo = new Foo(); 
    foo.classMethod()   //报错

**5.继承**  
使用**extends**可以实现继承。子类必须在constructor方法中调用**super**方法，子类没写默认添加。在子类的构造函数中，只有调用super之后，才可以使用this关键字，

class Bar extends Foo {    
    	constructor(x, y, color) { 
    	    this.color = color; // ReferenceError
    	    super(x, y，color);  // 调用父类的constructor
    	    this.color = color; // 正确
    	}
    	toString() { 
    	    return this.color + ' ' + super.classMethod(); // 调用父类的toString()
    	}
    }
    let cp = new Bar (25, 8, 'green'); 
    Bar.classMethod();  //classMethod是静态属性
    cp.toString();       //green hello