ES6新特性

一、ES6

全称 ECMAScript6 是浏览器脚本语言的规范，而JavaScript则是规范的具体实现。

1.新特性

1.1 let

1.1.1 作用域严格

	<script>
        //var 声明的变量往往会越域
        //let 声明的变量有严格的局部作用域
        {
            var a = 1;
            let b = 2;
        }
        console.log(a); //1
        console.log(b); //Uncaught ReferenceError: b is not defined
    </script>

1.1.2 只能声明一次

	<script>
        var m = 1;
        var m = 2;
        let n = 3;
        let n = 4; // 重复声明会报错
        console.log(m); //2
        console.log(n); //Uncaught SyntaxError: Identifier 'n' has already been declared
    </script>

1.1.3 不存在变量提升

	<script>
        console.log(x); //undefined
        var x = 10;

        console.log(y); //Uncaught ReferenceError: Cannot access 'y' before initialization
        let y = 20;	//let变量的声明操作不会提前执行
    </script>

1.2 const

1.2.1 声明后只读

    <script>
        const a = 1;
        a = 3;	//Uncaught TypeError: Assignment to constant variable.
    </script>

1.3 解构表达式

1.3.1 数组解构

	<script>
        let arr = [1,2,3];
        let [a,b,c] = arr;

        console.log(a,b,c); //1 2 3
    </script>

1.3.2 对象解构

<script>
        //定义一个对象
        const person = {
            name: "jeck",
            age: 21,
            language:['java','js','css']
        }
		
		//解析person的值
        const {name,age,language} = person;
        console.log(name,age,language);
		//解析并赋值
        const {name:aaa,age:bbb,language:ccc} = person;
        console.log(aaa,bbb,ccc);

    </script>

1.4 字符串扩展

1.4.1 新增API方法

<script>
        let str = "hello.vue";
        //开头匹配
        console.log(str.startsWith("hello"));//true
        //结尾匹配
        console.log(str.endsWith(".vue"));//true
        //是否存在目标字符串
        console.log(str.includes("o"));//true
        console.log(str.includes("hello"));//true
    </script>

1.4.2 字符串模板

	//代替了以前的换行拼接字符串，直接用 `` 
	<script>
        let ss = `
        <div>
            <tr>
                <td></td>
            </tr>
        </div>
        `;
        console.log(ss);
    </script>

1.4.3 ${} 字符串中插入变量/表达式/调用方法

	<script>
        let abc = "张三";
        let age = 33;
        function say(){
            return "w shi yige fangfa !";
        }
		//注意字符串嵌入时用 `` 而不是 ''
        let info = `我是${abc},今年${age - 10} 岁了，I want say ${say()}`;
        console.log(info);
    </script>

1.5 函数优化

1.5.1 函数参数默认值

	<script>
        //函数参数默认值
        function add(a = 8,b = 7){
            return a + b;
        }
        console.log(add());//15
        console.log(add(5));//12
        console.log(add(9,9));//18
    </script>

1.5.2 不定参数

    <script>
        //不定参数
        function fun(...data){
            console.log(data.length);
            console.log(data);
        }
        fun(1,2,3,4);	//4、[1,2,3,4]
        fun(7,7,7,7,7);	//5、[7,7,7,7,7]
    </script>

1.5.3 箭头函数 =>

新的函数声明方法

	<script>
        //箭头函数
        
        //一个参数 一行执行语句
        var fun1 = obj1 => obj1;
        console.log(fun1(9999)); //9999

        //多个参数 一行执行语句
        var fun2 = (obj1,obj2) => obj1 + obj2;
        console.log(fun2(5,5)); //10

        //多个参数 多行执行语句
        var fun3 = (obj1,obj2) => {
            let obj3 = obj1 + obj2;
            return obj3 + obj1;
        }
        console.log(fun3(5,5)); //15
        

        const person = {
            name:"Jerry"
        }
        //参数为对象
        var fun4 = (obj1) => obj1.name;
        console.log(fun4(person)); //Jerry

        //箭头函数+解构
        var fun5 = ({name}) => name;
        console.log(fun5(person)); //Jerry 


    </script>

1.6 对象优化

1.6.1 新增API方法

<script>
        const person = {
            name: "jeck",
            age: 21,
            language:['java','js','css']
        }

        //获取对象中所有的key
        console.log(Object.keys(person));   //["name", "age", "language"]
        
        //获取对象中所有的value
        console.log(Object.values(person)); //["jeck", 21, Array(3)]
        
        //获取整个对象并转换为数组
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

        //assign合并对象,第一个参数是合并的目标对象，其余的都是要被合并的对象
        const target = {a:1};
        const source1 = {b:1};
        const source2 = {c:1};
        Object.assign(target,source1,source2);
        console.log(target);    //{a: 1, b: 1, c: 1}

    </script>

