JavaScript 进阶：ES6 常用新特性详解

一、ES6 是什么？

ES6（ECMAScript 2015）是 JavaScript 语言的重大更新版本，主流浏览器已全面支持。

二、let 和 const：更规范的变量声明

// var 没有块级作用域，容易出 bug
if (true) { var x = 1; }
console.log(x);  // 1（意外泄露）
// let：块级作用域
if (true) { let y = 2; }
// console.log(y);  // 报错
// const：常量，不能重新赋值
const PI = 3.14159;

建议：默认用 const，需要修改变量时用 let，不再使用 var。

三、模板字符串：更优雅的字符串拼接

const name = '小明';
const msg2 = 我叫${name}，今年${25}岁。;

四、解构赋值：快速从对象取值

const user = { name: '小明', age: 25, city: '北京' };
const { name, city } = user;
console.log(name, city);  // 小明 北京

五、箭头函数：简洁语法

const sum2 = (a, b) => a + b;

// 箭头函数的 this 继承外层，不会乱指
const person = {
  name: '小明',
  sayHi: function() {
    setTimeout(() => {
      console.log(this.name);  // 小明
    }, 1000);
  }
};

六、Promise：处理异步

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('成功！'), 1000);
});
promise.then(result => console.log(result))
  .catch(err => console.error(err));

七、async/await：更简洁的异步

async function fetchData() {
  try {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败：', error);
  }
}

八、模块化：import 和 export

// 导出
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// 导入
import multiply, { PI, add } from './math.js';