es6语法

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>

猜你喜欢

转载自www.cnblogs.com/lst619247/p/8945543.html