ES6【笔记】

ES6

1. let/const
2. 解构赋值

//解构数组赋值
let [x,y,z] = [1,2,3]
//解构对象赋值
let user = {name:'zhang3',age:33}
let {name,age} = user
console.log(name,age)//name与age的名字得与user对象中的相同

3. 模板字符串

let str = 'hello'
console.log(str + '!')
console.log(`${str}!`)

4. 声明对象简写

let age = 33
let user = {age}

5. 定义方法简写

函数or方法
函数：
function f1(){}
方法：是要在类中的
let user = {sayHi:function(){}}
let user = {sayHi(){}}//去掉function就是简写

6. 对象拓展运算符

let user = {name:'zhang3',age:33}
let s1 = user;
let s2 = {...user};//这相当于另开辟了一个空间指向一个新的属性相同的user
---
let name = {name:'tb'}
let age = {age:18}
let s3 = {...name,...age}//其实就是将name/age对象拆解开来

7. 函数的默认参数

function getUser(name,age=18){}
//默认age会为18赋值进去，若你age没写

8. 不定参数...就与Java差不多
9. 箭头函数和lambda很像=>

let f1 = function(a){return a;}
let f2 = (a) => {return a;}
let f3 = a => a;

10. Promise!!!

//比如你写ajax多层嵌套的话，很不好，所以要用到Promise
<script src="jquery.min.js"></script>
<script>
    var p1 = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()//成功后交给resolve去执行回调的内容
        }, 1000)
    }) 

    p1.then(()=>{//成功

        console.log('Done')

        //还有后续动作，所以接着返回promise
        return new Promise((resolve, reject)=>{
            $.get(`mock/user.json`, (data) => {
                resolve(data)
            })
        })
    })

        .then((data)=>{//成功

        console.log(data)
        $.get(`mock/login-log-${data.id}.json`, (data) => {
            console.log(data)
        })

        //如果之后还有后续动作，那么接着返回promise
        // return new Promise((resolve, reject)=>{
        //     $.get(`mock/login-log-${data.id}.json`, (data) => {
        //          resolve(data)
        //     })
        // })
    })

</script>

有错误处理的promise案例
 
<script src="jquery.min.js"></script>
<script>
    var p1 = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()//成功后交给resolve去执行回调的内容
        }, 1000)
    })  

    p1.then(()=>{//成功

        console.log('Done')

        //还有后续动作，所以接着返回promise
        return new Promise((resolve, reject)=>{

            $.ajax({
                url: 'mock/user.json',
                type: 'get',
                success(data){
                    resolve(data)//成功后交给resolve去执行回调的内容
                },
                error(){
                    reject()//失败后交给reject去处理失败
                }
            })
        })
    })

    .then((data)=>{//成功

        console.log(data)
        $.get(`mock/login-log-${data.id}.json`, (data) => {
            console.log(data)
        })

        //如果之后还有后续动作，那么接着返回promise
        // return new Promise((resolve, reject)=>{
        //     $.get(`mock/login-log-${data.id}.json`, (data) => {
        //          resolve(data);
        //     })
        // })
    }, ()=>{//处理失败：then方法的第二个参数是失败的回调
        console.log('出错啦！')
    })

</script>
也可以使用catch处理失败
 
.then((data)=>{//成功

})
.catch(()=>{//处理失败：then方法的第二个参数是失败的回调
    console.log('出错啦！')
})