ES6总结

ES6新特性

let const

let 表示申明变量。const 表示申明常量。

• 常量定义了就不能改了。对象除外，因为对象指向的地址没变。
• const在申明是必须被赋值。
• 两者都为块级作用域。
  块级作用域与函数作用域。任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。函数作用域就好理解了，定义在函数中的参数和变量在函数外部是不可见的。

模块字符串``

let name = 'Mike';
let age = 27;
let result = `My Name is ${name},I am ${age+1} years old next year.`;
console.info(result);

解构

数组模型的解构（Array）

let arr = ['苹果','西瓜','乌龟'];
let [a,b,c] = arr;
console.info(a);
console.info(b);
console.info(c);

变量有默认值时解析

let [a = 3, b = a] = [];     // a = 3, b = 3,a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
let [a = 3, b = a] = [1];    // a = 1, b = 1,a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2,a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

对象模型的解构（Object）

let person = {name:'利威尔',age:28,job:'兵长'}
let {name,job} = person;
console.info(name);
console.info(job);

结构运算符

...展开运算符又叫剩余运算符，可以用于展开数组和对象的元素。
展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

函数

参数默认值

function fn(name,age=17){
 console.log(`My Name is ${name},I am ${age+1} years old`);
}
fn("Amy");

箭头函数

参数 => 函数体

//es5
var fn_name = function() {

}
//es6
var fn_name = () => {

}

1. 不需要 function 关键字来创建函数
2. 省略 return 关键字
3. this始终指向函数申明时所在作用域下的this值

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

for of

for of遍历的是键值对中的值
for in遍历的是键值对中的键

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

class类

class Student {
  constructor() {
    console.log("I'm a student.");
  }

  study() {
    console.log('study!');
  }

  static read() {
    console.log("Reading Now.");
  }
}

console.log(typeof Student); // function
let stu = new Student();  // "I'm a student."
stu.study();  // "study!"
Student.read(); // "Reading Now."

模块化导入导出

导入improt，引入的变量可以用as起别名
导出export

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }

/*-----import [xxx.js]-----*/
import { myName as n, myAge as a, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(a);// 20
console.log(n);// Tom
console.log(myClass.a );// yeah!

export default{}

在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
export default{}可以导出变量、函数、类。
通过export方式导出，在import时要加{}，export default则不需要{}。
export default向外暴露的成员，可以使用任意变量来接收。

promise

Promise异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

resolve：一个函数，用于将Promise的状态从pending转为fulfilled，并设置成功的返回值。
reject：一个函数，用于将Promise的状态从pending转为rejected，并设置失败的原因。

创建Promise对象后，可以通过.then()和.catch()方法来处理Promise的成功和失败情况。另外，.finally()方法可以用于处理Promise完成后（无论成功还是失败）需要执行的操作。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');  //resolve函数将Promise的状态从pending转为fulfilled,触发then,如果是reject则触发catch
  }, 2000);
});

myPromise.then((value) => {
  console.log(value); // 输出 'Hello, world!'，2秒后输出
}).catch((error) => {
  console.error(error);
});

注意Promise对象的then中不能直接return，因为then中属于箭头函数的作用域。

then

promise.then(onCompleted, onRejected);
一个promise必须提供一个then方法以访问其当前值、终值和据因。then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

async/await

async 函数返回一个Promise对象，可以使用then方法回调函数。
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
await针对所跟不同表达式的处理方式：
Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
非 Promise 对象：直接返回对应的值。

async function helloAsync(){
    console.info(1111);
    return "helloAsync";
  }

console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}

helloAsync().then(v=>{
   console.log(2222);
   console.log(v);         // helloAsync
})

因为delay返回的是Promise对象，await用在Promise对象前面
async修饰的函数会返回Promise对象，return的值即是resolve的参数。

// 返回Promise对象
function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}
//async修饰的函数返回的一律是Promise对象
async function asyncFunction() {
  console.log('开始');
  await delay(2000); // 等待2秒
  console.log('等待结束');
  return '完成';  //虽然这里返回的是字符串,实际这个字符串是作为resolve的参数
}

//获取async函数return的值
asyncFunction().then(result => {
  console.log(result); // 输出 '完成'
});

总结: async和await都是Promise异步使用的，不要想着在同步的情境下使用await和async，then里面的值是不能作为函数的值return出来的（箭头函数作用域），即使return出来也只能被下一个then捕获。

Symbol数据类型

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。

数组filter过滤器

array.filter((value, index, arr) => {value === '匹配对象'})

var newarr = [
  { num: 1, val: 'ceshi', flag: 'aa' },
  { num: 2, val: 'ceshi2', flag: 'aa2'  }
]
console.log(newarr.filter(item => item.num===2 ))

数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index);
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

参考：
https://www.cnblogs.com/wang--chao/p/14656871.html