ES6复习攻略-一一网

很多新手对ES6一知半解，很多老手经常用，但也没有一个全面的了解。今天给大家整理了ES6的常见的特性及用法，如果对你有帮助，不要忘了来个双击~

for (var i = 0; i < 10; i++) {
      a[i] = function () {console.log(i);};
}
a[0]();                // 10
a[1]();                // 10
a[6]();                // 10

/********************/

var a = [];
for (let i = 0; i < 10; i++) {
      a[i] = function () {console.log(i);};
}
a[0]();                // 0
a[1]();                // 1
a[6]();                // 6
复制代码

注意let不能重复声明;不会变量提升

二. 箭头函数

基础语法：

(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

单一参数 => {函数声明}
// 当只有一个参数时，圆括号是可选的
// 相当于(单一参数) => {函数声明}


// 没有参数的函数应该写成一对圆括号
() => {函数声明}
复制代码

三. 参数处理

给函数设置默认参数值

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5
复制代码

剩余参数（…）

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function(a, b, ...theArgs) {
   ...
}
//必须是函数的最后一个参数以...为前缀
//它是由剩余实参组成的Array数组

复制代码

展开运算符（…）

在函数调用时使用展开语法：

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
复制代码

构造字面量数组或对象时使用展开语法：

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 

var obj1 = { foo: 'bar', x: 42 };
var mergedObj = { ...obj1,y: 50 };
复制代码

四. 模板字面量(模板字符串)

由反引号 ` 来代替单引号 ‘ 或者双引号 “

//单行
`string text`

//多行
`string text line 1
 string text line 2`

//插入表达式
var a = 5;
var b = 10;
console.log(`a + b is ${a + b}`)
复制代码

五. 对象的扩展

创建对象时键值对重名的可以简化

var name="pan";
var age=20;
var people = {
      name,
      age,
      getName(){
           console.log(this.name)
      }
};
复制代码

计算属性名（属性名可以用表达式）

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3
复制代码

六. 解构赋值

解构数组语法：

var [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2
复制代码

解构对象语法：

var {p, q} = {p: 42, q: true};;
console.log(p); // 42
console.log(q); // true
复制代码

七. 模块（import/export）

导出export

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
//导出对象
export {firstName, lastName, year};

//默认导出
export default function foo() {
  console.log('foo');
}
复制代码

导入import

//导入对象
import {firstName, lastName, year} from './profile.js';

//默认导入
import foo from './default.js';
复制代码

八. 类

ES6 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖

如何创建类：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
复制代码

如何使用类：

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea()
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);
console.log(square.area);
// 100
复制代码

类的继承（extends）：

class Animal { 
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
    constructor(name,age) {
        super(name);
        this.age = age;
    }
    speak() {
        super.speak();
        console.log(this.name + ' barks.');
    }
}
var d = new Dog('Mitzie',2);
d.speak(); // 'Mitzie makes a noise.'  'Mitzie barks'
复制代码

九. Promise 对象

基本用法

var p = new Promise(function(resolve,reject) {
    setTimeout(function() {
        resolve("hello");
    },2000);
});
p.then(res => {
    console.log(res);  // 可以return一个参数，传给下一个then，也可以return一个对象
}).catch(err => {      // 有多个then的时候，catch可以捕捉前面所有then的错误
    console.log(err);
});
复制代码

Promise.all()

p1,p2都成功p才会成功，有一个失败，p就会失败

var p = Promise.all([p1,p2]);
p.then(res => {
    console.log(res);  //p1,p2的返回值组成的数组
}).catch(err => {
    console.log(err);
})
复制代码

Promise.race()

p1,p2哪个先出结果，就把它的结果返回给p，无论成功或失败

var p = Promise.race([p1,p2]);
p.then(res => {
    console.log(res);  
}).catch(err => {
    console.log(err);
})
复制代码

finally()

不管成功或失败都会执行

p.then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
}).finally(() => {  //不接受任何参数
    console.log("very good");
});
复制代码

asnyc await

function fn1() {
    return new Promise(function(resolve,reject) {
        setTimeout(function() {
            console.log(1);
            resolve();
        },1000);
    });
}
function fn2() {
    return new Promise(function(resolve,reject) {
        setTimeout(function() {
            console.log(2);
            resolve();
        },2000);
     });
}
function fn3() {
    setTimeout(function() {
        console.log(3);
    },3000);
}
async function fn() {
    await fn1();
    await fn2();
    fn3();
}
fn();
复制代码