ES5 和 ES6 的主要区别ES5（ECMAScript 5）和 ES6（ECMAScript 2015）是 Java

ES5（ECMAScript 5）和 ES6（ECMAScript 2015）是 JavaScript 的两个重要版本，它们在语言特性、语法和功能方面有很多不同。ES6 是 ES5 的一个重大更新，引入了许多新特性，使得 JavaScript 的编程变得更加简洁和强大。

以下是 ES5 和 ES6 的主要区别：

1. 变量声明

ES5: 只支持使用 var 声明变量。
```
var name = "John";
```
var 在 ES5 中存在变量提升（hoisting）问题，可能导致意外的行为，并且作用域仅限于函数或全局范围。
ES6: 引入了 let 和 const 关键字，用于声明变量。
- let：块级作用域变量，解决了 var 的作用域问题。
- const：用于声明常量，一旦赋值后不能修改。
```
let age = 30;
const city = "New York";
```

2. 箭头函数

ES5: 使用 function 关键字定义函数。

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

ES6: 引入了箭头函数（Arrow Functions），使得函数更加简洁，并且没有自己的 this，它会继承外部函数的 this。
```
const add = (a, b) => a + b;
```

3. 类（Class）

ES5: 使用构造函数和原型链实现面向对象编程。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

ES6: 引入了 class 关键字，简化了面向对象编程的语法。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log('Hello, ' + this.name);
    }
}

4. 模板字符串

ES5: 字符串拼接需要使用 +。

var name = "John";
var greeting = "Hello, " + name + "!";

ES6: 引入了模板字符串（Template Literals），通过反引号（`）可以轻松插入变量，支持多行字符串。
```
const name = "John";
const greeting = `Hello, ${name}!`;
```

5. 解构赋值

ES5: 没有解构赋值的概念，通常通过索引或对象属性来获取值。

var person = { name: "John", age: 30 };
var name = person.name;
var age = person.age;

ES6: 引入了解构赋值，可以直接从对象或数组中提取值。

const person = { name: "John", age: 30 };
const { name, age } = person;

const numbers = [1, 2, 3];
const [first, second] = numbers;

6. 默认参数值

ES5: 默认参数值需要通过条件判断来实现。

function greet(name) {
    name = name || "Guest";
    console.log("Hello, " + name);
}

ES6: 可以为函数参数指定默认值。

function greet(name = "Guest") {
    console.log(`Hello, ${name}`);
}

7. Promise

ES5: 没有原生的异步处理机制，通常使用回调函数来处理异步任务。

function fetchData(callback) {
    setTimeout(function() {
        callback("Data fetched");
    }, 1000);
}
fetchData(function(data) {
    console.log(data);
});

ES6: 引入了 Promise，提供了一种更好的方式来处理异步操作。

const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data fetched");
    }, 1000);
});

fetchData.then(data => console.log(data));

8. 模块化

ES5: 没有内建的模块化机制，通常使用第三方工具（如 CommonJS 或 AMD）来实现。

ES6: 引入了 import 和 export 语法，原生支持模块化。

// module.js
export const greet = name => `Hello, ${name}`;

// main.js
import { greet } from './module.js';
console.log(greet("John"));

9. Set 和 Map

ES5: 没有原生的 Set 和 Map 数据结构，通常使用数组和对象来模拟。

ES6: 引入了 Set（唯一值的集合）和 Map（键值对集合）。

const set = new Set([1, 2, 3, 3]);
set.add(4);
console.log(set); // Set { 1, 2, 3, 4 }

const map = new Map();
map.set("key", "value");
console.log(map.get("key")); // value

10. Symbol

ES5: 没有 Symbol 类型，所有属性和键名都是字符串。

ES6: 引入了 Symbol 类型，表示唯一的标识符，常用于对象的属性名。

const mySymbol = Symbol('description');
const obj = { [mySymbol]: "value" };
console.log(obj[mySymbol]); // value

总结

ES6 引入了许多新的特性，使 JavaScript 编程更加现代化，代码更加简洁和易于维护。
ES5 提供了基本的语言功能，而 ES6 在此基础上进行了许多改进，特别是在面向对象编程、异步处理和模块化等方面。