ES6概述

ES6简介
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

变量/常量

之前，我们写js定义变量的时候，只有一个关键字：var。但是通过var定义的变量会有一个问题：就是通过该关键字定义的变量有时候会莫名的变成==全局变量== , 也就是说var定义的变量没有块级别的作用域，因为var的作用域是函数 。
测试1：

    <script type="text/javascript">
        if (true){
            var s = 10;
        }
        alert(s);    //会弹出数据10
    </script>
    输出结果： 10

测试2：

    <script type="text/javascript">
        for (var i = 1; i <= 6 ; i++) {
            console.info(i);
        }
        console.info("跳出循环后，i的值 = " + i);
    </script>
输出结果：
 1
 2
 3
 4
 5
 6

const定义常量
在之前ES5中，是没有办法定义常量的，但是到了ES6中，有了对常量的定义，即使用const关键字。

字符串扩展

新增方法

• includes() ：返回布尔值，表示是否找到了参数字符串。
• startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。
• repeat()：返回一个字符串，根据给定的数值对字符串重复指定的次数。

---

测试

<script type="text/javascript">

    let str = "HelloWorld";

    let b1 = str.includes("Hello");
    console.info("HelloWorld是否包含Hello字符串: " + b1);		// true

    let b2 = str.startsWith("Hello");
    console.info("HelloWorld是否以Hello字符串开头: " + b2);	   // true

    let b3 = str.endsWith("World");
    console.info("HelloWorld是否以World字符串结尾: " + b3);	   // true

	let value = "Hello".repeat(3);
  	console.info(value);									//  HelloHelloHello

</script>

字符串模板

1，随意折行
语法：使用【`】作为字符串的模板语法。

<script type="text/javascript">
    let str = `Hello
        World
        Spring
    `;

    console.info(str);
</script>
/**
	在两个`之间的部分都会被作为字符串的值，可以任意换行
*/

2，字符串拼接

<script type="text/javascript">
    // 过滤掉不能被3整除的数
    let name = 'HelloWorld';
    let age = 23;
    let address = "河南安阳";
    let str = `姓名是:${name}年龄是:${age}家庭住址是:${address}`
    console.info(str);
</script>

3，调用函数

<script type="text/javascript">
    let fn = function () {
        return "HelloWorld";
    }
    let content = `你好, ${fn()}`;
    console.info(content);
</script>

解构表达式

测试1：

<script type="text/javascript">
    let arrs = [1,2,3];
    let [x,y,z] = arrs;	// x，y，z将与arrs中的每个位置对应来取值。
    console.info(x,y,z);
</script>
// let [x,y,z] = arrs 注意：等号左边的[]不是数组，表示的解构，表示的从等号右边的数组中提取值。

测试2：

<script type="text/javascript">
   let [ [num1,num2,num3] , num , value ] = [ [1,2,3] , 34 , 'HelloWorld' ];
   console.info(num1,num2,num3,num,value);
</script>

对象解构

测试1：

<script type="text/javascript">
   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };
   let {name,age,address} = person;	// {}中的name、age和address需要和person中的属性一致
   console.info(name);
   console.info(age);
   console.info(address);
</script>

测试2：

<script type="text/javascript">
   let person = {
       name: "Hello",
       age: 12,
       address: ["河南","山东"]
   };
   // 当然也可以不一致,如果想要用其它变量接收，需要额外指定别名，需要用【：】指定
   // name是person中的属性名，冒号后面的myName是解构后要赋值给的变量。
   let {name:myName,age:myAge,address} = person;	
   console.info(myName);
   console.info(myAge);
   console.info(address);
</script>

函数优化

rest参数

<script type="text/javascript">
    // 函数展开/可变参数
    function info(num1,num2,...args){
        alert(num1);
        alert(num2);
        alert(args);		// 30,40,50，args是一个数组，以数组的方式接收函数中剩余的参数
    }
    info(10,20,30,40,50);
</script>

展开数组

<script type="text/javascript">
    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    let arr3 = [...arr1 , ...arr2];
    alert(arr3);
</script>

箭头函数

单个参数

<script type="text/javascript">
    let show = username => console.info("Hello:" + username);
    show("李四");
</script>
/**
	语法：
		let 函数名 = 参数名 => 函数体
*/

多个参数

<script type="text/javascript">
    let add = (num1,num2) => console.info(num1 + num2);
    add(10,20);
</script>
/*
	多个参数需要使用【()】小括号给括起来.
*/

没有参数：

<script type="text/javascript">
   let info = () => console.info("打印信息");
   info();
</script>
/*
	即使函数没有参数，也需要使用【()】小括号来去表示，来去代表参数部分
*/

函数体有多余语句：

<script type="text/javascript">
    let length = (str) => {
        if(str){
            return str.length;
        }
        return 0;
    }
    console.info(length("123"));
</script>
/*
	函数体有多条语句时候，需要使用【{}】花括号包裹起来
*/

如果函数中有单个表达式或语句：那么==1、函数体外部的{}是可以省略的；2、使用return可以省略。==