es6新增语法

最新推荐文章于 2025-05-27 08:11:14 发布

程序猿王天恩

最新推荐文章于 2025-05-27 08:11:14 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_55778010/article/details/124815056

本文深入讲解了ES6中的几个重要特性：模板字符串的使用，包括传统的字符串拼接与模板语法；解构赋值在数组和对象中的应用；类的概念及其构造函数；以及生成器函数如何实现分段异步请求。此外，还探讨了Symbol作为唯一值在对象属性中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学无止境,永远对学习保持一种敬畏的态度!</title>
</head>

<body>
    <ul>
        <li></li>
    </ul>
    <script>
        /**
         * es6新增
         * 模板字符串
         * 解构赋值
         * class类
         * generator函数:分段异步请求
         * symbol:唯一值
         * 等等......
         * **/

        //  1、模板字符串  '++' ||  ``      两种拼接方法            ``:是es6新增的模板字符串
        /* var arr = [
            { name: '小王', age: 18 },
            { name: '小红', age: 16 },
            { name: '小李', age: 28 },
            { name: '小朋友', age: 3 }
        ]
        var ulEle = document.querySelector('ul');
        console.log(ulEle);
        var str = '';
        for (let i = 0; i < arr.length; i++) {
            str += '<li>我是' + arr[i].name + ',今年' + arr[i].age + '岁了!</li>'
        }
        ulEle.innerHTML = str; */

        /* var arr = [
            { name: '小王', age: 18 },
            { name: '小红', age: 16 },
            { name: '小李', age: 28 },
            { name: '小朋友', age: 3 }
        ]
        var ulEle = document.querySelector('ul');
        console.log(ulEle);
        var str = '';
        for (let i = 0; i < arr.length; i++) {
            str += `<li>我是${arr[i].name},我今年${arr[i].age}岁了!</li>`;
        }
        ulEle.innerHTML = str; */

        // 2、解构赋值
        // 数组解构:
        /*  var [a, b] = [1, 2];
         console.log(a, b); */       // 结果肯定是:a是1,b是2   数组是有序的

        // 对象解构:
        /* var { a, b } = { b: 100, a: 800 };
        console.log(a, b); */       // 结果:a是800,b是100   对象是无序的

        // 3、class类       构造函数this指向  实例对象

        // 第一种:伪造对象继承:

        /* function Person(name) {
            this.name = name;
            this.speak = function () {
                return `${this.name}会说话`
            }
        }

        // 原型链上挂载一个方法
        Person.prototype.song = function () {
            return `${this.name}会唱歌`
        }

        let dog = new Person('二哈');
        console.log(dog.speak());
        console.log(dog.name);
        console.log(dog.song());
        // 通过伪造对象继承,改变this指向继承属性和方法
        function Goods(name) {
            Person.call(this, name);
            // Person.bind(this)(name);
            // Person.call(this, [name]);

        }

        let money = new Goods('安踏男鞋');
        console.log(money.name);
        console.log(money.song());  // 继承不了原型链上的属性,也继承不了原型链上的方法
        console.log(money.speak()); */



        // 第二种:原型链继承:可以获取到原型链上的属性和方法,但是获取不带函数内部的属性和方法
        /* function Person(name) {
            this.name = name;
            this.speak = function () {
                return `${this.name}会说话`
            }
        }

        // 原型链上挂载一个方法
        Person.prototype.song = function () {
            return `${this.name}会唱歌`
        }

        function Boy(name) {

        }

        Boy.prototype = Person.prototype;

        let girl = new Boy('吴青峰');
        console.log(girl.name);
        console.log(girl.song());
        console.log(girl.speak()); */




        // 第三种:组合继承 (伪造对象继承和原型链继承)使用场景: 既想继承原型链上的属性和方法,又想继承函数内部的属性和方法就使用组合继承.
        /* function Person(name) {
            this.name = name;
            this.speak = function () {
                return `${this.name}会说话`
            }
        }

        // 原型链上挂载一个方法
        Person.prototype.song = function () {
            return `${this.name}会唱歌`
        }

        function Boy(name) {
            Person.call(this, name);
        }

        Boy.prototype = Person.prototype;

        let girl = new Boy('吴青峰');
        console.log(girl.name);
        console.log(girl.song());
        console.log(girl.speak()); */




        // 第四种:es6新出的一个class类继承,         常用于 React
        /* class Person {
            constructor(name) {
                this.name = name;
            }
            speak() {
                return `${this.name}会说话`
            }
        }

        // let cat = new Person('黑猫警长');
        // console.log(cat.name);
        // console.log(cat.speak());

        class Mouse extends Person {
            constructor(name) {
                super(name);
            }
        }

        let cat = new Mouse('黑猫警长');
        console.log(cat.name);
        console.log(cat.speak()); */



        // 4、generator函数
        /**
         * generator函数:主要是为了解决异步   可以理解为生成器---分段异步请求
         * generator函数一般配合 yield 使用: 用来分段执行
         * generator函数是通过 next 启动的: 用来执行下一步
         * **/

        /*  function* person(name) {
             console.log(1, name);
             let b = yield '1接收的'
             console.log(2, b);
             yield '2接收的'
             console.log(3);
             yield '3接收的'
         }
         console.log(person());
 
         let pig = person('王星星');     // generator函数调用
 
         // pig.next();
         // pig.next();
         // pig.next();
 
         let one = pig.next();
         console.log(one);
         console.log(pig.next('我是2号它朋友'));
         console.log(pig.next());
         console.log(pig.next()); */


        // 5、symbol:唯一值     主要用于给对象添加私有属性
        /* let a = Symbol(1);
        let b = Symbol(1);
        console.log(typeof a);
        console.log(typeof b);
        a == b ? console.log('a和b相等') : console.log('a和b不相等'); */

        /* let obj = {}
        var arr = [1, 1, 1, 2, 3, 3, 4];
        for (let i = 0; i < arr.length; i++) {
            obj[arr[i]] = arr[i];
        } */
        /* 结果: {
            1: 1
            2: 2
            3: 3
            4: 4
        } 
        // 相同的属性都会被覆盖掉!!!  所以要想不被覆盖,可以使用symbol唯一值:基本数据类型
        */

// ----------------------------------------------------------------------------------------------------

        /* let obj = {}
        var arr = [1, 1, 1, 2, 3, 3, 4];
        for (let i = 0; i < arr.length; i++) {
            obj[Symbol(arr[i])] = arr[i];
        } */
        /* 结果: {
            Symbol(1): 1
            Symbol(1): 1
            Symbol(1): 1
            Symbol(2): 2
            Symbol(3): 3
            Symbol(3): 3
            Symbol(4): 4
        } */


        /* {
            for in
            for of
            以上两种循环遍历对象的方法,无法遍历出来唯一值的属性
        } */

        /* Object.getOwnPropertySymbols(obj);
        console.log(Object.getOwnPropertySymbols(obj));     // 得到的是一个数组类型

        console.log(obj); */
    </script>
</body>

</html>