ES6 语法简介

ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association）通过 ECMA-262 标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。

ES6

变量声明

• let:代码块内的变量声明
  1. 变量声明不会提升
  2. 块级作用域
  3. let 不允许相同作用域内多次声明同一变量

• const:常量声明
  1. 声明后无法修改值
  2. 块级作用域
  3. const 不允许相同作用域内多次声明同一变量

解构赋值

ES6 允许我们对数组和对象中提取值，对变量进行赋值，这被叫做“解构”

• 数组：

1. var [a,b,c] = [1,2,3] //a=1,b=2,c=3
2. var [a,[[b],c]] = [10,[[20],30]] //a=10,b=20,c=30
3. var [a,...b] = [1,2,3,4] //a=1,b=[2,3,4];...表示剩余参数

• 对象：
  1. var {a,b}={a:’html’,b:’css’}
  2. 变量必须与对象属性名相同，否则为 undefined
  3. 如果变量名与属性名不相同，则必须写成以下格式才能取到值

  var {a:test} ={a:'html',b:'css'} //test=>html

• 解构失败：

  var [a]=[],[b]=1,[c]='jiegou',[d]=false //a,b,c,d都得到undefined

• 指定默认值：

var [a=true]=[]

var {a=10} = {}
> 解构同样适用于let和const
> PS:解构只能用于数组和对象，如果解构不成功，变量会返回undefined，但如果对undefined和null解构则会报错

解构用途

• 交换变量值

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

• 函数返回多个值

function example(){
         return [1,2,3]
}
//接收
var [x,y,z] = example();

• 定义函数形参（重点）

函数的参数定义方式, 不用再考虑参数的顺序

function test({x,y,z}){}

//传参

test({x:10,y:20,z:30})
//参数可以设置默认值
fuction test({x=10,y=20,z}){}

字符串扩展

字符串方法

• includes

判断是否包含某个字符，返回布尔值

• startsWith/endsWith

是否以某一字符开头/结尾

  let str='google';
  str.startsWith('g');  //true
  str.endsWith('le');    //true

• repeat(n)

得到字符串重复 n 次后的结果，n 可以为小数，但不能为负数

'laoxie'.repeat(2);//laoxielaoxie

字符串模板, 使用反引号 ` 表示(重点)

你可以通过一种更加美观、更加方便的方式向字符串中插入变量

格式：${变量 | 函数}，

   你好，我的名字叫${username},接下来是我的自我介绍：${introduce()}

模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中。

数组扩展

遍历

• for..of

var arr = [10,12,18,30]
  for (var value of arr) {
    console.log(value);
  }  

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了 for-in 循环的所有缺陷 > for…of 跟 for-in 的区别很明显，就是直接取值，而不再取下标了
• 与 forEach()不同的是，它可以正确响应 break、continue 和 return 语句
• for-of 循环不支持普通对象
• for-of 循环也可以遍历其它的集合
• DOM 节点
• 字符串
• Set/Map 集合

对象扩展

• Object.assign(obj1,obj2,…objN);

合并对象

Object.assign({a:1},{b:2},{b:4,c:3}); //{a:1,b:4,c:3}

• 只支持浅拷贝（对于引用类型，只拷贝引用）
• 忽略不可枚举属性
• 简写

ES6 允许在对象之中直接写变量，如

        //@属性简写
        var myName = 'laoxie';
        var obj = {myName};//属性名为变量名, 属性值为变量的值
        //等效于
        var obj = {myName:'laoxie'}

        //使用变量值作为属性名
        var obj = {
            [myName]:18
        }
        //等效于
        var obj = {laoxie:18}

        //@方法简写
        var obj = {
            coding(){

            }
        }
        //等效于
        var obj = {
            coding:function(){

            }
        }
    ```

## 箭头函数=>（重点）

    格式：标识符=>表达式

    省略了function、return关键字和大括号。

### 参数与返回值
* 零个参数用 () 表示

