摘要：ES5（ECMAScript 5）和ES6（ECMAScript 2015）是JavaScript的两个重要版本，ES6在ES5的基础上引入了许多新特性，显著提升了开发效率和代码可读性。以下是两者的对比总结：
ES5（ECMAScript 5）和ES6（ECMAScript 2015）是JavaScript的两个重要版本，ES6在ES5的基础上引入了许多新特性，显著提升了开发效率和代码可读性。以下是两者的对比总结：
1. 变量声明
ES5：使用 var，存在变量提升（变量声明提升到作用域顶部）和函数作用域。javascript
var x = 10;
ES6：引入 let 和 const，支持块级作用域，避免变量提升问题。javascript
let a = 1;
const PI = 3.14; // 常量不可变
2. 箭头函数
ES6：简化函数语法，自动绑定外层 this，适合回调函数。javascript
const add = (a, b) => a + b;
ES5：需显式处理 this（如 bind 或 var that = this）。javascript
function add(a, b) { return a + b; }
3. 模板字符串
ES6：用反引号 ` 包裹，支持多行字符串和变量嵌入（${}）。javascript
const name = "Alice";
console.log(`Hello, ${name}!`);
ES5：字符串拼接繁琐。javascript
console.log("Hello, " + name + "!");
4. 解构赋值
ES6：直接从数组/对象提取值。javascript
const [a, b] = [1, 2]; // 数组解构
const { name, age } = person; // 对象解构
ES5：需逐个赋值。javascript
var a = arr[0], b = arr[1];
5. 默认参数值
ES6：函数参数直接设置默认值。javascript
function greet(name = "Guest") { /* ... */ }
ES5：需手动检查参数。javascript
function greet(name) {
name = name || "Guest";
}
6. 类与继承
ES6：class、constructor、extends、super 简化面向对象。javascript
class Person {
constructor(name) { this.name = name; }
}
class Student extends Person {
constructor(name, grade) { super(name); this.grade = grade; }
}
ES5：基于原型链。javascript
function Person(name) { this.name = name; }
function Student(name, grade) {
Person.call(this, name);
this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
7. 模块化
ES6：原生支持 import/export。javascript
// 导出
export const api = "https://example.com";
// 导入
import { api } from './config';
ES5：依赖CommonJS或AMD（如Node.js的 require）。javascript
// 导出
module.exports = { api: "https://example.com" };
// 导入
const config = require('./config');
8. Promise
ES6：原生支持异步操作链式调用。javascript
fetch(url)
.then(response => response.json)
.catch(error => console.log(error));
ES5：依赖回调或第三方库（如Q、Bluebird）。javascript
asyncFunction(function(result) { /* ... */ }, handleError);
9. 新数据结构
ES6：引入 Map、Set、WeakMap、WeakSet。javascript
const map = new Map;
map.set("key", "value");
ES5：用对象模拟，但键只能是字符串。10. 展开/剩余运算符
ES6：... 用于数组合并、函数参数收集等。javascript
const arr = [...arr1, ...arr2];
const sum = (...args) => args.reduce((a, b) => a + b);
总结
ES6 解决了 ES5 的痛点（如作用域、异步、语法冗余），引入了现代语言特性（类、模块、箭头函数等）。兼容性：ES6需通过Babel等工具转译为ES5以支持旧浏览器。性能：现代浏览器对ES6优化更好，建议在新项目中使用ES6+。来源：老客数据一点号
