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