Java前端 ES6

 ES6

ECMAscript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现

ES6新特性

1、let声明变量

//let只能声明一次

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

//var会变量提升

        //var可以声明多次
        //let只能声明一次
        var m = 1;
        var m = 2;
        let n = 3;
        //let n = 4;//SyntaxError: Identifier 'n' has already been declared
        console.log(m);
        console.log(n);

//let不存在变量提升

        //var会变量提升
        //let不存在变量提升
        console.log(x);//undefined
        var x = 10;
        //console.log(y);//ReferenceError: Cannot access 'y' before initialization
        let y = 20;

2、const声明常量（只读变量）

//1、声明之后中不允许改变

//2、一量声明必须初始化，否则会报错

const a = 1;

a = 3; //

        const a = 1;
        a = 3;//TypeError: Assignment to constant variable.

3、解构表达式

1）数组解构

将数组内的内容快速的赋值到指定的变量上

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

        let [a, b, c] = arr;
        console.log(a, b, c);

2）对象解构

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        // const name = person.name;
        // const age = person.age;
        // const language = person.language;
        const { name, age, language } = person;

        console.log(name, age, language);

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        // const name = person.name;
        // const age = person.age;
        // const language = person.language;
        const { name: abc, age, language } = person;

        console.log(abc, age, language);

4、字符串扩展

1）、几个新的API

        //4.字符串扩展
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true//以什么开头
        console.log(str.endsWith(".vue"));//true//以什么结尾
        console.log(str.includes("e"));//true//包含什么
        console.log(str.includes("hello"));//true

2）、字符串模板

        //2)字符串模板
        //1、多行字符串
        let ss = `<div>
              <span>hello world</span>
            </div>`;
        console.log(ss);

        //2.字符串插入变量和表达式，变量名写在${}中，${}中可以放入JavaScript表达式
        let name = '小黄debug';
        let hobby = '学习';
        let info = `我是${name},喜欢${hobby}`;
        console.log(info);//我是小黄debug,喜欢学习
        let abc = "小蓝";
        let age = 10;
        function fun() {
            return "这是一个函数";
        }
        info = `我是${abc},今年${age + 10}岁了，我想说：${fun()}`;
        console.log(info);//我是小蓝,今年20岁了，我想说：这是一个函数

5、函数优化

1）函数参数默认值

        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
        function add(a, b) {
            //判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        //传入一个参数
        console.log(add(10));

        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(10));

2）不定参数

不定参数用来表示 确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成，具名参数只能放在参数列表的最后，并且有且只有一个不定参数

        //2)不定参数
        function fun(...values) {
            console.log(values.length)
        }
        fun(1)  //1
        fun(1, 2, 3, 4) //4

3）箭头函数

       var后面跟名字，括号里面是参数，=>后面是方法体

var sum3 = (a, b) => {

            c = a + b;

            return a + c;

        }

        // //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
        // function add(a, b) {
        //     //判断b是否为空，为空就给默认值1
        //     b = b || 1;
        //     return a + b;
        // }
        // //传入一个参数
        // console.log(add(10));

        // //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        // function add2(a, b = 1) {
        //     return a + b;
        // }
        // console.log(add2(10));

        //2)不定参数
        function fun(...values) {
            console.log(values.length)
        }
        fun(1)  //1
        fun(1, 2, 3, 4) //4

        //3)、箭头函数
        //以前声明一个方法
        // var print = function (obj) {
        //     console.log(obj);
        // }
        // print("hello");//hello
        //现在
        var print = obj => console.log(obj);
        print("hello");//hello

        var sum = function (a, b) {
            return a + b;
        }

        var sum2 = (a, b) => a + b;

        console.log(sum(11, 12));   //23
        console.log(sum2(11, 12));  //23

        var sum3 = (a, b) => {
            c = a + b;
            return a + c;
        }
        console.log(sum3(11, 12))   //34

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        function hello(person) {
            console.log("hello " + person.name);
        }
        hello(person);  //hello jack
        var hello2 = (person) => console.log("hello " + person.name);
        hello2(person); //hello jack

6、对象优化

1）新增API

ES6给Object拓展了许多新的方法，如：

- keys(obj):获取对象的所有key形成的数组

-values(obj):获取对象的所有value形成的数组

-entries(obj):获取对象的所有key和value形成的二维数组。格式`[[k1,v1],[k2,v2],...]`

- assign(dest,...src):将多个src对象的值拷贝到dest中。（第一层为深拷贝，第二层为浅拷贝）

2）声明对象简写

3）对象的函数属性简写

4）对象拓展运算符

