ES6 语法完全使用手册，速成你的 JavaScript 技能

2023-11-14 04:07:51

ES6，即 ECMAScript 2015，是 JavaScript 语言的最新版本，它于 2015 年 6 月发布，带来了许多新特性和改进，使 JavaScript 语言更加强大和灵活。

本文将带你领略 ES6 的方方面面，从基础语法到高级用法，应有尽有。无论你是刚入门的新手，还是经验丰富的开发人员，都能从中受益匪浅。

基础语法

变量声明

在 ES6 中，可以使用 let 和 const 来声明变量。let 声明的变量可以重新赋值，而 const 声明的变量则不能重新赋值。

let name = 'John Doe';
name = 'Jane Doe'; // 允许

const age = 30;
age = 31; // 不允许

箭头函数

箭头函数是 ES6 中的一种新函数语法。它比传统函数更简洁，而且不需要使用 function 关键字。

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

模板字符串

模板字符串是 ES6 中的一种新字符串类型。它允许你在字符串中嵌入变量和表达式。

const name = 'John Doe';
const age = 30;

// 传统字符串
const greeting = 'Hello, ' + name + '! You are ' + age + ' years old.';

// 模板字符串
const greeting = `Hello, ${name}! You are ${age} years old.`;

高级用法

类

ES6 中引入了类，这使得 JavaScript 语言更加面向对象。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

const person = new Person('John Doe', 30);
person.greet(); // 输出：Hello, my name is John Doe and I am 30 years old.

模块

ES6 中引入了模块，这使得 JavaScript 代码可以被组织成更小的、可重用的单元。

// my-module.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './my-module.js';

const result = add(1, 2);
console.log(result); // 输出：3

Promise

ES6 中引入了 Promise，这使得 JavaScript 代码可以更好地处理异步操作。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then(result => {
  console.log(result); // 输出：Hello, world!
});