es6常用的新特性 let,const,class,模版字符串,解构赋值,箭头函数,for-of, keys values entries, export import, async await

let const class

var命令和function命令声明的全局变量，依旧是顶层对象的属性；
另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用方法，写成this.a
window.a // 1

let b = 1;
window.b // undefined

//const 生命的变量是不可变得变量
const c = 1;
c=2 //会报错

class MyApp{
    constructor(age) {
        this.name='哈士奇'  
        this.age = age      
    }
    sayHello(){
        console.log(`hello ${this.name}, I am ${this.age} years old`)
    }
}
app = new MyApp(18)
app.sayHello()

模版字符串

let name='哈士奇'
// before
console.log('hello '+name+'! \n thank you!')
// after
console.log(`hello ${name}!
  thankyou`)

用tab键上面的``代替单引号, ${}可以解析变量, 直接回车就相当于\n换行

解构赋值

数组的解构赋值

let [a, b, c] = [1, 2, 3];
console.log(a,b,c) //1,2,3

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

对象的key可以不固定

const name = '哈士奇';
const obj = {
    [name]: '爱拆家'
}
console.log(obj); // { '哈士奇': '爱拆家' }

数组,对象的复制

很多时候在改变一个数组的时候,不希望改变原来的数组;需要遍历一下数组将每个元素push进新的数组;
es6 只需要 […arr]; 即可实现

//数组
let arrA = [1,2,3];
let arrB = [...arrA];
arrA.push(4);
console.log(arrA, arrB);
//[ 1, 2, 3, 4 ] [ 1, 2, 3 ];

//对象
let objA = {a:1,b:2,c:3}
let objB = {...objA};
objA.d=4;
console.log(objA, objB);
{ a: 1, b: 2, c: 3, d: 4 } { a: 1, b: 2, c: 3 }

箭头函数

// 带默认参数的箭头函数
let hello = (name='world')=>{
    console.log(`hello ${name}`)
}
// 直接返回值的箭头函数
let cal = num=>num*2
// 多个参数
let cal1 = (num1, num2)=>num1*num2
hello()
hello('imooc')
console.log(cal(5))
console.log(cal1(5, 6))
arr = [6, 7]
console.log(cal1(...arr))

迭代器和循环

for-in循环用来遍历对象属性。
for-of循环用来遍历数据—例如数组中的值。

ES4:

for (var index = 0; index < myArray.length; index++) {
	console.log(myArray[index]);
}

ES5:

myArray.forEach(function (value) {
	console.log(value);
});

你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

ES6:

for (var value of myArray) {
  console.log(value);
}

对象的扩展 keys values entries

let obj = { a:1, b:2, c:3};
console.log(Object.keys(obj));
//返回key数组 [ 'a', 'b', 'c' ]
console.log(Object.values(obj));
//返回value数组 [ 1, 2, 3 ]
console.log(Object.entries(obj));
// 返回key,value数组 [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

export import

a文件

export const name = '哈士奇';//直接导出
export default const name = '哈士奇';//导出默认

b文件

import { name } from './a'; //直接导出需解构赋值拿到name
import name from './a'; //导出默认直接拿到的就是name

import name as dogName from './a'; //as重新给一个名字
import * from './a'; //*.name = '哈士奇'; *为引入所有的不建议使用

async await

function timeOut(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}
//想要得到a + b; 需要如下,算出a, 然后算出b, 然后相加;
function name() {
    timeOut(1).then( res => {
        let a = res;
        timeOut(2).then( res => {
            let b = res;
            console.log(a + b);
        });
    });
}
name();

//有了 async await 之后; 当执行到await的时候就会等待timeOut(1);返回值之后再往下执行;
async function name() {
    let a = await timeOut(1);
    let b = await timeOut(2);
    console.log(a + b);
}
name();

注意: await 只能在async函数内使用,而且await后一定要是一个promise函数;