拓展运算符(...)用于取参数对象所有可遍历属性然后拷贝到当前对象

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //获取所有的key
        console.log(Object.keys(person));//["name","age","language"]
        //获取所有的value
        console.log(Object.values(person));//["jack",21,Array(3)]
        //获取entrie,即key与value一起拿
        console.log(Object.entries(person));//[Array(2),Array(2),Array(2)]

        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };
        //将第二个参数开始拷贝到第一个参数
        Object.assign(target, source1, source2);
        console.log(target);//{a: 1, b: 2, c: 3}

        //声明对象简写
        const age = 23;
        const name = "张三";
        const person1 = { age: age, name: name }
        const person2 = { age, name };
        console.log(person2);

        //对象的函数简写
        let person3 = {
            name: "jack",
            //以前
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用对象属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }

        }
        person3.eat("香蕉");//jack在吃香蕉
        person3.eat2("苹果");//jack在吃苹果
        person3.eat3("香瓜");//jack在吃香瓜

        //对象拓展运算符
        //1.拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)//{name: 'Amy', age: 15}
        //2.合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let person4 = { ...age1, ...name1 }
        console.log(person4)//{age: 15, name: 'Amy'}
        let p2 = { name: "zhangsan" }
        p2 = { ...age1, ...name1 }//{age: 15, name: 'Amy'}
        console.log(p2)

7、map和reduce

数组中新增了map和reduce方法

1)map

//map():接收一个函数，将原始数组中所有元素用这个函数处理后放入新数组返回

        //map():接收一个函数，将原始数组中所有元素用这个函数处理后放入新数组返回
        let arr = ['1', '20', '-5', '3'];
        // arr = arr.map((item) => {
        //     return item * 2
        // });
        console.log(arr);//[2, 40, -10, 6]
        arr = arr.map(item => item * 2)
        console.log(arr);

2)reduce

        //reduce()为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //[2,40,-10,6]
        //arr.reduce(callback,[initialValue])
        /**
         * 1、previousValue(上一次调用回调返回的值，或者是提供的初始值(initialValue))
         * currentValue(数组中当前被处理的元素)
         * index (当前元素在数组中的索引)
         * array (调用reduce的数组)
         */
        arr = [2, 40, -10, 6];
        let result = arr.reduce((a, b) => {
            console.log("上一次处理后：" + a);
            console.log("当前正在处理：" + b);
            return a + b;
        });
        console.log(result);
        /*
        (4) [2, 40, -10, 6]
            上一次处理后：2
            当前正在处理：40
            上一次处理后：42
            当前正在处理：-10
            上一次处理后：32
            当前正在处理：6
            38
        */
        let result2 = arr.reduce((a, b) => {
            console.log("上一次处理后：" + a);
            console.log("当前正在处理：" + b);
            return a + b;
        }, 100);
        console.log(result2);
        /*
        上一次处理后：100
        当前正在处理：2
        上一次处理后：102
        当前正在处理：40
        上一次处理后：142
        当前正在处理：-10
        上一次处理后：132
        当前正在处理：6
        138
        */

8、Promise

优化异步操作

1)、Promise语法

2）、处理异步结果

3）、Promise改造以前嵌套方式

4）、优化处理结果

<script>
        //1、查出当前用户信息
        //2、按照用户的id查出课程
        //3、按照当前课程id查出分数
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查询到用户：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询到课程", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 })
        //             },
        //             error(error) {
        //                 console.log("出现异常了：" + error);
        //             }
        //         })
        //     },
        //     error(error) {

        //     }
        // });

        //1.Promise可以封装异步操作
        // let p = new Promise((resolve, reject) => {
        //     //1、异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success(data) {
        //             console.log("查询用户成功：", data)
        //             resolve(data);
        //         },
        //         error: function () {
        //             reject(error);
        //         }
        //     });
        // });
        // p.then((obj) => { //成功
        //     return new Promise((resolve, reject) => {
        //         //1、异步操作
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success(data) {
        //                 console.log("查询用户课程成功：", data)
        //                 resolve(data);
        //             },
        //             error: function () {
        //                 reject(error);
        //             }
        //         });
        //     });
        // }).then((data) => {
        //     return new Promise((resolve, reject) => {
        //         //1、异步操作
        //         $.ajax({
        //             url: `mock/corse_score_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询用户课程分数成功：", data)
        //                 resolve(data);
        //             },
        //             error: function () {
        //                 reject(error);
        //             }
        //         });
        //     });
        // })

        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功：", data);
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功：", data);
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功：", data);
            })
            .catch((err) => {
                console.log("出现异常", err)
            });
    </script>

9、模块化

1）什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包，要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块

2）export

//`export`不仅可以导出对象，一切js变量都可以导出。比如基本类型、函数、对象。

// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }
export default {
    sum(a, b) {
        return a + b;
    }
}
//export { util }
//`export`不仅可以导出对象，一切js变量都可以导出。比如基本类型、函数、对象。

var name = "jack"
var age = 21

function add(a, b) {
    return a + b;
}

export { name, age, add }

3）import

只有export导出的才能使用import进行导入

import abc from "./hello.js"
import {name,age,add} from './user.js';

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