ES6笔记

最新推荐文章于 2025-09-13 01:34:54 发布

原创最新推荐文章于 2025-09-13 01:34:54 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了JavaScript的最新特性，包括数组与对象的解构赋值、字符串拓展、模板字符串、函数参数默认值、不定参数、箭头函数、对象拓展等，通过实例展示了这些特性的使用方法，并介绍了Promise在异步请求中的应用。

    <script>
        /*数组解构*/
        let array = [1, 2, 3, 4, 5];
        let [one, two, three] = array;
        console.log(one, two, three);
        // 1 2 3

        /*对象解构*/
        let obj = {
            name: 'tony',
            age: 20
        };
        const { name: alias, age } = obj;
        console.log(alias, age);
        // tony 20

        /*字符串拓展*/
        let str = 'hello.vue';
        console.log(str.startsWith('hello'));
        console.log(str.endsWith('vue'));
        console.log(str.includes('llo'));
        // true
        // true
        // true

        /*字符串模板*/
        function call(){
            console.log('func call()');
            return "haha";
        }

        let s = `
            <div> hello world </div>
        `;
        /*
            <div> hello world </div>
        */

        console.log(s);

        s = `hello, ${alias}, you are ${age + 1} years old, i say : ${call()}`;
        console.log(s);
        /*
            func call()
            hello, tony, you are 21 years old, i say : haha
        */
    </script>

    <script>
        /*函数优化*/

        /*函数参数默认值*/
        function func1(a, b=10){
            console.log(a, b);
        }

        func1(5);
        // 5 10

        /*不定参数(可变参数)*/
        function func2(...values){
            for(v of values)
                console.log(v);
        }

        func2(1, 2, 5, 6, 7);
        /*
            1
            2
            5
            6
            7
        */

        //箭头函数
        let sayHello = name => console.log('hello ', name);
        sayHello('Tony');
        // hello  Tony

        //方法传参时对象解构
        let Tony = {
            name: 'Tony',
            age: 21
        };
        let sayTony = ({name, age}) => console.log(name, age);
        sayTony(Tony);
        // Tony 21
    </script>

 <script>
        /*Object拓展*/
        // keys values entries assign
        let o = {
            name: 'ooo',
            value: 'vvv',
            val: [7, 8, 9]
        };
        console.log(Object.keys(o));
        // ["name", "value", "val"]
        console.log(Object.values(o));
        // ["ooo", "vvv", Array(3)]
        console.log(Object.entries(o));
        // [Array(2), Array(2), Array(2)]
        let oex = {
            name: 'oex',
            newProp: 'prop'
        };
        Object.assign(o, oex);
        console.log(o);
        // {name: "oex", value: "vvv", val: Array(3), newProp: "prop"}

        /*声明对象简写*/
        var k = 'key';
        var v = 'value';
        var kv = {
            k: k,
            v: v
        };
        console.log(kv);
        // {k: "key", v: "value"}
        // 简写
        kv = { k, v };
        console.log(kv);
        // {k: "key", v: "value"}

        /*对象的函数属性简写 3种*/
        var demo = {
            kv: kv,
            num: 100,
            getNum: function () {
                console.log(this.num);
            },
            getNum2: () => console.log(demo.num), // 不能使用this
            getNum3(){
                console.log(this.num);
            }
        }
        demo.getNum();
        // 100
        demo.getNum2();
        // 100
        demo.getNum3();
        // 100

        /*对象拓展运算符*/
        // 拷贝对象(深拷贝)
        let newObj = {...demo};
        demo.num = 200;
        demo.kv = 'key';  //引用的拷贝
        console.log(JSON.stringify(demo));
        // { "kv": "key", "num": 200 }
        console.log(JSON.stringify(newObj));
        // { "kv": { "k": "key", "v": "value" }, "num": 100 }
        console.log(demo);
        // {kv: "key", num: 200, getNum: ƒ, getNum2: ƒ, getNum3: ƒ}

        // 合并对象 覆盖之前的值
        var o1 = {name: 'o1'};
        var o2 = {name: 'o2', value: 'ov'};
        var o3 = {...o1, ...o2};
        console.log(o3);
        // {name: "o2", value: "ov"}
        Object.assign(o1, o2);
        console.log(o3);
        // { name: "o2", value: "ov" }
    </script>

Promise

<body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        /*
            步骤 ajax请求user.json获取user_id, 
            根据user_id获取course_[id].json获取score_id, 
            再根据score_id获取score_[id].json获取score.
        */
        /*
             伪代码:
             $.ajax({
                 url: 'xxx',
                 ok: ()=>{
                     $.ajax({
                         url: 'xxx',
                         ok: ()=>{
                             $.ajax({
                                 url: 'xxx',
                                 ok: ()=>{
                                     获取分数
                                 }
                             })
                         }
                     })
                 }
             })
        */
        /*
              Promise(resolve, reject)
        */
        var p = new Promise((resolve, reject) => {
            $.ajax({
                url: 'mock/user.json',
                success: res => {
                    console.log('user name: ', res.name);
                    resolve(res);
                },
                error: err => {
                    reject(err);
                }
            })
        })
        p.then(data => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/course_${data.id}.json`,
                    success: res => {
                        console.log('course name:', res.name);
                        resolve(res);
                    },
                    error: err => {
                        reject(err);
                    }
                })
            })
        }).then(data => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/score_${data.id}.json`,
                    success: res => {
                        console.log('score:', res.score);
                    },
                    error: err => {
                        reject(err)
                    }
                })
            });
        }).catch(err => {
            console.log('发生错误', err);
        })
        // user name:  Tony
        // course name: English
        // score: 100


        /*优化*/
        function good(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    success: res => {
                        resolve(res);
                    },
                    error: err => {
                        reject(err);
                    }
                })
            });
        }

        good('mock/user.json')
            .then(data => {
                console.log('user-name', data.name);
                return good(`mock/course_${data.id}.json`);
            })
            .then(data => {
                console.log('course-name', data.name);
                return good(`mock/score_${data.id}.json`);
            })
            .then(data => {
                console.log('final score', data.score);
            })
            .catch(err => {
                console.log('发生错误', err);
            })
    </script>
</body>