ES6变革的18年沉淀：从var到let，JS蜕变的里程碑

2023-10-03 16:22:26

十八年，足够让一个懵懂少年成长为成熟大人；十八年，也足够让一门编程语言完成一次涅槃重生。从var到let，JavaScript用整整十八年时间，走完了自己从稚嫩到成熟的蜕变之路。

JavaScript诞生于1995年，它最初被设计为一种简单的脚本语言，旨在为网页增添交互性和动态性。然而，随着互联网的飞速发展，JavaScript逐渐成为一种强大的编程语言，被广泛应用于Web开发、移动开发、桌面应用开发等各个领域。

在JavaScript的发展历程中，var一直是变量声明的唯一方式。var声明的变量具有全局作用域或函数作用域，这使得代码的可读性和可维护性大大降低。为了解决这个问题，ES6引入了let和const两种新的变量声明方式。

let声明的变量只在声明所在的块级作用域内有效，这使得代码更加清晰易懂。const声明的变量是只读的，一旦被赋值就不能再被修改。这可以有效防止变量被意外修改，提高代码的安全性。

除了变量声明方式的改变，ES6还引入了许多其他新特性，包括箭头函数、模板字符串、解构赋值、扩展运算符、剩余参数、Symbol、类、模块、导入、导出、Promise、async/await、生成器、迭代器、for…of循环、Map、Set、WeakMap和WeakSet等。

这些新特性的引入，使得JavaScript的代码更加简洁、高效和易于维护。同时，也使得JavaScript能够更好地与其他编程语言集成，扩展了JavaScript的应用领域。

时至今日，ES6已经成为JavaScript开发的标准。如果你还在使用var声明变量，那么是时候拥抱let和const了。如果你还没有使用过ES6的其他新特性，那么赶紧去学习一下吧。ES6将带你进入一个全新的JavaScript世界。

ES6新特性的详细介绍

箭头函数

箭头函数是ES6中引入的一种新的函数语法。箭头函数的写法更加简洁，而且不需要使用function。箭头函数可以作为普通函数使用，也可以作为回调函数使用。

// 普通函数
function sum(a, b) {
  return a + b;
}

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

// 回调函数
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

模板字符串

模板字符串是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中引入的一种新的赋值语法。解构赋值可以将数组或对象中的元素赋值给多个变量。

// 普通赋值
const numbers = [1, 2, 3];
const firstNumber = numbers[0];
const secondNumber = numbers[1];
const thirdNumber = numbers[2];

// 解构赋值
const [firstNumber, secondNumber, thirdNumber] = numbers;

扩展运算符

扩展运算符是ES6中引入的一种新的运算符。扩展运算符可以将数组或对象中的元素展开，并将其作为参数传递给函数。

// 普通函数调用
const numbers = [1, 2, 3];
const sum = Math.max(...numbers);

// 展开运算符
const sum = Math.max(1, 2, 3);

剩余参数

剩余参数是ES6中引入的一种新的参数语法。剩余参数可以接收函数中所有剩余的参数，并将其存储在一个数组中。

// 普通函数
function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

// 剩余参数
const sum = (...numbers) => {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
};

Symbol

Symbol是ES6中引入的一种新的数据类型。Symbol值是唯一的，不能被复制或伪造。Symbol值通常用于作为对象的属性名，以防止属性名冲突。

// 创建Symbol值
const mySymbol = Symbol('mySymbol');

// 使用Symbol值
const obj = {};
obj[mySymbol] = 'Hello, world!';

类

类是ES6中引入的一种新的语法结构。类可以用来创建对象，并且可以继承其他类。

// 定义类
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();

模块

模块是ES6中引入的一种新的组织代码的方式。模块可以将代码分成多个文件，并可以互相导入导出。

// 创建模块
export const name = 'John Doe';
export const age = 30;

// 导入模块
import { name, age } from './person.js';

导入

导入语句用于将其他模块的代码导入到当前模块。

// 导入模块
import { name, age } from './person.js';

导出

导出语句用于将当前模块的代码导出，以便其他模块可以导入。

// 导出变量
export const name = 'John Doe';
export const age = 30;

// 导出函数
export function greet() {
  console.log('Hello, world!');
}

Promise

Promise是ES6中引入的一种新的异步编程方式。Promise可以表示一个异步操作的结果，并且可以被链式调用。

// 创建Promise
const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

// 链式调用
promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await是ES6中引入的一种新的异步编程语法。async/await可以使异步代码看起来像同步代码一样。

// async函数
async function greet() {
  // 模拟异步操作
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, world!');
    }, 1000);
  });

  console.log(result);
}

// 调用async函数
greet();

生成器

生成器是ES6中引入的一种新的函数类型。生成器函数可以生成一个值序列，并且可以暂停和恢复执行。

// 生成器函数
function* generateNumbers() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

// 调用生成器函数
const generator = generateNumbers();

// 获取生成器函数