```js
  //传统写法
    var sum = function(){
        return 10 + 10;
    }
    //es6箭头函数
    var sum = () => 10+10;

• 函数只有一个参数（可省略括号）

//传统函数写法
var test = function(x){
    return x+2;
}    //使用箭头函数
var test = x=>x+2;

• 多个参数

  // ES5
    var total = values.reduce(function (a, b) {
      return a + b;
    }, 0);
    // ES6
    var total = values.reduce((a, b) => a + b, 0);

• 函数中包含多行代码时用代码块括起来

ES6 中的规则是，紧随箭头的{被解析为块的开始，而不是对象的开始

 // ES5
     $("#confetti-btn").click(function (event) {
      playTrumpet();       fireConfettiCannon();
    });
    // ES6
    $("#confetti-btn").click(event => {
      playTrumpet();
      fireConfettiCannon();
    });

• 使用了块语句的箭头函数不会自动返回值，你需要使用 return 语句将所需值返回
• 当使用箭头函数返回一个普通对象时，需要将对象包裹在小括号里

//传统写法
    var createPerson = function(){
        return {name:'laoxie',age:18}
    }
    // ES6
    var createPerson = ()=>{name:'laoxie',age:18};   // 这样写会报Bug！
    var createPerson = ()=>({name:'laoxie',age:18});

• 默认参数。

  var func1 = (x = 1, y = 2) => x + y;
    func1(); // 得到 3
  

• 剩余参数

  var func2 = (x, ...args) => { console.log(args) };
    func2(1,2,3); // 输出 [2, 3]
  

箭头函数中的 this 值

箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域

Symbol 数据类型

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，一旦创建后就不可更改。

// 没有参数的情况
    var s1 = Symbol();
    var s2 = Symbol();

    s1 === s2 // false

• Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了标识和区分，对调式非常有用

  // 有参数的情况
  var s1 = Symbol("foo");
  var s2 = Symbol("foo");
  s1 === s2 // false
  

• Symbol 值不能与其他类型的值进行运算

用途

• 给对象创建私有属性

  var mySymbol = Symbol();
    // 第一种写法
    var a = {};
    a[mySymbol] = 'Nani';
    // 第二种写法（注意加方括号，否则回被当作普通属性）
    var a = {
      [mySymbol]: 'Nani'
    };
    // 以上写法都得到同样结果
    a[mySymbol] // "Nani"
  

### 常用方法

* Symbol.for()
    有时我们希望重新使用同一个Symbol值，Symbol.for方法可以做到这一点，首先在全局中搜索**已登记**的Symbol值，如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值> 直接用Symbol()方法创建的Symbol值不会被登记
```js
let one = Symbol("laoxie");
let two = Symbol.for("laoxie");
//由于创建了两个Symbol值，所以他们不相等
 console.log(one===two);//false

• Symbol.keyFor()
  获取被登记的 Symbol 值 > 直接使用 Symbo()创建的 Symbol 值的键不会被登记，所以也就获取不到

Map 集合

Map集合,即映射

• 设置

let map = new Map();
    map.set("S0", "张三");   
    map.set("S1", "李四");    
    map.set("S2", "王五");

• 获取

map.get("s2"); //王五

• 循环遍历，配合解构赋值

for(let [key,value] of map){
        console.log(key,value);
    }

方法

• keys() 获取所有键
• values() 获取所有值
• entries() 获取所有键值对，返回类数组

Set 集合

Set 集合，类似于数组，但是成员的值都是唯一的，没有重复的值。

let imgs = new Set();
    imgs.add(1）;
    imgs.add(1);
    imgs.add(5);
    imgs.add("5");
    imgs.add(new String("abc")）;
    imgs.add(new String("abc")）;

    //打印的结果： 1  5  '5'  'abc'  'abc'

Set 集合是默认去重复的，但前提是两个添加的元素严格相等，所以 5 和”5”不相等，两个 new 出来的字符串不相等

• [案例] 去重数组

SET 集合没有提供下标方式的访问，因此只能使用 for…of 来遍历。由于 Set 集合本质上还是一个 map，因此会有以下几种遍历方法

var imgs = new Set(['a','b','c']); //根据KEY遍历
for(let item of imgs.keys()){
     console.log(item);
}
//a
//b
//c

//根据VALUE遍历
for(let item of imgs.values()){
    console.log(item);
}
//a
//b
//c

//根据KEY-VALUE遍历
for(let item of imgs.entries()){
    console.log(item);
}
//['a','a']
//['b','b']
//['c','c']

//普通for...of循环
for(let item of imgs){
    console.log(item);
}
//a
//b
//c