ES6常用语法

1.声明变量let与const

在ES6中新增了两个声明变量的命令分别是let与const，下面比较一下与之前的var有什么的不同。

.let和const声明的变量只能在块级作用域中可以使用。

所谓的块级作用域可以暂时理解为花括号{}包含里声明的变量只能在里面使用。而var则不会受这个影响，也就是说ES6之前不存在有块级作用域这个概念，用var定义的变量可以覆盖，但是let和const只能声明一次，而且const声明的是常量，也就是说是不能改变值的。

   {
      //console.log(arr);
     //console.log(att);
        const arr=1;
        let  att=2;
    }
    console.log(arr);
    console.log(att);

这里的arr与att均会报错，报错是说这两个变量并没有被定义。 所以说let和const定义的变量都是要先定义才能使用， 而且我们知道var定义的变量存在预编译这个情况，所以它不会报错，这是说这个值是undefined ；

        console.log(flag);  //flag=undefined
        var flag=1;

因为let与const都是在块级作用域中起作用的，所以就可以在不同的块级作用域中定义相同的变量名字。

    {
        const arr=1;
        let  att=2;
        console.log(arr);//     1
        console.log(att);//     2
    }
    {
        const arr=1;
        let  att=2;
        console.log(arr);//     1
        console.log(att);//     2
    }

而对于var来说，这是会覆盖之前定义过变量的值。
let最好用的就是在for循环中，特别是循环遍历事件的时候尤为好用。

    for(var i=0;i<5;i++){
        console.log(i);//  0 1 2 3 4 
    }
    console.log(i);//  5

  for(let i=0;i<5;i++){
        console.log(i);//  0 1 2 3 4
    }
    console.log(i);//  报错

循环遍历事件可以自己去试试，这里不给予示例。

2.变量的解构赋值

1.数组的解构赋值

ES6提供了更简便的赋值方法，就是以前声明变量的时候都要一个个声明变量且赋值，但是ES6可以做下面的操作。

let [a, b, c] = [1, 2, 3];
// a=1  b=2  c=3

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

ES6还可以不完全解构赋值，就是只匹配到部分值，也可以设置默认值

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4


//设置默认值
let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
ES6在设置默认值的时候可以引用其他已经声明的变量的值，如果这个变量还没有声明的话，就会报错。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

上面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明。

2.对象的解构赋值

ES6的对象结构赋值也是非常好用的，下面来举例一般用法：

    let obj ={
        "name":"YDW",
        "age":22
    }
    let { name,age } =obj;
    console.log(name);//    YDW
    console.log(age);//     22

上面定义的变量名字是与对象中的属性名是相对应的，这其实只是一种简写，因为如果要是变量名不是跟对象中的属性名字相对应的话，就要写成下面的形式：

    let obj ={
        "name":"YDW",
        "age":22
    }
    let { name:n,age:a } =obj;
    console.log(n);//    YDW
    console.log(a);//     22

其实，这里就可以大概的猜上面的简写原来的写法了。

   let { name:name,age:age } =obj;

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

对象的解构赋值还有一个重要的要知道的，如下：

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。

如果解构失败，变量的值等于undefined。

3.字符串解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

这个应该没有什么好说的，因为你懂了上面的，基本这个就没有什么问题了。

4.函数参数的解构赋值

函数的参数也可以使用解构赋值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
函数参数的解构也可以使用默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
注意，下面的写法会得到不一样的结果。

**function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]**

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

5.用途

（1）交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

（3）函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取 JSON 数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

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

上面代码可以快速提取 JSON 数据的值。
（5）函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

（6）可以轻易简写方法

	var obj = {
				log:function(){
					console.log('log')
				},
				lgb:function(){
					console.log('lgb')
				}
			}
			let {log,lgb} = obj
			
			log() //log
			lgb() //lgb

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

好了以上为我认为ES6基本的语法，后续遇到常用多用的也会继续补充。
本文参考的是阮一峰的ECMAScript 6 入门，部分基本是搬运上面的代码以及说明。如果想了解更多可以访问地址
http://es6.ruanyifeng.com/#docs/destructuring。