Es6新语法

yang 发布于 2023-6-30 19:25 阅读：396 JS高阶阶段

1.变量结构

 <body>
        <script>
            //数组的解构赋值：根据下标进行对应
            let arr = [4, 5, 6];
            let [a, b, c] = arr;
            console.log(a, b, c);

            //对象的解构赋值：属性名与变量名对应
            let obj = {
                name: '曹操',
                age: 20,
                gender: '男',
            }

            //ES5赋值
            // let name = obj.name;
            // let age = obj.age;
            // let gender = obj.gender;

            //ES6解构赋值，将对象中的属性，一个一个解析赋值给对应的变量
            let { name, age, gender } = obj;
            console.log(name, age, gender);

        </script>
    </body>

2.展开运算符

 <body>
        <script>
            //展开运算符 ...

            //1. 展开字符串
            let str = 'hello';
            console.log(...str); //将字符串展开成为一堆字符序列

            //2. 展开数组
            let arr = [5, 4, 3, 9, 8, 0];
            console.log(...arr);
            console.log(Math.max(...arr)); //将数组展开成为一个序列

            //3. 展开对象
            let obj = { name: '小源', age: 16 };
            let obj2 = { ...obj }; //展开成为一个键值对序列，实现浅拷贝

            obj2.age = 17;
            console.log(obj);
            console.log(obj2);
        </script>
    </body>

3.模版字符串

 <script>
            //模板字符串
            let name = '张飞';
            let str = `hello ${name}

            !!!`;
            console.log(str);
        </script>

4.对象的属性方法简写

 <body>
        <script>
            //1. 属性简写
            let name = '小乔';

            let obj = {
                name, //属性名和属性值相同时，只写一个
                age: 18,
            }

            console.log(obj);

            //2. 方法简写
            let obj2 = {
                name,
                age: 19,
                show() { //省略 :function 不写
                    console.log(this.name + `年龄是${this.age}岁`)
                }
            }
            obj2.show();
        </script>
    </body>

5.解构练习

 <body>
        <script>
            //1. 交互变量的值
            let x = 1;
            let y = 2;
            console.log(x, y);

            [x, y] = [y, x];
            console.log(x, y);

            //2. 解构数据
            const jsonData = {
                id: 42,
                status: "OK",
                data: [867, 5309],
                otherData1: 18,
                otherData2: ['www', 'itsource', 'cn'],
                otherData3: {
                    a: 1
                }
            };
            let { id, status, data } = jsonData;
            console.log(id, status, data);
        </script>
    </body>

6.class类

 <body>
        <script>
            /*
            //ES5的类
            (function () {
                //构造函数
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                }

                //原型方法
                Person.prototype.jump = function () {
                    console.log('跳跳跳');
                }

                Person.prototype.run = function () {
                    console.log('跑跑跑');
                }

                //挂在全局上
                window.Person = Person;
            })();
            */

            //ES6的类
            class Person {
                //构造函数
                constructor(name, age) {
                    this.name = name;
                    this.age = age;
                }

                //原型方法
                jump() {
                    console.log('跳跳跳!!!')
                }
            }

            //实例化一个对象
            let p1 = new Person('小飞', 20);
            console.log(p1);
            p1.jump();
        </script>
    </body>

7.静态属性和方法

<body>
        <script>
            class Person {
                //构造函数
                constructor(name, age) {
                    this.name = name; //对象的属性
                    this.age = age;
                }

                //原型方法-对象的方法
                jump() {
                    console.log('跳跳跳!!!')
                }

                //静态方法-类的方法
                static run() {
                    console.log('跑跑跑....');
                }

                //静态属性-类的属性
                static eyes = 2

                //对象属性的另一种写法
                leg = 2
            }

            console.dir(Person);
            Person.run(); //类可以使用自身的静态方法
            console.log(Person.eyes); //调用静态属性

            let p1 = new Person('小黑', 18);
            p1.jump(); //对象只能使用原型方法
            console.log(p1);
        </script>
    </body>

8.class继承

<body>
        <script>
            //父类
            class User {
                constructor(username, password) {
                    this.username = username;
                    this.password = password;
                }

                login() {
                    console.log(this.username + '登陆成功');
                }
            }

            //子类，继承自父类User
            class Student extends User {
                constructor(score, ...rest) {
                    super(...rest); //调用父类的构造函数，必须写在this前
                    this.score = score;
                }

                study() {
                    console.log(this.username + '努力学习');
                }
            }

            //实例化对象
            let s1 = new Student(100, 'admin', '888888');
            console.log(s1);
            s1.login();
            s1.study();
        </script>
    </body>

Es6新语法

扫描二维码，在手机上阅读