ES5 和 ES6 的区别

JavaScript 是一种具有动态特性和面向对象特性的脚本语言。它会在 Web 应用程序中体现出许多特性和方便，同时也逐渐成为了服务器端编程的语言。ES5 和 ES6（ES2015）是 JavaScript 的两个重要版本。下面将介绍它们之间的区别。

1. 变量声明

var 和 let、const 的区别

在 ES5 中，变量只能通过 var 关键字进行声明，var 声明的变量作用域为整个函数，不管它在哪被声明，都会被提升至函数顶部。

function test() {
  console.log(a); // 输出 undefined
  var a = 1;
  console.log(a); // 输出 1
}
test();

而在 ES6 中，除了 var 外，还新增了 let 和 const 关键字，它们具有块级作用域（即只在 {} 内有效）。

function test() {
  console.log(a); // 报错 ReferenceError: Cannot access 'a' before initialization
  let a = 1;
  console.log(a); // 输出 1
}
test();

let 和 const 的作用域规则与 var 不同，不会被提升，必须在声明后才能使用。同时，const 声明的为常量，一旦赋值便不能被修改。

变量解构赋值

在 ES6 中，新增了一种方便的语法叫做“变量解构赋值”，可以很方便地将数组或对象的属性取出并赋值给变量。

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

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

2. 函数

箭头函数

在 ES6 中，新增了一种箭头函数（Arrow Functions）的语法，可以极大地简化函数定义的写法。

// ES5 中的函数定义
var fn = function(a, b) {
  return a + b;
};

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

除了语法简化外，箭头函数还具有以下特点：

• 箭头函数的 this 值固定，在定义它的上下文环境绑定的 this 对象
• 箭头函数不能当做构造函数使用，即不能使用 new 关键字
• 箭头函数没有 arguments 对象，可以使用 rest 参数代替

rest 参数

在 ES6 中，新增了 rest 参数，可以将它用于获取函数传递的不定参数列表，它是一个数组。

function fn(a, b, ...c) {
  console.log(a); // 输出 1
  console.log(b); // 输出 2
  console.log(c); // 输出 [3, 4, 5]
}

fn(1, 2, 3, 4, 5);

默认参数

在 ES6 中，函数的参数列表支持默认值，当调用时省略了该参数时，就会使用默认值，否则使用传入的值。

// ES5 中实现默认值
function fn(a, b) {
  a = typeof a !== 'undefined' ? a : 1;
  b = typeof b !== 'undefined' ? b : 2;
}

// ES6 中实现默认值
function fn(a = 1, b = 2) {
  console.log(a); // 输出 1
  console.log(b); // 输出 2
}

fn(); // 不传递参数

3. 类

在 ES6 中，新增了类的概念，可以直接使用 class 关键字定义类，它具有以下特点：

• 类的构造函数使用 constructor 来定义
• 类中的属性和方法都定义在类的原型上，使得对象间共享这些属性和方法
• 类的继承使用 extends 关键字，子类中必须调用 super() （表示调用父类的构造函数），不然会报错

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const d = new Dog('Mitzie');
d.speak(); // 输出 "Mitzie barks."

4. 模块

ES6 将模块作为了一级标准特性，引入了 import 和 export 关键字，可以很方便地将模块内部的代码导出给其他模块使用（也可以导入其他模块的代码）。

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

// 导出一个变量
export const PI = 3.14;

// 导入某个模块
import { test, PI } from './test.js';

总结

ES6 引入了很多新的语法和概念，包括 let、const、箭头函数、rest 参数、默认参数、类、模块等等，这些特性在开发中简化了代码的实现并提高了开发效率。当然，ES5 也是一个重要的版本，许多应用还需要兼容 ES5，因此对这两个版本的了解和掌握对于开发者们来说都是必要的。