ES6-收藏

ES6 是 ECMAScript 2015 标准的通用名称，是 JavaScript 语言的下一个版本。它包含了一些新的语法结构和新的 API，使得 JavaScript 语言更加现代化、功能更加强大。下面介绍一些 ES6 中比较常用的新特性。

let 和 const 声明变量

ES6 引入了两个新的声明变量的关键字：let 和 const。let 声明变量的作用域是块级作用域，const 声明的变量是常量，一旦声明不可被修改。

// 用 let 声明变量
let name = 'Alice';
if (true) {
  let name = 'Bob';
  console.log(name); // 输出 'Bob'
}
console.log(name); // 输出 'Alice'

// 用 const 声明常量
const PI = 3.1415;
PI = 3.14; // 报错，常量不可修改

模板字符串

ES6 中引入了模板字符串，可以通过反引号和 ${} 插值语法来方便地拼接字符串。

let name = 'Bob';
console.log(`Hello, ${name}!`); // 输出 'Hello, Bob!'

解构赋值

ES6 中可以使用解构赋值语法，按照一定的模式从数组和对象中提取值并赋值给变量。

// 数组解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3

// 对象解构赋值
let {x, y, z} = {x: 1, y: 2, z: 3};
console.log(x); // 输出 1
console.log(y); // 输出 2
console.log(z); // 输出 3

箭头函数

ES6 中引入了箭头函数，可以用更短的语法实现函数的定义。箭头函数总是匿名的，不能通过 new 关键字来调用。

// 传统的函数定义方式
function hello(name) {
  console.log(`Hello, ${name}!`);
}

// 箭头函数
let hello = (name) => {
  console.log(`Hello, ${name}!`);
};

类和对象

ES6 中引入了 class 和 extends 关键字，可以更方便地定义类和继承关系。

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

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

// 继承
class Student extends Person{
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

let alice = new Person('Alice', 20);
alice.hello(); // 输出 'Hello, my name is Alice, and I'm 20 years old.'

let bob = new Student('Bob', 18, 7);
bob.hello(); // 输出 'Hello, my name is Bob, and I'm 18 years old.'
bob.study(); // 输出 'Bob is studying in grade 7.'

模块化

ES6 中引入了 import 和 export 关键字，可以更方便地实现模块化编程。

// module.js
export function hello(name) {
  console.log(`Hello, ${name}!`);
}

// main.js
import { hello } from './module.js';
hello('Alice'); // 输出 'Hello, Alice!'

以上就是 ES6 中比较常用的一些新特性。在实际开发中，熟练掌握 ES6 可以提高开发效率，使得代码更加清晰、易读、易维护。