ES6 揭秘：现代 JavaScript 之旅（上）

2023-10-12 17:00:27

ES6 简介

ES6（ECMAScript 2015）是 JavaScript 的重大更新，于 2015 年 6 月正式发布。它引入了许多新特性和改进，使 JavaScript 更加现代、高效和可扩展。ES6 的目标是使 JavaScript 更易于学习、使用和维护，并使其在构建复杂的应用程序方面更加强大。

ES6 常用特性

箭头函数

箭头函数是一种简化的函数语法，它允许您使用更简洁的代码编写函数。箭头函数没有自己的 this ，并且它们始终是匿名的。

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

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

`let` 和 `const`

let 和 const 是两个新的变量声明关键字，用于声明局部变量。let 声明的变量可以在块级作用域内重新赋值，而 const 声明的变量则不能被重新赋值。

// ES5 变量声明
var x = 10;
x = 20; // 重新赋值

// ES6 let 变量声明
let x = 10;
x = 20; // 重新赋值

// ES6 const 变量声明
const x = 10;
x = 20; // 报错，无法重新赋值

模板字符串

模板字符串是一种新的字符串字面量语法，允许您使用嵌入式表达式来创建字符串。模板字符串使用反引号（）而不是双引号或单引号。

// ES5 字符串字面量
var name = "John";
var greeting = "Hello, " + name + "!";

// ES6 模板字符串
const name = "John";
const greeting = `Hello, ${name}!`;

类

类是 ES6 中引入的一种新的数据类型，它允许您创建对象并定义它们的属性和方法。类使用 class 关键字声明。

// ES5 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

模块

模块是 ES6 中引入的一种新的组织代码的方式。模块使用 module 关键字声明。模块可以导入和导出其他模块。

// ES5 模块
var moduleA = (function () {
  var privateVariable = 10;

  function privateMethod() {
    console.log("This is a private method.");
  }

  return {
    publicVariable: 20,
    publicMethod: function () {
      console.log("This is a public method.");
    },
  };
})();

// ES6 模块
export const publicVariable = 20;

export function publicMethod() {
  console.log("This is a public method.");
}