1.6.2 对象简写

	 <script>
        //对象中属性的简写
        const age = 10;
        const name = "Jerry";
        const person = {age,name}
        console.log(person);    //{age: 10, name: "Jerry"}

        //对象中函数的简写
        const person1 = {
            name:"Jerry",
            eat: function(food){
                console.log(this.name + "在吃" + food);
            },
            //箭头函数中不能使用this关键字
            eat2: food => console.log(person1.name + "在吃" + food),
            eat3(food){
                console.log(this.name + "在吃" + food);
            }
        }

        person1.eat("橘子1");//Jerry在吃橘子1
        person1.eat("橘子2");//Jerry在吃橘子2
        person1.eat("橘子3");//Jerry在吃橘子3

    </script>

1.6.3 对象的扩展运算符 …

对象扩展运算符 …
作用：解构对象中的属性，可以用来对象赋值或合并对象。
合并对象如果原对象和被合并对象具有相同的属性，那么该属性会被后面的赋值更新

	<script>
        //对象扩展运算符 ...
        //1.拷贝对象(深拷贝)
        let source1 = {name: "Jerry" , age: 25}
        let p1 = {...source1}
        console.log(p1);    //{name: "Jerry", age: 25}

        //2.合并对象
        let source2 = {age:15}
        let source3 = {name:"JerryR"}
        let p2 = {name:"djl"}
        p2 = {...source2,...source3}
        console.log(p2);    //{age: 15, name: "JerryR"}

		
    </script>

1.7 数组优化

1.7.1 Map()

接收一个函数，将原数组中的所有元素用这个函数处理后返回

	<script>
        //map()方法
        let arr = ['1','2','5','8'];
        arr = arr.map(item=>item*2);
        console.log(arr);
    </script>

1.7.2 Reduce()

arr.reduce(callback,[initialValue]) 为数组中每一个元素依次执行回调函数（不包括数组中被删除或从未被赋值的元素），initialValue为处理的初始值，可选。
其中，callback有四个参数:

1. previousValue 上次调用回调返回的值（第一次执行时为提供的初始值initialValue）
2. currentValue 数组中当前被处理的元素的值
3. index 当前元素在数组中的索引
4. array 调用Reduce() 的数组

	<script>
        //map()方法
        let arr = ['1','2','5','8'];
        //reduce()方法
        let result = arr.reduce((a,b)=>{
            console.log("上次处理后"+a);
            console.log("当前正在处理"+b);
            return a + b;
        },100);

        console.log(result);
        // 上次处理后100
        // 当前正在处理2
        // 上次处理后102
        // 当前正在处理4
        // 上次处理后106
        // 当前正在处理10
        // 上次处理后116
        // 当前正在处理16
        // 132


    </script>

1.8 Promise (重要)

Promise() 用于封装异步操作
new Promise(function()) ：

1. function() 方法提供两个参数 resolve 和 reject
2. 如果方法执行成功就调用 resolve(data) 方法把返回值传给下一步流程
3. 如果方法执行失败就调用 reject(err) 方法把返回值传给异常处理
4. 实例对象.then(function(data)) 这里的 function 就是实例对象的（异步）操作执行成功后，下一步流程的方法体定义，参数 data 就是 resolve(data) 传出的值
5. 实例对象.catch(funtion(err)) 这里的 function 是实例对象的（异步）操作执行失败后，异常处理的方法体定义，参数 err 就是 reject(err) 传出的异常信息

1.8.1 封装异步操作实例

	<script>
        //封装一个公共的异步调用方法，参数为ajax请求的url和传的参数
        function get(url,data){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:url,
                    data:data,
                    success:function(data){
                        resolve(data);
                    },
                    error:function(err){
                        reject(err);
                    }
                });
            })
        }

        //链式编程，调用get方法
        get("mock/user.json")
            .then((data)=>{
              console.log("用户查询成功!");  
              return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data)=>{
              console.log("课程查询成功!");  
              return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
              console.log("课程成绩查询成功!",data);  
            })
            .catch((err)=>{
                console.log("出现异常"+err);
            });

    </script>

1.9 模块化

类似Java的导包
主要由两个命令组成：

1. export 规定模块的对外接口
   export 不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、对象、函数、数组。
2. import 导入其他模块提供的功能

hello.js

//声明并导出
export const util = {
	sum(a,b) {
		return a + b;
	}
}

main.js

import {util} from "./hello.js"

console.log(util.sum(1,2)); //3

也可以使用不指定名字的导出:
hello.js

export default {
	sum(a,b){
		return a + b;
	}
}

main.js

import abc from "./hello.js"

console.log(abc .sum(1,2)); //3

---

VSCode

<!--导入JQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

快捷键
Shift + ! + Enter -- 快速生成基本的HTML代码
Alt + Shift + F -- 自动修正格式