ES6+ 和 ES5 的区别是什么？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 语法增强

ES6+ 引入了许多新的语法特性，使得代码更加简洁和易读。例如：

箭头函数：const add = (a, b) => a + b;
模板字符串：const name = 'World'; console.log(Hello, ${name}!);
解构赋值：const { x, y } = { x: 1, y: 2 };
默认参数：function greet(name = 'World') { console.log(Hello, ${name}!); }
rest 参数：function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); }
扩展运算符：const arr = [1, 2, 3]; const newArr = [...arr, 4, 5];

2. 块级作用域

ES6+ 引入了 let 和 const 关键字，提供了块级作用域，解决了 ES5 中只有函数作用域和全局作用域的问题。例如：

if (true) {
  let x = 10;
  const y = 20;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

3. 类和模块

ES6+ 引入了 class 和 import/export 语法，支持面向对象编程和模块化开发。例如：

// www.javascriptcn.com code example
// ES6+ 类
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

// ES6+ 模块
// module.js
export const add = (a, b) => a + b;

// main.js
import { add } from './module.js';
console.log(add(1, 2)); // 3

4. 异步编程

ES6+ 引入了 Promise 和 async/await，简化了异步编程。例如：

// www.javascriptcn.com code example
// Promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data fetched'), 1000);
  });
};

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

// async/await
const fetchDataAsync = async () => {
  const data = await fetchData();
  console.log(data);
};

fetchDataAsync();

5. 新的数据结构

ES6+ 引入了 Map、Set、WeakMap、WeakSet 等新的数据结构。例如：

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

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

6. 函数增强

ES6+ 支持默认参数、rest 参数、箭头函数等，简化了函数的定义和使用。例如：

// www.javascriptcn.com code example
// 默认参数
function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

// rest 参数
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

// 箭头函数
const add = (a, b) => a + b;

7. 对象和数组增强

ES6+ 提供了对象和数组的解构赋值、扩展运算符等特性。例如：

// www.javascriptcn.com code example
// 对象解构
const { x, y } = { x: 1, y: 2 };
console.log(x, y); // 1 2

// 数组解构
const [a, b] = [1, 2];
console.log(a, b); // 1 2

// 扩展运算符
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]

8. 迭代器和生成器

ES6+ 引入了迭代器和生成器，提供了更灵活的遍历方式。例如：

// www.javascriptcn.com code example
// 迭代器
const iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 3) {
          return { value: step, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

// 生成器
function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

ES6+ 和 ES5 的区别是什么？

推荐答案