前端JS: ES6新特性

ES6 核心新特性与示例

1. let 与 const

定义：新的变量声明方式，let声明块级作用域变量，const声明常量（不可重新赋值）。

// let 示例
let x = 10;
if (true) {
  let x = 20; // 不同的变量
  console.log(x); // 20
}
console.log(x); // 10

// const 示例
const PI = 3.14159;
// PI = 3.14; // 报错：不能重新赋值
const user = { name: "Alice" };
user.name = "Bob"; // 允许修改对象属性

2. 箭头函数

定义：使用 =>语法的简洁函数形式，不绑定自己的 this。

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

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

// this 绑定差异
const obj = {
  value: 10,
  traditional: function() {
    setTimeout(function() {
      console.log(this.value); // undefined
    }, 100);
  },
  arrow: function() {
    setTimeout(() => {
      console.log(this.value); // 10
    }, 100);
  }
};

3. 模板字符串

定义：使用反引号（`）定义的字符串，支持多行和嵌入表达式。

const name = "Alice";
const age = 25;

// 传统拼接
const str1 = "姓名：" + name + "，年龄：" + age;

// 模板字符串
const str2 = `姓名：${name}，年龄：${age}`;
const multiLine = `
  第一行
  第二行
  计算结果：${5 + 3}
`;
console.log(str2); // 姓名：Alice，年龄：25

4. 解构赋值

定义：从数组或对象中提取值到变量中的简洁语法。

// 数组解构
const colors = ['red', 'green', 'blue'];
const [first, , third] = colors;
console.log(first, third); // red blue

// 对象解构
const person = { name: 'Bob', age: 30, city: 'Beijing' };
const { name, city } = person;
console.log(name, city); // Bob Beijing

// 默认值
const { phone = '未知' } = person;
console.log(phone); // 未知

5. 默认参数

定义：函数参数可以指定默认值。

function greet(name = "访客", message = "你好") {
  return `${message}，${name}！`;
}

console.log(greet()); // 你好，访客！
console.log(greet("Alice")); // 你好，Alice！
console.log(greet("Bob", "欢迎")); // 欢迎，Bob！

6. 扩展运算符

定义：使用 ...展开可迭代对象。

// 数组合并
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2, 5];
console.log(combined); // [1, 2, 3, 4, 5]

// 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2, e: 5 };
console.log(merged); // {a: 1, b: 2, c: 3, d: 4, e: 5}

// 函数参数
const numbers = [1, 5, 3, 9];
console.log(Math.max(...numbers)); // 9

7. Promise

定义：处理异步操作的标准化方案。

function asyncTask(success) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) {
        resolve("操作成功");
      } else {
        reject("操作失败");
      }
    }, 1000);
  });
}

// 使用
asyncTask(true)
  .then(result => console.log(result)) // 操作成功
  .catch(error => console.error(error));

// 链式调用
asyncTask(true)
  .then(data => data + "！")
  .then(finalData => console.log(finalData)); // 操作成功！

8. 模块化

定义：原生的模块导入导出语法。

// math.js
export const PI = 3.14159;
export function square(x) {
  return x * x;
}
export default function add(a, b) {
  return a + b;
}

// main.js
import add, { PI, square } from './math.js';
console.log(add(2, 3)); // 5
console.log(PI); // 3.14159
console.log(square(4)); // 16

这些特性极大地提升了JavaScript的开发效率和代码可读性，是现代前端开发的基础。