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 = () => {
}
- 不需要 function 关键字来创建函数
- 省略 return 关键字
- 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]
