es6

1.箭头函数定义方式

// 传统定义函数
var f1 = function (n) {
    return n * 2;
}

// ES6
let f2 = (n) => {
    return n * 2;
}
console.log(f2(100));

// 直接返回结果
let f3 = (n) => n * 2;
console.log(f3(300));

2.箭头函数使用案例

// 箭头函数使用案例
let f1 = (n, m) => {
    let res = 0;
    for (let i = n; i < m; i++) {
        res += 1;
    }
    return res;
};
console.log(f1(1,10));

3.箭头函数解析Json对象

<!--    定义一个json对象    -->
const Monster = {
    name: "红孩儿",
    age: 100,
    skill: ["1", "2"]
}

let f1 = ({skill}) =>{
    console.log(skill);
}
// 1、传入Monster对象
// 2、形参是{skill}，es6新特性会将值赋给skill
f1(Monster);

// 同时取多个值
let f2 = ({skill,name,age}) =>{
    console.log(name,age)
}
f2(Monster);

Promise

1.promise实现多次ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        // 成功执行resolve，失败执行reject
        let p = new Promise((resolve, reject) => {
            $.ajax({
                url: "data/monster.json",
                success(resultData) {
                    console.log("请求成功", resultData)
                    // 这里直接跳转到p.then（请求成功后的业务）
                    resolve(resultData)
                },
                error(err) {
                    reject(err)
                }
            })
        })

        p.then((resultData) => {
            // 成功后的第2次请求
            return new Promise((resolve, reject) =>{
                $.ajax({
                url: `data/monster_detail_${resultData.id}.json`,
                success(resultData) {
                    console.log("请求成功", resultData)
                },
                error(err) {
                    reject(err)
                }
                })
            }) 
            // 再次对resultData进行处理（第三次，链式调用）
        }).then((resultData) =>{
            
        })
		   // 所有的错误都会抓到这边
            .catch((err)) =>{
            console.log("promise异步请求异常=", err);
        }

    </script>
</head>
<body>

</body>
</html>

2.代码重排

// 对1中的代码，进行重排，使代码更加简洁
<title>promise代码重排</title>
<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

    /**
     *
     * @param url url
     * @param data data
     * @returns {Promise<unknown>}
     */
    function get(url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                data: data,
                success(resultData) {
                    resolve(resultData)
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

   // 封装上面的get方法，来直接调用
    get("data/monster.json")
        .then((resultData) => {
            console.log("第一次Ajax请求的数据", resultData)
            // 该处需要return，不然下面一个then拿不到数据
            return get(`data/monster_detail_${resultData.id}.json`)
        }).then((resultData) =>{
                console.log("第二次Ajax请求的数据", resultData)
            }).catch((err) =>{
            console.log("请求异常")
        })
</script>

Vue

1、数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <!--
    1、v-model是双向绑定
    2、v-bind 是单向绑定
    -->
    <input type="text" v-model="hobby.val"><br/><br/>
    <input type="text" value="xx"><br/><br/>
    <p>请输入你的爱好：{{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "hi, 输入你的爱好",
            hobby: {
                val: "购物"
            }
        }
    })
</script>
</body>
</html>

2、事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="sayHi()">点击输出</button>
    <button v-on:click="sayOk()">点击输出</button>
    <button>点击输出</button>
    <button>点击输出</button>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: { // 数据池q
            message: "hello-Vue",
            name: "hsp"
        },
        methods: { // 表示方法池
            sayHi() {
                console.log("银角大王")
            },
            sayOk() {
                console.log("金角大王")
            }
        }
    })
</script>
</body>
</html>