欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

es6语法

程序员文章站 2022-07-26 17:19:15
es6又称为es2015,为javascript的一个重要标准,至今并没有被所有浏览器兼容 ......

  es6又称为es2015,为javascript的一个重要标准,至今并没有被所有浏览器兼容

<script>
        /**
         * let,用于解决javascript中无块级作用域
         */
        {
            let a = "test";
        }
        //console.log(a); // Uncaught ReferenceError:  is not defined

        /**
         * const,也是块级作用域,解决javascript中无常量
         */
        {
            const a = "test";
            //a = "123";  // Uncaught TypeError: Assignment to constant variable.
            const b = {name:"tom", age:18};
            b.age = 13;
            console.log(b); // {name: "tom", age: 13} 不能改变本身的值,但可以改变其引用的值
        }

        /**
         * 箭头函数,javascript中函数的语法糖, 简化了函数的书写
         */
        {
            let a = function (m, n) {
                return m+n;
            }
            console.log(a(1, 2));   // 3

            a = (m, n) => m+n;
            console.log(a(1, 2));   // 3
        }

        /**
         * 箭头函数中this的指向
         */
        {
            let people = {
                walk: function () {
                    console.log(this);  // people
                },
                walkIn: function () {
                    setTimeout(function () {
                        console.log("walkIn");
                        console.log(this);   // window
                    }, 100);
                },
                walkInArrow: function () {
                    setTimeout(() => {
                        console.log("walkInArrow");
                        console.log(this);  // people
                    }, 200)
                },
                walkInArrow2: () => {
                    setTimeout(() => {
                        console.log("walkInArrow2");
                        console.log(this);  // window
                    }, 300)
                }
            }
            people.walk();
            people.walkIn();
            people.walkInArrow();
            people.walkInArrow2();
        }

        /**
         * 函数参数默认值
         */
        {
            let fun1 = function (value) {
                value = value || "defaultValue";
                console.log(value);
            }
            fun1(123);  // 123
            fun1(); // defaultValue

            fun1 = function (value="defaultValue") {
                console.log(value);
            }
            fun1(123);  // 123
            fun1(); // defaultValue
        }

        /**
         * 装箱与拆箱
         */
        {
            let fun1 = function (...args) {
                for (let arg of args){
                    console.log(arg);
                }
            }
            fun1(1, 2, 3);  // 1 2 3

            fun1 = function (x, y, z) {
                return x+y+z;
            }
            console.log(fun1(...[1, 2, 3]));    // 6

            let arr1 = [1, 2, 3];
            let arr2 = [4, 5, 6];
            let arr3 = [...arr1, ...arr2];
            console.log(arr3);  // [1, 2, 3, 4, 5, 6]
        }

        /**
         * 解构赋值
         */
        {
            let [name, age, sex] = ["tom", 18, "male"];
            console.log("name="+name+", age="+age+", sex="+sex);   // name=tom, age=18, sex=male

            let {name: name2, age: age2, sex: sex2} = {name: "alice", age: 20, sex: "female"};
            console.log("name2="+name2+", age2="+age2+", sex2="+sex2);  // name=alice, age=20, sex=female
        }

        /**
         * 字符串拼接
         */
        {
            let name = 'tom';
            let sex = 'male';
            let age = 18;
            console.log(`name=${name}, sex=${sex}, age=${age}`);    // name=tom, sex=male, age=18
        }

        /**
         * 类
         */
        class Animal{
            constructor(name, age){
                this.name = name;
                this.age = age;
            }

            self_introduce(){
                console.log(`My name is ${this.name}, and I'm ${this.age} years old.`);
            }

            static getClassName(){
                return "Animal";
            }
        }

        {
            let animal = new Animal('tom', 18);
            animal.self_introduce();    // My name is tom, and I'm 18 years old.
            console.log(Animal.getClassName()); // Animal
        }

        class People extends Animal{
            constructor(name, age, language){
                super(name, age)
                this.language = language;
            }

            self_introduce(){
                super.self_introduce();
                console.log(`And I speak ${this.language}.`);
            }
        }

        {
            let people = new People("alice", 20, "chinese");
            people.self_introduce();    // My name is alice, and I'm 20 years old.
                                        // And I speak chinese.
        }
    </script>