JavaScript ES6+ 新特性学习笔记

ES6 (ES2015) 主要特性

1. let 和 const

// let - 块作用域变量
if (true) {
  let x = 1;
  console.log(x); // 1
}
// console.log(x); // ReferenceError

// const - 块作用域常量
const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable

// const 对象可以修改属性
const obj = { name: "JavaScript" };
obj.name = "ES6"; // 允许
// obj = {}; // 不允许

2. 箭头函数

// 传统函数
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 greet = () => "Hello";

// 箭头函数的 this 绑定
const obj = {
  name: "JavaScript",
  traditional: function() {
    console.log(this.name); // "JavaScript"
  },
  arrow: () => {
    console.log(this.name); // undefined (this 指向外层作用域)
  }
};

TIP

箭头函数没有自己的 this，它会继承外层作用域的 this。

3. 模板字符串

const name = "JavaScript";
const version = "ES6";

// 传统字符串拼接
const message1 = "欢迎学习 " + name + " " + version;

// 模板字符串
const message2 = `欢迎学习 ${name} ${version}`;

// 多行字符串
const multiLine = `
  第一行
  第二行
  第三行
`;

// 表达式计算
const a = 10;
const b = 20;
const result = `a + b = ${a + b}`; // "a + b = 30"

4. 解构赋值

数组解构

// 基本解构
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1, 2, 3

// 跳过元素
const [first, , third] = [1, 2, 3];
console.log(first, third); // 1, 3

// 默认值
const [x = 0, y = 0] = [1];
console.log(x, y); // 1, 0

// 剩余元素
const [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail); // 1, [2, 3, 4]

对象解构

const person = {
  name: "JavaScript",
  age: 25,
  city: "Web"
};

// 基本解构
const { name, age } = person;
console.log(name, age); // "JavaScript", 25

// 重命名
const { name: personName, age: personAge } = person;
console.log(personName, personAge); // "JavaScript", 25

// 默认值
const { name, age, country = "China" } = person;
console.log(country); // "China"

// 嵌套解构
const user = {
  name: "John",
  address: {
    city: "Beijing",
    zip: "100000"
  }
};
const { address: { city } } = user;
console.log(city); // "Beijing"

5. 扩展运算符（Spread Operator）

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

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

// 函数参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

6. 类（Class）

// ES6 类语法
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  
  // 静态方法
  static create(name, age) {
    return new Person(name, age);
  }
}

const person = new Person("JavaScript", 25);
console.log(person.greet()); // "Hello, I'm JavaScript"

// 继承
class Developer extends Person {
  constructor(name, age, language) {
    super(name, age);
    this.language = language;
  }
  
  code() {
    return `${this.name} codes in ${this.language}`;
  }
}

const dev = new Developer("John", 30, "JavaScript");
console.log(dev.greet()); // "Hello, I'm John"
console.log(dev.code()); // "John codes in JavaScript"

7. 模块化（Modules）

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

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

console.log(PI); // 3.14159
console.log(add(1, 2)); // 3
console.log(multiply(2, 3)); // 6

8. Promise

// Promise 基本用法
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 1000);
});

promise.then(result => {
  console.log(result); // "成功"
});

ES2017+ 新特性

async/await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

对象方法简写

const obj = {
  // ES6 之前
  name: "JavaScript",
  greet: function() {
    return "Hello";
  },
  
  // ES6 简写
  greet() {
    return "Hello";
  }
};

可选链操作符（ES2020）

const user = {
  name: "John",
  address: {
    city: "Beijing"
  }
};

// 传统方式
const city = user && user.address && user.address.city;

// 可选链
const city = user?.address?.city;

// 方法调用
const result = user?.getName?.();

空值合并操作符（ES2020）

// 传统方式
const value = user.name || "默认值";

// 空值合并（只对 null 和 undefined 生效）
const value = user.name ?? "默认值";

console.log(0 ?? "默认值"); // 0
console.log(null ?? "默认值"); // "默认值"
console.log(undefined ?? "默认值"); // "默认值"

数组方法增强

// Array.find()
const arr = [1, 2, 3, 4, 5];
const found = arr.find(item => item > 3);
console.log(found); // 4

// Array.findIndex()
const index = arr.findIndex(item => item > 3);
console.log(index); // 3

// Array.includes()
console.log(arr.includes(3)); // true

// Array.flat() (ES2019)
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6]

总结

ES6+ 为 JavaScript 带来了许多现代化特性，让代码更加简洁、易读、易维护。主要特性包括：

• let 和 const - 更好的变量声明
• 箭头函数 - 简洁的函数语法
• 模板字符串 - 更好的字符串处理
• 解构赋值 - 便捷的数据提取
• 扩展运算符 - 灵活的数组和对象操作
• 类语法 - 面向对象编程
• 模块化 - 代码组织和管理
• Promise 和 async/await - 异步编程