ES6入门教程

小蓝 • 2024-12-15 16:28 • 编程

一、let和const关键字

ES6 新增了两个声明变量的关键字：let 和 const。

let 关键字声明的变量作用域是块范围，相当于局部变量；

const 声明的变量也是块级作用域，用来声明常量，声明后不可更改。

    
        //let关键字的使用
        let x = 1;
        if(true) {
            let x = 2;
        }
        console.log(x); //输出1

        //const关键字的使用
        const y = 3;
        y = 4; //Assignment to constant variable

二、箭头函数

箭头函数是 ES6 中新增的一种函数表达式，可以简化函数的写法。它最常用的场景就是简化回调函数的写法。

在箭头函数中，this指向词法作用域，而不是执行作用域。

    
        //ES5方法定义
        var sum = function(a, b) {
            return a + b;
        }

        //ES6箭头函数
        let sum = (a, b) => {
            return a + b;
        }

        //简化写法
        let sum = (a, b) => a + b;

三、模板字符串

模板字符串是一种可以包含变量和表达式的字符串。在字符串开头使用反引号，插入变量时使用${}。

    
        let name = 'John';
        let age = 20;
        console.log(`My name is ${name}, I am ${age} years old.`);

四、解构赋值

解构赋值可以将数组或对象中的值，赋值给变量。可以用于简化代码的书写。

    
        //数组解构赋值
        let [x, y, z] = [1, 2, 3];
        console.log(x, y, z); //输出1 2 3

        //对象解构赋值
        let {name, age} = {name: 'John', age: 20};
        console.log(name, age); //输出John 20

五、展开运算符

展开运算符可以将数组或对象中的值展开，逐个作为独立的参数传入函数或构造对象。

    
        //展开数组
        let arr1 = [1, 2, 3];
        let arr2 = [...arr1, 4, 5, 6];
        console.log(arr2); //输出[1, 2, 3, 4, 5, 6]

        //展开对象
        let obj1 = {name: 'John', age: 20};
        let obj2 = {...obj1, sex: 'male'};
        console.log(obj2); //输出{name: 'John', age: 20, sex: 'male'}

六、类与继承

ES6 的 class 关键字可以轻松定义类及其成员函数和属性。

    
        //定义类
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            //定义成员函数
            getDetails() {
                return `My name is ${this.name}, I am ${this.age} years old.`;
            }
        }

        //定义继承Person类的Student类
        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age); //调用父类的构造函数
                this.grade = grade;
            }

            //重写父类的成员函数
            getDetails() {
                return `${super.getDetails()} I am studying in grade ${this.grade}.`
            }
        }

        let person1 = new Person('John', 20);
        console.log(person1.getDetails()); //输出My name is John, I am 20 years old.

        let student1 = new Student('Mike', 18, 5);
        console.log(student1.getDetails()); //输出My name is Mike, I am 18 years old. I am studying in grade 5.

以上就是 ES6 入门教程的主要内容。通过学习以上内容，我们可以更加轻松地编写优雅的 JavaScript 代码。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/259300.html