ES6语法初学者入门

let 与 var 变量

---

1. 作用域不同

var： 声明的变量往往会越域。
let： 声明的变量有严格的作用域。

        {
            var a = 1;
            let b = 2;
        }
        console.log(a)
        console.log(b)  //let声明的b变量会报错。

2. 声明次数

let： 声明的变量只能声明一次，多次会报错
var： 可以声明多次

var a = 1;
var a = 2;
let b = 3;
let b = 4;   //使用let第二次声明b会报错

3. 变量提升

var： 会变量提升
let： 不存在变量提升

const变量

---

const声明的变量不允许修改

函数优化

---

1. 参数默认值设定

        function add2(a,b = 1){    //默认给b赋值为1
            return a+b;
        }

2. 不定参数

        function fun(...values){
            console.log(values.length)
        }

3. 箭头函数

箭头函数中this不能使用

        var print = obj => console.log(obj);
        print(123);
        
        var sum1 = (a,b) => console.log(a+b);
        sum1(12,13);
        
        var sum2 = (a,b) => {
            c = a + b;
            return c;
        }
        console.log(sum2(2,3));
        
        const person = {
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        var hello2 = ({name:name1}) => console.log("hello:"+name1);
        hello2(person);

对象优化

---

1. 获取对象的键，值，键值对（Object.keys，Object.values，Object.entries）

        const person = {
            name:"Jeff",
            age:24,
            language:['java','js','css']
        }
        console.log(Object.keys(person));     	//键
        console.log(Object.values(person));		//值
        console.log(Object.entries(person));	//键值对

2. 合并变量（Object.assign）

		//将target2和target3中的对象合并到target中
        const target = {a:1};
        const target2 = {b:2};
        const target3 = {c:3};
        Object.assign(target,target2,target3);
        console.log(target);

3. 生成对象简写

        const age =23;
        const name = "zhangsan";
        const person2 = {age,name};
        console.log(person2);

4. 拷贝对象

        let p1 = {name:"Amy",age:15};
        let temp = {...p1}
        console.log(temp)

5. 合并对象

        let age1 = {age:15}
        let name1 = {name:"jeff"}
        let p2 = {...age1,...name1}
        console.log(p2)

解构表达式

---

1. 数组解构

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

2. 对象解构

		const person = {
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        const {name:temp,age,language} = person;
        console.log(temp,age,person);

3. 字符串扩展

        let str = "hello.vue";
        console.log(str.startsWith("hello"))
        console.log(str.endsWith(".vue"))
        console.log(str.includes("e"))
        console.log(str.includes("hello"))

4. 字符串模板

        let html = `<div>
                        <span>hello</span>
                    </div>`;
        console.log(html)

5. 字符串插入变量和表达式

字符串插入变量和表达式，变量名写在${}中，${}中可以放JavaScript表达式

        function fun(){
            return "这是一个函数"
        }
        let info = `我是${temp},今年${age},${fun()}`;
        console.log(info);

注意：JSP页面中使用变量需要使用${"${age}"}

Promise参数

---

        let p = new Promise((resolve, reject) => {
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("用户信息：" + data)
                    resolve(data);
                },
                error: function (err) {
                    reject(err);
                }
            })
        });
        p.then((ojb) => {
            $.ajax({
                url: `mock/user_course_${ojb.id}.json`,
                success: function (data) {
                    console.log("课程信息：" + data)
                },
                error: function (err) {

                }
            })
        }).catch((err) => {
            console.log(err)
        })