ES6+新特性概述

ECMAScript 2015(ES6)是JavaScript语言的重大更新,引入了许多新特性,使JavaScript更加强大和易用。随后每年的ES版本都带来了更多改进。

ES6+ 主要特性

变量声明: let和const代替var,解决作用域和常量问题

箭头函数: 简洁的函数语法,自动绑定this

模板字符串: 多行字符串和字符串插值

解构赋值: 从数组或对象中提取值

模块化: import和export语法

Promise: 更好的异步编程解决方案

ES版本时间线

版本 发布年份 主要特性
ES5 2009 严格模式、JSON支持、数组方法
ES6 (ES2015) 2015 let/const、箭头函数、类、模块等
ES2016 2016 数组includes()、指数运算符
ES2017 2017 async/await、Object.values/entries
ES2018 2018 异步迭代、Promise.finally、Rest/Spread属性
ES2019 2019 数组flat()/flatMap()、Object.fromEntries()
ES2020 2020 可选链操作符、空值合并运算符、BigInt
ES6+ 代码示例对比

比较ES5和ES6+的代码写法差异:

ES5 vs ES6+ 对比
// ES5写法
var name = "张三";
var age = 25;

function greet(name, age) {
  return "Hello, " + name + ", you are " + age + " years old.";
}

var result = greet(name, age);

// ES6+写法
const name = "张三";
let age = 25;

const greet = (name, age) => `Hello, ${name}, you are ${age} years old.`;

const result = greet(name, age);

let与const

ES6引入了let和const关键字,解决了var声明的变量提升和函数作用域问题,提供了块级作用域。

let与const示例
// var的问题 - 函数作用域和变量提升
function varExample() {
  if (true) {
    var x = 10;
    var y = 20;
  }
  console.log(x); // 10 - var没有块级作用域
  console.log(y); // 20
}

// let - 块级作用域
function letExample() {
  if (true) {
    let x = 10;
    const y = 20;
    // y = 30; // 错误: const声明的常量不能重新赋值
  }
  // console.log(x); // 错误: x未定义 - let有块级作用域
  // console.log(y); // 错误: y未定义
}

// const - 声明常量
const PI = 3.14159;
// PI = 3.14; // 错误: 常量不能重新赋值

// const与对象/数组
const person = {
  name: "张三",
  age: 25
};

// 可以修改对象的属性
person.age = 26; // 允许
person.city = "北京"; // 允许

// 但不能重新分配对象
// person = { name: "李四" }; // 错误

// 临时死区 (Temporal Dead Zone)
// console.log(myVar); // 错误: 不能访问未声明的变量
// console.log(myLet); // 错误: 不能在声明前访问let变量
let myLet = 5;
let与const演示

尝试在下面的控制台中测试let和const的行为:

运行结果将显示在这里...

箭头函数

箭头函数提供了一种更简洁的函数写法,并且不绑定自己的this、arguments、super或new.target。

箭头函数示例
// 传统函数
function add(a, b) {
  return a + b;
}

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

// 简化形式 (单个表达式)
const add = (a, b) => a + b;

// 单个参数可以省略括号
const square = x => x * x;

// 无参数需要括号
const getRandom = () => Math.random();

// 返回对象需要括号包裹
const createUser = (name, age) => ({
  name: name,
  age: age,
  isAdult: age >= 18
});

// this绑定 - 传统函数的问题
function Person() {
  this.age = 0;
  
  set