一、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 代码。