ES5 和 ES6 有什么区别 - 前端面试题

ES5（即ECMAScript 5）和ES6（也称为ECMAScript 2015或ECMAScript 6）是JavaScript语言的两个版本，它们之间有许多重要的区别。ES6引入了一系列新特性和语法改进，使得编程更加简洁和强大。以下是一些主要的区别：

1. let 和 const

ES6引入了 let和 const关键字，用于声明变量。let提供了块级作用域，比ES5中的 var提供了更好的控制，尤其是在循环中。const用于声明常量，其值在设置之后不能改变。

例子： 在一个循环中使用 let可以避免常见的闭包问题。

javascript
for (let i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, 1000);
}
// 输出：0, 1, 2, 3, 4 (正确的顺序)

2. 箭头函数（Arrow Functions）

ES6引入了箭头函数，这是一种更简洁的函数写法，同时它也没有自己的 this，arguments，super或 new.target绑定。

例子：

javascript
// ES5
var add = function(a, b) {
  return a + b;
};

// ES6
const add = (a, b) => a + b;

3. 模板字符串（Template Literals）

在ES6中，模板字符串提供了一种构建字符串的新方法，可以使用反引号（ `）来定义，它支持多行字符串和字符串插值。

例子：

javascript
// ES5
var name = "World";
var greeting = "Hello, " + name + "!";

// ES6
const name = "World";
const greeting = `Hello, ${name}!`;

4. 类（Classes）

ES6引入了类的概念，这是一种使用原型继承的语法糖。它使创建对象和继承更加直观和方便。

例子：

javascript
// ES6
class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}!`;
  }
}

const person = new Person('Jane');
console.log(person.greet()); // "Hello, Jane!"

5. 默认参数值

ES6允许函数参数有默认值，这在ES5中通常需要在函数体内部进行处理。

例子：

javascript
// ES6
function greet(name = "World") {
  return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, World!"
console.log(greet("Jane")); // "Hello, Jane!"

6. 解构赋值（Destructuring Assignment）

ES6引入了解构赋值，它允许在单个语句中从数组或对象中提取数据，并设置到新的变量中。

例子：

javascript
// ES6
const [a, b] = [1, 2];
const { firstName, lastName } = { firstName: "John", lastName: "Doe" };
console.log(a); // 1
console.log(firstName); // "John"

7. 模块导入和导出

ES6标准化了模块系统，使用 import和 export语句来导入和导出模块成员。

例子：

javascript
// ES6
// file: math.js
export const add = (a, b) => a + b;

// file: main.js
import { add } from './math';
console.log(add(2, 3)); // 5

8. Promises 和异步编程

ES6引入了Promise作为处理异步操作的一种机制，它比ES5中的回调函数更具可读性和效率。