ES6

转载地址 ： https://www.jianshu.com/p/287e0bb867ae

1.变量声明let

1.在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部
(不在函数内即在全局作用域的最顶部)。
这就是函数变量提升例如:

  function aa() {
    if(flag) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

 function aa() {
    var test // 变量提升，函数最顶部
    if(flag) {
        test = 'hello man'
    } else {
        //此处访问 test 值为 undefined
        console.log(test)
    }
    //此处访问 test 值为 undefined
  }

所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。

接下来ES6主角let登场：let 是块级作用域。
怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

看以下代码：

  function aa() {
    if(flag) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

2.模板字符串

用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

//ES5 
    var name = 'lux'
    console.log('hello' + name)
//es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

3.箭头函数

箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。

1.不需要 function 关键字来创建函数
2.继承当前上下文的 this 关键字
3.当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；

//例子
	var f = v => v;

// 等同于
	var f = function (v) {
	  return v;
};

4.解构赋值

现阶段对结构赋值的理解：
在等式左边如果不是写的是字符串的形式
而是以数组或者对象的形式，那么即为解构赋值

//正常写法
   var a = 1
//解构数组
   var[a]  =  [1]
//解构对象
   var {log} = console

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。

	
	let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
	baz // "aaa"
	
	let obj = { first: 'hello', last: 'world' };
	let { first: f, last: l } = obj;
	f // 'hello'
	l // 'world'

中括号中，冒号前面的是同名属性，冒号后面的才是真正的值，要理清楚这一逻辑。
在等式右边，会匹配到与等式左边同名的属性，赋给左边的变量，
无论这个右边的属性值是否被显示列出。

解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
//普通写法
let id = jsonData.id
let status = jsonDataid.status 
let num  = jsonDataid.num

//ES6 写法
let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]