ES6(ES2015)及之后的标准极大改进了 JavaScript,让它更现代、更易用。这些特性是写现代 JS 的基础。
一、let 与 const
var:函数作用域,有变量提升(已不推荐)let:块级作用域,可重新赋值const:块级作用域,不可重新赋值(默认用它)
原则:默认用const,需要重新赋值才用let,永远别用var。
二、箭头函数
// 传统
const add = function(a, b) { return a + b; };
// 箭头函数
const add = (a, b) => a + b;
const square = x => x * x; // 单参数可省括号
箭头函数没有自己的 this,适合做回调。
三、解构赋值
// 对象解构
const {name, age} = user;
const {name: userName} = user; // 重命名
// 数组解构
const [first, second] = arr;
// 函数参数解构
function greet({name}) { console.log(name); }
四、模板字符串
const msg = `你好,${name},今年 ${age} 岁`;
// 支持多行
const html = `
${content}
`;
五、展开运算符
// 数组展开
const merged = [...arr1, ...arr2];
// 对象展开(ES2018)
const newObj = {...obj1, ...obj2};
// 函数剩余参数
function sum(...nums) { return nums.reduce((a,b)=>a+b, 0); }
六、Promise 与 async/await
// Promise
fetch('/api').then(r => r.json()).then(data => console.log(data));
// async/await(更优雅)
async function getData() {
const r = await fetch('/api');
const data = await r.json();
console.log(data);
}
七、模块化
// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) { return a * b; }
// main.js
import multiply, { add } from './math.js';
八、小结
ES6+ 让 JavaScript 焕然一新。这些特性几乎成了现代 JS 的标配,理解它们是学习 Vue/React 等框架的前提。