ECMAScript 6 完全入门教程：从基础到实战

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 块级作用域
{
  let a = 1;
  console.log(a); // 1
}
// console.log(a); // ReferenceError

// 循环中的 let
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2
  }, 100);
}

// 暂时性死区
console.log(x); // ReferenceError
let x = 1;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 基本常量
const PI = 3.14159;
// PI = 3.14; // TypeError

// 对象常量
const obj = { name: "Tom" };
obj.name = "Jerry"; // 可以修改属性
obj.age = 20; // 可以添加属性
// obj = {}; // TypeError，不能重新赋值

// 数组常量
const arr = [1, 2, 3];
arr.push(4); // 可以修改数组
// arr = []; // TypeError

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 基本语法
const add = (a, b) => {
  return a + b;
};

// 简化形式
const multiply = (a, b) => a * b;

// 单参数
const square = (x) => x * x;

// 无参数
const greet = () => console.log("Hello");

// this 绑定
const obj = {
  name: "Tom",
  getName: function () {
    setTimeout(() => {
      console.log(this.name); // Tom，箭头函数继承外层 this
    }, 100);
  },
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 基本默认参数
function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest
greet("Tom"); // Hello, Tom

// 表达式默认值
function createUser(name, age = 18, active = true) {
  return { name, age, active };
}

// 函数调用作为默认值
function getDefaultValue() {
  return 10;
}
function calculate(a, b = getDefaultValue()) {
  return a + b;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 基本用法
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10

// 与其他参数结合
function greet(greeting, ...names) {
  names.forEach((name) => {
    console.log(`${greeting}, ${name}`);
  });
}
greet("Hello", "Tom", "Jerry", "Bob");

// 替代 arguments
function oldWay() {
  const args = Array.from(arguments);
  console.log(args);
}

function newWay(...args) {
  console.log(args);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 基本解构
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]

// 交换变量
let a = 1,
  b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// 基本解构
const user = { name: "Tom", age: 20 };
const { name, age } = user;
console.log(name, age); // Tom, 20

// 重命名
const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Tom, 20

// 默认值
const { name, age, email = "no-email" } = user;
console.log(email); // no-email

// 嵌套解构
const user = {
  name: "Tom",
  address: {
    city: "Beijing",
    street: "Main St",
  },
};
const {
  address: { city },
} = user;
console.log(city); // Beijing

// 函数参数解构
function greet({ name, age }) {
  console.log(`Hello, ${name}, you are ${age}`);
}
greet({ name: "Tom", age: 20 });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 数组展开
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 }

// 函数参数
const numbers = [1, 2, 3];
Math.max(...numbers); // 3

// 复制数组
const original = [1, 2, 3];
const copy = [...original];

// 复制对象
const originalObj = { a: 1, b: 2 };
const copyObj = { ...originalObj };

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 基本用法
const name = "Tom";
const greeting = `Hello, ${name}`;
console.log(greeting); // Hello, Tom

// 表达式
const a = 10,
  b = 20;
const result = `Sum: ${a + b}`;
console.log(result); // Sum: 30

// 多行字符串
const multiLine = `
  Line 1
  Line 2
  Line 3
`;

// 函数调用
function formatName(first, last) {
  return `${first} ${last}`;
}
const fullName = formatName("Tom", "Smith");

// 嵌套模板字符串
const isActive = true;
const status = `User is ${isActive ? "active" : "inactive"}`;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 基本标签模板
function tag(strings, ...values) {
  console.log(strings); // ['Hello, ', '!']
  console.log(values); // ['Tom']
  return strings[0] + values[0] + strings[1];
}

const name = "Tom";
const result = tag`Hello, ${name}!`;

// 实际应用：HTML 转义
function htmlEscape(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i]
      ? String(values[i])
          .replace(/&/g, "&")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
      : "";
    return result + str + value;
  }, "");
}

const userInput = '<script>alert("xss")</script>';
const safe = htmlEscape`<div>${userInput}</div>`;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// 创建 Promise
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("操作成功");
    } else {
      reject("操作失败");
    }
  }, 1000);
});

// 使用 Promise
promise
  .then((result) => {
    console.log(result); // 操作成功
  })
  .catch((error) => {
    console.error(error); // 操作失败
  });

// Promise 链式调用
fetch("/api/data")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// Promise.all
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3]).then((values) => {
  console.log(values); // [1, 2, 3]
});

// Promise.race
Promise.race([p1, p2, p3]).then((value) => {
  console.log(value); // 1（第一个完成的）
});

// Promise.allSettled
Promise.allSettled([p1, p2, p3]).then((results) => {
  console.log(results);
  // [{status: 'fulfilled', value: 1}, ...]
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 基本用法
async function fetchData() {
  try {
    const response = await fetch("/api/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error:", error);
  }
}

// 多个异步操作
async function fetchMultiple() {
  const [user, posts] = await Promise.all([
    fetch("/api/user").then((r) => r.json()),
    fetch("/api/posts").then((r) => r.json()),
  ]);
  return { user, posts };
}

// 循环中的 await
async function processItems(items) {
  for (const item of items) {
    await processItem(item);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 基本类
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("Tom", 20);
console.log(person.greet()); // Hello, I'm Tom

// 继承
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    return `${this.name} is studying`;
  }
}

const student = new Student("Jerry", 18, "A");
console.log(student.greet()); // Hello, I'm Jerry
console.log(student.study()); // Jerry is studying

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

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

// 默认导出
export default class Calculator {
  // ...
}

// 混合导出
export const version = '1.0.0';
export default function() {
  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 命名导入
import { PI, add } from "./math";

// 默认导入
import Calculator from "./calculator";

// 全部导入
import * as math from "./math";
math.PI; // 3.14159

// 重命名
import { add as sum } from "./math";

// 混合导入
import Calculator, { version } from "./calculator";

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 创建 Symbol
const sym1 = Symbol("description");
const sym2 = Symbol("description");
console.log(sym1 === sym2); // false

// 作为对象属性
const obj = {
  [Symbol("key")]: "value",
};

// 内置 Symbol
const arr = [1, 2, 3];
arr[Symbol.iterator]; // 迭代器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// Set
const set = new Set([1, 2, 3, 3, 4]);
console.log(set.size); // 4
set.add(5);
set.has(3); // true

// Map
const map = new Map();
map.set("name", "Tom");
map.set(1, "one");
map.get("name"); // Tom
map.has(1); // true

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 迭代器
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

// 生成器
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2