Sukksa's Blog

react-hooks

Sun, 31 May 2026 22:49:21 GMT

React Hooks#

React 的核心是组件。v16.8 版本之前，组件的标准写法是类（class）。

任何一个组件，可以用类来写，也可以用钩子来写。下面是类的写法。

1
class Welcome extends React.Component {
2
 render() {
3
   return <h1Hello, {this.props.name}</h1;
4
 }
5
}

再来看钩子的写法，也就是函数。

1
function Welcome(props) {
2
 return <h1Hello, {props.name}</h1;
3
}

官方推荐使用钩子（函数），而不是类。因为钩子更简洁，代码量少，用起来比较”轻”，而类比较”重”。而且，钩子是函数，更符合 React 函数式的本质。

类和函数的差异#

类组件和函数组件是有差异的。不同的写法，代表了不同的编程方法论。

类（class）是数据和逻辑的封装。 也就是说，组件的状态和操作方法是封装在一起的。如果选择了类的写法，就应该把相关的数据和操作，都写在同一个 class 里面。

函数一般来说，只应该做一件事，就是返回一个值。 如果你有多个操作，每个操作应该写成一个单独的函数。而且，数据的状态应该与操作方法分离。根据这种理念，React 的函数组件只应该做一件事情：返回组件的 HTML 代码，而没有其他的功能。这种只进行单纯的数据计算（换算）的函数，在函数式编程里面称为 “纯函数”（pure function）。

但是，这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。

React Hooks 的设计目的，就是加强版函数组件，完全不使用”类”，就能写出一个全功能的组件。

Hook 的含义#

Hook 这个单词的意思是”钩子”。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用 use 前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 useXxx。

Hook	用途
`useState`	在函数组件中添加局部状态
`useEffect`	执行副作用（数据获取、订阅、DOM 操作等），可替代生命周期方法
`useContext`	订阅 React Context，方便跨组件共享数据
`useReducer`	对复杂状态逻辑使用 reducer 模式，类似 Redux
`useCallback`	记忆化回调函数，避免不必要的重新创建与渲染
`useMemo`	记忆化计算结果，性能优化
`useRef`	持有可变引用（DOM 节点、保存任意可变值）
`useImperativeHandle`	自定义暴露给父组件的实例值（配合 `forwardRef`）
`useLayoutEffect`	与 `useEffect` 类似，但在浏览器绘制之前同步执行
`useDebugValue`	在 React DevTools 中显示自定义 Hook 的标签

Hook 使用规则#

只在最顶层调用 Hook 不要在循环、条件或嵌套函数中调用 Hook，确保每次渲染时 Hook 的调用顺序一致。
只在 React 函数中调用 Hook 即在 React 函数组件或自定义 Hook 中调用，不要在普通 JavaScript 函数里使用。

（React 官方提供了 ESLint 插件 eslint-plugin-react-hooks 来自动检测这些规则。）

这是为什么#

当你写一个函数组件并用 useState 时：

1
function Counter() {
2
  const [count, setCount] = useState(0);
3
  // ...
4
}

useState 怎么知道这次渲染应该返回哪个状态？组件本身是一个普通函数，每次渲染都会重新执行，如果不在某个地方把状态“记住”，状态就会丢失。

React 的做法是：将 Hooks 的状态链表存储在组件对应的 Fiber 节点上（Fiber 是 React 内部代表组件实例的数据结构）。每次组件渲染时，React 会根据当前正在渲染的 Fiber 节点，依次取出对应位置的 Hook 状态。

因此，useState 必须在 React 的渲染流程中被调用，这样 React 才能知道当前属于哪个组件实例，并把状态正确地取出或存入该实例对应的链表里。

如果在普通 JavaScript 函数里调用 Hook，React 就无法将其关联到任何 Fiber 节点，因为没有正在渲染的组件上下文，程序会直接报错。

当你在函数组件中多次调用 useState 或 useEffect 时，React 并没有在后台为你创建类似于 { countState: 0, nameState: 'Tom' } 这样的键值对对象。相反，React 会将这些 Hook 按照它们在代码中书写的先后顺序，组装成一个单向链表（Linked List）。

当组件第一次渲染时，React 每解析到一个 Hook，就会在链表尾部追加一个节点：

Fiber.memorizedState —> [ Hook 1 (useState: count) ] —> [ Hook 2 (useState: name) ] —> [ Hook 3 (useEffect) ]

当组件因为状态改变而触发重新渲染（Re-render）时，函数组件会重新从头到尾执行一遍。

此时，React 的内部指针会重新回到这个链表的头部。每当执行到一行 Hook 代码，React 不会去问“这个状态叫什么名字”，而是直接取当前指针指向的链表节点的值。随后，指针自动向后移动一步，指向下一个节点。

所以如果我们将 Hook 放在条件判断（如 if 语句）或循环中，就会导致某次渲染时，部分 Hook 被跳过。这会直接破坏链表的索引顺序，引发灾难性的状态串位。

1
function MyComponent() {
2
  const [count, setCount] = useState(0);      // Hook 1
3
  // 错误：在条件语句中调用 Hook
4
  if (count > 0) {
5
    useEffect(() => { ... }, []);            // Hook 2 (条件性触发)
6
  }
7
  const [name, setName] = useState('Alice');  // Hook 3
8
}

首次渲染（count 为 0）

由于 count > 0 为 false，if 分支内部的 Hook 2 被跳过。React 构建的链表结构如下：

第 1 次调用： 对应链表第 1 个节点（存储 count）
第 2 次调用： 对应链表第 2 个节点（存储 name）

count 变为了 1，组件触发更新

此时 count > 0 为 true，if 分支内部的代码被执行。React 按照执行顺序去读取链表：

第 1 次调用 (useState(0))： 读取链表第 1 个节点 ── 成功拿到 count 的最新值 1。
第 2 次调用 (useEffect(...))： 此时执行到了 if 内部的 Hook。React 盲目信任顺序，直接读取链表的第 2 个节点。然而，这个节点在上一次渲染时存储的是 name (‘Alice’) 的数据！
第 3 次调用 (useState('Alice'))： React 试图去读取链表的第 3 个节点，但上一次渲染根本没有生成第 3 个节点，此时内部指针直接指向 null，程序发生运行时崩溃（Runtime Error）。

一旦前面的 Hook 被跳过，后续所有 Hook 的执行顺序与链表节点的对应关系就会全部错位。React 会把属于 A 状态的数据错误地赋值给 B 状态。

为什么 React 不用 Key 寻址#

为什么 React 不像 Map 一样，让开发者传一个唯一的 Key（例如 useState('count', 0)）来映射状态，这样不就不受顺序限制了吗？

在大型项目或多人协作中，不同开发者在同一个组件或自定义 Hook 中可能会无意间使用相同的 Key，导致状态被覆盖。
Hooks 的终极目标是复用逻辑。如果采用 Key 机制，当你在同一个组件里多次调用同一个自定义 Hook 时（例如两次调用 useFetch('/url')），为了防止 Key 冲突，你必须手动为它们注入不同的 Key。

useState()#

useState 是 React 函数组件的状态钩子。它的核心职责是：在组件的多次“重渲染”（Re-render）生命周期之间，持久化（Persist）组件的内部状态，并提供一个触发视图更新的唯一入口。

在纯 JavaScript 中，普通局部变量会随着函数的执行结束而销毁，并在下一次函数执行时重新初始化。而 useState 能够突破函数作用域的限制，将状态托管给 React 底层的 Fiber 节点，从而让函数组件拥有了“记忆”能力。

1
const [state, setState] = useState(initialState);

state（状态变量）：这是一个只读（Read-Only）的快照数据。在当前渲染周期内，它是不可变的（Immutable）。
setState（状态更新函数）：更新状态的函数，调用时会触发组件重新渲染
initialState（初始状态）：仅在组件第一次挂载（Mount）时生效的默认值。可以是任何类型（数字、字符串、对象、数组，甚至是函数 —— 惰性初始化）

异步批量更新#

调用 setState 不会立即改变当前执行流中的 state 变量。 它的本质是向 React 提交一个“更新请求”，并触发下一次渲染。

1
const [count, setCount] = useState(0);
2

3
const handleClick = () => {
4
  setCount(count + 1);
5
  console.log(count); // 打印出来的仍然是 0，而不是 1
6
};

每次渲染，count 都是一个特定时间点的“快照”。在 handleClick 函数被触发的那个渲染周期里，count 的值就是 0。改变状态会触发全新的下一次渲染，在下一次渲染的函数体中，count 才会变成 1。

同时为了性能优化，React 会将同一个事件处理函数内的多个 setState 操作合并为一次重渲染，避免频繁触发 DOM 更新。

函数式状态更新#

当新的状态高度依赖于前一次的状态，或者在异步闭包（如 setTimeout）中需要获取最新状态时，应当向 setState 传入一个回调函数，而不是具体的值：

1
// 假设 count 当前为 0
2
setCount(prevCount => prevCount + 1); // 接收最新状态，返回新状态
3
setCount(prevCount => prevCount + 1);
4

5
// 最终视图上 count 会变成 2。如果写成 setCount(count + 1)，最终只会是 1。

惰性初始化#

如果初始状态需要经过复杂的计算（例如读取 localStorage、进行大量运算），可以直接传一个函数给 useState：

1
const [data, setData] = useState(() => {
2
  const saved = localStorage.getItem('key');
3
  return saved ? JSON.parse(saved) : defaultValue;
4
});

这个函数只在组件首次渲染时执行一次，之后的渲染都会忽略它。如果直接写 useState(func())，则该表达式会在每次渲染时都执行（即使结果被丢弃），造成性能浪费。

当一个 useState 在 Mount 时被初始化，React 会在对应的 Hook 链表节点上挂载一个 queue（更新队列）对象。

每当你调用 setState(x) 时，React 并不会马上计算出最终结果，而是把 x 作为一个 Update 动作推入该 Hook 节点的更新队列中。当 React 调度器（Scheduler）开始处理该组件的重渲染时，会遍历这个队列，依次应用这些更新动作，最终计算出最新的状态值并付诸渲染。

useEffect()#

useEffect 是 React 函数组件的副作用（Side Effects）控制器。它的核心职责是：允许开发者在组件渲染流之外，执行声明式的、与外部系统同步的异步或命令式操作，并提供了一套完善的资源释放机制。

副作用（Side Effect） 是指一个函数在计算其返回值的过程中，对外部世界产生的可观测的变化。在 React 中，纯粹的渲染函数应该是一个没有副作用的纯函数（Pure Function）。

诸如 API 数据请求、手动修改 DOM 树、设置定时器、记录日志、订阅外部数据源 等操作，都不属于组件渲染的核心逻辑。useEffect 的存在，正是为了将这些“副作用”从组件的渲染主线程中抽离出来，保证渲染流的纯净性与可预测性。

语法#

1
useEffect(() => {
2
  // 1. 执行副作用逻辑（Effect）
3

4
  return () => {
5
    // 2. 清理资源逻辑（Cleanup）
6
  };
7
}, [dependencies]); // 3. 依赖项数组（Dependency Array）

依赖数组决定了副作用什么时候重新执行，React 调度器在每次重渲染后，会采用 Object.is比对当前渲染周期与上一次渲染周期的依赖项数组：

省略依赖项（不传数组）：副作用在 每次组件渲染完成（包括挂载与更新）后 都会执行。这通常会导致严重的性能问题或死循环。
空依赖项数组 []：副作用仅在 组件首次挂载完成（Mount）时 执行一次。这意味着该副作用不依赖任何组件状态的变更。
非空依赖项数组 [a, b]：在首次挂载时，以及后续任何一次渲染中，只要 a 或 b 的引用或值发生改变，副作用就会在渲染完成后重新触发。

当依赖项改变触发组件重渲染时，React 的内部执行顺序如下：

组件完成重渲染并更新 DOM。
执行上一次渲染所产生的副作用的清理函数。（擦除旧的副作用）
执行当前渲染所产生的新的副作用函数。（建立新的副作用）

清理函数#

useEffect 允许返回一个函数作为清理器。清理器的执行并不是在组件销毁时才发生，React 会在两个时间点调用它：

组件卸载时
下一次副作用执行前

这是保证不产生内存泄漏的关键，比如清除定时器、取消订阅。

1
useEffect(
2
  function () {
3
    const timer = setInterval(() => {
4
      setCount(count => count + 1)
5
    }, 1000)
6
    return () => clearInterval(timer)
7
  },
8
  [setCount],
9
)

如果组件已卸载，但之前的异步操作或订阅仍然存在，会导致错误或内存泄漏。

使用#

依赖数组#

Effect 里用到的所有组件内变量（props、state、派生值）都应该放到依赖数组中。React 通过 Object.is 比较依赖是否变化。不完整的依赖会导致 effect 拿到的变量是过时的闭包值。

1
useEffect(() => {
2
  const timer = setTimeout(() => {
3
    setCount(c => c + 1);
4
  }, 2000);
5
  return () => clearTimeout(timer);
6
}, []); // 依赖缺了 setCount

虽然 [] 和 [setCount] 都只是初始化时执行一次，相当于等价，但是 eslint 会警告。

数据获取#

1
useEffect(() => {
2
  let cancelled = false;
3
  async function fetchData() {
4
    const result = await api.get(userId);
5
    if (!cancelled) {
6
      setData(result);
7
    }
8
  }
9
  fetchData();
10
  return () => { cancelled = true; }; // 防止组件卸载后设置状态
11
}, [userId]);

在异步网络请求中，较早发出的请求可能由于网络延迟，比稍后发出的请求更晚返回，导致卸载后执行 setState 覆盖想要的数据。

useEffect 获取数据时，为什么要额外创建一个 async 函数，而不能直接接收一个 async 函数？

JavaScript 的 async 函数会隐式返回一个 Promise 对象，而 useEffect 的底层设计要求返回值必须是一个“纯粹的清理函数”或 undefined。两者的类型签名在底层发生了不可调和的冲突。

为什么 useEffect 不支持接收 Promise？

资源清理必须是同步且即时发生的。当依赖项改变触发重渲染时，React 必须立刻执行上一次的清理函数，以切断过期的副作用（如取消订阅、清除定时器）。如果 useEffect 接收了 async 函数，清理函数就必须等到这个 Promise 被 resolve 之后才能被获取并执行。此时，外部系统可能已经进入了全新的状态，这种异步延迟的清理会导致内存泄漏。

事件绑定#

1
useEffect(() => {
2
  const handleResize = () => setWidth(window.innerWidth);
3
  window.addEventListener('resize', handleResize);
4
  return () => window.removeEventListener('resize', handleResize);
5
}, []);

组件初始化时，绑定 resize 事件，卸载组件解绑。

useRef()#

useRef 是 React 函数组件的“引用持有”钩子。它的核心职责是：在组件的整个生命周期内，跨越多次重渲染，持久化地持有同一个可变对象的引用，且该对象的属性变更不会触发组件的视图重渲染。

语法#

useRef 返回一个普通的 JavaScript 对象，该对象有一个 current 属性。useRef 返回的 refContainer 对象的内存地址，在组件的整个生命周期内是绝对不变的。无论组件因为状态改变重新渲染了多少次，React 始终返回最初 Mount 时创建的同一个对象。虽然外层的对象引用不可变，但其唯一的属性 .current 是完全可变的。你可以随时对其进行读写操作（如 refContainer.current = newValue）。

1
const refContainer = useRef(initialValue);

initialValue：current 属性的初始值，可以是任何类型。
refContainer 在每次渲染时都是同一个对象引用。

useRef 同样会在组件的 Hook 链表上创建一个节点，保存 { current: initialValue } 这个对象。因为每次渲染返回的都是同一个内存对象，所以修改 ref.current 不会导致节点本身发生变化，React 自然也不会去触发重渲染。

用法#

访问 DOM 元素#

最常见的场景就是获取某个 DOM 元素的直接引用，进行聚焦、滚动、测量等操作。

1
function TextInputWithFocusButton() {
2
  const inputRef = useRef(null);
3

4
  const focusInput = () => {
5
    // 直接访问 DOM 元素并调用 focus 方法
6
    inputRef.current.focus();
7
  };
8

9
  return (
10
    <>
11
      <input ref={inputRef} type="text" />
12
      <button onClick={focusInput}>聚焦输入框</button>
13
    </>
14
  );
15
}

展开收起

通过 ref 属性将 inputRef 绑定到 <input> 元素上。
渲染完成后，inputRef.current 就指向那个真实的 DOM 节点。

保存任何可变值#

你可以把 useRef 当成一个在多次渲染之间共享的“储物柜”，存放那些希望保持最新、但又不想触发渲染的值，例如：

定时器 ID
之前的状态（prevProps/prevState）
一个不需要响应式更新的数据副本

1
function Timer() {
2
  const intervalRef = useRef(null);
3
  const [count, setCount] = useState(0);
4

5
  const start = () => {
6
    // 把定时器 ID 存在 ref 里，清理时用
7
    intervalRef.current = setInterval(() => {
8
      setCount(c => c + 1);
9
    }, 1000);
10
  };
11

12
  const stop = () => {
13
    clearInterval(intervalRef.current);
14
  };
15

16
  // 组件卸载时清理定时器
17
  useEffect(() => {
18
    return () => clearInterval(intervalRef.current);
19
  }, []);
20

21
  return (
22
    <div>
23
      <p>{count}</p>
24
      <button onClick={start}>开始</button>
25
      <button onClick={stop}>停止</button>
26
    </div>
27
  );
28
}

展开收起

这里 intervalRef.current 存储定时器 ID，更新 count 会重渲染，但 intervalRef 中的值保持不变。

与 useState() 的区别#

	useState	useRef
触发重新渲染	是	否
值的更新	异步、不可变（替换）	同步、可变（直接修改 `.current`）
作用	驱动 UI 变化的数据	不需要体现在 UI 上的持久数据、DOM 引用
每次渲染	返回当前状态快照	返回同一个对象引用

判断数据是否应放在 ref 还是 state 的核心标准是：该数据变化时是否需要重新渲染界面。

React 的官方文档明确指出：不要在渲染期间读取或写入 ref.current（除了初始化）。组件的渲染过程可能会被中断然后重新执行。如果渲染时修改了 ref，那么这种修改可能会被多次应用，产生不可预测的结果。一般在 useEffect / useLayoutEffect 内部，或者在 事件处理函数 内部对 .current 进行读写。

useReducer()#

useReducer 是 useState 的一种替代方案，它借鉴了 Redux 的 reducer 模式，用于管理包含多个子值、或者下一个状态依赖前一个状态的复杂状态。

它的核心思想是：把状态更新的逻辑从组件的事件处理函数中，**集中收敛到一个外部的纯函数（reducer）**中。

基本语法#

1
const [state, dispatch] = useReducer(reducer, initialState, init?);

state：当前状态。通常是一个复杂的 JavaScript 对象（例如包含表单数据、加载状态、错误信息的复合体）。与 useState 一样，这里的状态同样不可变
dispatch：一个函数，它是组件触发状态变更的唯一方式。调用它并传入 action 对象，如 dispatch({ type: 'increment' })，React 会将当前 state 和该 action 交给 reducer，用返回值作为新状态，并触发重渲染。
reducer：形如 (state, action) => newState 的纯函数，负责根据 action 计算出新状态。action 通常包含两个标准属性：type：字符串常量，表示行为的唯一类型（如 'FETCH_START'）。payload：附带的业务数据负载（如 API 返回的数据包）。
initialState：初始状态值。
init（可选）：惰性初始化函数，签名 (initialArg) => initialState，用于从传入的参数中计算初始状态。

当遇到以下情况时，useReducer 会比 useState 更合适：

状态之间有复杂的依赖关系

例如表单有多个字段互相影响，使用多个 useState 容易产生多个分散的 setXxx 调用，且不易追踪整体逻辑。
下一个状态强依赖前一个状态

在 useState 中必须用函数式更新 setState(prev => ...)，但若更新逻辑很复杂（如根据前一个状态的多个属性计算新状态），函数式更新会变得冗长。useReducer 直接在 reducer 函数中拿到最新的 state，编写逻辑更自然。
需要将 dispatch 传递给深层子组件，避免回调重新创建

React 保证 dispatch 函数在组件生命周期内引用稳定（和 useState 的 setState 一样），所以它不用写进 useCallback 的依赖中，可安全传给子组件。

计数器示例#

1
import React, { useReducer } from 'react';
2

3
// 定义初始状态
4
const initialState = { count: 0, error: null };
5

6
// 编写 Reducer 纯函数
7
function counterReducer(state, action) {
8
  switch (action.type) {
9
    case 'INCREMENT':
10
      return { ...state, count: state.count + 1 };
11
    case 'DECREMENT':
12
      return { ...state, count: Math.max(0, state.count - 1) };
13
    case 'SET_ERROR':
14
      return { ...state, error: action.payload };
15
    case 'RESET':
16
      return initialState;
17
    default:
18
      // 遇到未定义的 Action 时抛出错误或返回原状态
19
      throw new Error(`Unhandled action type: ${action.type}`);
20
  }
21
}
22

23
// 组件内部集成
24
function CounterComponent() {
25
  const [state, dispatch] = useReducer(counterReducer, initialState);
26

27
  return (
28
    <div>
29
      <p>当前计数: {state.count}</p>
30
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
31

32
      {/* 组件不直接修改状态，只通过 dispatch 宣告行为 */}
33
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
34
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>减少</button>
35
      <button onClick={() => dispatch({ type: 'SET_ERROR', payload: '触发一次模拟错误' })}>
36
        报错
37
      </button>
38
    </div>
39
  );
40
}

展开收起

更新逻辑全部在 reducer 里，组件本身只是通过 dispatch 发“命令”（action）。

惰性初始化#

如果初始状态需要从 props 或其他数据中计算得出，你可以传入第三个参数 init：

1
function init(initialCount) {
2
  return { count: initialCount };
3
}
4

5
function Counter({ initialCount }) {
6
  const [state, dispatch] = useReducer(reducer, initialCount, init);
7
  // ...
8
}

init() 接收当前的初始状态值，并将返回值作为最新的状态值返回给 state，init(initialCount) 只会在首次渲染时执行。

与 useState() 区别#

	useState	useReducer
适用场景	简单独立的状态值	复杂关联的状态、多个操作类型
更新方式	直接设置新值或函数式更新	派发 action，由 reducer 决定如何变化
逻辑位置	分散在事件处理函数中	集中在 reducer 纯函数中
下一个状态依赖前一个	必须使用函数式更新 `prev => ...`	在 reducer 中直接接收最新 state

如果状态更新有多种操作类型（如增、删、改、重置），useReducer 更清晰。
如果只是简单的 toggle 或文本输入，useState 完全足够。

注：

reducer 必须是纯函数

不能在里面执行副作用（如网络请求、修改 DOM），副作用应放在 useEffect 中。

action 通常是一个对象 { type, payload? }

这是约定俗成的惯例，但非强制。也可以自行定义 action 的结构，只要 reducer 能识别。

dispatch 是稳定的引用

与 useState 的 setState 一样，dispatch 不会在重渲染时变化，所以可以安全地传给子组件而无需 useCallback。

状态更新是批处理的

同 useState，多次 dispatch 在事件处理函数中会被批处理，React 会等到事件处理结束再统一应用所有更新。

遵循 Hook 链表顺序

useReducer 同样在组件的 Hook 链表中占据一个节点，按顺序存储状态。调用 dispatch 时，React 会标记更新，重渲染时按顺序读出状态，而不会重新调用 reducer 来计算当前状态（reducer 只在 dispatch 时运行）。

useContext()#

useContext 是 React 用于订阅和感知 React Context 变更的状态钩子。当我们需要跨越多个组件层级传递数据时，如果仍然通过 props 一层层传递（即“props 钻孔”），代码会变得繁琐且难以维护。

它的核心职责是：打破 React 传统的“单向数据流”中必须逐层传递 Props 的物理限制，允许深层子组件以声明式的方式，直接跳跃层级，订阅并获取祖先组件下发的全局或共享上下文数据。能直接在任意深度的子组件中读取到来自上层的数据。

Provider 值变化会触发所有消费者重新渲染

当 <Context.Provider> 的 value 属性发生改变时，所有调用了 useContext(Context) 的深层子组件都会被强制触发重新渲染（不管是否真的用到了变化部分）。

基本语法#

1. 创建 Context#

1
import { createContext } from 'react';
2

3
export const ThemeContext = createContext('light'); // 参数为默认值

2. 在上层提供数据（Provider）#

1
import { ThemeContext } from './ThemeContext';
2

3
function App() {
4
  const [theme, setTheme] = useState('dark');
5

6
  return (
7
    <ThemeContext.Provider value={{ theme, setTheme }}>
8
      <Toolbar />
9
    </ThemeContext.Provider>
10
  );
11
}

在组件树的某一个上级节点，使用 <ThemeContext.Provider> 包裹子组件，并通过 value 属性将实时状态广播出去。

3. 在任何子组件中消费（useContext）#

1
import { useContext } from 'react';
2
import { ThemeContext } from './ThemeContext';
3

4
function Toolbar() {
5
  // 直接拿到 App 中提供的 theme 和 setTheme
6
  const { theme, setTheme } = useContext(ThemeContext);
7

8
  return (
9
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
10
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
11
        切换主题
12
      </button>
13
    </div>
14
  );
15
}

展开收起

Toolbar 内部不需要从父组件接收任何 props，只需引入上下文对象，传入 useContext 钩子，就能拿到全局主题并更新它。

与 `useReducer` 配合实现全局状态管理#

1
const AppContext = createContext();
2

3
function reducer(state, action) {
4
  switch (action.type) {
5
    case 'login': return { ...state, user: action.payload };
6
    case 'logout': return { ...state, user: null };
7
    default: return state;
8
  }
9
}
10

11
export function AppProvider({ children }) {
12
  const [state, dispatch] = useReducer(reducer, { user: null });
13
  return (
14
    <AppContext.Provider value={state, dispatch}>
15
      {children}
16
    </AppContext.Provider>
17
  );
18
}
19

20
// 自定义 Hook，封装 useContext 调用
21
export function useApp() {
22
  const context = useContext(AppContext);
23
  if (context === undifined) throw new Error('AppContext must used AppProvider');
24
  return context;
25
}

展开收起

任何在 <AppProvider></AppProvider> 包裹的子组件都可以调用 useApp() 获取 state 和 dispatch 。

关于 cesium 在 micro-app 下无法显示的问题

Wed, 25 Mar 2026 06:17:07 GMT

基座：vite + vue3

子应用：vite + vue3

micro-app v1.0.0-rc.29, cesium v1.135

子应用包含一个 cesium map，在基座打开子应用时，cesium 无法显示地图，但是 sence, sky box, model 都能正常显示，唯独地图不显示。而单独运行子程序时，一切都能正常显示。

解决过程#

最初的猜想是静态资源路径解析错误，导致 Assets、Workers、Widgets 静态资源未能成功加载上。

故设置了 CESIUM_BASE_URL :

1
// 在引入 Cesium 或者创建 Viewer 之前执行
2
if (window.__MICRO_APP_ENVIRONMENT__) {
3
  // __MICRO_APP_PUBLIC_PATH__ 是 micro-app 注入的子应用绝对路径（带有子应用端口号）
4
  // 假设 cesium 静态资源放在子应用的 public/cesium 目录下
5
  window.CESIUM_BASE_URL = window.__MICRO_APP_PUBLIC_PATH__ + 'cesium/';
6
} else {
7
  // 独立运行时的路径
8
  window.CESIUM_BASE_URL = '/cesium/';
9
}

但是无论设不设置，cesium.js widgets.css 都是能够正常访问的。

image-20260320160217611

AI 提出 Cesium 极其依赖 Web Worker 来处理几何数据。在微前端中，基座和子应用往往运行在不同的端口（跨域）。浏览器出于安全策略，不允许跨域直接加载 Web Worker 脚本。但是 console 并没有报错跨域的问题，我看到 micro-app 可以设置 iframe 模式，实现了隔离，便认为 iframe 拦截了 Web Worker 脚本，导致地图不加载，所以按照 iframe 的方式设置了：

1
<micro-app
2
  name="cesium-map"
3
  :url="url"
4
  iframe
5
  @created="handleCreated"
6
  @beforemount="handleBeforeMount"
7
  @mounted="handleMounted"
8
  @unmount="handleUnmount"
9
  @error="handleError"
10
  router-mode="native"
11
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
12
  allow="cross-origin-isolated; geolocation"
13
  baseroute="/"></micro-app>

结果也不对，在 iframe 中确实能够正常运行，micro-app 并不支持，后来了解到 micro-app 不是通过 iframe 实现的，是借鉴了 WebComponent 的思想，通过CustomElement 将 micro-app 封装成一个类 WebComponent 组件。

1
  <iframe
2
    :src="src"
3
    frameborder="0"
4
    class="iframe"
5
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
6
    allow="cross-origin-isolated; geolocation"></iframe>

在翻阅官方 github issues 时，发现了相同的问题 Vite项目 Cesium地图不展示到底是什么原因，下面有初始化 microApp 的配置：

参考 https://github.com/jd-opensource/micro-app-awesome-samples/blob/issue-1351/apps/main-app/src/main.js

1
microApp.start({
2
    excludeAssetFilter (assetUrl) {
3
        if (assetUrl === 'createVerticesFromHeightmap' || assetUrl === 'transferTypedArrayTest' || assetUrl === 'createVerticesFromQuantizedTerrainMesh') {
4
          return true // 返回true则micro-app不会劫持处理当前文件
5
        }
6
        return false
7
    },
8
    plugins: {
9
        modules: {
10
            'cesium-map': [{
11
                loader(code, url) {
12
                    // TODO 根据 实际情况再调整限制
13
                    if(url.indexOf("Cesium.js") > 0 && code.indexOf('var Cesium=')> -1) {
14
                        code = code.replace('var Cesium=', 'window.Cesium=')
15
                    }
16
                    return code
17
                }
18
            }]
19
        }
20
    }
21
})

展开收起

excludeAssetFilter(assetUrl) { ... }

字面意思是静态资源过滤器。根据官方解释，如果这个函数返回 true，micro-app 就不会去劫持和处理这个资源的加载请求，而是让浏览器按原生方式去加载。

而代码中拦截的这些名称（createVerticesFromHeightmap、createGeometry 等），是 Cesium 内部的 Web Workers 任务脚本。 Cesium 为了保证 3D 渲染的流畅，把海量的几何体计算、地形切片计算都放在了后台 Web Worker 线程中。如果 micro-app 去劫持这些 Worker 脚本，会导致这些 Worker 脚本运行不了，这也是为什么 sence 以及引入的 model 都能够成功加载，而地形layer的加载依赖 createVerticesFromHeightmap.js 脚本，所以才会造成这个原因。

设置了 excludeAssetFilter 本地确实能够正常运行了，但是在我部署到线上的时候，console 报错：

1
未找到对象 ReferenceError: Cesium is not defined

plugins: { modules: { 'cesium-map': [ ... ] } }

官方指出 https://jd-opensource.github.io/micro-app/0.x/docs.html#/zh-cn/sandbox

我们使用Proxy拦截了用户全局操作的行为，防止对window的访问和修改，避免全局变量污染。micro-app中的每个子应用都运行在沙箱环境，以获取相对纯净的运行空间。
沙箱是默认开启的，正常情况下不建议关闭，以避免出现不可预知的问题。

在沙箱环境中，顶层变量不会泄漏为全局变量。

例如在正常情况下，通过 var name 或 function name () {} 定义的顶层变量会泄漏为全局变量，通过window.name或name就可以全局访问。

但是在沙箱环境下这些顶层变量无法泄漏为全局变量，window.name或name的值为undefined，导致出现问题。

而 Cesium.js 开头：var Cesium=(()=>{...，是将 Cesium 提升到了全局变量 window.Cesium，结果时不能在基座中访问，导致初始化时 ReferenceError: Cesium is not defined：

image-20260320172255961

在 js 沙箱，可以通过将 var name 改为 window.name 挂载在全局 window 上，因为我们不能直接修改 Cesium.js 文件，官方提供了类似 webpack 打包时 loader 修改代码，通过匹配 Cesium.js 文件名，将开头的 var Cesium= 替换为 window.Cesium= 。

1
loader(code, url) {
2
    if (url.indexOf("Cesium.js") > 0 && code.indexOf('var Cesium=') > -1) {
3
        code = code.replace('var Cesium=', 'window.Cesium=')
4
    }
5
    return code
6
}

到目前为止问题已经解决，但是我们从哪儿获取到excludeAssetFilter中需要放行的worker脚本呢？

在 \node_modules\cesium\Build\Cesium\Workers 下，能发现许多js文件：

image-20260320173654778

以代码中为例，createVerticesFromHeightmap.js 是从高度图（heightmap）生成三维地形的顶点数据，而 micro-app 将其拦截刚好对应了地形没有显示的问题。如果需要绘制 geometry 就需要将 Workers 下的 createGeometry.js 加入 loader 。

以上。

TypeScript 进阶

Wed, 25 Mar 2026 06:15:48 GMT

元组#

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

元组起源于函数编程语言（如 F#），这些语言中会频繁使用元组。

元组是⼀种特殊的数组类型，可以存储固定数量的元素，并且每个元素的类型是已知的且可以不同。元组⽤于精确描述⼀组值的类型， ? 表示可选元素。

简单的例子#

定义一对值分别为 string 和 number 的元组：

1
let tom: [string, number] = ['Tom', 25];

当赋值或访问一个已知索引的元素时，会得到正确的类型：

1
let tom: [string, number];
2
tom[0] = 'Tom';
3
tom[1] = 25;
4

5
tom[0].slice(1);
6
tom[1].toFixed(2);

也可以只赋值其中一项：

1
let tom: [string, number];
2
tom[0] = 'Tom';

但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。

1
let tom: [string, number];
2
tom = ['Tom', 25];
3
let tom: [string, number];
4
tom = ['Tom'];
5

6
// Property '1' is missing in type '[string]' but required in type '[string, number]'.

1
// 第⼀个元素必须是 string 类型,第⼆个元素必须是 number 类型。
2
let arr1: [string,number]
3
// 第⼀个元素必须是 number 类型,第⼆个元素是可选的,如果存在,必须是 boolean 类型。
4
let arr2: [number,boolean?]
5
// 第⼀个元素必须是 number 类型,后⾯的元素可以是任意数量的 string 类型
6
let arr3: [number,...string[]]

越界的元素#

当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：

1
let tom: [string, number];
2
tom = ['Tom', 25];
3
tom.push('male');
4
tom.push(true);
5

6
// Argument of type 'true' is not assignable to parameter of type 'string | number'.

枚举#

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。

简单的例子#

枚举使用 enum 关键字来定义：

1
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

1
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 0); // true
4
console.log(Days["Mon"] === 1); // true
5
console.log(Days["Tue"] === 2); // true
6
console.log(Days["Sat"] === 6); // true
7

8
console.log(Days[0] === "Sun"); // true
9
console.log(Days[1] === "Mon"); // true
10
console.log(Days[2] === "Tue"); // true
11
console.log(Days[6] === "Sat"); // true

事实上，上面的例子会被编译为：

1
var Days;
2
(function (Days) {
3
    Days[Days["Sun"] = 0] = "Sun";
4
    Days[Days["Mon"] = 1] = "Mon";
5
    Days[Days["Tue"] = 2] = "Tue";
6
    Days[Days["Wed"] = 3] = "Wed";
7
    Days[Days["Thu"] = 4] = "Thu";
8
    Days[Days["Fri"] = 5] = "Fri";
9
    Days[Days["Sat"] = 6] = "Sat";
10
})(Days || (Days = {}));

手动赋值#

我们也可以给枚举项手动赋值：

1
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 7); // true
4
console.log(Days["Mon"] === 1); // true
5
console.log(Days["Tue"] === 2); // true
6
console.log(Days["Sat"] === 6); // true

上面的例子中，未手动赋值的枚举项会接着上一个枚举项递增。

如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的：

1
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 3); // true
4
console.log(Days["Wed"] === 3); // true
5
console.log(Days[3] === "Sun"); // false
6
console.log(Days[3] === "Wed"); // true

上面的例子中，递增到 3 的时候与前面的 Sun 的取值重复了，但是 TypeScript 并没有报错，导致 Days[3] 的值先是 "Sun"，而后又被 "Wed" 覆盖了。编译的结果是：

1
var Days;
2
(function (Days) {
3
    Days[Days["Sun"] = 3] = "Sun";
4
    Days[Days["Mon"] = 1] = "Mon";
5
    Days[Days["Tue"] = 2] = "Tue";
6
    Days[Days["Wed"] = 3] = "Wed";
7
    Days[Days["Thu"] = 4] = "Thu";
8
    Days[Days["Fri"] = 5] = "Fri";
9
    Days[Days["Sat"] = 6] = "Sat";
10
})(Days || (Days = {}));

所以使用的时候需要注意，最好不要出现这种覆盖的情况。

手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)：

1
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
2
var Days;
3
(function (Days) {
4
    Days[Days["Sun"] = 7] = "Sun";
5
    Days[Days["Mon"] = 8] = "Mon";
6
    Days[Days["Tue"] = 9] = "Tue";
7
    Days[Days["Wed"] = 10] = "Wed";
8
    Days[Days["Thu"] = 11] = "Thu";
9
    Days[Days["Fri"] = 12] = "Fri";
10
    Days[Days["Sat"] = "S"] = "Sat";
11
})(Days || (Days = {}));

如果不使用类型断言，则不能使用反向查找

1
enum Days { Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = "S" };
2

3
var Days;
4
(function (Days) {
5
    Days[Days["Sun"] = 7] = "Sun";
6
    Days[Days["Mon"] = 8] = "Mon";
7
    Days[Days["Tue"] = 9] = "Tue";
8
    Days[Days["Wed"] = 10] = "Wed";
9
    Days[Days["Thu"] = 11] = "Thu";
10
    Days[Days["Fri"] = 12] = "Fri";
11
    Days["Sat"] = "S";
12
})(Days || (Days = {}));
13
console.log(Days['Sat'], Days['S']); // S, undefined

当然，手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1：

1
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};
2

3
console.log(Days["Sun"] === 7); // true
4
console.log(Days["Mon"] === 1.5); // true
5
console.log(Days["Tue"] === 2.5); // true
6
console.log(Days["Sat"] === 6.5); // true

常数项和计算所得项#

枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。

前面我们所举的例子都是常数项，一个典型的计算所得项的例子：

1
enum Color {Red, Green, Blue = "blue".length};

上面的例子中，"blue".length 就是一个计算所得项。

上面的例子不会报错，但是如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错：

1
enum Color {Red = "red".length, Green, Blue};
2

3
// index.ts(1,33): error TS1061: Enum member must have initializer.
4
// index.ts(1,40): error TS1061: Enum member must have initializer.

当满足以下条件时，枚举成员被当作是常数：

不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值加 1。但第一个枚举元素是个例外。如果它没有初始化方法，那么它的初始值为 0。
枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集，它可以在编译阶段求值。当一个表达式满足下面条件之一时，它就是一个常数枚举表达式：
- 数字字面量
- 引用之前定义的常数枚举成员（可以是在不同的枚举类型中定义的）如果这个成员是在同一个枚举类型中定义的，可以使用非限定名来引用
- 带括号的常数枚举表达式
- +, -, ~ 一元运算符应用于常数枚举表达式
- +, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符，常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity，则会在编译阶段报错

所有其它情况的枚举成员被当作是需要计算得出的值。

常数枚举#

常数枚举是使用 const enum 定义的枚举类型：

1
const enum Directions {
2
    Up,
3
    Down,
4
    Left,
5
    Right
6
}
7

8
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员。

上例的编译结果是：

1
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

假如包含了计算成员，则会在编译阶段报错：

1
const enum Color {Red, Green, Blue = "blue".length};
2

3
// index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.

外部枚举#

外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：

1
declare enum Directions {
2
    Up,
3
    Down,
4
    Left,
5
    Right
6
}
7

8
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

之前提到过，declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

上例的编译结果是：

1
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

外部枚举与声明语句一样，常出现在声明文件中。

同时使用 declare 和 const 也是可以的：

1
declare const enum Directions {
2
    Up,
3
    Down,
4
    Left,
5
    Right
6
}
7

8
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

编译结果：

1
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

类#

传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。

TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。

类的概念#

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。

类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
对象（Object）：类的实例，通过 new 生成
面向对象（OOP）的三大特性：封装、继承、多态
封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
存取器（getter & setter）：用以改变属性的读取和赋值行为
修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

ES6 中类的用法#

先回顾一下 ES6 中类的用法，更详细的介绍可以参考 ECMAScript 6 入门 - Class。

属性和方法#

使用 class 定义类，使用 constructor 定义构造函数。

通过 new 生成新实例的时候，会自动调用构造函数。

1
class Animal {
2
    name;
3
    constructor(name) {
4
        this.name = name;
5
    }
6
    sayHi() {
7
        return `My name is ${this.name}`;
8
    }
9
}
10

11
let a = new Animal('Jack');
12
console.log(a.sayHi()); // My name is Jack

类的继承#

使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法。

1
class Cat extends Animal {
2
  constructor(name) {
3
    super(name); // 调用父类的 constructor(name)
4
    console.log(this.name);
5
  }
6
  sayHi() {
7
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
8
  }
9
}
10

11
let c = new Cat('Tom'); // Tom
12
console.log(c.sayHi()); // Meow, My name is Tom

存取器#

使用 getter 和 setter 可以改变属性的赋值和读取行为：

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
  get name() {
6
    return 'Jack';
7
  }
8
  set name(value) {
9
    console.log('setter: ' + value);
10
  }
11
}
12

13
let a = new Animal('Kitty'); // setter: Kitty
14
a.name = 'Tom'; // setter: Tom
15
console.log(a.name); // Jack

展开收起

静态方法#

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：

1
class Animal {
2
  static isAnimal(a) {
3
    return a instanceof Animal;
4
  }
5
}
6

7
let a = new Animal('Jack');
8
Animal.isAnimal(a); // true
9
a.isAnimal(a); // TypeError: a.isAnimal is not a function

ES7 中类的用法#

ES7 中有一些关于类的提案，TypeScript 也实现了它们，这里做一个简单的介绍。

实例属性#

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义，ES7 提案中可以直接在类里面定义：

1
class Animal {
2
  name = 'Jack';
3

4
  constructor() {
5
    // ...
6
  }
7
}
8

9
let a = new Animal();
10
console.log(a.name); // Jack

静态属性#

ES7 提案中，可以使用 static 定义一个静态属性：

1
class Animal {
2
  static num = 42;
3

4
  constructor() {
5
    // ...
6
  }
7
}
8

9
console.log(Animal.num); // 42

TypeScript 中类的用法#

public private 和 protected#

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

下面举一些例子：

1
class Animal {
2
  public name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
let a = new Animal('Jack');
9
console.log(a.name); // Jack
10
a.name = 'Tom';
11
console.log(a.name); // Tom

上面的例子中，name 被设置为了 public，所以直接访问实例的 name 属性是允许的。

很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 private 了：

1
class Animal {
2
  private name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
let a = new Animal('Jack');
9
console.log(a.name);
10
a.name = 'Tom';
11

12
// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
13
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

需要注意的是，TypeScript 编译之后的代码中，并没有限制 private 属性在外部的可访问性。

上面的例子编译后的代码是：

1
var Animal = (function () {
2
  function Animal(name) {
3
    this.name = name;
4
  }
5
  return Animal;
6
})();
7
var a = new Animal('Jack');
8
console.log(a.name);
9
a.name = 'Tom';

使用 private 修饰的属性或方法，在子类中也是不允许访问的：

1
class Animal {
2
  private name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
class Cat extends Animal {
9
  constructor(name) {
10
    super(name);
11
    console.log(this.name);
12
  }
13
}
14

15
// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

展开收起

而如果是用 protected 修饰，则允许在子类中访问：

1
class Animal {
2
  protected name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
class Cat extends Animal {
9
  constructor(name) {
10
    super(name);
11
    console.log(this.name);
12
  }
13
}

当构造函数修饰为 private 时，该类不允许被继承或者实例化：

1
class Animal {
2
  public name;
3
  private constructor(name) {
4
    this.name = name;
5
  }
6
}
7
class Cat extends Animal {
8
  constructor(name) {
9
    super(name);
10
  }
11
}
12

13
let a = new Animal('Jack');
14

15
// index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private.
16
// index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration.

展开收起

当构造函数修饰为 protected 时，该类只允许被继承：

1
class Animal {
2
  public name;
3
  protected constructor(name) {
4
    this.name = name;
5
  }
6
}
7
class Cat extends Animal {
8
  constructor(name) {
9
    super(name);
10
  }
11
}
12

13
let a = new Animal('Jack');
14

15
// index.ts(13,9): TS2674: Constructor of class 'Animal' is protected and only accessible within the class declaration.

展开收起

参数属性#

修饰符和readonly还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁。

1
class Animal {
2
  // public name: string;
3
  public constructor(public name) {
4
    // this.name = name;
5
  }
6
}

readonly#

只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。

1
class Animal {
2
  readonly name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
}
7

8
let a = new Animal('Jack');
9
console.log(a.name); // Jack
10
a.name = 'Tom';
11

12
// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。

1
class Animal {
2
  // public readonly name;
3
  public constructor(public readonly name) {
4
    // this.name = name;
5
  }
6
}

抽象类#

abstract 用于定义抽象类和其中的抽象方法。

什么是抽象类？

首先，抽象类是不允许被实例化的：

1
abstract class Animal {
2
  public name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
  public abstract sayHi();
7
}
8

9
let a = new Animal('Jack');
10

11
// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

上面的例子中，我们定义了一个抽象类 Animal，并且定义了一个抽象方法 sayHi。在实例化抽象类的时候报错了。

其次，抽象类中的抽象方法必须被子类实现：

1
abstract class Animal {
2
  public name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
  public abstract sayHi();
7
}
8

9
class Cat extends Animal {
10
  public eat() {
11
    console.log(`${this.name} is eating.`);
12
  }
13
}
14

15
let cat = new Cat('Tom');
16

17
// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.

展开收起

上面的例子中，我们定义了一个类 Cat 继承了抽象类 Animal，但是没有实现抽象方法 sayHi，所以编译报错了。

下面是一个正确使用抽象类的例子：

1
abstract class Animal {
2
  public name;
3
  public constructor(name) {
4
    this.name = name;
5
  }
6
  public abstract sayHi();
7
}
8

9
class Cat extends Animal {
10
  public sayHi() {
11
    console.log(`Meow, My name is ${this.name}`);
12
  }
13
}
14

15
let cat = new Cat('Tom');

展开收起

上面的例子中，我们实现了抽象方法 sayHi，编译通过了。

需要注意的是，即使是抽象方法，TypeScript 的编译结果中，仍然会存在这个类，上面的代码的编译结果是：

1
var __extends =
2
  (this && this.__extends) ||
3
  function (d, b) {
4
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
5
    function __() {
6
      this.constructor = d;
7
    }
8
    d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
9
  };
10
var Animal = (function () {
11
  function Animal(name) {
12
    this.name = name;
13
  }
14
  return Animal;
15
})();
16
var Cat = (function (_super) {
17
  __extends(Cat, _super);
18
  function Cat() {
19
    _super.apply(this, arguments);
20
  }
21
  Cat.prototype.sayHi = function () {
22
    console.log('Meow, My name is ' + this.name);
23
  };
24
  return Cat;
25
})(Animal);
26
var cat = new Cat('Tom');

展开收起

类的类型#

给类加上 TypeScript 的类型很简单，与接口类似：

1
class Animal {
2
  name: string;
3
  constructor(name: string) {
4
    this.name = name;
5
  }
6
  sayHi(): string {
7
    return `My name is ${this.name}`;
8
  }
9
}
10

11
let a: Animal = new Animal('Jack');
12
console.log(a.sayHi()); // My name is Jack

类实现接口#

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

1
interface Alarm {
2
    alert(): void;
3
}
4

5
class Door {
6
}
7

8
class SecurityDoor extends Door implements Alarm {
9
    alert() {
10
        console.log('SecurityDoor alert');
11
    }
12
}
13

14
class Car implements Alarm {
15
    alert() {
16
        console.log('Car alert');
17
    }
18
}

展开收起

一个类可以实现多个接口：

1
interface Alarm {
2
    alert(): void;
3
}
4

5
interface Light {
6
    lightOn(): void;
7
    lightOff(): void;
8
}
9

10
class Car implements Alarm, Light {
11
    alert() {
12
        console.log('Car alert');
13
    }
14
    lightOn() {
15
        console.log('Car light on');
16
    }
17
    lightOff() {
18
        console.log('Car light off');
19
    }
20
}

展开收起

上例中，Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。

接口继承接口#

接口与接口之间可以是继承关系：

1
interface Alarm {
2
    alert(): void;
3
}
4

5
interface LightableAlarm extends Alarm {
6
    lightOn(): void;
7
    lightOff(): void;
8
}

这很好理解，LightableAlarm 继承了 Alarm，除了拥有 alert 方法之外，还拥有两个新方法 lightOn 和 lightOff。

接口继承类#

常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：

1
class Point {
2
    x: number;
3
    y: number;
4
    constructor(x: number, y: number) {
5
        this.x = x;
6
        this.y = y;
7
    }
8
}
9

10
interface Point3d extends Point {
11
    z: number;
12
}
13

14
let point3d: Point3d = {x: 1, y: 2, z: 3};

为什么 TypeScript 会支持接口继承类呢？

实际上，当我们在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）。类本身可以作为类型使用，接口继承类本质上就是接口继承了该类实例的“形状”（Shape），但不继承它的实现。

所以我们既可以将 Point 当做一个类来用（使用 new Point 创建它的实例）：

1
class Point {
2
    x: number;
3
    y: number;
4
    constructor(x: number, y: number) {
5
        this.x = x;
6
        this.y = y;
7
    }
8
}
9

10
const p = new Point(1, 2);

也可以将 Point 当做一个类型来用（使用 : Point 表示参数的类型）：

1
class Point {
2
    x: number;
3
    y: number;
4
    constructor(x: number, y: number) {
5
        this.x = x;
6
        this.y = y;
7
    }
8
}
9

10
function printPoint(p: Point) {
11
    console.log(p.x, p.y);
12
}
13

14
printPoint(new Point(1, 2));

这个例子实际上可以等价于：

1
class Point {
2
    x: number;
3
    y: number;
4
    constructor(x: number, y: number) {
5
        this.x = x;
6
        this.y = y;
7
    }
8
}
9

10
interface PointInstanceType {
11
    x: number;
12
    y: number;
13
}
14

15
function printPoint(p: PointInstanceType) {
16
    console.log(p.x, p.y);
17
}
18

19
printPoint(new Point(1, 2));

展开收起

上例中我们新声明的 PointInstanceType 类型，与声明 class Point 时创建的 Point 类型是等价的。

所以回到 Point3d 的例子中，我们就能很容易的理解为什么 TypeScript 会支持接口继承类了：

1
class Point {
2
    x: number;
3
    y: number;
4
    constructor(x: number, y: number) {
5
        this.x = x;
6
        this.y = y;
7
    }
8
}
9

10
interface PointInstanceType {
11
    x: number;
12
    y: number;
13
}
14

15
// 等价于 interface Point3d extends PointInstanceType
16
interface Point3d extends Point {
17
    z: number;
18
}
19

20
let point3d: Point3d = {x: 1, y: 2, z: 3};

展开收起

当我们声明 interface Point3d extends Point 时，Point3d 继承的实际上是类 Point 的实例的类型。

换句话说，可以理解为定义了一个接口 Point3d 继承另一个接口 PointInstanceType。

所以「接口继承类」和「接口继承接口」没有什么本质的区别。

值得注意的是，PointInstanceType 相比于 Point，缺少了 constructor 方法，这是因为声明 Point 类时创建的 Point 类型是不包含构造函数的。另外，除了构造函数是不包含的，静态属性或静态方法也是不包含的（实例的类型当然不应该包括构造函数、静态属性或静态方法）。

换句话说，声明 Point 类时创建的 Point 类型只包含其中的实例属性和实例方法：

1
class Point {
2
    /** 静态属性，坐标系原点 */
3
    static origin = new Point(0, 0);
4
    /** 静态方法，计算与原点距离 */
5
    static distanceToOrigin(p: Point) {
6
        return Math.sqrt(p.x * p.x + p.y * p.y);
7
    }
8
    /** 实例属性，x 轴的值 */
9
    x: number;
10
    /** 实例属性，y 轴的值 */
11
    y: number;
12
    /** 构造函数 */
13
    constructor(x: number, y: number) {
14
        this.x = x;
15
        this.y = y;
16
    }
17
    /** 实例方法，打印此点 */
18
    printPoint() {
19
        console.log(this.x, this.y);
20
    }
21
}
22

23
interface PointInstanceType {
24
    x: number;
25
    y: number;
26
    printPoint(): void;
27
}
28

29
let p1: Point;
30
let p2: PointInstanceType;

展开收起

上例中最后的类型 Point 和类型 PointInstanceType 是等价的。

同样的，在接口继承类的时候，也只会继承它的实例属性和实例方法。

为什么要支持这种操作？#

这在实际开发中（尤其是库开发或大型架构）有两个非常巧妙的用途：

抽离既有实现的“形状”

如果你已经写了一个复杂的类，现在需要定义一个结构相似的接口，直接 extends 那个类可以让少写很多重复代码。这在重构旧的 JS 项目到 TS 时非常有用。

限制接口的“实现者”（私有成员魔法）

这是最核心的进阶技巧。如果类中包含 private 或 protected 成员，那么继承该类的接口也会包含这些私有成员。

这意味着：只有这个类及其子类，才能实现这个接口。

1
class Control {
2
    private state: any;
3
}
4

5
// SelectableControl 继承了 Control，包括私有属性 state
6
interface SelectableControl extends Control {
7
    select(): void;
8
}
9

10
// 成功：Button 是 Control 的子类，拥有 state 属性
11
class Button extends Control implements SelectableControl {
12
    select() { }
13
}
14

15
// 报错：Image 不是 Control 的子类，它缺少那个特定的私有属性 state
16
class Image implements SelectableControl {
17
    select() { }
18
}

展开收起

这种设计可以用来强制执行类层级结构，确保某些接口只能被特定的组件系列使用。

泛型#

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

可以简单的理解为**“类型的参数”**，动态设置类型。

简单的例子#

首先，我们来实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：

1
function createArray(length: number, value: any): Array<any> {
2
    let result = [];
3
    for (let i = 0; i < length; i++) {
4
        result[i] = value;
5
    }
6
    return result;
7
}
8

9
createArray(3, 'x'); // ['x', 'x', 'x']

上例中，使用了数组泛型来定义返回值的类型。

这段代码编译不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：

Array<any> 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 value 的类型。

这时候，泛型就派上用场了：

1
function createArray<T>(length: number, value: T): Array<T> {
2
    let result: T[] = [];
3
    for (let i = 0; i < length; i++) {
4
        result[i] = value;
5
    }
6
    return result;
7
}
8

9
createArray<string>(3, 'x'); // ['x', 'x', 'x']

上例中，我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。这里的 <T> 就像一个占位符。当你调用函数时，T 会被具体类型（如 string）替换。

接着在调用的时候，可以指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算出来：

1
function createArray<T>(length: number, value: T): Array<T> {
2
    let result: T[] = [];
3
    for (let i = 0; i < length; i++) {
4
        result[i] = value;
5
    }
6
    return result;
7
}
8

9
createArray(3, 'x'); // ['x', 'x', 'x']

多个类型参数#

定义泛型的时候，可以一次定义多个类型参数：

1
function swap<T, U>(tuple: [T, U]): [U, T] {
2
    return [tuple[1], tuple[0]];
3
}
4

5
swap([7, 'seven']); // ['seven', 7]

上例中，我们定义了一个 swap 函数，用来交换输入的元组。

泛型约束#

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

1
function loggingIdentity<T>(arg: T): T {
2
    console.log(arg.length);
3
    return arg;
4
}
5

6
// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。

这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

1
interface Lengthwise {
2
    length: number;
3
}
4

5
function loggingIdentity<T extends Lengthwise>(arg: T): T {
6
    console.log(arg.length);
7
    return arg;
8
}

上例中，我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状，也就是必须包含 length 属性。

此时如果调用 loggingIdentity 的时候，传入的 arg 不包含 length，那么在编译阶段就会报错了：

1
interface Lengthwise {
2
    length: number;
3
}
4

5
function loggingIdentity<T extends Lengthwise>(arg: T): T {
6
    console.log(arg.length);
7
    return arg;
8
}
9

10
loggingIdentity(7);
11
loggingIdentity([7]); // 1
12

13
// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.

多个类型参数之间也可以互相约束：

1
function copyFields<T extends U, U>(target: T, source: U): T {
2
    for (let id in source) {
3
        target[id] = (<T>source)[id];
4
    }
5
    return target;
6
}
7

8
let x = { a: 1, b: 2, c: 3, d: 4 };
9

10
copyFields(x, { b: 10, d: 20 });

上例中，我们使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段。

泛型接口#

可以使用接口的方式来定义一个函数需要符合的形状：

1
interface SearchFunc {
2
  (source: string, subString: string): boolean;
3
}
4

5
let mySearch: SearchFunc;
6
mySearch = function(source: string, subString: string) {
7
    return source.search(subString) !== -1;
8
}

当然也可以使用含有泛型的接口来定义函数的形状：

1
interface CreateArrayFunc {
2
    <T>(length: number, value: T): Array<T>;
3
}
4

5
let createArray: CreateArrayFunc;
6
createArray = function<T>(length: number, value: T): Array<T> {
7
    let result: T[] = [];
8
    for (let i = 0; i < length; i++) {
9
        result[i] = value;
10
    }
11
    return result;
12
}
13

14
createArray(3, 'x'); // ['x', 'x', 'x']

<T> 写在括号前面，意味着这是一个泛型函数接口。

它的含义是：“任何实现这个接口的函数，必须接受一个类型 T，一个数字类型的 length，以及一个类型为 T 的 value，最后返回一个元素类型全是 T 的数组。”，在调用函数时才确定 T 是什么类型。

进一步，我们可以把泛型参数提前到接口名上：

1
interface CreateArrayFunc<T> {
2
    (length: number, value: T): Array<T>;
3
}
4

5
let createArray: CreateArrayFunc<any>;
6
createArray = function<T>(length: number, value: T): Array<T> {
7
    let result: T[] = [];
8
    for (let i = 0; i < length; i++) {
9
        result[i] = value;
10
    }
11
    return result;
12
}
13

14
createArray(3, 'x'); // ['x', 'x', 'x']

注意，此时在使用泛型接口的时候，需要定义泛型的类型。在定义接口时就得确定 T 是什么。此处 T 为any，与上面代码意思相同，但是：

1
let createArray: CreateArrayFunc<string>;

只能接收创建string类型参数，而number类型会报错。

泛型类#

与泛型接口类似，泛型也可以用于类的类型定义中：

1
class GenericNumber<T> {
2
    zeroValue: T;
3
    add: (x: T, y: T) => T;
4
}
5

6
let myGenericNumber = new GenericNumber<number>();
7
myGenericNumber.zeroValue = 0;
8
myGenericNumber.add = function(x, y) { return x + y; };

泛型参数的默认类型#

在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

1
function createArray<T = string>(length: number, value: T): Array<T> {
2
    let result: T[] = [];
3
    for (let i = 0; i < length; i++) {
4
        result[i] = value;
5
    }
6
    return result;
7
}

声明合并#

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：

函数的合并#

我们可以使用重载定义多个函数类型：

1
function reverse(x: number): number;
2
function reverse(x: string): string;
3
function reverse(x: number | string): number | string {
4
    if (typeof x === 'number') {
5
        return Number(x.toString().split('').reverse().join(''));
6
    } else if (typeof x === 'string') {
7
        return x.split('').reverse().join('');
8
    }
9
}

接口的合并#

接口中的属性在合并时会简单的合并到一个接口中：

1
interface Alarm {
2
    price: number;
3
}
4
interface Alarm {
5
    weight: number;
6
}

相当于：

1
interface Alarm {
2
    price: number;
3
    weight: number;
4
}

注意，合并的属性的类型必须是唯一的：

1
interface Alarm {
2
    price: number;
3
}
4
interface Alarm {
5
    price: number;  // 虽然重复了，但是类型都是 `number`，所以不会报错
6
    weight: number;
7
}
8
interface Alarm {
9
    price: number;
10
}
11
interface Alarm {
12
    price: string;  // 类型不一致，会报错
13
    weight: number;
14
}
15

16
// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type.  Variable 'price' must be of type 'number', but here has type 'string'.

展开收起

接口中方法的合并，与函数的合并一样：

1
interface Alarm {
2
    price: number;
3
    alert(s: string): string;
4
}
5
interface Alarm {
6
    weight: number;
7
    alert(s: string, n: number): string;
8
}

相当于：

1
interface Alarm {
2
    price: number;
3
    weight: number;
4
    alert(s: string): string;
5
    alert(s: string, n: number): string;
6
}

类的合并#

类的合并与接口的合并规则一致。

TypeScript 基础

Wed, 25 Mar 2026 06:12:32 GMT

原始数据类型#

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

布尔值#

布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：

1
let isDone: boolean = false;
2

3
// 编译通过
4
// 后面约定，未强调编译错误的代码片段，默认为编译通过

注意，使用构造函数 Boolean 创造的对象不是布尔值：

1
let createdByNewBoolean: boolean = new Boolean(1);
2

3
// Type 'Boolean' is not assignable to type 'boolean'.
4
//   'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

事实上 new Boolean() 返回的是一个 Boolean 对象：

1
let createdByNewBoolean: Boolean = new Boolean(1);

直接调用 Boolean 也可以返回一个 boolean 类型：

1
let createdByBoolean: boolean = Boolean(1);

在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null 和 undefined）一样，不再赘述。

数值#

使用 number 定义数值类型：

1
let decLiteral: number = 6;
2
let hexLiteral: number = 0xf00d;
3
// ES6 中的二进制表示法
4
let binaryLiteral: number = 0b1010;
5
// ES6 中的八进制表示法
6
let octalLiteral: number = 0o744;
7
let notANumber: number = NaN;
8
let infinityNumber: number = Infinity;

编译结果：

1
var decLiteral = 6;
2
var hexLiteral = 0xf00d;
3
// ES6 中的二进制表示法
4
var binaryLiteral = 10;
5
// ES6 中的八进制表示法
6
var octalLiteral = 484;
7
var notANumber = NaN;
8
var infinityNumber = Infinity;

其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。

字符串#

使用 string 定义字符串类型：

1
let myName: string = 'Tom';
2
let myAge: number = 25;
3

4
// 模板字符串
5
let sentence: string = `Hello, my name is ${myName}.
6
I'll be ${myAge + 1} years old next month.`;

编译结果：

1
var myName = 'Tom';
2
var myAge = 25;
3
// 模板字符串
4
var sentence = "Hello, my name is " + myName + ".\nI'll be " + (myAge + 1) + " years old next month.";

空值#

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：

1
function alertName(): void {
2
    alert('My name is Tom');
3
}

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null（只在 —strictNullChecks 未指定时）：

1
let unusable: void = undefined;

Null 和 Undefined#

在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：

1
let u: undefined = undefined;
2
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：

1
// 这样不会报错
2
let num: number = undefined;
3
// 这样也不会报错
4
let u: undefined;
5
let num: number = u;

而 void 类型的变量不能赋值给 number 类型的变量：

1
let u: void;
2
let num: number = u;
3

4
// Type 'void' is not assignable to type 'number'.

任意值#

任意值（Any）用来表示允许赋值为任意类型。

什么是任意值类型#

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

1
let myFavoriteNumber: string = 'seven';
2
myFavoriteNumber = 7;
3

4
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

但如果是 any 类型，则允许被赋值为任意类型。

1
let myFavoriteNumber: any = 'seven';
2
myFavoriteNumber = 7;

任意值的属性和方法#

在任意值上访问任何属性都是允许的：

1
let anyThing: any = 'hello';
2
console.log(anyThing.myName);
3
console.log(anyThing.myName.firstName);

也允许调用任何方法：

1
let anyThing: any = 'Tom';
2
anyThing.setName('Jerry');
3
anyThing.setName('Jerry').sayHello();
4
anyThing.myName.setFirstName('Cat');

可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

未声明类型的变量#

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

1
let something;
2
something = 'seven';
3
something = 7;
4

5
something.setName('Tom');

等价于

1
let something: any;
2
something = 'seven';
3
something = 7;
4

5
something.setName('Tom');

类型推论#

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

什么是类型推论#

以下代码虽然没有指定类型，但是会在编译的时候报错：

1
let myFavoriteNumber = 'seven';
2
myFavoriteNumber = 7;
3

4
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

事实上，它等价于：

1
let myFavoriteNumber: string = 'seven';
2
myFavoriteNumber = 7;
3

4
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

1
let myFavoriteNumber;
2
myFavoriteNumber = 'seven';
3
myFavoriteNumber = 7;

联合类型#

联合类型（Union Types）表示取值可以为多种类型中的一种。

1
let myFavoriteNumber: string | number;
2
myFavoriteNumber = 'seven';
3
myFavoriteNumber = 7;
4
let myFavoriteNumber: string | number;
5
myFavoriteNumber = true;
6

7
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
8
//   Type 'boolean' is not assignable to type 'number'.

联合类型使用 | 分隔每个类型。

这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。

访问联合类型的属性或方法#

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

1
function getLength(something: string | number): number {
2
    return something.length;
3
}
4

5
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
6
//   Property 'length' does not exist on type 'number'.

上例中，length 不是 string 和 number 的共有属性，所以会报错。

访问 string 和 number 的共有属性是没问题的：

1
function getString(something: string | number): string {
2
    return something.toString();
3
}

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

1
let myFavoriteNumber: string | number;
2
myFavoriteNumber = 'seven';
3
console.log(myFavoriteNumber.length); // 5
4
myFavoriteNumber = 7;
5
console.log(myFavoriteNumber.length); // 编译时报错
6

7
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中，第二行的 myFavoriteNumber 被推断成了 string，访问它的 length 属性不会报错。

而第四行的 myFavoriteNumber 被推断成了 number，访问它的 length 属性时就报错了。

接口#

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

什么是接口#

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

1
interface Person {
2
    name: string;
3
    age: number;
4
}
5

6
let tom: Person = {
7
    name: 'Tom',
8
    age: 25
9
};

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。

定义的变量比接口少了一些属性是不允许的：

1
interface Person {
2
    name: string;
3
    age: number;
4
}
5

6
let tom: Person = {
7
    name: 'Tom'
8
};
9

10
// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
11
//   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的：

1
interface Person {
2
    name: string;
3
    age: number;
4
}
5

6
let tom: Person = {
7
    name: 'Tom',
8
    age: 25,
9
    gender: 'male'
10
};
11

12
// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
13
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可见，赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性#

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

1
interface Person {
2
    name: string;
3
    age?: number;
4
}
5

6
let tom: Person = {
7
    name: 'Tom'
8
};
9
interface Person {
10
    name: string;
11
    age?: number;
12
}
13

14
let tom: Person = {
15
    name: 'Tom',
16
    age: 25
17
};

展开收起

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性：

1
interface Person {
2
    name: string;
3
    age?: number;
4
}
5

6
let tom: Person = {
7
    name: 'Tom',
8
    age: 25,
9
    gender: 'male'
10
};
11

12
// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
13
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

任意属性#

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

1
interface Person {
2
    name: string;
3
    age?: number;
4
    [propName: string]: any;
5
}
6

7
let tom: Person = {
8
    name: 'Tom',
9
    gender: 'male'
10
};

使用 [propName: string] 定义了任意属性取 string 类型的值。

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

1
interface Person {
2
    name: string;
3
    age?: number;
4
    [propName: string]: string;
5
}
6

7
let tom: Person = {
8
    name: 'Tom',
9
    age: 25,
10
    gender: 'male'
11
};
12

13
// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
14
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
15
//   Index signatures are incompatible.
16
//     Type 'string | number' is not assignable to type 'string'.
17
//       Type 'number' is not assignable to type 'string'.

展开收起

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

另外，在报错信息中可以看出，此时 { name: 'Tom', age: 25, gender: 'male' } 的类型被推断成了 { [x: string]: string | number; name: string; age: number; gender: string; }，这是联合类型和接口的结合。

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

1
interface Person {
2
    name: string;
3
    age?: number;
4
    [propName: string]: string | number;
5
}
6

7
let tom: Person = {
8
    name: 'Tom',
9
    age: 25,
10
    gender: 'male'
11
};
12

13
// 类型“number | undefined”的属性“age”不能赋给“string”索引类型“string | number”。

然而age 是可选属性，age 的值可能为 undefined 所以正确的写法应该是：

1
interface Person {
2
    name: string;
3
    age?: number;
4
    [propName: string]: string | number | undefined;
5
}

只读属性#

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

1
interface Person {
2
    readonly id: number;
3
    name: string;
4
    age?: number;
5
    [propName: string]: any;
6
}
7

8
let tom: Person = {
9
    id: 89757,
10
    name: 'Tom',
11
    gender: 'male'
12
};
13

14
tom.id = 9527;
15

16
// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

展开收起

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

1
interface Person {
2
    readonly id: number;
3
    name: string;
4
    age?: number;
5
    [propName: string]: any;
6
}
7

8
let tom: Person = {
9
    name: 'Tom',
10
    gender: 'male'
11
};
12

13
tom.id = 89757;
14

15
// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
16
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
17
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

展开收起

上例中，报错信息有两处，第一处是在对 tom 进行赋值的时候，没有给 id 赋值。

第二处是在给 tom.id 赋值的时候，由于它是只读属性，所以报错了。

数组的类型#

在 TypeScript 中，数组类型有多种定义方式，比较灵活。

「类型 + 方括号」表示法#

最简单的方法是使用「类型 + 方括号」来表示数组：

1
let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型：

1
let fibonacci: number[] = [1, '1', 2, 3, 5];
2

3
// Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：

1
let fibonacci: number[] = [1, 1, 2, 3, 5];
2
fibonacci.push('8');
3

4
// Argument of type '"8"' is not assignable to parameter of type 'number'.

上例中，push 方法只允许传入 number 类型的参数，但是却传了一个 "8" 类型的参数，所以报错了。这里 "8" 是一个字符串字面量类型，会在后续章节中详细介绍。

数组泛型#

我们也可以使用数组泛型（Array Generic） Array<elemType> 来表示数组：

1
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

用接口表示数组#

接口也可以用来描述数组：

1
interface NumberArray {
2
    [index: number]: number;
3
}
4
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字。

虽然接口也可以用来描述数组，但是我们一般不会这么做，因为这种方式比前两种方式复杂多了。

不过有一种情况例外，那就是它常用来表示类数组。

类数组#

类数组（Array-like Object）不是数组类型，比如 arguments：

1
function sum() {
2
    let args: number[] = arguments;
3
}
4

5
// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上例中，arguments 实际上是一个类数组，它包含了函数运行时的所有参数。虽然它看起来像数组，但它没有数组的高阶方法（如 map, forEach）。不能用普通的数组的方式来描述，而应该用接口：

1
function sum() {
2
    let args: {
3
        [index: number]: number;
4
        length: number;
5
        callee: Function;
6
    } = arguments;
7
}

在这个例子中，我们除了约束当索引的类型是数字时，值的类型必须是数字之外，也约束了它还有 length 和 callee 两个属性。

[index: number]: number

这行代码告诉 TypeScript：“这个对象可以通过数字索引来访问（比如 args[0], args[1]），并且访问到的值必须是 number 类型。”

由于 arguments 存储的是传入函数的参数，这里显式规定了所有参数都必须是数字。

length: number

类数组对象必须具备的属性，表示传入参数的数量。

callee: Function

这是一个指向当前正在执行的函数的引用。

注意： 在现代 JavaScript 的“严格模式”（Strict Mode）下，访问 arguments.callee 会报错。在 TypeScript 中保留它通常是为了兼容老旧代码或特定的底层逻辑。

事实上常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：

1
function sum() {
2
    let args: IArguments = arguments;
3
}

其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：

1
interface IArguments {
2
    [index: number]: any;
3
    length: number;
4
    callee: Function;
5
}

我们现在很少直接使用 arguments 对象，因为它不够直观且难以优化。更推荐使用 剩余参数（Rest Parameters），这样 TypeScript 可以自动推导类型，且代码更简洁：

1
// 使用剩余参数，args 直接就是一个真正的数组
2
function sum(...args: number[]) {
3
    // args 此时是 number[] 类型，可以直接使用 reduce 等数组方法
4
    return args.reduce((a, b) => a + b, 0);
5
}

any 在数组中的应用#

一个比较常见的做法是，用 any 表示数组中允许出现任意类型：

1
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

函数的类型#

函数声明#

在 JavaScript 中，有两种常见的定义函数的方式——函数声明（Function Declaration）和函数表达式（Function Expression）：

1
// 函数声明（Function Declaration）
2
function sum(x, y) {
3
    return x + y;
4
}
5

6
// 函数表达式（Function Expression）
7
let mySum = function (x, y) {
8
    return x + y;
9
};

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单：

1
function sum(x: number, y: number): number {
2
    return x + y;
3
}

注意，输入多余的（或者少于要求的）参数，是不被允许的：

1
function sum(x: number, y: number): number {
2
    return x + y;
3
}
4
sum(1, 2, 3);
5

6
// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.
7
function sum(x: number, y: number): number {
8
    return x + y;
9
}
10
sum(1);
11

12
// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

函数表达式#

如果要我们现在写一个函数表达式（Function Expression）的定义，可能会写成这样：

1
let mySum = function (x: number, y: number): number {
2
    return x + y;
3
};

这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 mySum 添加类型，则应该是这样：

1
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
2
    return x + y;
3
};

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

在 ES6 中，=> 叫做箭头函数。

用接口定义函数的形状#

我们也可以使用接口的方式来定义一个函数需要符合的形状：

1
interface SearchFunc {
2
    (source: string, subString: string): boolean;
3
}
4

5
let mySearch: SearchFunc;
6
mySearch = function(source: string, subString: string) {
7
    return source.search(subString) !== -1;
8
}

采用函数表达式|接口定义函数的方式时，对等号左侧进行类型限制，可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。

可选参数#

前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？

与接口中的可选属性类似，我们用 ? 表示可选的参数：

1
function buildName(firstName: string, lastName?: string) {
2
    if (lastName) {
3
        return firstName + ' ' + lastName;
4
    } else {
5
        return firstName;
6
    }
7
}
8
let tomcat = buildName('Tom', 'Cat');
9
let tom = buildName('Tom');

需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了：

1
function buildName(firstName?: string, lastName: string) {
2
    if (firstName) {
3
        return firstName + ' ' + lastName;
4
    } else {
5
        return lastName;
6
    }
7
}
8
let tomcat = buildName('Tom', 'Cat');
9
let tom = buildName(undefined, 'Tom');
10

11
// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.

参数默认值#

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数：

1
function buildName(firstName: string, lastName: string = 'Cat') {
2
    return firstName + ' ' + lastName;
3
}
4
let tomcat = buildName('Tom', 'Cat');
5
let tom = buildName('Tom');

此时就不受「可选参数必须接在必需参数后面」的限制了：

1
function buildName(firstName: string = 'Tom', lastName: string) {
2
    return firstName + ' ' + lastName;
3
}
4
let tomcat = buildName('Tom', 'Cat');
5
let cat = buildName(undefined, 'Cat');

剩余参数#

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）：

1
function push(array, ...items) {
2
    items.forEach(function(item) {
3
        array.push(item);
4
    });
5
}
6

7
let a: any[] = [];
8
push(a, 1, 2, 3);

事实上，items 是一个数组。所以我们可以用数组的类型来定义它：

1
function push(array: any[], ...items: any[]) {
2
    items.forEach(function(item) {
3
        array.push(item);
4
    });
5
}
6

7
let a = [];
8
push(a, 1, 2, 3);

注意，rest 参数只能是最后一个参数。

重载#

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。

利用联合类型，我们可以这么实现：

1
function reverse(x: number | string): number | string | void {
2
    if (typeof x === 'number') {
3
        return Number(x.toString().split('').reverse().join(''));
4
    } else if (typeof x === 'string') {
5
        return x.split('').reverse().join('');
6
    }
7
}

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

这时，我们可以使用重载定义多个 reverse 的函数类型：

1
function reverse(x: number): number;
2
function reverse(x: string): string;
3
function reverse(x: number | string): number | string | void {
4
    if (typeof x === 'number') {
5
        return Number(x.toString().split('').reverse().join(''));
6
    } else if (typeof x === 'string') {
7
        return x.split('').reverse().join('');
8
    }
9
}

上例中，我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确的看到前两个提示。

注意，TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

类型断言#

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法#

1
值 as 类型

或

1
<类型>值

在 tsx 语法（React 的 jsx 语法的 ts 版）中必须使用前者，即 值 as 类型。

形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode，在 ts 中除了表示类型断言之外，也可能是表示一个泛型。

故在使用类型断言时，统一使用 值 as 类型 这样的语法。

类型断言的用途#

类型断言的常见用途有以下几种：

将一个联合类型断言为其中一个类型#

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法：

1
interface Cat {
2
    name: string;
3
    run(): void;
4
}
5
interface Fish {
6
    name: string;
7
    swim(): void;
8
}
9

10
function getName(animal: Cat | Fish) {
11
    return animal.name;
12
}

而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型特有的属性或方法，比如：

1
interface Cat {
2
    name: string;
3
    run(): void;
4
}
5
interface Fish {
6
    name: string;
7
    swim(): void;
8
}
9

10
function isFish(animal: Cat | Fish) {
11
    if (typeof animal.swim === 'function') {
12
        return true;
13
    }
14
    return false;
15
}
16

17
// index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.
18
//   Property 'swim' does not exist on type 'Cat'.

展开收起

上面的例子中，获取 animal.swim 的时候会报错。

此时可以使用类型断言，将 animal 断言成 Fish：

1
interface Cat {
2
    name: string;
3
    run(): void;
4
}
5
interface Fish {
6
    name: string;
7
    swim(): void;
8
}
9

10
function isFish(animal: Cat | Fish) {
11
    if (typeof (animal as Fish).swim === 'function') {
12
        return true;
13
    }
14
    return false;
15
}

展开收起

这样就可以解决访问 animal.swim 时报错的问题了。

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：

1
interface Cat {
2
    name: string;
3
    run(): void;
4
}
5
interface Fish {
6
    name: string;
7
    swim(): void;
8
}
9

10
function swim(animal: Cat | Fish) {
11
    (animal as Fish).swim();
12
}
13

14
const tom: Cat = {
15
    name: 'Tom',
16
    run() { console.log('run') }
17
};
18
swim(tom);
19
// Uncaught TypeError: animal.swim is not a function`

展开收起

上面的例子编译时不会报错，但在运行时会报错：

1
Uncaught TypeError: animal.swim is not a function`

原因是 (animal as Fish).swim() 这段代码隐藏了 animal 可能为 Cat 的情况，将 animal 直接断言为 Fish 了，而 TypeScript 编译器信任了我们的断言，故在调用 swim() 时没有编译错误。

可是 swim 函数接受的参数是 Cat | Fish，一旦传入的参数是 Cat 类型的变量，由于 Cat 上没有 swim 方法，就会导致运行时错误了。

总之，使用类型断言时一定要格外小心，尽量避免断言后调用方法或引用深层属性，以减少不必要的运行时错误。

将一个父类断言为更加具体的子类#

当类之间有继承关系时，类型断言也是很常见的：

1
class ApiError extends Error {
2
    code: number = 0;
3
}
4
class HttpError extends Error {
5
    statusCode: number = 200;
6
}
7

8
function isApiError(error: Error) {
9
    if (typeof (error as ApiError).code === 'number') {
10
        return true;
11
    }
12
    return false;
13
}

上面的例子中，我们声明了函数 isApiError，它用来判断传入的参数是不是 ApiError 类型，为了实现这样一个函数，它的参数的类型肯定得是比较抽象的父类 Error，这样的话这个函数就能接受 Error 或它的子类作为参数了。

但是由于父类 Error 中没有 code 属性，故直接获取 error.code 会报错，需要使用类型断言获取 (error as ApiError).code。

大家可能会注意到，在这个例子中有一个更合适的方式来判断是不是 ApiError，那就是使用 instanceof：

1
class ApiError extends Error {
2
    code: number = 0;
3
}
4
class HttpError extends Error {
5
    statusCode: number = 200;
6
}
7

8
function isApiError(error: Error) {
9
    if (error instanceof ApiError) {
10
        return true;
11
    }
12
    return false;
13
}

上面的例子中，确实使用 instanceof 更加合适，因为 ApiError 是一个 JavaScript 的类，能够通过 instanceof 来判断 error 是否是它的实例。

但是有的情况下 ApiError 和 HttpError 不是一个真正的类，而只是一个 TypeScript 的接口（interface），接口是一个类型，不是一个真正的值，它在编译结果中会被删除，当然就无法使用 instanceof 来做运行时判断了：

1
interface ApiError extends Error {
2
    code: number;
3
}
4
interface HttpError extends Error {
5
    statusCode: number;
6
}
7

8
function isApiError(error: Error) {
9
    if (error instanceof ApiError) {
10
        return true;
11
    }
12
    return false;
13
}
14

15
// index.ts:9:26 - error TS2693: 'ApiError' only refers to a type, but is being used as a value here.

展开收起

此时就只能用类型断言，通过判断是否存在 code 属性，来判断传入的参数是不是 ApiError 了：

1
interface ApiError extends Error {
2
    code: number;
3
}
4
interface HttpError extends Error {
5
    statusCode: number;
6
}
7

8
function isApiError(error: Error) {
9
    if (typeof (error as ApiError).code === 'number') {
10
        return true;
11
    }
12
    return false;
13
}

将任何一个类型断言为 `any`#

理想情况下，TypeScript 的类型系统运转良好，每个值的类型都具体而精确。

当我们引用一个在此类型上不存在的属性或方法时，就会报错：

1
const foo: number = 1;
2
foo.length = 1;
3

4
// index.ts:2:5 - error TS2339: Property 'length' does not exist on type 'number'.

上面的例子中，数字类型的变量 foo 上是没有 length 属性的，故 TypeScript 给出了相应的错误提示。

这种错误提示显然是非常有用的。

但有的时候，我们非常确定这段代码不会出错，比如下面这个例子：

1
window.foo = 1;
2

3
// index.ts:1:8 - error TS2339: Property 'foo' does not exist on type 'Window & typeof globalThis'.

上面的例子中，我们需要将 window 上添加一个属性 foo，但 TypeScript 编译时会报错，提示我们 window 上不存在 foo 属性。

此时我们可以使用 as any 临时将 window 断言为 any 类型：

1
(window as any).foo = 1;

在 any 类型的变量上，访问任何属性都是允许的。

需要注意的是，将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段。

它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。

上面的例子中，我们也可以通过扩展 window 的类型解决这个错误，不过如果只是临时的增加 foo 属性，as any 会更加方便。

总之，一方面不能滥用 as any，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡（这也是 TypeScript 的设计理念之一），才能发挥出 TypeScript 最大的价值。

将 `any` 断言为一个具体的类型#

在日常的开发中，我们不可避免的需要处理 any 类型的变量，它们可能是由于第三方库未能定义好自己的类型，也有可能是历史遗留的或其他人编写的烂代码，还可能是受到 TypeScript 类型系统的限制而无法精确定义类型的场景。

遇到 any 类型的变量时，我们可以选择无视它，任由它滋生更多的 any。

我们也可以选择改进它，通过类型断言及时的把 any 断言为精确的类型，亡羊补牢，使我们的代码向着高可维护性的目标发展。

举例来说，历史遗留的代码中有个 getCacheData，它的返回值是 any：

1
function getCacheData(key: string): any {
2
    return (window as any).cache[key];
3
}

那么我们在使用它时，最好能够将调用了它之后的返回值断言成一个精确的类型，这样就方便了后续的操作：

1
function getCacheData(key: string): any {
2
    return (window as any).cache[key];
3
}
4

5
interface Cat {
6
    name: string;
7
    run(): void;
8
}
9

10
const tom = getCacheData('tom') as Cat;
11
tom.run();

上面的例子中，我们调用完 getCacheData 之后，立即将它断言为 Cat 类型。这样的话明确了 tom 的类型，后续对 tom 的访问时就有了代码补全，提高了代码的可维护性。

类型断言的限制#

从上面的例子中，我们可以总结出：

联合类型可以被断言为其中一个类型
父类可以被断言为子类
任何类型都可以被断言为 any
any 可以被断言为任何类型

那么类型断言有没有什么限制呢？是不是任何一个类型都可以被断言为任何另一个类型呢？

答案是否定的——并不是任何一个类型都可以被断言为任何另一个类型。

具体来说，若 A 兼容 B，那么 A 能够被断言为 B，B 也能被断言为 A。

下面我们通过一个简化的例子，来理解类型断言的限制：

1
interface Animal {
2
    name: string;
3
}
4
interface Cat {
5
    name: string;
6
    run(): void;
7
}
8

9
let tom: Cat = {
10
    name: 'Tom',
11
    run: () => { console.log('run') }
12
};
13
let animal: Animal = tom;

TypeScript 是结构类型系统，类型之间的对比只会比较它们最终的结构，而会忽略它们定义时的关系。

在上面的例子中，Cat 包含了 Animal 中的所有属性，除此之外，它还有一个额外的方法 run。TypeScript 并不关心 Cat 和 Animal 之间定义时是什么关系，而只会看它们最终的结构有什么关系——所以它与 Cat extends Animal 是等价的：

1
interface Animal {
2
    name: string;
3
}
4
interface Cat extends Animal {
5
    run(): void;
6
}

那么也不难理解为什么 Cat 类型的 tom 可以赋值给 Animal 类型的 animal 了——就像面向对象编程中我们可以将子类的实例赋值给类型为父类的变量。

我们把它换成 TypeScript 中更专业的说法，即：Animal 兼容 Cat。

当 Animal 兼容 Cat 时，它们就可以互相进行类型断言了：

1
interface Animal {
2
    name: string;
3
}
4
interface Cat {
5
    name: string;
6
    run(): void;
7
}
8

9
function testAnimal(animal: Animal) {
10
    return (animal as Cat);
11
}
12
function testCat(cat: Cat) {
13
    return (cat as Animal);
14
}

这样的设计其实也很容易就能理解：

允许 animal as Cat 是因为「父类可以被断言为子类」，这个前面已经学习过了
允许 cat as Animal 是因为既然子类拥有父类的属性和方法，那么被断言为父类，获取父类的属性、调用父类的方法，就不会有任何问题，故「子类可以被断言为父类」

总之，若 A 兼容 B，那么 A 能够被断言为 B，B 也能被断言为 A。

同理，若 B 兼容 A，那么 A 能够被断言为 B，B 也能被断言为 A。

所以这也可以换一种说法：

要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可，这也是为了在类型断言时的安全考虑，毕竟毫无根据的断言是非常危险的。

综上所述：

联合类型可以被断言为其中一个类型
父类可以被断言为子类
任何类型都可以被断言为 any
any 可以被断言为任何类型
要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可

其实前四种情况都是最后一个的特例。

双重断言#

既然：

任何类型都可以被断言为 any
any 可以被断言为任何类型

那么我们是不是可以使用双重断言 as any as Foo 来将任何一个类型断言为任何另一个类型呢？

1
interface Cat {
2
    run(): void;
3
}
4
interface Fish {
5
    swim(): void;
6
}
7

8
function testCat(cat: Cat) {
9
    return (cat as any as Fish);
10
}

在上面的例子中，若直接使用 cat as Fish 肯定会报错，因为 Cat 和 Fish 互相都不兼容。

但是若使用双重断言，则可以打破「要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可」的限制，将任何一个类型断言为任何另一个类型。

若使用了这种双重断言，那么十有八九是非常错误的，它很可能会导致运行时错误。

除非迫不得已，千万别用双重断言。

类型断言 vs 类型转换#

类型断言只会影响 TypeScript 编译时的类型，类型断言语句在编译结果中会被删除：

1
function toBoolean(something: any): boolean {
2
    return something as boolean;
3
}
4

5
toBoolean(1);
6
// 返回值为 1

在上面的例子中，将 something 断言为 boolean 虽然可以通过编译，但是并没有什么用，代码在编译后会变成：

1
function toBoolean(something) {
2
    return something;
3
}
4

5
toBoolean(1);
6
// 返回值为 1

所以类型断言不是类型转换，它不会真的影响到变量的类型。

若要进行类型转换，需要直接调用类型转换的方法：

1
function toBoolean(something: any): boolean {
2
    return Boolean(something);
3
}
4

5
toBoolean(1);
6
// 返回值为 true

类型断言 vs 类型声明#

在这个例子中：

1
function getCacheData(key: string): any {
2
    return (window as any).cache[key];
3
}
4

5
interface Cat {
6
    name: string;
7
    run(): void;
8
}
9

10
const tom = getCacheData('tom') as Cat;
11
tom.run();

我们使用 as Cat 将 any 类型断言为了 Cat 类型。

但实际上还有其他方式可以解决这个问题：

1
function getCacheData(key: string): any {
2
    return (window as any).cache[key];
3
}
4

5
interface Cat {
6
    name: string;
7
    run(): void;
8
}
9

10
const tom: Cat = getCacheData('tom');
11
tom.run();

上面的例子中，我们通过类型声明的方式，将 tom 声明为 Cat，然后再将 any 类型的 getCacheData('tom') 赋值给 Cat 类型的 tom。

这和类型断言是非常相似的，而且产生的结果也几乎是一样的——tom 在接下来的代码中都变成了 Cat 类型。

它们的区别，可以通过这个例子来理解：

1
interface Animal {
2
    name: string;
3
}
4
interface Cat {
5
    name: string;
6
    run(): void;
7
}
8

9
const animal: Animal = {
10
    name: 'tom'
11
};
12
let tom = animal as Cat;

在上面的例子中，由于 Animal 兼容 Cat，故可以将 animal 断言为 Cat 赋值给 tom。

但是若直接声明 tom 为 Cat 类型：

1
interface Animal {
2
    name: string;
3
}
4
interface Cat {
5
    name: string;
6
    run(): void;
7
}
8

9
const animal: Animal = {
10
    name: 'tom'
11
};
12
let tom: Cat = animal;
13

14
// index.ts:12:5 - error TS2741: Property 'run' is missing in type 'Animal' but required in type 'Cat'.

则会报错，不允许将 animal 赋值为 Cat 类型的 tom。

这很容易理解，Animal 可以看作是 Cat 的父类，当然不能将父类的实例赋值给类型为子类的变量。

深入的讲，它们的核心区别就在于：

animal 断言为 Cat，只需要满足 Animal 兼容 Cat 或 Cat 兼容 Animal 即可
animal 赋值给 tom，需要满足 Cat 兼容 Animal 才行

但是 Cat 并不兼容 Animal。

而在前一个例子中，由于 getCacheData('tom') 是 any 类型，any 兼容 Cat，Cat 也兼容 any，故

1
const tom = getCacheData('tom') as Cat;

等价于

1
const tom: Cat = getCacheData('tom');

知道了它们的核心区别，就知道了类型声明是比类型断言更加严格的。

所以为了增加代码的质量，我们最好优先使用类型声明，这也比类型断言的 as 语法更加优雅。

类型断言 vs 泛型#

还是这个例子：

1
function getCacheData(key: string): any {
2
    return (window as any).cache[key];
3
}
4

5
interface Cat {
6
    name: string;
7
    run(): void;
8
}
9

10
const tom = getCacheData('tom') as Cat;
11
tom.run();

我们还有第三种方式可以解决这个问题，那就是泛型：

1
function getCacheData<T>(key: string): T {
2
    return (window as any).cache[key];
3
}
4

5
interface Cat {
6
    name: string;
7
    run(): void;
8
}
9

10
const tom = getCacheData<Cat>('tom');
11
tom.run();

通过给 getCacheData 函数添加了一个泛型 <T>，我们可以更加规范的实现对 getCacheData 返回值的约束，这也同时去除掉了代码中的 any，是最优的一个解决方案。

内置对象#

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。

内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

ECMAScript 的内置对象#

ECMAScript 标准提供的内置对象有：

Boolean、Error、Date、RegExp 等。

我们可以在 TypeScript 中将变量定义为这些类型：

1
let b: Boolean = new Boolean(1);
2
let e: Error = new Error('Error occurred');
3
let d: Date = new Date();
4
let r: RegExp = /[a-z]/;

更多的内置对象，可以查看 MDN 的文档。

而他们的定义文件，则在 TypeScript 核心库的定义文件中。

DOM 和 BOM 的内置对象#

DOM 和 BOM 提供的内置对象有：

Document、HTMLElement、Event、NodeList 等。

TypeScript 中会经常用到这些类型：

1
let body: HTMLElement = document.body;
2
let allDiv: NodeList = document.querySelectorAll('div');
3
document.addEventListener('click', function(e: MouseEvent) {
4
  // Do something
5
});

它们的定义文件同样在 TypeScript 核心库的定义文件中。

TypeScript 核心库的定义文件#

TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的。

当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了，比如：

1
Math.pow(10, '2');
2

3
// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

上面的例子中，Math.pow 必须接受两个 number 类型的参数。事实上 Math.pow 的类型定义如下：

1
interface Math {
2
    /**
3
     * Returns the value of a base expression taken to a specified power.
4
     * @param x The base value of the expression.
5
     * @param y The exponent value of the expression.
6
     */
7
    pow(x: number, y: number): number;
8
}

再举一个 DOM 中的例子：

1
document.addEventListener('click', function(e) {
2
    console.log(e.targetCurrent);
3
});
4

5
// index.ts(2,17): error TS2339: Property 'targetCurrent' does not exist on type 'MouseEvent'.

上面的例子中，addEventListener 方法是在 TypeScript 核心库中定义的：

1
interface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEvent {
2
    addEventListener(type: string, listener: (ev: MouseEvent) => any, useCapture?: boolean): void;
3
}

所以 e 被推断成了 MouseEvent，而 MouseEvent 是没有 targetCurrent 属性的，所以报错了。

注意，TypeScript 核心库的定义中不包含 Node.js 部分。

用 TypeScript 写 Node.js#

Node.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件：

Terminal window

1
npm install @types/node --save-dev

state

Sun, 18 Jan 2026 01:47:40 GMT

组件通常需要根据交互更改屏幕上显示的内容。输入表单应该更新输入字段，单击轮播图上的“下一个”应该更改显示的图片，单击“购买”应该将商品放入购物车。组件需要“记住”某些东西：当前输入值、当前图片、购物车。在 React 中，这种组件特有的记忆被称为 state。

为什么要使用 state#

props 是来自组件外部的数据，是无法更改的，如果一个组件需要保存自己的数据该怎么办？并随着时间保持它？或者是让我们的应用程序具有交互性，由于某个操作而更改 UI ?

这就是 state 的作用，基本上就是一个组件的数据可以随着时间的推移而保持，我们由 state 来获取数据。可以认为 state 作为组件的内存，随着组件的创建而创建，随着组件的卸载而销毁。

用户产生的每一条数据都是一个 state ，每当更新 state 时，react 都会重新渲染，生成新的组件视图，到用户界面上就是更改 UI 。

以下是一个渲染雕塑图片的组件。点击 “Next” 按钮应该显示下一个雕塑并将 index 更改为 1，再次点击又更改为 2，以此类推。但这个组件现在不起作用

1
import { sculptureList } from './data.js'
2

3
export default function Gallery() {
4
  let index = 0
5

6
  function handleClick() {
7
    index = index + 1
8
  }
9

10
  let sculpture = sculptureList[index]
11
  return (
12
    <>
13
      <button onClick={handleClick}>Next</button>
14
      <h2>
15
        <i>{sculpture.name} </i>
16
        by {sculpture.artist}
17
      </h2>
18
      <h3>
19
        ({index + 1} of {sculptureList.length})
20
      </h3>
21
    </>
22
  )
23
}

展开收起

handleClick() 事件处理函数正在更新局部变量 index。但存在两个原因使得变化不可见：

局部变量无法在多次渲染中持久保存。 当 React 再次渲染这个组件时，它会从头开始渲染——不会考虑之前对局部变量的任何更改。
更改局部变量不会触发渲染。 React 没有意识到它需要使用新数据再次渲染组件。

要使用新数据更新组件，需要做两件事：

保留渲染之间的数据。
触发 React 使用新数据渲染组件（重新渲染）。

useState Hook 提供了这两个功能：

State 变量 用于保存渲染间的数据。
State setter 函数 更新变量并触发 React 再次渲染组件。

Hooks ——以 use 开头的函数——只能在组件或自定义 Hook 的最顶层调用。你不能在条件语句、循环语句或其他嵌套函数内调用 Hook。Hook 是函数，但将它们视为关于组件需求的无条件声明会很有帮助。在组件顶部 “use” React 特性，类似于在文件顶部“导入”模块。

添加一个 state 变量#

要添加 state 变量，先从文件顶部的 React 中导入 useState：

1
import { useState } from 'react';

将let index = 0修改为

1
const [index, setIndex] = useState(0);

index 是一个 state 变量，setIndex 是对应的 setter 函数。

这里的 [ 和 ] 语法称为数组解构，它允许你从数组中读取值。 useState 返回的数组总是正好有两项。

以下展示了它们在 handleClick() 中是如何共同起作用的：

1
function handleClick() {
2
  setIndex(index + 1);
3
}

`useState`#

当你调用 useState 时，你是在告诉 React 你想让这个组件记住一些东西：

1
const [index, setIndex] = useState(0);

在这个例子里，你希望 React 记住 index。

useState 的唯一参数是 state 变量的初始值。在这个例子中，index 的初始值被useState(0)设置为 0。

每次你的组件渲染时，useState 都会给你一个包含两个值的数组：

state 变量 (index) 会保存上次渲染的值。
state setter 函数 (setIndex) 可以更新 state 变量并触发 React 重新渲染组件。

以下是实际发生的情况：

1
const [index, setIndex] = useState(0);

组件进行第一次渲染。 因为你将 0 作为 index 的初始值传递给 useState，它将返回 [0, setIndex]。 React 记住 0 是最新的 state 值。
你更新了 state。当用户点击按钮时，它会调用 setIndex(index + 1)。 index 是 0，所以它是 setIndex(1)。这告诉 React 现在记住 index 是 1 并触发下一次渲染。
组件进行第二次渲染。React 仍然看到 useState(0)，但是因为 React 记住了你将 index 设置为了 1，它将返回 [1, setIndex]。
以此类推！

在同一组件的每次渲染中，Hooks 都依托于一个稳定的调用顺序。这在实践中很有效，因为如果你遵循上面的规则（“只在顶层调用 Hooks”），Hooks 将始终以相同的顺序被调用。

在 React 内部，为每个组件保存了一个数组，其中每一项都是一个 state 对。它维护当前 state 对的索引值，在渲染之前将其设置为 “0”。每次调用 useState 时，React 都会为你提供一个 state 对并增加索引值。

一个简单的 useState 实现：

1
let componentHooks = []
2
let currentHookIndex = 0
3

4
// useState 在 React 中是如何工作的（简化版）
5
function useState(initialState) {
6
  let pair = componentHooks[currentHookIndex]
7
  if (pair) {
8
    // 这不是第一次渲染
9
    // 所以 state pair 已经存在
10
    // 将其返回并为下一次 hook 的调用做准备
11
    currentHookIndex++
12
    return pair
13
  }
14

15
  // 这是我们第一次进行渲染
16
  // 所以新建一个 state pair 然后存储它
17
  pair = [initialState, setState]
18

19
  function setState(nextState) {
20
    // 当用户发起 state 的变更，
21
    // 把新的值放入 pair 中
22
    pair[0] = nextState
23
    updateDOM()
24
  }
25

26
  // 存储这个 pair 用于将来的渲染
27
  // 并且为下一次 hook 的调用做准备
28
  componentHooks[currentHookIndex] = pair
29
  currentHookIndex++
30
  return pair
31
}

展开收起

State 是隔离且私有的#

State 是屏幕上组件实例内部的状态。换句话说，如果你渲染同一个组件两次，每个副本都会有完全隔离的 state！改变其中一个不会影响另一个。

在这个例子中， Gallery 组件以同样的逻辑被渲染了两次。

1
import Gallery from './Gallery.js'
2

3
export default function Page() {
4
  return (
5
    <div className='Page'>
6
      <Gallery />
7
      <Gallery />
8
    </div>
9
  )
10
}

这就是 state 与声明在模块顶部的普通变量不同的原因。 State 不依赖于特定的函数调用或在代码中的位置，它的作用域“只限于”屏幕上的某块特定区域。你渲染了两个 <Gallery /> 组件，所以它们的 state 是分别存储的。

还要注意 Page 组件“不知道”关于 Gallery state 的任何信息，甚至不知道它是否有任何 state。与 props 不同，state 完全私有于声明它的组件。父组件无法更改它。这使你可以向任何组件添加或删除 state，而不会影响其他组件。

如果你希望两个画廊保持其 states 同步怎么办？在 React 中执行此操作的正确方法是从子组件中删除 state 并将其添加到离它们最近的共享父组件中。

当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。

State 变量是通过调用 useState Hook 来声明的。

Hook 是以 use 开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。

Hook 可能会让你想起 import：它们需要在非条件语句中调用。调用 Hook 时，包括 useState，仅在组件或另一个 Hook 的顶层被调用才有效。

useState Hook 返回一对值：当前 state 和更新它的函数。

你可以拥有多个 state 变量。在内部，React 按顺序匹配它们。

State 是组件私有的。如果你在两个地方渲染它，则每个副本都有独属于自己的 state。

state 如同一张快照#

设置 state 会触发渲染#

你可能会认为你的用户界面会直接对点击之类的用户输入做出响应并发生变化。在 React 中，它的工作方式与这种思维模型略有不同。在上一页中，你看到了来自 React 的设置 state 请求重新渲染。这意味着要使界面对输入做出反应，你需要设置其 state。

在这个例子中，当你按下 “send” 时，setIsSent(true) 会通知 React 重新渲染 UI：

1
import { useState } from 'react'
2

3
export default function Form() {
4
  const [isSent, setIsSent] = useState(false)
5
  const [message, setMessage] = useState('Hi!')
6
  if (isSent) {
7
    return <h1>Your message is on its way!</h1>
8
  }
9
  return (
10
    <form
11
      onSubmit={e => {
12
        e.preventDefault()
13
        setIsSent(true)
14
        sendMessage(message)
15
      }}>
16
      <textarea placeholder='Message' value={message} onChange={e => setMessage(e.target.value)} />
17
      <button type='submit'>Send</button>
18
    </form>
19
  )
20
}
21

22
function sendMessage(message) {
23
  // ...
24
}

展开收起

当单击按钮时会发生以下情况：

执行 onSubmit 事件处理函数。
setIsSent(true) 将 isSent 设置为 true 并排列一个新的渲染。
React 根据新的 isSent 值重新渲染组件。

“正在渲染” 就意味着 React 正在调用你的组件——一个函数。你从该函数返回的 JSX 就像是在某个时间点上 UI 的快照。它的 props、事件处理函数和内部变量都是 根据当前渲染时的 state 被计算出来的。

渲染会及时生成一张快照#

与照片或电影画面不同，你返回的 UI “快照”是可交互的。它其中包括类似事件处理函数的逻辑，这些逻辑用于指定如何对输入作出响应。React 随后会更新屏幕来匹配这张快照，并绑定事件处理函数。因此，按下按钮就会触发你 JSX 中的点击事件处理函数。

当 React 重新渲染一个组件时：

React 会再次调用你的函数
函数会返回新的 JSX 快照
React 会更新界面以匹配返回的快照

state 不同于在你的函数返回之后就会消失的普通变量。state 实际上“活”在 React 本身中——就像被摆在一个架子上！——位于你的函数之外。当 React 调用你的组件时，它会为特定的那一次渲染提供一张 state 快照。你的组件会在其 JSX 中返回一张包含一整套新的 props 和事件处理函数的 UI 快照，其中所有的值都是 根据那一次渲染中 state 的值 被计算出来的！

在这个例子中，你可能会以为点击“+3”按钮会调用 setNumber(number + 1) 三次从而使计数器递增三次。

1
import { useState } from 'react';
2

3
export default function Counter() {
4
  const [number, setNumber] = useState(0);
5

6
  return (
7
    <>
8
      <h1>{number}</h1>
9
      <button onClick={() => {
10
        setNumber(number + 1);
11
        setNumber(number + 1);
12
        setNumber(number + 1);
13
      }}>+3</button>
14
    </>
15
  )
16
}

展开收起

每次点击只会让 number 递增一次！

设置 state 只会为下一次渲染变更 state 的值。在第一次渲染期间，number 为 0。这也就解释了为什么在 那次渲染中的 onClick 处理函数中，即便在调用了 setNumber(number + 1) 之后，number 的值也仍然是 0：

1
<button onClick={() => {
2

3
  setNumber(number + 1);
4

5
  setNumber(number + 1);
6

7
  setNumber(number + 1);
8

9
}}>+3</button>

以下是这个按钮的点击事件处理函数通知 React 要做的事情：

setNumber(number + 1)：number 是 0 所以 setNumber(0 + 1)。
- React 准备在下一次渲染时将 number 更改为 1。
setNumber(number + 1)：number 是 0 所以 setNumber(0 + 1)。
- React 准备在下一次渲染时将 number 更改为 1。
setNumber(number + 1)：number 是 0 所以 setNumber(0 + 1)。
- React 准备在下一次渲染时将 number 更改为 1。

尽管你调用了三次 setNumber(number + 1)，但在 这次渲染的 事件处理函数中 number 会一直是 0，所以你会三次将 state 设置成 1。这就是为什么在你的事件处理函数执行完以后，React 重新渲染的组件中的 number 等于 1 而不是 3。

你还可以通过在心里把 state 变量替换成它们在你代码中的值来想象这个过程。由于 这次渲染 中的 state 变量 number 是 0，其事件处理函数看起来会像这样：

1
<button onClick={() => {
2
  setNumber(0 + 1);
3
  setNumber(0 + 1);
4
  setNumber(0 + 1);
5
}}>+3</button>

对于下一次渲染来说，number 是 1，因此 那次渲染中的 点击事件处理函数看起来会像这样：

1
<button onClick={() => {
2
  setNumber(1 + 1);
3
  setNumber(1 + 1);
4
  setNumber(1 + 1);
5
}}>+3</button>

这就是为什么再次点击按钮会将计数器设置为 2，下次点击时会设为 3，依此类推。

异步事件中的 state#

在下边的例子中，给alert 添加一个定时器，使得它在组件重新渲染之后才触发，又会怎样呢？是会显示 “0” 还是 “5” ？

1
import { useState } from 'react';
2

3
export default function Counter() {
4
  const [number, setNumber] = useState(0);
5

6
  return (
7
    <>
8
      <h1>{number}</h1>
9
      <button onClick={() => {
10
        setNumber(number + 5);
11
        setTimeout(() => {
12
          alert(number);
13
        }, 3000);
14
      }}>+5</button>
15
    </>
16
  )
17
}

展开收起

当你点击 button 时：

1
setNumber(0 + 5);
2
setTimeout(() => {
3
  alert(0);
4
}, 3000);

到提示框运行时，React 中存储的 state 可能已经发生了更改，但它是使用用户与之交互时状态的快照进行调度的！

一个 state 变量的值永远不会在一次渲染的内部发生变化， 即使其事件处理函数的代码是异步的。在 那次渲染的 onClick 内部，number 的值即使在调用 setNumber(number + 5) 之后也还是 0。它的值在 React 通过调用你的组件“获取 UI 的快照”时就被“固定”了。

React 会使 state 的值始终“固定”在一次渲染的各个事件处理函数内部。你无需担心代码运行时 state 是否发生了变化。

把 state 更新加入队列#

设置组件 state 会把一次重新渲染加入队列。但有时你可能会希望在下次渲染加入队列之前对 state 的值执行多次操作。

React 会对 state 更新进行批处理#

1
export default function Counter() {
2
  const [number, setNumber] = useState(0);
3

4
  return (
5
    <>
6
      <h1>{number}</h1>
7
      <button onClick={() => {
8
        setNumber(number + 1);
9
        setNumber(number + 1);
10
        setNumber(number + 1);
11
      }}>+3</button>
12
    </>
13
  )
14
}

每一次渲染的 state 值都是固定的，因此无论你调用多少次 setNumber(1)，在第一次渲染的事件处理函数内部的 number 值总是 0 ：

1
setNumber(0 + 1);
2
setNumber(0 + 1);
3
setNumber(0 + 1);

但是这里还有另外一个影响因素需要讨论。React 会等到事件处理函数中的 所有 代码都运行完毕再处理 state 更新。 这就是重新渲染只会发生在所有这些 setNumber() 调用之后的原因。

这让你可以更新多个 state 变量——甚至来自多个组件的 state 变量——而不会触发太多的重新渲染。但这也意味着只有在你的事件处理函数及其中任何代码执行完成之后，UI 才会更新。这种特性也就是 批处理

在下次渲染前多次更新同一个 state#

这是一个不常见的用例，但是如果你想在下次渲染之前多次更新同一个 state，你可以像 setNumber(n => n + 1) 这样传入一个根据队列中的前一个 state 计算下一个 state 的函数，而不是像 setNumber(number + 1) 这样传入 下一个 state 值。这是一种告诉 React “用 state 值做某事”而不是仅仅替换它的方法。

1
import { useState } from 'react';
2

3
export default function Counter() {
4
  const [number, setNumber] = useState(0);
5

6
  return (
7
    <>
8
      <h1>{number}</h1>
9
      <button onClick={() => {
10
        setNumber(n => n + 1);
11
        setNumber(n => n + 1);
12
        setNumber(n => n + 1);
13
      }}>+3</button>
14
    </>
15
  )
16
}

展开收起

在这里，n => n + 1 被称为 更新函数。当你将它传递给一个 state 设置函数时：

React 会将此函数加入队列，以便在事件处理函数中的所有其他代码运行后进行处理。
在下一次渲染期间，React 会遍历队列并给你更新之后的最终 state。

下面是 React 在执行事件处理函数时处理这几行代码的过程：

setNumber(n => n + 1)：n => n + 1 是一个函数。React 将它加入队列。
setNumber(n => n + 1)：n => n + 1 是一个函数。React 将它加入队列。
setNumber(n => n + 1)：n => n + 1 是一个函数。React 将它加入队列。

当你在下次渲染期间调用 useState 时，React 会遍历队列。之前的 number state 的值是 0，所以这就是 React 作为参数 n 传递给第一个更新函数的值。然后 React 会获取你上一个更新函数的返回值，并将其作为 n 传递给下一个更新函数，以此类推：

更新队列	`n`	返回值
`n => n + 1`	`0`	`0 + 1 = 1`
`n => n + 1`	`1`	`1 + 1 = 2`
`n => n + 1`	`2`	`2 + 1 = 3`

React 会保存 3 为最终结果并从 useState 中返回。

如果你在替换 state 后更新 state 会发生什么#

这个事件处理函数会怎么样？你认为 number 在下一次渲染中的值是什么？

1
<button onClick={() => {
2
  setNumber(number + 5);
3
  setNumber(n => n + 1);
4
}}>

这是事件处理函数告诉 React 要做的事情：

setNumber(number + 5)：number 为 0，所以 setNumber(0 + 5)。React 将 “替换为 5” 添加到其队列中。
setNumber(n => n + 1)：n => n + 1 是一个更新函数。 React 将 该函数 添加到其队列中。

在下一次渲染期间，React 会遍历 state 队列：

更新队列	`n`	返回值
“替换为 `5`”	`0`（未使用）	`5`
`n => n + 1`	`5`	`5 + 1 = 6`

React 会保存 6 为最终结果并从 useState 中返回。

你可能已经注意到，setState(x) 实际上会像 setState(n => x) 一样运行，只是没有使用 n

如果你在更新 state 后替换 state 会发生什么#

number 在下一次渲染中的值是什么？

1
<button onClick={() => {
2
  setNumber(number + 5);
3
  setNumber(n => n + 1);
4
  setNumber(42);
5
}}>

以下是 React 在执行事件处理函数时处理这几行代码的过程：

setNumber(number + 5)：number 为 0，所以 setNumber(0 + 5)。React 将 “替换为 5” 添加到其队列中。
setNumber(n => n + 1)：n => n + 1 是一个更新函数。React 将该函数添加到其队列中。
setNumber(42)：React 将 “替换为 42” 添加到其队列中。

在下一次渲染期间，React 会遍历 state 队列：

更新队列	`n`	返回值
“替换为 `5`”	`0`（未使用）	`5`
`n => n + 1`	`5`	`5 + 1 = 6`
“替换为 `42`”	`6`（未使用）	`42`

然后 React 会保存 42 为最终结果并从 useState 中返回。

总而言之，以下是你可以考虑传递给 setNumber state 设置函数的内容：

一个更新函数（例如：n => n + 1）会被添加到队列中。
任何其他的值（例如：数字 5）会导致“替换为 5”被添加到队列中，已经在队列中的内容会被忽略。

事件处理函数执行完成后，React 将触发重新渲染。在重新渲染期间，React 将处理队列。更新函数会在渲染期间执行，因此 更新函数必须是纯函数 并且只返回结果。不要尝试从它们内部设置 state 或者执行其他副作用。

更新 state 中的对象#

state 中可以保存任意类型的 JavaScript 值，包括对象。但是，你不应该直接修改存放在 React state 中的对象。相反，当你想要更新一个对象时，你需要创建一个新的对象（或者将其拷贝一份），然后将 state 更新为此对象。

将 state 视为只读的#

你可以在 state 中存放任意类型的 JavaScript 值。

1
const [x, setX] = useState(0);

到目前为止，你已经尝试过在 state 中存放数字、字符串和布尔值，这些类型的值在 JavaScript 中是不可变（immutable）的，这意味着它们不能被改变或是只读的。你可以通过替换它们的值以触发一次重新渲染。

1
setX(5);

state x 从 0 变为 5，但是数字 0 本身并没有发生改变。在 JavaScript 中，无法对内置的原始值，如数字、字符串和布尔值，进行任何更改。

现在考虑 state 中存放对象的情况：

1
const [position, setPosition] = useState({ x: 0, y: 0 });

从技术上来讲，可以改变对象自身的内容。当你这样做时，就制造了一个 mutation：

1
position.x = 5;

然而，虽然严格来说 React state 中存放的对象是可变的，但你应该像处理数字、布尔值、字符串一样将它们视为不可变的。因此你应该替换它们的值，而不是对它们进行修改。

换句话说，应该 把所有存放在 state 中的 JavaScript 对象都视为只读的。

在下面的例子中，我们用一个存放在 state 中的对象来表示指针当前的位置。当你在预览区触摸或移动光标时，红色的点本应移动。但是实际上红点仍停留在原处：

1
import { useState } from 'react';
2

3
export default function MovingDot() {
4
  const [position, setPosition] = useState({
5
    x: 0,
6
    y: 0
7
  });
8
  return (
9
    <div
10
      onPointerMove={e => {
11
        position.x = e.clientX;
12
        position.y = e.clientY;
13
      }}
14
      style={{
15
        position: 'relative',
16
        width: '100vw',
17
        height: '100vh',
18
      }}>
19
      <div style={{
20
        position: 'absolute',
21
        backgroundColor: 'red',
22
        borderRadius: '50%',
23
        transform: `translate(${position.x}px, ${position.y}px)`,
24
        left: -10,
25
        top: -10,
26
        width: 20,
27
        height: 20,
28
      }} />
29
    </div>
30
  );
31
}

展开收起

问题出在下面这段代码中。

1
onPointerMove={e => {
2
  position.x = e.clientX;
3
  position.y = e.clientY;
4
}}

这段代码直接修改了上一次渲染中分配给 position 的对象。但是因为并没有使用 state 的设置函数，React 并不知道对象已更改。所以 React 没有做出任何响应。这就像在吃完饭之后才尝试去改变要点的菜一样。虽然在一些情况下，直接修改 state 可能是有效的，但我们并不推荐这么做。你应该把在渲染过程中可以访问到的 state 视为只读的。

在这种情况下，为了真正地触发一次重新渲染，你需要创建一个新对象并把它传递给 state 的设置函数：

1
onPointerMove={e => {
2
  setPosition({
3
    x: e.clientX,
4
    y: e.clientY
5
  });
6
}}

通过使用 setPosition，你在告诉 React：

使用这个新的对象替换 position 的值
然后再次渲染这个组件

使用展开语法复制对象#
如果只想改变对象的其中一个值，可以使用 ... 复制整个对象，只更改需要变更的属性。
1
onPointerMove={e => {
2
setPosition({
3
...position,
4
 y: e.clientY
5
});
6
}}
只能在竖直方向移动

更新一个嵌套对象#

考虑下面这种结构的嵌套对象：

1
const [person, setPerson] = useState({
2
  name: 'Niki de Saint Phalle',
3
  artwork: {
4
    title: 'Blue Nana',
5
    city: 'Hamburg',
6
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
7
  }
8
});

如果你想要更新 person.artwork.city 的值，用 mutation 来实现的方法非常容易理解：

1
person.artwork.city = 'New Delhi';

但是在 React 中，你需要将 state 视为不可变的！为了修改 city 的值，你首先需要创建一个新的 artwork 对象（其中预先填充了上一个 artwork 对象中的数据），然后创建一个新的 person 对象，并使得其中的 artwork 属性指向新创建的 artwork 对象：

1
const nextArtwork = { ...person.artwork, city: 'New Delhi' };
2
const nextPerson = { ...person, artwork: nextArtwork };
3
setPerson(nextPerson);

或者，写成一个函数调用：

1
setPerson({
2
  ...person, // 复制其它字段的数据
3
  artwork: { // 替换 artwork 字段
4
    ...person.artwork, // 复制之前 person.artwork 中的数据
5
    city: 'New Delhi' // 但是将 city 的值替换为 New Delhi！
6
  }
7
});

Immer#

如果你的 state 有多层的嵌套，你或许应该考虑将其扁平化。但是，如果你不想改变 state 的数据结构，你可能更喜欢用一种更便捷的方式来实现嵌套展开的效果。Immer 是一个非常流行的库，它可以让你使用简便但可以直接修改的语法编写代码，并会帮你处理好复制的过程。通过使用 Immer，你写出的代码看起来就像是你“打破了规则”而直接修改了对象：

1
updatePerson(draft => {
2
  draft.artwork.city = 'Lagos';
3
});

尝试使用 Immer:

运行 npm install use-immer 添加 Immer 依赖
用 import { useImmer } from 'use-immer' 替换掉 import { useState } from 'react'

为什么在 React 中不推荐直接修改 state？#

调试：如果你使用 console.log 并且不直接修改 state，你之前日志中的 state 的值就不会被新的 state 变化所影响。这样你就可以清楚地看到两次渲染之间 state 的值发生了什么变化

优化：React 常见的优化策略依赖于如果之前的 props 或者 state 的值和下一次相同就跳过渲染。如果你从未直接修改 state ，那么你就可以很快看到 state 是否发生了变化。如果 prevObj === obj，那么你就可以肯定这个对象内部并没有发生改变。

新功能：我们正在构建的 React 的新功能依赖于 state 被像快照一样看待的理念。如果你直接修改 state 的历史版本，可能会影响你使用这些新功能。

需求变更：有些应用功能在不出现任何修改的情况下会更容易实现，比如实现撤销/恢复、展示修改历史，或是允许用户把表单重置成某个之前的值。这是因为你可以把 state 之前的拷贝保存到内存中，并适时对其进行再次使用。如果一开始就用了直接修改 state 的方式，那么后面要实现这样的功能就会变得非常困难。

更简单的实现：React 并不依赖于 mutation ，所以你不需要对对象进行任何特殊操作。它不需要像很多“响应式”的解决方案一样去劫持对象的属性、总是用代理把对象包裹起来，或者在初始化时做其他工作。这也是 React 允许你把任何对象存放在 state 中——不管对象有多大——而不会造成有任何额外的性能或正确性问题的原因。

更新 state 中的数组#

数组是另外一种可以存储在 state 中的 JavaScript 对象，它虽然是可变的，但是却应该被视为不可变。同对象一样，当你想要更新存储于 state 中的数组时，你需要创建一个新的数组（或者创建一份已有数组的拷贝值），并使用新数组设置 state。

在没有 mutation 的前提下更新数组#

在 JavaScript 中，数组只是另一种对象。同对象一样，你需要将 React state 中的数组视为只读的。这意味着你不应该使用类似于 arr[0] = 'bird' 这样的方式来重新分配数组中的元素，也不应该使用会直接修改原始数组的方法，例如 push() 和 pop()。

相反，每次要更新一个数组时，你需要把一个新的数组传入 state 的 setting 方法中。为此，你可以通过使用像 filter() 和 map() 这样不会直接修改原始值的方法，从原始数组生成一个新的数组。然后你就可以将 state 设置为这个新生成的数组。

下面是常见数组操作的参考表。当你操作 React state 中的数组时，你需要避免使用左列的方法，而首选右列的方法：

	避免使用 (会改变原始数组)	推荐使用 (会返回一个新数组）
添加元素	`push`，`unshift`	`concat`，`[...arr]` 展开语法
删除元素	`pop`，`shift`，`splice`	`filter`，`slice`
替换元素	`splice`，`arr[i] = ...` 赋值	`map`
排序	`reverse`，`sort`	先将数组复制一份

或者，你可以使用 Immer ，这样你便可以使用表格中的所有方法了。

向数组中添加元素#

push() 会直接修改原始数组，而你不希望这样：

1
import { useState } from 'react';
2

3
let nextId = 0;
4

5
export default function List() {
6
  const [name, setName] = useState('');
7
  const [artists, setArtists] = useState([]);
8

9
  return (
10
    <>
11
      <h1>振奋人心的雕塑家们：</h1>
12
      <input
13
        value={name}
14
        onChange={e => setName(e.target.value)}
15
      />
16
      <button onClick={() => {
17
        artists.push({
18
          id: nextId++,
19
          name: name,
20
        });
21
      }}>添加</button>
22
      <ul>
23
        {artists.map(artist => (
24
          <li key={artist.id}>{artist.name}</li>
25
        ))}
26
      </ul>
27
    </>
28
  );
29
}

展开收起

相反，你应该创建一个新数组，其包含了原始数组的所有元素以及一个在末尾的新元素。这可以通过很多种方法实现，最简单的一种就是使用 ... 数组展开语法：

1
setArtists( // 替换 state
2
  [ // 是通过传入一个新数组实现的
3
    ...artists, // 新数组包含原数组的所有元素
4
    { id: nextId++, name: name } // 并在末尾添加了一个新的元素
5
  ]
6
);

数组展开运算符还允许你把新添加的元素放在原始的 ...artists 之前：

1
setArtists([
2
  { id: nextId++, name: name },
3
  ...artists // 将原数组中的元素放在末尾
4
]);

这样一来，展开操作就可以完成 push() 和 unshift() 的工作，将新元素添加到数组的末尾和开头。

从数组中删除元素#

从数组中删除一个元素最简单的方法就是将它过滤出去。换句话说，你需要生成一个不包含该元素的新数组。这可以通过 filter 方法实现，例如：

1
import { useState } from 'react'
2

3
let initialArtists = [
4
  { id: 0, name: 'Marta Colvin Andrade' },
5
  { id: 1, name: 'Lamidi Olonade Fakeye' },
6
  { id: 2, name: 'Louise Nevelson' },
7
]
8

9
export default function List() {
10
  const [artists, setArtists] = useState(initialArtists)
11

12
  return (
13
    <>
14
      <h1>振奋人心的雕塑家们：</h1>
15
      <ul>
16
        {artists.map(artist => (
17
          <li key={artist.id}>
18
            {artist.name}{' '}
19
            <button
20
              onClick={() => {
21
                setArtists(artists.filter(a => a.id !== artist.id))
22
              }}>
23
              删除
24
            </button>
25
          </li>
26
        ))}
27
      </ul>
28
    </>
29
  )
30
}

展开收起

artists.filter(s => s.id !== artist.id) 表示“创建一个新的数组，该数组由那些 ID 与 artists.id 不同的 artists 组成”。换句话说，每个 artist 的“删除”按钮会把 那一个 artist 从原始数组中过滤掉，并使用过滤后的数组再次进行渲染。注意，filter 并不会改变原始数组。

转换数组#

如果你想改变数组中的某些或全部元素，你可以用 map() 创建一个新数组。你传入 map 的函数决定了要根据每个元素的值或索引（或二者都要）对元素做何处理。

在下面的例子中，一个数组记录了两个圆形和一个正方形的坐标。当你点击按钮时，仅有两个圆形会向下移动 100 像素。这是通过使用 map() 生成一个新数组实现的。

1
import { useState } from 'react'
2

3
let initialShapes = [
4
  { id: 0, type: 'circle', x: 50, y: 100 },
5
  { id: 1, type: 'square', x: 150, y: 100 },
6
  { id: 2, type: 'circle', x: 250, y: 100 },
7
]
8

9
export default function ShapeEditor() {
10
  const [shapes, setShapes] = useState(initialShapes)
11

12
  function handleClick() {
13
    const nextShapes = shapes.map(shape => {
14
      if (shape.type === 'square') {
15
        // 不作改变
16
        return shape
17
      } else {
18
        // 返回一个新的圆形，位置在下方 50px 处
19
        return {
20
          ...shape,
21
          y: shape.y + 50,
22
        }
23
      }
24
    })
25
    // 使用新的数组进行重渲染
26
    setShapes(nextShapes)
27
  }
28

29
  return (
30
    <>
31
      <button onClick={handleClick}>所有圆形向下移动！</button>
32
      {shapes.map(shape => (
33
        <div
34
          key={shape.id}
35
          style={{
36
            background: 'purple',
37
            position: 'absolute',
38
            left: shape.x,
39
            top: shape.y,
40
            borderRadius: shape.type === 'circle' ? '50%' : '',
41
            width: 20,
42
            height: 20,
43
          }}
44
        />
45
      ))}
46
    </>
47
  )
48
}

展开收起

替换数组中的元素#

想要替换数组中一个或多个元素是非常常见的。类似 arr[0] = 'bird' 这样的赋值语句会直接修改原始数组，所以在这种情况下，你也应该使用 map。

要替换一个元素，请使用 map 创建一个新数组。在你的 map 回调里，第二个参数是元素的索引。使用索引来判断最终是返回原始的元素（即回调的第一个参数）还是替换成其他值：

1
import { useState } from 'react'
2

3
let initialCounters = [0, 0, 0]
4

5
export default function CounterList() {
6
  const [counters, setCounters] = useState(initialCounters)
7

8
  function handleIncrementClick(index) {
9
    const nextCounters = counters.map((c, i) => {
10
      if (i === index) {
11
        // 递增被点击的计数器数值
12
        return c + 1
13
      } else {
14
        // 其余部分不发生变化
15
        return c
16
      }
17
    })
18
    setCounters(nextCounters)
19
  }
20

21
  return (
22
    <ul>
23
      {counters.map((counter, i) => (
24
        <li key={i}>
25
          {counter}
26
          <button
27
            onClick={() => {
28
              handleIncrementClick(i)
29
            }}>
30
            +1
31
          </button>
32
        </li>
33
      ))}
34
    </ul>
35
  )
36
}

展开收起

向数组中插入元素#

有时，你也许想向数组特定位置插入一个元素，这个位置既不在数组开头，也不在末尾。为此，你可以将数组展开运算符 ... 和 slice() 方法一起使用。slice() 方法让你从数组中切出“一片”。为了将元素插入数组，你需要先展开原数组在插入点之前的切片，然后插入新元素，最后展开原数组中剩下的部分。

下面的例子中，插入按钮总是会将元素插入到数组中索引为 1 的位置。

1
import { useState } from 'react'
2

3
let nextId = 3
4
const initialArtists = [
5
  { id: 0, name: 'Marta Colvin Andrade' },
6
  { id: 1, name: 'Lamidi Olonade Fakeye' },
7
  { id: 2, name: 'Louise Nevelson' },
8
]
9

10
export default function List() {
11
  const [name, setName] = useState('')
12
  const [artists, setArtists] = useState(initialArtists)
13

14
  function handleClick() {
15
    const insertAt = 1 // 可能是任何索引
16
    const nextArtists = [
17
      // 插入点之前的元素：
18
      ...artists.slice(0, insertAt),
19
      // 新的元素：
20
      { id: nextId++, name: name },
21
      // 插入点之后的元素：
22
      ...artists.slice(insertAt),
23
    ]
24
    setArtists(nextArtists)
25
    setName('')
26
  }
27

28
  return (
29
    <>
30
      <h1>振奋人心的雕塑家们：</h1>
31
      <input value={name} onChange={e => setName(e.target.value)} />
32
      <button onClick={handleClick}>插入</button>
33
      <ul>
34
        {artists.map(artist => (
35
          <li key={artist.id}>{artist.name}</li>
36
        ))}
37
      </ul>
38
    </>
39
  )
40
}

展开收起

其他改变数组的情况#

总会有一些事，是你仅仅依靠展开运算符和 map() 或者 filter() 等不会直接修改原值的方法所无法做到的。例如，你可能想翻转数组，或是对数组排序。而 JavaScript 中的 reverse() 和 sort() 方法会改变原数组，所以你无法直接使用它们。

可以先拷贝这个数组，再改变这个拷贝后的值。

1
import { useState } from 'react'
2

3
const initialList = [
4
  { id: 0, title: 'Big Bellies' },
5
  { id: 1, title: 'Lunar Landscape' },
6
  { id: 2, title: 'Terracotta Army' },
7
]
8

9
export default function List() {
10
  const [list, setList] = useState(initialList)
11

12
  function handleClick() {
13
    const nextList = [...list]
14
    nextList.reverse()
15
    setList(nextList)
16
  }
17

18
  return (
19
    <>
20
      <button onClick={handleClick}>翻转</button>
21
      <ul>
22
        {list.map(artwork => (
23
          <li key={artwork.id}>{artwork.title}</li>
24
        ))}
25
      </ul>
26
    </>
27
  )
28
}

展开收起

在这段代码中，你先使用 [...list] 展开运算符创建了一份数组的拷贝值。当你有了这个拷贝值后，你就可以使用像 nextList.reverse() 或 nextList.sort() 这样直接修改原数组的方法。你甚至可以通过 nextList[0] = "something" 这样的方式对数组中的特定元素进行赋值。

然而，即使你拷贝了数组，你还是不能直接修改其内部的元素。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此，如果你修改了拷贝数组内部的某个对象，其实你正在直接修改当前的 state。举个例子，像下面的代码就会带来问题。

1
const nextList = [...list];
2
nextList[0].seen = true; // 问题：直接修改了 list[0] 的值
3
setList(nextList);

虽然 nextList 和 list 是两个不同的数组，nextList[0] 和 list[0] 却指向了同一个对象。因此，通过改变 nextList[0].seen，list[0].seen 的值也被改变了。这是一种 state 的 mutation 操作，应该避免这么做！你可以用类似于更新嵌套的 JavaScript 对象的方式解决这个问题——拷贝想要修改的特定元素，而不是直接修改它。下面是具体的操作。

更新数组内部的对象#

对象并不是真的位于数组“内部”。可能他们在代码中看起来像是在数组“内部”，但其实数组中的每个对象都是这个数组“指向”的一个存储于其它位置的值。这就是当你在处理类似 list[0] 这样的嵌套字段时需要格外小心的原因。其他人的艺术品清单可能指向了数组的同一个元素！

当你更新一个嵌套的 state 时，你需要从想要更新的地方创建拷贝值，一直这样，直到顶层。 让我们看一下这该怎么做。

在下面的例子中，两个不同的艺术品清单有着相同的初始 state。他们本应该互不影响，但是因为一次 mutation，他们的 state 被意外地共享了，勾选一个清单中的事项会影响另外一个清单：

1
import { useState } from 'react'
2

3
let nextId = 3
4
const initialList = [
5
  { id: 0, title: 'Big Bellies', seen: false },
6
  { id: 1, title: 'Lunar Landscape', seen: false },
7
  { id: 2, title: 'Terracotta Army', seen: true },
8
]
9

10
export default function BucketList() {
11
  const [myList, setMyList] = useState(initialList)
12
  const [yourList, setYourList] = useState(initialList)
13

14
  function handleToggleMyList(artworkId, nextSeen) {
15
    const myNextList = myList.map(artwork => {
16
      if (artwork.id === artworkId) {
17
        return { ...artwork, seen: nextSeen }
18
      }
19
      return artwork
20
    })
21
    setMyList(myNextList)
22
  }
23

24
  function handleToggleYourList(artworkId, nextSeen) {
25
    const yourNextList = [...yourList]
26
    const artwork = yourNextList.find(a => a.id === artworkId)
27
    artwork.seen = nextSeen
28
    setYourList(yourNextList)
29
  }
30

31
  return (
32
    <>
33
      <h1>艺术愿望清单</h1>
34
      <h2>我想看的艺术清单：</h2>
35
      <ItemList artworks={myList} onToggle={handleToggleMyList} />
36
      <h2>你想看的艺术清单：</h2>
37
      <ItemList artworks={yourList} onToggle={handleToggleYourList} />
38
    </>
39
  )
40
}
41

42
function ItemList({ artworks, onToggle }) {
43
  return (
44
    <ul>
45
      {artworks.map(artwork => (
46
        <li key={artwork.id}>
47
          <label>
48
            <input
49
              type='checkbox'
50
              checked={artwork.seen}
51
              onChange={e => {
52
                onToggle(artwork.id, e.target.checked)
53
              }}
54
            />
55
            {artwork.title}
56
          </label>
57
        </li>
58
      ))}
59
    </ul>
60
  )
61
}

展开收起

在 handleToggleYourList 中，因为直接修改了已经有的对象，而其他对象又引用了这个对象，导致修改这个已有的对象时，会导致其他对象也发生变化。显然这是错误的。

1
function handleToggleYourList(artworkId, nextSeen) {
2
  const yourNextList = [...yourList]
3
  const artwork = yourNextList.find(a => a.id === artworkId)
4
  artwork.seen = nextSeen // 问题：直接修改了已有的元素
5
  setYourList(yourNextList)
6
}

虽然 yourNextList 这个数组是新的，但是其内部的元素本身与原数组 yourList 是相同的。因此，修改 artwork.seen，其实是在修改原始的 artwork 对象。而这个 artwork 对象也被 myList 使用，这样就带来了 bug。如果你避免直接修改 state，它们就会消失。

使用 map 在没有 mutation 的前提下将一个旧的元素替换成更新的版本。 handleToggleMyList 通过 map 重新组成了一个数组，与 yourList 中的 artwork 指向不同的地址，所以在 handleToggleMyList 中就是正常的。

1
function handleToggleMyList(artworkId, nextSeen) {
2
  const myNextList = myList.map(artwork => {
3
    if (artwork.id === artworkId) {
4
      return { ...artwork, seen: nextSeen }
5
    }
6
    return artwork
7
  })
8
  setMyList(myNextList)
9
}

使用 Immer 编写简洁的更新逻辑#

在没有 mutation 的前提下更新嵌套数组可能会变得有点重复。就像对对象一样:

通常情况下，你应该不需要更新处于非常深层级的 state 。如果你有此类需求，你或许需要调整一下数据的结构，让数据变得扁平一些。
如果你不想改变 state 的数据结构，你也许会更喜欢使用 Immer ，它让你可以继续使用方便的，但会直接修改原值的语法，并负责为你生成拷贝值。

下面是用 Immer 来重写的艺术愿望清单的例子：

1
import { useState } from 'react'
2
import { useImmer } from 'use-immer'
3

4
let nextId = 3
5
const initialList = [
6
  { id: 0, title: 'Big Bellies', seen: false },
7
  { id: 1, title: 'Lunar Landscape', seen: false },
8
  { id: 2, title: 'Terracotta Army', seen: true },
9
]
10

11
export default function BucketList() {
12
  const [myList, updateMyList] = useImmer(initialList)
13
  const [yourList, updateYourList] = useImmer(initialList)
14

15
  function handleToggleMyList(id, nextSeen) {
16
    updateMyList(draft => {
17
      const artwork = draft.find(a => a.id === id)
18
      artwork.seen = nextSeen
19
    })
20
  }
21

22
  function handleToggleYourList(artworkId, nextSeen) {
23
    updateYourList(draft => {
24
      const artwork = draft.find(a => a.id === artworkId)
25
      artwork.seen = nextSeen
26
    })
27
  }
28

29
  return (
30
    <>
31
      <h1>艺术愿望清单</h1>
32
      <h2>我想看的艺术清单：</h2>
33
      <ItemList artworks={myList} onToggle={handleToggleMyList} />
34
      <h2>你想看的艺术清单：</h2>
35
      <ItemList artworks={yourList} onToggle={handleToggleYourList} />
36
    </>
37
  )
38
}
39

40
function ItemList({ artworks, onToggle }) {
41
  return (
42
    <ul>
43
      {artworks.map(artwork => (
44
        <li key={artwork.id}>
45
          <label>
46
            <input
47
              type='checkbox'
48
              checked={artwork.seen}
49
              onChange={e => {
50
                onToggle(artwork.id, e.target.checked)
51
              }}
52
            />
53
            {artwork.title}
54
          </label>
55
        </li>
56
      ))}
57
    </ul>
58
  )
59
}

展开收起

请注意当使用 Immer 时，类似 artwork.seen = nextSeen 这种会产生 mutation 的语法不会再有任何问题了：

1
updateMyTodos(draft => {
2
  const artwork = draft.find(a => a.id === artworkId);
3
  artwork.seen = nextSeen;
4
});

这是因为你并不是在直接修改原始的 state，而是在修改 Immer 提供的一个特殊的 draft 对象。同理，你也可以为 draft 的内容使用 push() 和 pop() 这些会直接修改原值的方法。在幕后，Immer 总是会根据你对 draft 的修改来从头开始构建下一个 state。这使得你的事件处理程序非常的简洁，同时也不会直接修改 state。

react 事件

Sun, 11 Jan 2026 20:20:31 GMT

使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。

添加事件处理函数#

如需添加一个事件处理函数，需要先定义一个函数，然后将其作为 prop 传入合适的 JSX 标签。例如，这里有一个没绑定任何事件的按钮：

在 Button 组件内部声明一个名为 handleClick 的函数。
实现函数内部的逻辑（使用 alert 来显示消息）。
添加 onClick={handleClick} 到 <button> JSX 中。

1
export default function Button() {
2
  function handleClick() {
3
    alert('你点击了我！');
4
  }
5

6
  return (
7
    <button onClick={handleClick}>
8
      点我
9
    </button>
10
  );
11
}

你可以定义 handleClick 函数然后将其作为 prop 传入 <button>。其中 handleClick 是一个 事件处理函数 。事件处理函数有如下特点:

通常在你的组件内部定义。
名称以 handle 开头，后跟事件名称。

按照惯例，通常将事件处理程序命名为 handle，后接事件名。你会经常看到 onClick={handleClick}，onMouseEnter={handleMouseEnter} 等。

或者，你也可以在 JSX 中定义一个内联的事件处理函数：

1
<button onClick={function handleClick() {
2
  alert('你点击了我！');
3
}}>

或者，直接使用更为简洁箭头函数：

1
<button onClick={() => {
2
  alert('你点击了我！');
3
}}>

以上所有方式都是等效的。当函数体较短时，内联事件处理函数会很方便。

在事件处理函数中读取 props#

由于事件处理函数声明于组件内部，因此它们可以直接访问组件的 props。示例中的按钮，当点击时会弹出带有 message prop 的 alert：

1
function AlertButton({ message, children }) {
2
  return (
3
    <button onClick={() => alert(message)}>
4
      {children}
5
    </button>
6
  );
7
}
8
export default function Toolbar() {
9
  return (
10
    <div>
11
      <AlertButton message="正在播放！">
12
        播放电影
13
      </AlertButton>
14
    </div>
15
  );
16
}

展开收起

将事件处理函数作为 props 传递#

当你的组件支持多种交互时，你可以根据不同的应用程序命名事件处理函数 prop。例如，一个 Toolbar 组件接收 onPlayMovie 和 onUploadImage 两个事件处理函数：

1
export default function App() {
2
  return (
3
    <Toolbar
4
      onPlayMovie={() => alert('正在播放！')}
5
      onUploadImage={() => alert('正在上传！')}
6
    />
7
  );
8
}
9

10
function Toolbar({ onPlayMovie, onUploadImage }) {
11
  return (
12
    <div>
13
      <Button onClick={onPlayMovie}>
14
        播放电影
15
      </Button>
16
      <Button onClick={onUploadImage}>
17
        上传图片
18
      </Button>
19
    </div>
20
  );
21
}
22

23
function Button({ onClick, children }) {
24
  return (
25
    <button onClick={onClick}>
26
      {children}
27
    </button>
28
  );
29
}

展开收起

命名事件处理函数 prop#

内置组件（<button> 和 <div>）仅支持浏览器事件名称，例如 onClick。但是，当你构建自己的组件时，你可以按你个人喜好命名事件处理函数的 prop。

按照惯例，事件处理函数 props 应该以 on 开头，后跟一个大写字母。

例如，一个 Toolbar 组件接收 onPlayMovie 和 onUploadImage 两个事件处理函数：

1
export default function App() {
2
  return (
3
    <Toolbar
4
      onPlayMovie={() => alert('正在播放！')}
5
      onUploadImage={() => alert('正在上传！')}
6
    />
7
  );
8
}
9

10
function Toolbar({ onPlayMovie, onUploadImage }) {
11
  return (
12
    <div>
13
      <Button onClick={onPlayMovie}>
14
        播放电影
15
      </Button>
16
      <Button onClick={onUploadImage}>
17
        上传图片
18
      </Button>
19
    </div>
20
  );
21
}
22

23
function Button({ onClick, children }) {
24
  return (
25
    <button onClick={onClick}>
26
      {children}
27
    </button>
28
  );
29
}

展开收起

App 组件并不需要知道 Toolbar 将会对 onPlayMovie 和 onUploadImage 做什么。上述示例是 Toolbar 的实现细节。其中，Toolbar 只是将它们作为 onClick 处理函数传递给了 Button 组件，事件由 Button 组件触发。

事件传播#

事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。

1
export default function Toolbar() {
2
  return (
3
    <div className="Toolbar" onClick={() => {
4
      alert('你点击了 toolbar ！');
5
    }}>
6
      <button onClick={() => alert('正在播放！')}>
7
        播放电影
8
      </button>
9
      <button onClick={() => alert('正在上传！')}>
10
        上传图片
11
      </button>
12
    </div>
13
  );
14
}

如果你点击任一按钮，它自身的 onClick 将首先执行，然后父级 <div> 的 onClick 会接着执行。因此会出现两条消息。如果你点击 toolbar 本身，将只有父级 <div> 的 onClick 会执行。

在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。

阻止传播#

事件处理函数接收一个 事件对象 作为唯一的参数。按照惯例，它通常被称为 e ，代表 “event”（事件）。你可以使用此对象来读取有关事件的信息。

这个事件对象还允许你阻止传播。如果你想阻止一个事件到达父组件，你需要像下面 Button 组件那样调用 e.stopPropagation() ：

1
function Button({ onClick, children }) {
2
  return (
3
    <button onClick={e => {
4
      e.stopPropagation(); //
5
      onClick();
6
    }}>
7
      {children}
8
    </button>
9
  );
10
}
11

12
export default function Toolbar() {
13
  return (
14
    <div className="Toolbar" onClick={() => {
15
      alert('你点击了 toolbar ！');
16
    }}>
17
      <Button onClick={() => alert('正在播放！')}>
18
        播放电影
19
      </Button>
20
      <Button onClick={() => alert('正在上传！')}>
21
        上传图片
22
      </Button>
23
    </div>
24
  );
25
}

展开收起

当你点击按钮时：

React 调用了传递给 <button> 的 onClick 处理函数。
定义在 Button 中的处理函数执行了如下操作：
- 调用 e.stopPropagation()，阻止事件进一步冒泡。
- 调用 onClick 函数，它是从 Toolbar 组件传递过来的 prop。
在 Toolbar 组件中定义的函数，显示按钮对应的 alert。
由于传播被阻止，父级 <div> 的 onClick 处理函数不会执行。

由于调用了 e.stopPropagation()，点击按钮现在将只显示一个 alert（来自 <button>），而并非两个（分别来自 <button> 和父级 toolbar <div>）。点击按钮与点击周围的 toolbar 不同，因此阻止传播对这个 UI 是有意义的。

阻止默认行为#

某些浏览器事件具有与事件相关联的默认行为。例如，点击 <form> 表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面，可以调用事件对象中的 e.preventDefault() 来阻止这种情况发生：

1
export default function Signup() {
2
  return (
3
    <form onSubmit={e => {
4
      e.preventDefault();
5
      alert('提交表单！');
6
    }}>
7
      <input />
8
      <button>发送</button>
9
    </form>
10
  );
11
}

e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。

e.preventDefault() 阻止少数事件的默认浏览器行为。

react 基础

Sun, 11 Jan 2026 20:18:45 GMT

将 Props 传递给组件#

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。

首先，将一些 props 传递给子组件 Avatar。例如，传递两个 props：person（一个对象）和 size（一个数字）：

1
export default function Profile() {
2
  return (
3
    <Avatar
4
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
5
      size={100}
6
    />
7
  );
8
}

React 组件函数接受一个参数，一个 props 对象，并解构为单独的属性：

1
function Avatar({ person, size = 100 }) {
2
  const src = `https://i.imgur.com/${person.imageId}.jpg`
3
  return <img className='avatar' src={src} alt='Lin Lanying' width={size} height={size} />
4
}

有时候，传递 props 会变得非常重复：当父组件想将一些porps传递到原封不动传递到子组件时，因为这些组件不直接使用他们本身的任何 props，可以使用更简洁的“展开”语法：

1
function Father(props) {
2
  return (
3
    <div className="card">
4
      <Child {...props} />
5
    </div>
6
  );
7
}

将 JSX 作为子组件传递#

嵌套浏览器内置标签是很常见的：

1
<div>
2
  <img />
3
</div>

有时你会希望以相同的方式嵌套自己的组件：

1
<Card>
2
  <Avatar />
3
</Card>

当你将内容嵌套在 JSX 标签中时，父组件将在名为 children 的 prop 中接收到该内容。例如，下面的 Card 组件将接收一个被设为 <Avatar /> 的 children prop 并将其包裹在 div 中渲染：

1
function Avatar({ person, size = 100 }) {
2
  const src = `https://i.imgur.com/${person.imageId}.jpg`
3
  return <img className='avatar' src={src} alt='Lin Lanying' width={size} height={size} />
4
}
5

6
function Card({ children, name }) {
7
  return (
8
    <div className='card'>
9
      <h3>{name}</h3>
10
      {children}
11
    </div>
12
  )
13
}
14

15
export default function Profile() {
16
  return (
17
    <Card name='card'>
18
      <Avatar
19
        size={100}
20
        person={{
21
          name: 'Katsuko Saruhashi',
22
          imageId: 'YfeOqp2',
23
        }}
24
      />
25
    </Card>
26
  )
27
}

展开收起

可以将带有 children prop 的组件看作有一个“洞”，可以由其父组件使用任意 JSX 来“填充”。在 React 中，children 属性就是 Vue 的默认插槽 (<slot />) 的对应物。React 会自动将这些内容作为一个名为 children 的 prop 传递给该组件。

若组件包含两个元素以上，children 会作为一个数组接受所有的元素。

要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。

要读取 props，请使用 function Avatar({ person, size }) 解构语法。

你可以指定一个默认值，如 size = 100，用于缺少值或值为 undefined 的 props 。

你可以使用 <Avatar {...props} /> JSX 展开语法转发所有 props，但不要过度使用它！

像 <Card><Avatar /></Card> 这样的嵌套 JSX，将被视为 Card 组件的 children prop。

Props 是只读的时间快照：每次渲染都会收到新版本的 props。

你不能改变 props。当你需要交互性时，你可以设置 state。

条件渲染#

条件返回 JSX#

假设有一个 PackingList 组件，里面渲染多个 Item 组件，每个物品可标记为打包与否：

可以用 if/else 语句去判断：

1
function Item({ name, isPacked }) {
2
  if (isPacked) {
3
    return <li className="item">{name} ✅</li>;
4
  }
5
  return <li className="item">{name}</li>;
6
}
7

8
export default function PackingList() {
9
  return (
10
    <section>
11
      <h1>Sally Ride 的行李清单</h1>
12
      <ul>
13
        <Item
14
          isPacked={true}
15
          name="宇航服"
16
        />
17
        <Item
18
          isPacked={true}
19
          name="带金箔的头盔"
20
        />
21
        <Item
22
          isPacked={false}
23
          name="Tam 的照片"
24
        />
25
      </ul>
26
    </section>
27
  );
28
}

展开收起

如果 isPacked 属性是 true，这段代码会返回一个不一样的 JSX。

在一些情况下，你不想有任何东西进行渲染。比如，你不想显示已经打包好的物品。但一个组件必须返回一些东西。这种情况下，你可以直接返回 null。

1
if (isPacked) {
2
  return null;
3
}
4
return <li className="item">{name}</li>;

三目运算符（`? :`）#

JavaScript 有一种紧凑型语法来实现条件判断表达式——条件运算符又称“三目运算符”。

1
return (
2
  <li className="item">
3
    {isPacked ? name + ' ✅' : name}
4
  </li>
5
);

或许你认为第一个可能会创建两个不同的 <li> “实例”。但 JSX 元素不是“实例”，因为它们没有内部状态也不是真实的 DOM 节点。它们只是一些简单的描述，所以上面这两个例子事实上是完全相同的。

与运算符（`&&`）#

你会遇到的另一个常见的快捷表达式是 [JavaScript 逻辑与（&&）运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The logical AND ( %26%26 ) operator,it returns a Boolean value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，或者不做任何渲染。使用 &&，可以实现仅当 isPacked 为 true 时，渲染勾选符号。

1
return (
2
  <li className="item">
3
    {name} {isPacked && '✅'}
4
  </li>
5
);

当 JavaScript && 表达式的左侧（我们的条件）为 true 时，它则返回其右侧的值。但条件的结果是 false，则整个表达式会变成 false。在 JSX 里，React 会将 false 视为一个“空值”，就像 null 或者 undefined，这样 React 就不会在这里进行任何渲染。

切勿将数字放在 && 左侧.
JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而，如果左侧是 0，整个表达式将变成左侧的值（0），React 此时则会渲染 0 而不是不进行渲染。
例如，一个常见的错误是 messageCount && <p>New messages</p>。其原本是想当 messageCount 为 0 的时候不进行渲染，但实际上却渲染了 0。
为了更正，可以将左侧的值改成布尔类型：messageCount > 0 && <p>New messages</p>。

列表循环#

对于列表项可以通过 map() 或 filter() 这样的方法来渲染出一个组件列表。

1
import { people } from './data.js';
2
import { getImageUrl } from './utils.js';
3

4
export default function List() {
5
  const listItems = people.map(person =>
6
    <li key={person.id}>
7
      <img
8
        src={getImageUrl(person)}
9
        alt={person.name}
10
      />
11
      <p>
12
        <b>{person.name}</b>
13
          {' ' + person.profession + ' '}
14
          因{person.accomplishment}而闻名世界
15
      </p>
16
    </li>
17
  );
18
  return <ul>{listItems}</ul>;
19
}

展开收起

如果想让每个列表项都输出多个 DOM 节点而非一个的话，该怎么做呢？

Fragment 语法的简写形式 <> </> 无法接受 key 值，所以只能要么把生成的节点用一个 <div> 标签包裹起来，要么使用长一点但更明确的 <Fragment> 写法：

1
import { Fragment } from 'react';
2

3
// ...
4

5
const listItems = people.map(person =>
6
  <Fragment key={person.id}>
7
    <h1>{person.name}</h1>
8
    <p>{person.bio}</p>
9
  </Fragment>
10
);

这里的 Fragment 标签本身并不会出现在 DOM 上，这串代码最终会转换成 <h1>、<p>、<h1>、<p>…… 的列表。

如何设定 `key` 值#

不同来源的数据往往对应不同的 key 值获取方式：

来自数据库的数据： 如果你的数据是从数据库中获取的，那你可以直接使用数据表中的主键，因为它们天然具有唯一性。
本地产生数据： 如果你数据的产生和保存都在本地（例如笔记软件里的笔记），那么你可以使用一个自增计数器，crypto.randomUUID() 或者一个类似 uuid 的库来生成 key。

key 需要满足的条件#

key 值在兄弟节点之间必须是唯一的。 不过不要求全局唯一，在不同的数组中可以使用相同的 key。
key 值不能改变，否则就失去了使用 key 的意义！所以千万不要在渲染时动态地生成 key。

React 中为什么需要 key？#

设想一下，假如你桌面上的文件都没有文件名，取而代之的是，你需要通过文件的位置顺序来区分它们———第一个文件，第二个文件，以此类推。也许你也不是不能接受这种方式，可是一旦你删除了其中的一个文件，这种组织方式就会变得混乱无比。原来的第二个文件可能会变成第一个文件，第三个文件会成为第二个文件……

React 里需要 key 和文件夹里的文件需要有文件名的道理是类似的。它们（key 和文件名）都让我们可以从众多的兄弟元素中唯一标识出某一项（JSX 节点或文件）。而一个精心选择的 key 值所能提供的信息远远不止于这个元素在数组中的位置。即使元素的位置在渲染的过程中发生了改变，它提供的 key 值也能让 React 在整个生命周期中一直认得它。

你可能会想直接把数组项的索引当作 key 值来用，实际上，如果你没有显式地指定 key 值，React 确实默认会这么做。但是数组项的顺序在插入、删除或者重新排序等操作中会发生改变，此时把索引顺序用作 key 值会产生一些微妙且令人困惑的 bug。
与之类似，请不要在运行过程中动态地产生 key，像是 key={Math.random()} 这种方式。这会导致每次重新渲染后的 key 值都不一样，从而使得所有的组件和 DOM 元素每次都要重新创建。这不仅会造成运行变慢的问题，更有可能导致用户输入的丢失。所以，使用能从给定数据中稳定取得的值才是明智的选择。
有一点需要注意，组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。如果你的组件需要一个 ID，那么请把它作为一个单独的 prop 传给组件： <Profile key={id} userId={id} />。

从零开始的npm教程

Sat, 06 Dec 2025 02:56:55 GMT

npm#

npm 是 Node.js 的标准包管理器，它允许你下载别人写好的代码（称为“包”或 package）直接在你的项目中使用，同时也帮助你管理这些代码之间的依赖关系（即你的项目运行所需要的外部代码）。

package.json#

package.json是 Node.js 项目中最重要的文件，如果没有它，npm 就不知道你的项目叫什么，也不知道该下载哪些代码包来帮你的项目运行。

以下是最基础的 package.json 的模板：

1
{
2
  "name": "my-super-app",
3
  "version": "1.0.0",
4
  "description": "这是个 npm 的项目",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "dependencies": {
10
    "lodash": "^4.17.21"
11
  },
12
  "devDependencies": {
13
    "eslint": "^7.32.0",
14
  },
15
  "author": "你的名字",
16
  "license": "ISC"
17
}

展开收起

`name` 项目名称#

在 npm 中必须遵循一下规则，这个名字将来可能会成为 URL 的一部分：

必须是全小写：不能有大写字母。
不能有空格：可以使用连字符（-）或下划线（_）。
不能包含特殊字符：也就是要是 URL 安全的字符。

`version` 版本号#

npm 严格遵循一种叫做 语义化版本 (Semantic Versioning) 的规范，通常缩写为 SemVer。

版本号通常长这样：1.0.0，由三个数字组成，中间用点隔开。

我们可以把它们拆解为：主版本号.次版本号.修订号 (Major.Minor.Patch)

数字位置	名称	什么时候改变？
1.0.0	主版本 (Major)	当做了不兼容的 API 修改时。
1.0.0	次版本 (Minor)	当增加了向下兼容的新功能时。
1.0.0	修订号 (Patch)	当进行了向下兼容的问题修正 (Fix Bug) 时。

package.json版本号前面的符号（如^和~）是用于指定版本范围的，^（插入号）允许更新次要版本和补丁版本（^1.2.3可更新到1.x.x但不能2.0.0），而~（波浪号）只允许更新补丁版本（~1.2.3可更新到1.2.x但不能1.3.0）。

^ (Caret / 插入号)：
- 含义：锁定主版本号，允许次要版本和补丁版本更新。
- 示例：^1.2.3 会安装 >=1.2.3 且 <2.0.0 的最新版本。
- 特殊情况：对于0.x.x版本（如^0.1.0），^行为与~类似，只允许更新到0.1.x，因为0.x.x阶段变动可能不兼容。
~ (Tilde / 波浪号)：
- 含义：锁定主版本号和次要版本号，只允许更新补丁版本。
- 示例：~1.2.3 会安装 >=1.2.3 且 <1.3.0 的最新版本。
无符号 (指定版本)：
- 含义：只安装指定的具体版本。
- 示例：1.2.3 只会安装1.2.3。
\* (星号)：
- 含义：匹配任何版本。
- 示例：* 或 latest 表示安装最新版本。
< , > , <= , >=：
- 含义：明确版本范围。
- 示例：<=3.2.1 表示小于或等于3.2.1。

在下载依赖时，怎么样确定是~还是^？

npm 的默认行为：

默认使用 ^ (插入符)。 自 npm v5 版本以来，当你运行 npm install <package> 时，它会自动在 package.json 中使用 ^ 符号来记录依赖。
如果包的版本号是 0.x.x (即主版本号为 0)，由于 0.x.x 版本被认为不稳定，npm 通常会使用更严格的 ~ 或直接锁定版本。

只有在要求最大程度的稳定性时，才会手动去使用 ~ 符号，或者使用 npm install <package> --save-exact 来精确锁定版本号，以覆盖 npm 默认的 ^ 行为。

`main` 模块入口#

这是这个包的 “公开 API 入口”。它告诉 Node.js：当其他开发者安装并尝试使用你的包时，应该从哪个文件开始执行。

在这个例子中，"main": "index.js" 表示当有人在自己的代码中写下 const myApp = require('my-super-app'); 时，Node.js 就会去加载并返回你的 index.js 文件导出的内容。

如果没有这个字段，Node.js 默认会去找 index.js，但明确指定可以确保其他模块正确调用你的库。

`exports` 模块入口#

随着 JavaScript 模块系统从 CommonJS（使用 require()）过渡到 ES Modules（使用 import），开发者需要一种方式来告诉 Node.js 和打包工具：“如果你是使用 import 导入我的包，请给我 ES Module 格式的文件；如果你是使用 require()，请给我 CommonJS 格式的文件。”

exports 字段完美解决了这个问题，它提供了 “条件导出” (Conditional Exports) 的能力。

字段	作用	限制
`main`	传统入口。只能指向一个文件。	无法区分 `require` 和 `import`。
`exports`	现代入口。可以指向多个文件，并根据条件选择。	现代工具优先使用它。

这是一个常见的 exports 定义，它允许你的包支持两种模块格式：

1
{
2
  "name": "my-modern-app",
3
  "exports": {
4
    "import": "./dist/index.mjs",    // 针对 ES Module (import)
5
    "require": "./dist/index.cjs",   // 针对 CommonJS (require)
6
    "default": "./dist/index.js"     // 如果上述条件都不满足
7
  }
8
}

在 package.json 中，如果同时设置了 main 和 exports 字段，官方规则如下：

exports 优先： 只要 exports 字段存在，Node.js 的最新版本和现代打包工具（如 Webpack、Rollup、Vite）就会优先读取并使用 exports 字段，而完全忽略 main 字段。

main 回退： 只有在 exports 字段不存在，或者运行环境是旧版本的 Node.js 或不支持 exports 的旧工具时，main 字段才会起作用。

`dependencies` (生产环境依赖)#

这里列出的包是项目在运行时必须需要的。例如：React, Express, Vue 等。运行 npm install 时总是会被下载。

在npm v5 版本后 npm install <package> 会自动下载到 dependencies 中，等同于 npm install <package> --save

Terminal window

1
npm install <package>
2
npm install <package> --save
3
npm install <package> --S

通过@ 符号的作用是用来指定你想要安装的包的特定版本号或标签。

npm install lodash@4.17.21：安装 lodash 库的精确版本 4.17.21。

npm install react@beta：安装 react 库的 beta 预发布版本。

npm install vue@latest：安装 vue 库的最新稳定版本。等用于 npm install vue

`devDependencies` (开发环境依赖)#

这里列出的包只在你进行开发、测试或构建项目时需要。例如：测试工具 (Jest)、代码检查工具 (ESLint) 或打包工具 (Webpack/Vite) 等。运行 npm install --production 时会被跳过。执行下面命令会下载到 devDependencies

Terminal window

1
npm install <package> --save-dev
2
# 简写
3
npm install <package> -D

`scripts` 脚本命令#

scripts 部分允许你定义一些自定义的命令，你可以用 npm run <命令名> 来执行它们。目的是把一个复杂的命令行指令封装成一个简单的自定义命令。

而且把复杂命令封装成简单脚本的主要好处是：

简化操作：开发者不用记住长串复杂的命令。
跨平台一致性：无论在 Windows、macOS 还是 Linux 上，执行 npm run build 的结果都是一致的。
路径安全：npm 会自动确保你在脚本中运行的程序（比如 vite 或 webpack）是正确的路径，你不需要担心它们是否被添加到系统的 PATH 环境变量中。

在一个典型的 Vue 3 项目（使用 Vite 作为构建工具）中，scripts 部分通常是这样的：

1
{
2
  // ... 其他字段 ...
3
  "scripts": {
4
    "dev": "vite",
5
    "build": "vue-tsc --noEmit && vite build",
6
    "preview": "vite preview",
7
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
8
  }
9
}

命令	实际运行	用途
`npm run dev`	`vite`	启动本地开发服务器。
`npm run build`	`vue-tsc... && vite build`	执行类型检查，然后构建生产环境文件。
`npm run lint`	`eslint...`	自动修复代码格式和潜在错误。

其中npm run build 中的 && 是要求两个命令按条件顺序执行。只有前面的命令执行成功（退出代码为 0）时，才会继续执行后面的命令。如果第一个命令失败了，整个脚本就会立即停止。

为什么有些脚本（比如 start 和 test）可以直接使用 npm start 和 npm test 运行，而不需要像 build 或 lint 那样使用 npm run build？
原因是 start、test 等是 npm 设定的一些标准生命周期脚本 (Standard Lifecycle Scripts)。它们是几乎所有 Node.js 项目在开发过程中都会用到的核心操作，例如：

npm start: 启动项目。

npm test: 运行测试。

npm install: 安装依赖。

为了方便开发者，npm 允许用户在运行这些标准脚本时省略 run 关键字，这纯粹是为了节省时间和简化操作。而像 build 或 lint 这样的自定义脚本则必须使用 npm run。

类别	命令/别名	完整命令	用途/含义
初始化	`npm init`	`npm init`	初始化一个新项目，创建 `package.json` 文件。
安装	`npm install` / `npm i`	`npm install`	下载 `package.json` 中所有依赖，安装到 `node_modules`。
	`npm i <package>`	`npm install <package>`	默认安装为生产依赖 (`dependencies`)。
	`npm i -D <package>`	`npm install <package> --save-dev`	安装为开发依赖 (`devDependencies`)。
运行	`npm run <script>`	`npm run <script>`	运行 `package.json` 中定义的自定义脚本。
	`npm start`	`npm run start`	运行标准 `start` 脚本 (可省略 `run`)。
管理	`npm uninstall <package>`	`npm uninstall <package>`	卸载依赖，并从 `package.json` 中移除记录。
	`npm update`	`npm update`	更新已安装的包到允许的最新版本。

npm install <package> --global简写-g是将包安装到系统路径，作为全局命令行工具使用。

package-lock.json#

package.json 记录的是依赖的版本范围（例如 ^1.0.0），允许 Minor 和 Patch 升级。这就意味着，今天你安装的版本和三个月后新同事安装的版本可能不一样。

而 package-lock.json 记录的是一个包及其所有子依赖（依赖树）在安装时的精确版本号、下载地址和完整性校验值 (integrity hash)。

它的主要目标是：保证可重复构建 (Repeatable Builds)。无论何时何地运行 npm install，只要有 package-lock.json 存在，node_modules 文件夹的内容就必须完全一致。

当你在项目中共存 package.json 和 package-lock.json 两个文件并运行 npm install 时，npm 的行为遵循一个严格的优先流程：

检查锁定文件： npm 首先会查找 package-lock.json。
强制精确安装： 如果找到该文件，npm 会严格按照文件中记录的精确版本号、下载地址（resolved 字段）和完整性校验值（integrity 字段）来安装包。
忽略范围： 在这个阶段，npm 会忽略 package.json 中定义的版本范围 (^ 或 ~) 所允许的任何较新版本。

假设 package.json 允许范围是 ^1.0.0，而 package-lock.json 锁定的精确版本是 1.0.5。npm 会优先下载 package-lock.json中的版本。

package-lock.json 的 integrity （完整性）字段的作用是提供 内容校验 和 安全保障：

哈希值： integrity 字段记录了包文件的加密哈希值（例如 SHA-512）。
内容验证： npm 下载包后，会立即计算下载文件的哈希值。
停止安装： 如果计算出的哈希值与 package-lock.json 中记录的哈希值不匹配，则说明文件在传输过程中可能被篡改，npm 会拒绝安装以防止潜在的恶意代码注入。

将 Hexo 提交到仓库

Wed, 26 Nov 2025 18:27:34 GMT

将 Hexo 提交到仓库#

这是一个 Hexo 双仓库管理问题（一个是用于存放静态网页的 xxx.github.io，一个是用于存放源代码的 hexo-code）。

提交不上去是因为Git 配置冲突或者**.gitignore 设置不当**造成的。

创建 `.gitignore` 文件#

Hexo 部署和源码备份最常见的问题就是把不该传的文件传了，或者该传的文件被忽略了。

打开或在根目录下新建 .gitignore 文件，确保里面必须包含以下内容。

1
.DS_Store
2
Thumbs.db
3
db.json
4
*.log
5
node_modules/
6
public/
7
.deploy_git/

public/ 和 .deploy_git/：这两个文件夹是 hexo d 生成的静态文件和部署用的 git 仓库，绝对不能提交到你的源码仓库 hexo-code 中，否则会造成严重的嵌套冲突。
node_modules/：这是依赖包，体积很大且不需要备份，只需备份 package.json 即可。

处理主题（Themes）文件夹的 Git 冲突#

这是最容易导致“无法提交”或“提交后文件夹是空的”的原因。

如果你下载的主题是通过 git clone 下载到 themes/ 目录下的，那么该主题文件夹里会有一个隐藏的 .git 文件夹。

**解决方法：**进入 themes/你的主题名/ 目录。删掉主题下的 .git 文件夹，不要删掉根目录的）。

这样做是为了让主仓库把主题文件当作普通文件来管理，而不是当作一个子模块（Submodule）。

生成 SSH 公钥连接到 GitHub#

检查并生成 SSH 密钥#

请在你的 Git Bash (或者终端) 中依次执行以下命令：

生成新密钥（请直接复制下方命令，将其中的 你的邮箱 换成你 GitHub 注册的邮箱）：
```
1
ssh-keygen -t ed25519 -C "email@example.com"
```
一路回车：
- 系统会问你保存路径 -> 按回车（默认即可）。
- 系统会问你是否覆盖 -> 如果提示 overwrite，输入 y 然后回车；如果没有提示，直接下一步。
- 系统会问你 Passphrase（密码） -> 按回车（留空，不要设密码，否则以后每次部署都要输密码）。
- 再次确认密码 -> 按回车。
直到看见一个矩形的字符画（Randomart image），说明生成成功了。

获取公钥内容#

继续在终端输入以下命令，查看你的公钥内容：

1
cat ~/.ssh/id_ed25519.pub

终端会显示以 ssh-ed25519 开头的一长串字符。请把这一整段内容（包括开头的 ssh-ed25519 和结尾的邮箱）全部复制下来。

添加到 GitHub#

打开浏览器，登录你的 GitHub 账号。
点击右上角头像 -> Settings (设置)。
在左侧菜单栏找到 SSH and GPG keys。
点击绿色的 New SSH key 按钮。
Title：随便填（例如：My Laptop）。
Key：粘贴你在第二步复制的那一长串内容。
点击 Add SSH key。

验证#

回到你的 Git Bash 终端，输入以下命令测试连接：

Terminal window

1
ssh -T git@github.com

如果它问 Are you sure...，再次输入 yes 并回车。
成功的标志：你会看到这样一句话：

Hi <你的用户名>! You've successfully authenticated, but GitHub does not provide shell access.

重新部署 Hexo#

请回到 Hexo 目录，再次尝试：

Terminal window

1
hexo d

就能顺利上传了。

清除凭证#

清除本地的 GitHub 身份凭证（最关键）#

你的电脑上有两把“钥匙”可以访问你的 GitHub 账户：SSH 私钥和Git 凭证管理器。

删除 SSH 私钥文件

你之前为了部署 Hexo 而创建的 SSH 密钥对，其中私钥文件 (id_ed25519) 存放在你的用户主目录下。

路径： C:\Users\你的用户名\.ssh\ 文件夹
需要删除的文件：
- id_ed25519 (这是你的私钥，务必删除！)
- id_ed25519.pub (这是公钥，删除它也无妨，但私钥是关键)
- known_hosts (记录了连接过的服务器指纹，删除可清理连接记录)

清除 Git 凭证缓存

如果你使用 HTTPS 方式克隆仓库，或者在部署时输入过 GitHub 的用户名和密码/个人访问令牌 (PAT)，系统可能会将其缓存在 Windows 的凭证管理器中。

打开 Windows 搜索栏，搜索 “凭证管理器” (Credential Manager)。
选择 “Windows 凭证” (Windows Credentials)。
在“普通凭证” (Generic Credentials) 部分，查找任何以 git:https://github.com 或 github.com 开头的条目。
找到后点击并选择 “移除” (Remove) 或 “删除” (Delete)。

从 GitHub 账户中删除公钥（远程操作）#

即使本地的私钥文件被删除，为了防止任何人通过其他方式恢复该文件，你还需要从 GitHub 账户中移除对应的公钥。这样，即使私钥泄露，它也无法用于访问你的 GitHub 账户。

打开浏览器，登录你的 GitHub 账户。
点击右上角头像，进入 Settings (设置)。
在左侧菜单栏找到 SSH and GPG keys。
找到你之前添加的、用于这台电脑的 SSH Key 确认删除

从现有git仓库切换到另一个仓库

Wed, 26 Nov 2025 06:51:08 GMT

从现有仓库切换到另一个仓库#

方法一：添加新的远程仓库#

此方法会保留原有的 origin（指向 url1），同时新增一个指向 url2 的远程仓库。这样本地仓库就可以同时与两个远程仓库进行通信。

步骤 1：检查本地仓库配置#

Terminal window

1
git remote -v

预期输出类似：

Terminal window

1
origin  url1 (fetch)
2
origin  url1 (push)

步骤 2：添加新的远程仓库#

为新的仓库 url2 指定名称，例如 new_origin：

Terminal window

1
git remote add new_origin url2

注意： 将 new_origin 替换为自定义名称，将 url2 替换为新仓库的实际 URL。

步骤 3：验证配置#

再次执行 git remote -v，确认两个远程仓库均已配置：

Terminal window

1
$ git remote -v
2
new_origin  url2 (fetch)
3
new_origin  url2 (push)
4
origin      url1 (fetch)
5
origin      url1 (push)

步骤 4：推送代码到新仓库#

将代码推送到新的远程仓库 (new_origin)：

推送当前分支（如 main 或 master）：

Terminal window

1
# 假设主分支为 'main'
2
git push new_origin main

推送所有本地分支：

Terminal window

1
git push new_origin --all

推送所有标签：

Terminal window

1
git push new_origin --tags

设置默认上游分支：

若希望未来在 main 分支执行 git push 时默认推送到 new_origin：

Terminal window

1
# -u 参数表示 --set-upstream，将本地 main 分支关联到 new_origin/main
2
git push -u new_origin main

方法二：修改现有 `origin` 配置#

如果不再需要 url1，只需将 origin 指向 url2，可采用此方法。

步骤 1：修改 `origin` 的 URL#

Terminal window

1
git remote set-url origin url2

步骤 2：验证修改#

执行 git remote -v，确认 origin 已指向 url2：

Terminal window

1
$ git remote -v
2
origin  url2 (fetch)
3
origin  url2 (push)

步骤 3：推送代码#

常规推送操作将自动指向 url2：

Terminal window

1
# 推送 main 分支并设置追踪
2
git push -u origin main
3

4
# 推送所有分支
5
git push --all
6

7
# 推送所有标签
8
git push --tags

`git status` 显示机制说明#

git status 命令仅比较「本地工作目录」与「本地 Git 仓库的最后一次提交」之间的差异。

该命令不会检查远程仓库状态，无论远程仓库为空、过时还是新仓库。

执行 git status 时，Git 在本地进行以下比较：

工作目录：实际可见且可编辑的文件
本地快照 (HEAD)：最后一次 git commit 时存储的版本

“modified” 状态表示：工作目录中的文件与最后一次提交的版本存在差异。

此过程完全在本地完成，无需网络连接，也不涉及远程仓库通信。

后续提交操作会将所有本地提交推送到远程仓库。

确定主分支的方法#

方法一：检查当前所在分支#

执行 git branch 查看所有本地分支列表：

Terminal window

1
$ git branch
2
  feature-A
3
* main
4
  hotfix-123

标有星号 * 的分支（示例中为 main）为当前所在分支
在未主动切换分支的情况下，当前分支通常为主分支

方法二：检查远程仓库默认分支#

此方法显示配置的 origin 仓库自身认定的默认分支。

执行 git remote show origin：

Terminal window

1
$ git remote show origin
2
* remote origin
3
  Fetch URL: url2
4
  Push  URL: url2
5
  HEAD branch: master  <---- 默认分支标识
6
  Remote branches:
7
    main tracked
8
  Local branch configured for 'git pull':
9
    main merges with remote main
10
  Local ref configured for 'git push':
11
    main pushes to main (up to date)

查看 HEAD branch: 行显示的名称（示例中为 master），此为远程仓库的默认分支，通常即为主分支。

Terminal window

1
* remote origin
2
  Fetch URL: http://xxx.git
3
  Push  URL: http://xxx.git
4
  HEAD branch: (unknown)
5
  Remote branch:
6
    refs/remotes/origin/master stale (use 'git remote prune' to remove)
7
  Local branch configured for 'git pull':
8
    master merges with remote master

HEAD branch: (unknown) 表示新仓库中不存在任何分支，Git 无法确定默认分支。

从输出信息可确认本地主分支为 master：

Remote branch: ... origin/master stale：表示本地曾追踪名为 origin/master 的分支（来自 url1）
Local branch configured for 'git pull': master merges with remote master：明确显示本地存在 master 分支

将本地 master 分支推送到空的远程仓库 origin：

Terminal window

1
git push -u origin master

此命令执行两个操作：

git push origin master：将本地 master 分支的所有提交推送到 origin（即 url2）
-u（或 --set-upstream）：建立追踪关系，配置本地 master 分支与 origin/master 的对应关系

《罪与罚》

Wed, 26 Nov 2025 06:49:08 GMT

《罪与罚》#

这是继《钢铁是怎样炼成的》后阅读的第二本俄国文学，或许是第一本？本书作成时沙俄还未推翻罢。

和我印象中的俄国文学一样，光是开篇冗长的人名以及各种昵称都快将我劝退了，直到拉斯克尔尼科夫将放贷的老太婆谋杀后，我才提起兴趣罢。

前文描写拉斯克尔尼科夫的穷困潦倒，但又忍不住帮助他人的情节，我便草草推断作者想凸显社会的险恶迫使高尚善良的人走向歪路，借以批判当时的俄国社会。和我想的一样，杜尼娅为了哥哥，选择嫁给富有的卢仁，拉斯克尔尼科夫却因为贫穷无能为力，被迫走上犯罪的道路。但是这一切的推论都是建立在拉斯克尔尼科夫是一个伟光正的角色身上，倘若他不是纯粹善良的人，又该如何呢？

直到波尔菲里和拉斯克尔尼科夫的第一次会谈解答了我的疑问，拉斯克尔尼科夫认为人类分为两类，一类是遵循法律、循规蹈矩的普通人；另一类是自命不凡，认为自己可以凌驾于法律之上肆意剥削他人。拉斯克尔尼科夫不愿做一个甘愿做逆来顺受的平凡的人，不然就如同马尔美拉陀夫最后落得被马踩死的悲惨结局。拉斯克尔尼科夫愤世嫉俗，自命不凡，他认为自己可以成为拿破仑，可以成为审判一切罪恶的法官。然而这类人若是肆意妄为最终会成为卢仁，卑鄙无耻，为非作歹。拉斯克尔尼科夫避免妹妹杜尼娅嫁给卢仁，也是代表他内心并不完全认同这类人。

拉斯克尔尼科夫后续一直试图用这套理论为自己辩解，然而身体却很诚实的发烧、做噩梦，反复生病。正是这种身体与思想的不协调，被迫接受自己是一个普通人的事实。斯维德里加伊洛夫就是另一个拉斯克尔尼科夫，他骄奢淫欲，妄图侵占杜尼娅；而又富有同情，救助索尼娅一家，在最后依旧逃不过良心的谴责选择了开枪自杀。同时斯维德里加伊洛夫的自杀为拉斯克尔尼科夫指向了逃避这一条路，只是弥补了自己的“罪”，而没有受到对应的“罚”。

与斯维德里加伊洛夫不同的是，拉斯克尔尼科夫有爱他妈妈妹妹，有爱他的挚友，还有爱他的索尼娅。这些爱着拉斯克尔尼科夫的人，都迫使拉斯克尔尼科夫良心受到越来越大的谴责，越来越拟人。在听闻德里加伊洛夫的自杀的消息后，拉斯克尔尼科夫第一时间也是想到了自杀去逃避自己的罪，正是因为索尼娅的爱，让拉斯克尔尼科夫选择自首来弥补自己犯下的罪。

本书颇具讽刺的结尾，描写了拉斯克尔尼科夫做过的一系列善事，比如从燃烧的建筑物中救出了孩子，不止一次的将最后一点钱送给别人。这和他的罪行形成了鲜明对比，倘若拉斯克尔尼科夫的理论是正确的，那么他的善行足以弥补他内心的后悔与罪恶感。相反，拉斯克尔尼科夫在西伯利亚的头几个月里，同样看不起其他罪犯，疾病也愈发严重。恶绝不是正当的，妄图以任何理论都无法平息内疚的良心。

另外颇为玩味的一点是拉斯克尔尼科夫至始至终都是一个无神论者，然而最后却因为内心实在痛苦，选择从索尼娅那里借来福音书，借由宗教的信仰抚平自己内心的痛苦。我不知道陀思妥耶夫斯基是否信仰东正教，至少从文中能看出他对无神论者的讽刺。其中有一段拉斯克尔尼科夫让索尼娅阅读拉撒路复活的情节，和拉斯克尔尼科夫的经历相对应。拉撒路病死后借由耶稣之手复活，拉斯克尔尼科夫在痛苦万分的时候借由上帝寻求慰藉，无疑能够看出陀思妥耶夫斯基对宗教的认可。

仅显示某个行政区划（cesium 挖孔）

Tue, 25 Nov 2025 23:14:39 GMT

添加polygon, 中间挖孔, 仅显示某个区域

GeoJSON为 GeoJSON , 行政区划下载

1
  // 3.1. 定义一个矩形作为遮罩的“外环”, 大致覆盖整个中国
2
  // 格式：[lng, lat, lng, lat, ...]
3
  const worldRectangle = [73.5, 4.5, 73.5, 53.5, 135.5, 53.5, 135.5, 4.5]
4

5
  // 3.2. 从 lt.json 中提取理塘县的边界作为“孔洞”
6
  // lt.json 是一个 FeatureCollection，我们获取第一个 feature
7
  const litangFeature = (GeoJSON as any).features[0]
8
  const litangPolygons = litangFeature.geometry.coordinates
9
  console.log(litangPolygons)
10
  // 3.3. 创建遮罩多边形的层级
11
  // Cesium 的 PolygonHierarchy 需要一个外环和一组内环（孔洞）
12
  const holes: Cesium.PolygonHierarchy[] = []
13
  let holeCoords: number[] = []
14
  // lt.json 是 MultiPolygon，所以需要遍历它包含的每一个 Polygon
15
  litangPolygons.forEach((polygon: number[][][]) => {
16
    // 每个 Polygon 又是环的数组（第一个是外环，后面是内环）
17
    // 在我们的遮罩中，理塘的*所有*环都是孔洞
18
    polygon.forEach((ring: number[][]) => {
19
      // Cesium.Cartesian3.fromDegreesArray 需要一个扁平的 [lng, lat, lng, lat, ...] 数组
20
      holeCoords = ring.flat()
21
      holes.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(holeCoords)))
22
    })
23
  })
24
  // 3.4. 创建最终的遮罩层级
25
  const maskHierarchy = new Cesium.PolygonHierarchy(
26
    Cesium.Cartesian3.fromDegreesArray(worldRectangle), // 全球外环
27
    holes // 理塘县孔洞
28
  )
29
  // 3.5. 将遮罩添加到地球上
30
  viewer.entities.add({
31
    name: 'Litang Mask',
32
    polygon: {
33
      hierarchy: maskHierarchy,
34
      perPositionHeight: false,
35
      // material: Cesium.Color.fromCssColorString('#071B32'),
36
      material: '/bg.png',
37
      // material: 'https://p8.itc.cn/images01/20200723/b48a6c775c944f7d89043ab8e0154197.jpeg',
38
      // fill: true, // 默认
39
      // outline: false, // 默认
40
    },
41
  })

展开收起

Array.prototype.flat() flat() 创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。
1
const arr2 = [0, 1, [2, [3, [4, 5]]]];
2

3
console.log(arr2.flat());
4
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]
5

6
console.log(arr2.flat(2));
7
// expected output: Array [0, 1, 2, 3, Array [4, 5]]
8

9
console.log(arr2.flat(Infinity));
10
// expected output: Array [0, 1, 2, 3, 4, 5]

限制camera视角范围

遍历GeoJSON获取边界矩形, 返回 new Cesium.Rectangle(west, south, east, north)

1
const getLitangBoundingBox = (geoJson: any): Cesium.Rectangle => {
2
  let minLng = 180,
3
    minLat = 90,
4
    maxLng = -180,
5
    maxLat = -90
6

7
  // 遍历 lt.json 的坐标
8
  const polygons = geoJson.features[0].geometry.coordinates
9
  polygons.forEach((polygon: number[][][]) => {
10
    polygon.forEach((ring: number[][]) => {
11
      ring.forEach((point: number[]) => {
12
        const lng = point[0]
13
        const lat = point[1]
14
        minLng = Math.min(minLng, lng)
15
        maxLng = Math.max(maxLng, lng)
16
        minLat = Math.min(minLat, lat)
17
        maxLat = Math.max(maxLat, lat)
18
      })
19
    })
20
  })
21
  return Cesium.Rectangle.fromDegrees(minLng, minLat, maxLng, maxLat)
22
}

展开收起

初始化时, camera定位到该区域

1
  const MAX_ALTITUDE = 500000 // 500km (最远)
2
  const MIN_ALTITUDE = 1000 // 1km (最近)
3

4
  // 将地球背景和天空盒设置为透明
5
  viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT
6
  viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT
7

8
  viewer._cesiumWidget._creditContainer.style.display = 'none'
9
  viewer.scene.globe.depthTestAgainstTerrain = false
10

11
  // --- 设置相机缩放和倾斜限制 ---
12
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = MIN_ALTITUDE
13
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = MAX_ALTITUDE
14
  viewer.scene.screenSpaceCameraController.enableTilt = false // 2D 模式下禁止倾斜
15

16
  //  设置camera
17
  const litangBoundsDeg = getLitangBoundingBox(GeoJSON)
18
  viewer.camera.setView({
19
    destination: litangBoundsDeg,
20
  })

展开收起

第一个cesium项目

Wed, 08 Oct 2025 01:14:08 GMT

第一个cesium项目#

创建 Vite 项目#

这里使用vite搭建demo, 选择 Vanilla （代表原生 JS）

Terminal window

1
npm create vite@latest my-cesium-demo

安装 Cesium#

我们需要安装 Cesium 库本身，以及一个专门为 Vite 打造的 Cesium 插件。

安装 Cesium:
Terminal window
```
1
npm install cesium
```
安装 Vite 插件 (vite-plugin-cesium): 这个插件会自动帮你处理 Cesium 的静态资源。
Terminal window
```
1
npm install vite-plugin-cesium -D
```

配置 Vite#

在项目根目录新建 vite.config.js 文件。

1
import { defineConfig } from 'vite';
2
import cesium from 'vite-plugin-cesium'; // 引入插件
3

4
export default defineConfig({
5
  plugins: [
6
    cesium() // 使用插件
7
  ]
8
});

Cesium 代码#

打开 index.html，把 <body> 里的内容改成一个简单的 div，作为 Cesium 的容器：

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Cesium Demo</title>
8
  </head>
9
  <body>
10
    <div id="cesiumContainer"></div>
11
    <script type="module" src="/main.js"></script>
12
  </body>
13
</html>

main.js

main.js展开收起

1
// 1. 引入 Cesium 的 CSS
2
import 'cesium/Build/Cesium/Widgets/widgets.css'
3

4
// 2. 引入 Cesium 库
5
import * as Cesium from 'cesium'
6

7
// 3. 设置 Cesium 静态资源路径
8
// (这一步很重要，vite-plugin-cesium 会自动处理，但我们需要告诉 Cesium 从哪里加载)
9
window.CESIUM_BASE_URL = '/Cesium/'
10

11
// 4. (可选) 设置你的 Cesium Ion Token
12
const ACCESS_TOKEN =
13
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZjRiOWJjYS05YjFlLTQwMDItODJlMy1iNzNkODU5NDJiMjIiLCJpZCI6Mjg1NjUyLCJpYXQiOjE3NDIzNjYzODB9._KJdWwzj8NIjoVImtrNdClZ3zqa44wo3qb5cOXdOpBU'
14
Cesium.Ion.defaultAccessToken = ACCESS_TOKEN
15

16
// 5. 初始化 Cesium Viewer
17
const viewer = new Cesium.Viewer('cesiumContainer', {
18
  // --- 为了保持 Demo 简洁，我们关闭一些默认控件 ---
19
  animation: false, // 是否显示动画控件
20
  baseLayerPicker: false, // 是否显示图层选择器
21
  fullscreenButton: false, // 是否显示全屏按钮
22
  geocoder: false, // 是否显示地名查找控件
23
  homeButton: false, // 是否显示 Home 按钮
24
  infoBox: false, // 是否显示信息框
25
  sceneModePicker: false, // 是否显示3D/2D/哥伦布视图切换器
26
  selectionIndicator: false, // 是否显示选取指示器
27
  timeline: false, // 是否显示时间线
28
  navigationHelpButton: false, // 是否显示导航帮助按钮
29

30
})
31
// (可选) 关掉 logo
32
viewer._cesiumWidget._creditContainer.style.display = 'none'
33
// 移除原有的layer
34
viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
35
// viewer.imageryLayers.removeAll()
36

37
// 添加一个在 Ion 注册的 layer
38
const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3954))
39
viewer.imageryLayers.add(imageryLayer)
40

41
console.log('Cesium + Vite demo is running!')

展开收起

使用着色器绘制波浪

Sat, 17 May 2025 03:05:53 GMT

通过 perlin noise 增加在主浪身上的小波浪循环调用 perlin noise 显得更加无序但是多次调用 perlin noise，会导致小波浪的频率变小，但我们希望和主浪保持一样的高度，所以乘以 i 扩大频率，除以 i 缩小高度

使用着色器绘制图案

Wed, 07 May 2025 01:15:53 GMT

What is UV#

在创建着色器时，我们需要绘制特定的图案，如星星、圆圈、光透镜、波浪等。虽然可以使用纹理，但绘制形状可以让我们有更多的控制权;我们可以对形状参数进行动画处理，并且没有要加载的纹理。需要在fragment shader中用到uv坐标。

什么是uv坐标？

UV坐标是用来将2D纹理贴图到3D模型表面的坐标系。这里的U和V代表的是2D空间的两个轴，类似于平面中的X和Y，但为了避免与3D空间中的X、Y、Z混淆，所以用U和V来命名。

在Threejs中UV坐标的范围是0到1，覆盖整个纹理图像。原点(0,0)在左下角，而(1,1)在右上角。uv坐标的count取决于material的分段数

如何将uv坐标发送到fragment shader？

fragment shader无法直接访问顶点数据，所以我们需要通过 vertex shader 创建vUv变量发送给 fragment shader。

vertex.glsl展开收起

1
varying vec2 vUv;
2

3
void main() {
4
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
5

6
    vUv = uv;
7
}
8

9
// fragment.glsl
10
varying vec2 vUv;
11

12
void main()
13
{
14
    // use vUv
15
    gl_FragColor = vec4(vUv, 1.0, 1.0)
16
}

展开收起

Pattern 1#

直接使用 uv 坐标，原点的颜色为(0.0, 0.0, 1.0, 1.0)到右上角(1.0, 1.0, 1.0, 1.0)的渐变

1
varying vec2 vUv;
2

3
void main() {
4
    gl_FragColor = vec4(vUv, 1.0, 1.0);
5
}

image-20250422155105545

Pattern 2#

同样的使用 uv 坐标，但b设置为0.0，为(0.0, 0.0, 0.0, 1.0)到右上角(1.0, 1.0, 0.0, 1.0)的渐变

1
void main() {
2
    gl_FragColor = vec4(vUv, 0.0, 1.0);
3
}

image-20250422155853192

Pattern 3#

只使用 uv 坐标的x值，得到一个在x轴上的黑白渐变。颜色在x轴上y轴上每个点都是(0.0, 0.0, 0.0, 1.0)到(1.0, 1.0, 1.0, 1.0)变化

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = vUv.x;
6
    gl_FragColor = vec4(vec3(strength), 1.0);
7
}

image-20250422160614995

Pattern 4#

和 pattern 3 完全相同，不过应用在y轴上。

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = vUv.y;
6
    gl_FragColor = vec4(vec3(strength), 1.0);
7
}

image-20250422160752938

Pattern 5 (1.0 - …)#

将 pattern 4 的值通过 1.0 - ...反转。(1.0, 1.0, 1.0, 1.0) 到(0.0, 0.0, 0.0, 1.0)变化

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = 1.0 - vUv.y;
6
    gl_FragColor = vec4(vec3(strength), 1.0);
7
}

image-20250422161048251

Pattern 6#

将 uv.y 乘以 10，gl_FragColor将很快的到达(1.0, 1.0, 1.0, 1.0)，后面大于1.0也显示白色

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = vUv.x;
6
    gl_FragColor = vec4(vec3(strength), 1.0);
7
}

image-20250422161448435

Pattern 7 mod(…)#

通过取模运算 mod(...)，重复某一段的变化。

将y的值乘以10.0，模1.0，分为10段，每段都是(0.0, 0.0, 0.0, 1.0)到(1.0, 1.0, 1.0, 1.0)变化。如果模0.5，最大值为0.5，结果就是(0.0, 0.0, 0.0, 1.0)到(0.5, 0.5, 0.5, 1.0)

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = mod(vUv.y * 10.0, 1.0);
6
    gl_FragColor = vec4(vec3(strength), 1.0);
7
}

image-20250422162044088

Pattern 8 step(…)#

在 pattern 7 的基础上实现斑马条纹，如果颜色在0.5以下，设为0.0；在0.5以上，设置1.0。

可以通过if()判断实现，但是会影响性能。

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = mod(vUv.y * 10.0, 1.0);
6
    if(strength < 0.5) {
7
        strength = 0.0;
8
    } else {
9
        strength = 1.0;
10
    }
11
    // or
12
    strength = strength < 0.5 ? 0.0 : 1.0; // 三元运算符
13
    gl_FragColor = vec4(vec3(strength), 1.0);
14
}

glsl 提供了step(edge, x)函数。

参数：edge 是阈值，x 是输入值。
返回值：若 x >= edge 返回 1.0，否则返回 0.0。

1
varying vec2 vUv;
2

3
void main()
4
{
5
    float strength = mod(vUv.y * 10.0, 1.0);
6
    strength = step(0.5, strength); // 超过阈值0.5，返回1.0，否则返回0.0
7
    gl_FragColor = vec4(vec3(strength), 1.0);
8
}

image-20250422163923388

Pattern 9#

通过调整 step()的阈值，更改条纹的粗细。

1
float strength = mod(vUv.y * 10.0, 1.0);
2
strength = step(0.8, strength);

image-20250422164320581

Pattern 10#

将 pattern 9 中修改vUv.x，在x轴上分段(竖条纹)

1
float strength = step(0.8, mod(vUv.x * 10.0, 1.0));

image-20250422164543169

Pattern 11 +#

将 pattern 9 和 pattern 10 的图案叠加，可以使用+取并集

1
float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
2
strength += step(0.8, mod(vUv.y * 10.0, 1.0));

image-20250422164920441

Pattern 12 *#

将 pattern 9 和 pattern 10 的图案取相交处，可以使用*取交集

1
float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
2
strength *= step(0.8, mod(vUv.y * 10.0, 1.0)); // 只能看到交点处

image-20250422165050274

Pattern 13#

在 pattern 12 上，将x轴上的分段阈值缩小，x轴方向上条纹更粗。然后取交集。

1
float strength = step(0.4, mod(vUv.x * 10.0, 1.0));
2
strength *= step(0.8, mod(vUv.y * 10.0, 1.0));

image-20250422165421888

Pattern 14#

将 pattern 13 的图案分别按照水平方向(barX)和竖直方向(barY)实现，然后再取并集。

1
float barX = step(0.4, mod(vUv.x * 10.0, 1.0));
2
barX *= step(0.8, mod(vUv.y * 10.0, 1.0));
3
float barY = step(0.4, mod(vUv.y * 10.0, 1.0));
4
barY *= step(0.8, mod(vUv.x * 10.0, 1.0));
5
float strength = barX + barY;

image-20250422170934207

Pattern 15#

基于 pattern 14 将 barX 和 barY 分别沿各自的方向偏移0.2，得到 + 图案

1
float barX = step(0.4, mod(vUv.x * 10.0, 1.0));
2
barX *= step(0.8, mod(vUv.y * 10.0 + 0.2, 1.0));
3
float barY = step(0.4, mod(vUv.y * 10.0, 1.0));
4
barY *= step(0.8, mod(vUv.x * 10.0 + 0.2, 1.0));
5
float strength = barX + barY;

image-20250422171220785

Pattern 16 abs()#

绘制x轴方向，0.5到0.0到0.5的渐变。abs()取绝对值

1
float strength = abs(vUv.x - 0.5);

image-20250423134807735

Pattern 17 min()#

在水平方向和竖直方向取图案的最小值min()

1
float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));

image-20250423135138735

Pattern 18 max()#

在水平方向和竖直方向取最大值max()

1
float strength = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));

image-20250423135305648

Pattern 19#

基于 pattern 18 ，使用 step()分段显示，实现矩形环。

1
float strength = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
2
strength = step(0.2, strength);

image-20250423135630483

Pattern 20#

基于 pattern 19，通过取反(1.0 - ...)操作实现矩形square2，再与square1相乘取交集，构成更细的矩形环。

1
float square1 = step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)));
2
float square2 = 1.0 - step(0.25, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)));
3
float strength = square1 * square2;

image-20250423140032193

Pattern 21 floor()#

水平方向的渐变条纹，floor()向下取整，分成x段就乘x除x。

1
float strength = floor(vUv.x * 10.0) / 10.0;

image-20250423140221139

Pattern 22#

基于 pattern 21, 将水平方向和竖直方向取交集得到，对角线渐变的条纹

1
float strength = floor(vUv.x * 10.0) / 10.0;
2
strength *= floor(vUv.y * 10.0) / 10.0;

image-20250423140455616

Pattern 23 random()#

目的是每个 uv 坐标的颜色都取随机数。但是 glsl 中没有内置的随机数方法，只能通过自定义函数得到一个看起来随机的[0, 1]的数。下面的方法通过接收 vec2返回一个相对随机的值。

1
float random(vec2 st) {
2
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
3
}

在main()中使用，形成雪花屏。因为random()是固定的，每次渲染都是相同的图案。

1
float strength = random(vUv);

image-20250423141028588

Pattern 24#

基于 pattern 22 和 23，每个区域的坐标都取随机值。

1
vec2 gridUv = vec2(floor(vUv.x * 10.0) / 10.0, floor(vUv.y * 10.0) / 10.0);
2
float strength = random(gridUv);

image-20250423151504622

Pattern 25#

基于 Pattern 24, 给竖直方向设置x偏移

1
vec2 gridUv = vec2(floor(vUv.x * 10.0) / 10.0, floor(vUv.y * 10.0 + vUv.x * 5.0) / 10.0);
2
float strength = random(gridUv);

image-20250423154626184

Pattern 26 length()#

根据uv坐标上该点的模长。原点的值 0.0 到右上角的 √2

∥a⃗∥=x2+y2{\displaystyle \left\|{\vec {a}}\right\|={\sqrt {x^{2}+y^{2}}}}∥a∥=x2+y2

1
float strength = length(vUv);

image-20250423154905082

Pattern 27 distance()#

计算uv坐标中各点，到(0.5, 0.5)的距离，从(0.5,0.5)的 0.0 到顶点的 √0.5

∥a⃗∥=(x−0.5)2+(y−0.5)2{\displaystyle \left\|{\vec {a}}\right\|={\sqrt {\left(x-0.5\right)^{2}+\left(y-0.5\right)^{2}}}}∥a∥=(x−0.5)2+(y−0.5)2

1
float strength = distance(vUv, vec2(0.5));

等价于向量减去0.5的模长。

1
float strength = length(vUv - 0.5);

image-20250423160137579

Pattern 28#

基于 pattern 27 取反

1
float strength = 1.0 - distance(vUv, vec2(0.5));

image-20250423160229323

Pattern 29#

基于 pattern 27，坐标距离(0.5, 0.5)越近，strength的值越大。可以做星星效果，更改分子的值。但是平面的边缘不等于0，可能在特定的角度可以看到平面

1
float strength = 0.015 / distance(vUv, vec2(0.5)) + 0.1;

image-20250423160502397

Pattern 30#

在 pattern 29 上，变换vu坐标

1
vec2 lightUv = vec2(vUv.x * 0.1 + 0.45, vUv.y * 0.5 + 0.25);
2
float strength = 0.015 / distance(lightUv, vec2(0.5));

image-20250423161053035

Pattern 31#

将 pattern 30 的水平方向和竖直方向取交集，构成十字

1
vec2 lightUvX = vec2(vUv.x * 0.1 + 0.45, vUv.y * 0.5 + 0.25);
2
float lightX = 0.015 / distance(lightUvX, vec2(0.5));
3
vec2 lightUvY = vec2(vUv.y * 0.1 + 0.45, vUv.x * 0.5 + 0.25);
4
float lightY = 0.015 / distance(lightUvY, vec2(0.5));
5
float strength = lightX * lightY;

image-20250423161242287

Pattern 32 rotate()#

将 pattern 31 旋转。

glsl 中没有内置旋转的函数，通过自定义rotate()实现

参数： uv：uv坐标，rotation：旋转角度，mid：旋转中心点

1
#define PI 3.1415926535897932384626433832795
2

3
vec2 rotate(vec2 uv, float rotation, vec2 mid) {
4
    return vec2(
5
        cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,
6
        cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y
7
    );
8
}

main()旋转45°

1
vec2 rotatedUv = rotate(vUv, PI * 0.25, vec2(0.5));
2
vec2 lightUvX = vec2(rotatedUv.x * 0.1 + 0.45, rotatedUv.y * 0.5 + 0.25);
3
float lightX = 0.015 / distance(lightUvX, vec2(0.5));
4
vec2 lightUvY = vec2(rotatedUv.y * 0.1 + 0.45, rotatedUv.x * 0.5 + 0.25);
5
float lightY = 0.015 / distance(lightUvY, vec2(0.5));
6
float strength = lightX * lightY;

Pattern 33#

基于 pattern 27，取阈值，可以得到圆形

1
float strength = step(0.25, distance(vUv, vec2(0.5)));

image-20250423161640441

pattern 34#

基于 pattern 27 取绝对值

1
float strength = abs(distance(vUv, vec2(0.5)) - 0.25);

image-20250423161819875

Pattern 35#

pattern 33 与 pattern 34 结合，得到圆环

1
float strength = step(0.01, abs(distance(vUv, vec2(0.5)) - 0.25));

image-20250423161946930

Pattern 36#

pattern 35 取反

1
float strength = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5)) - 0.25));

image-20250423162051274

Pattern 37#

将 pattern 36 的圆环，设置竖直方向的变化

1
vec2 wavedUv = vec2(vUv.x, vUv.y + sin(vUv.x * 30.0) * 0.1);
2
float strength = 1.0 - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25));

image-20250423165630788

Pattern 38#

将 pattern 37 同样设置水平和竖直的变化

1
vec2 wavedUv = vec2(vUv.x + sin(vUv.y * 30.0) * 0.1, vUv.y + sin(vUv.x * 30.0) * 0.1);
2
float strength = 1.0 - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25));

image-20250423165801595

Pattern 40#

将 pattern 38 的变化周期增大。

1
vec2 wavedUv = vec2(vUv.x + sin(vUv.y * 100.0) * 0.1, vUv.y + sin(vUv.x * 100.0) * 0.1);
2
float strength = 1.0 - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25));

image-20250423165911909

Pattern 41#

uv坐标取反正切atan(),f(x)=tan^(-1)(x)的取值范围是[-π, π]，uv坐标没有负值取值为[0, π]

1
float angle = atan(vUv.x, vUv.y);
2
float strength = angle;

image-20250423171135603

Pattern 42#

pattern 41 的uv坐标置于中心 -0.5

1
float angle = atan(vUv.x - 0.5, vUv.y - 0.5 );
2
float strength = angle;

image-20250423171322719

Pattern 43#

由(0.5, 0.5)开始的角度渐变纹理

1
float angle = atan(vUv.x - 0.5, vUv.y - 0.5);
2
angle /= PI * 2.0; // 映射到 [0, 1]
3
angle += 0.5;
4
float strength = angle;

image-20250423172014681

Pattern 44#

pattern 43 取模分段

1
float angle = atan(vUv.x - 0.5, vUv.y - 0.5);
2
angle /= PI * 2.0;
3
angle += 0.5;
4
angle *= 20.0;
5
angle = mod(angle, 1.0);
6
float strength = angle;

image-20250423172130152

Pattern 45#

pattern 40 和 Pattern 43 组合

1
float angle = atan(vUv.x - 0.5, vUv.y - 0.5);
2
angle /= PI * 2.0;
3
angle += 0.5;
4
float sinusoid = sin(angle * 100.0);
5
float radius = 0.25 + sinusoid * 0.01;
6
// 计算到中心点(0.5, 0.5)的距离，sqrt((x-0.5)^2 + (y-0.5)^2)
7
float strength = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5)) - radius));

image-20250423172902748

Pattern 46 perlin noise#

perlin noise是自然噪声生成算法，具有在函数上的连续性，并可在多次调用时给出一致的数值。用来生成噪声图样，生成随机性、云朵，水面的倒影等等。perlin noise

下面是其中一种算法， Classic Perlin 2D Noise

1
//  Classic Perlin 2D Noise
2
//  by Stefan Gustavson (https://github.com/stegu/webgl-noise)
3
//
4
vec2 fade(vec2 t) {
5
    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
6
}
7
vec4 permute(vec4 x) {
8
    return mod(((x * 34.0) + 1.0) * x, 289.0);
9
}
10
float cnoise(vec2 P) {
11
    vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
12
    vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
13
    Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
14
    vec4 ix = Pi.xzxz;
15
    vec4 iy = Pi.yyww;
16
    vec4 fx = Pf.xzxz;
17
    vec4 fy = Pf.yyww;
18
    vec4 i = permute(permute(ix) + iy);
19
    vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
20
    vec4 gy = abs(gx) - 0.5;
21
    vec4 tx = floor(gx + 0.5);
22
    gx = gx - tx;
23
    vec2 g00 = vec2(gx.x, gy.x);
24
    vec2 g10 = vec2(gx.y, gy.y);
25
    vec2 g01 = vec2(gx.z, gy.z);
26
    vec2 g11 = vec2(gx.w, gy.w);
27
    vec4 norm = 1.79284291400159 - 0.85373472095314 *
28
        vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
29
    g00 *= norm.x;
30
    g01 *= norm.y;
31
    g10 *= norm.z;
32
    g11 *= norm.w;
33
    float n00 = dot(g00, vec2(fx.x, fy.x));
34
    float n10 = dot(g10, vec2(fx.y, fy.y));
35
    float n01 = dot(g01, vec2(fx.z, fy.z));
36
    float n11 = dot(g11, vec2(fx.w, fy.w));
37
    vec2 fade_xy = fade(Pf.xy);
38
    vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
39
    float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
40
    return 2.3 * n_xy;
41
}

展开收起

main()使用

1
float strength = cnoise(vUv * 10.0);

image-20250423174617343

Pattern 47#

cnoise()返回的是正数和负数,step()取值

1
float strength = step(0.0, cnoise(vUv * 10.0));

image-20250423174831480

Pattern 48#

ads()

1
float strength = 1.0 - abs(cnoise(vUv * 10.0));

image-20250423174923302

pattern 49#

线条变化

1
float strength = sin(cnoise(vUv * 10.0) * 20.0);

image-20250423174959444

pattern 50#

pattern 49 取 step()

1
float strength = step(0.9, sin(cnoise(vUv * 10.0) * 20.0));

image-20250423175040761

Mix Color#

混合颜色，通过mix()混合颜色

1
float strength = step(0.9, sin(cnoise(vUv * 10.0) * 20.0));
2

3
vec3 blackColor = vec3(0.0); // black
4
vec3 uvColor = vec3(vUv, 1.0);
5
vec3 mixedColor = mix(blackColor, uvColor, strength); // 混合颜色
6
gl_FragColor = vec4(mixedColor, 1.0);

image-20250423175503213

但是在 pattern 11 中，图案叠加时strength超过了1，混合是第三个值会超过1，颜色的值被计算到更大的范围，所以需要限制界限

1
float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
2
strength += step(0.8, mod(vUv.y * 10.0, 1.0));
3

4
vec3 blackColor = vec3(0.0); // black
5
vec3 uvColor = vec3(vUv, 1.0);
6
vec3 mixedColor = mix(blackColor, uvColor, strength); // 混合颜色
7
gl_FragColor = vec4(mixedColor, 1.0);

交点处颜色明显更亮，因为 strength > 1.0

image-20250423175559671

1
strength = clamp(strength, 0.0, 1.0); // 限制范围在0-1之间

image-20250423175613542

第一个 shader 程序

Wed, 07 May 2025 01:10:38 GMT

shader 是用 GLSL(OpenGL Shading Language) 编写的程序，他会被发送到GPU运行。原生 WebGL 的一部分，如果不依赖任何库使用 WebGl 的话，需要自己动手创建 Shader。shader 会为几何体的每个顶点(vertex)定位，以及为几何体的所有可见片段（fragment）着色。

我们会为shader发送大量的数据，比如顶点坐标、网格变换信息、摄像机的信息以及几何体的顶点颜色、纹理等等。然后交给CPU，利用GLSL编写的着色器程序处理这些数据，最终在屏幕上定位顶点，并为每个可见片段着色

着色器有两种类型

vertex shader
fragment shader

Vertex Shader

顶点着色器会为每个几何体的顶点定位，当顶点着色器为顶点定位完之后，GPU 便知道哪些几何体的像素是可见的，然后进入片段着色器(fragment shader)

fragment shader

片段着色器会为顶点着色，包括颜色，纹理，透明度等等。

https://learnopengl.com/Getting-started/Coordinate-Systems

为什么要自己编写着色器？为什么我们不能直接使用Threejs的内置材质？

材质不够灵活，一些形状通过内置的material无法实现
着色器高效，比Threejs需要性能开销更少
可以做后期处理

Threejs有两种着色器ShaderMaterial RawShaderMaterial。ShaderMaterial包含了必要的uniforms和attributes的声明，除此之外并无差别。RawShaderMaterial就是原始的，必须编写所有代码。

RawShaderMaterial#

THREE.RawShaderMaterial创建原始着色器,RawShaderMaterial 不会自动注入 Three.js 的内置着色器代码（如光照、矩阵变换等），开发者需要手动管理所有 Uniforms 和 Attributes。

分别创建vertex.glsl和fragment.glsl文件, 使用 vite-plugin-glsl或者vite-plugin-glslify插件，可以将大的着色器分割为小的模块，可以重用着色器块，以及可以使用其他开发者编写的着色器块.

Terminal window

1
 npm install vite-plugin-glsl

在vite.config.js中导入glsl

1
import glsl from 'vite-plugin-glsl'
2
export default {
3
  // ...
4
  plugins: [
5
    glsl(),
6
  ],
7
}

使用

script.js展开收起

1
// Geometry
2
const geometry = new THREE.PlaneGeometry(1, 1, 32, 32)
3

4
const count = geometry.attributes.position.count
5
const randoms = new Float32Array(count)
6
for (let i = 0; i < count; i++) {
7
  randoms[i] = Math.random()
8
}
9
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))
10
// Material
11
const material = new THREE.RawShaderMaterial({
12
  vertexShader: testVertexShader,
13
  fragmentShader: testFragmentShader,
14
  transparent: true,
15
  side: THREE.DoubleSide,
16
  // wireframe: true,
17
  uniforms: {
18
    uFrequency: { value: new THREE.Vector2(10, 5) },
19
    uTime: { value: 0 },
20
    uColor: { value: new THREE.Color(0x7799cc) },
21
    uTexture: { value: flagTexture },
22
  },
23
})

展开收起

在THREE.RawShaderMaterial中，THREEjs中的material同样可以使用wireframe, side, transparent, flatShading这些属性。但是像map，alphaMap,opacity等等都没法使用，因为这些事在顶点内部处理的，只有在fragmentShader中才能更改

1
const count = geometry.attributes.position.count
2
const randoms = new Float32Array(count)
3
for (let i = 0; i < count; i++) {
4
  randoms[i] = Math.random()
5
}
6
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))

上面创建了一个随机生成的名为aRandom的attribute，添加在geometry的attribute上，在vertex.glsl中可以通过attribute float aRandom;接收。

因为new THREE.BufferAttribute(randoms, 1)为 1，表明一个为一组。所以是float类型

通过gui直接操作shader中数据，可以通过更改uniforms中的值

1
gui.add(material.uniforms.uFrequency.value, 'x').min(0).max(20).step(0.01).name('uFrequency.x')
2
gui.add(material.uniforms.uFrequency.value, 'y').min(0).max(20).step(0.01).name('uFrequency.y')
3
gui.addColor(material.uniforms.uColor, 'value').name('uColor')

vertex.glsl#

他会对每个顶点执行这段代码

vertex.glsl展开收起

1
uniform mat4 projectionMatrix;
2
uniform mat4 viewMatrix;
3
uniform mat4 modelMatrix;
4
uniform vec2 uFrequency;
5
uniform float uTime;
6

7
attribute vec3 position;
8
attribute vec2 uv;
9

10
varying vec2 vUv;
11
varying float vElevation;
12

13
void main() {
14
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
15
  float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;
16
  elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;
17
  modelPosition.z += elevation;
18

19
  vec4 viewPosition = viewMatrix * modelPosition;
20
  vec4 projectionPosition = projectionMatrix * viewPosition;
21

22
  gl_Position = projectionPosition;
23
  // gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
24

25
  vUv = uv;
26
  vElevation = elevation;
27
}

展开收起

gl_Position 为什么是一个vec4?

这是因为我们的坐标实际上是在裁剪空间里，裁剪空间不是一个二维空间，是一个四维的投影变换，将3D场景转换为2D屏幕坐标。当我们从camera观察其中一个物体时，最终渲染是在2d的canvas上的，除了知道他的顶点坐标(x,y,z)，还需要知道他的深度，帮助计算机判断物体哪个顶点坐标在前，形成透视效果。在正交投影中，w 分量通常为 1，因此不影响结果。

1
uniform mat4 projectionMatrix;
2
uniform mat4 viewMatrix;
3
uniform mat4 modelMatrix;

uniform 变量是全局常量，在整个渲染过程中保持不变。它的作用是从 CPU 侧的应用程序向 GPU 中的着色器程序传递数据，例如变换矩阵、光照参数、时间等。uniform 变量可以同时在顶点着色器和片段着色器中使用，并且一旦设置，在一次渲染调用中，所有顶点和片段的 uniform 变量值都是相同的，且在着色器内部不能被修改。

上面三个矩阵都是 uniform 的，不会改变，对几何体的每个顶点都采用相同的矩阵运算

uniform mat4 modelMatrix;

模型矩阵，他将对每个顶点应用模型自身的变换（平移、旋转、缩放），将顶点从模型本地坐标系转换到世界坐标系。

mesh.position.x = 1就会变换这个矩阵，只需要提供(position, rotation, scale)
uniform mat4 viewMatrix;

相机矩阵，他定义相机的位姿（位置和朝向），将顶点从世界坐标系转换到相机坐标系。

同理，改变camera的 position, rotation, near, far都会变换这个矩阵
uniform mat4 projectionMatrix;

投影矩阵，它负责将3D场景从相机视角（观察空间）投影到2D裁剪空间。

也可以传递自定义的属性。

1
uniform vec2 uFrequency;
2
uniform float uTime;

在RawShaderMaterial中通过uniforms可以传递uniform类型的数据

1
const material = new THREE.RawShaderMaterial({
2
  // ...
3
  uniforms: {
4
    uFrequency: { value: new THREE.Vector2(10, 5) },
5
    uTime: { value: 0 },
6
    uColor: { value: new THREE.Color(0x7799cc) },
7
    uTexture: { value: flagTexture },
8
  },
9
})

上面就像顶点着色器和片段着色器传递了四个uniform类型的数据

attribute (属性)是顶点间变化的数据。主要功能是从顶点缓冲区读取每个顶点的数据。这些数据通常包含顶点的位置、法线、纹理坐标等信息。它是专门为顶点着色器设计的，因为它存储的是每个顶点特有的数据。在顶点着色器执行过程中，会逐个处理每个顶点的 attribute 数据。

1
attribute vec3 position;
2
attribute vec2 uv;

这个值从实例化的THREE.xxxGeometry中 geometry.attributes.position中的每个坐标点取得

attribute vec2 uv;同样的接收一个uv坐标，也可以通过geometry.setAttribute('random', new THREE.BufferAttribute(randoms, 1))添加一组名为 random的attribute,同样通过attribute float random;获取

1
varying vec2 vUv;
2
varying float vElevation;

varying 变量充当了顶点着色器和片段着色器之间的数据桥梁。顶点着色器会为每个顶点计算 varying 变量的值，在光栅化阶段，这些值会在三角形的各个片段之间进行插值。片段着色器会接收这些插值后的值，并以此进行后续的计算。简而言之，varying 变量将顶点级别的数据传递到了片段着色器。

上面代码就向片段着色器传递了 vec2 vUv和 float vElevation的值，在fragment.glsl中用相同的方式接收。

1
void main() {
2
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
3
  float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;
4
  elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;
5
  modelPosition.z += elevation;
6

7
  vec4 viewPosition = viewMatrix * modelPosition;
8
  vec4 projectionPosition = projectionMatrix * viewPosition;
9

10
  gl_Position = projectionPosition;
11
  // gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
12

13
  vUv = uv;
14
  vElevation = elevation;
15
}

展开收起

main()函数是整个程序的入口，对每个顶点都会执行这段代码。

gl_Position是顶点着色器的内置输出变量，用于存储顶点的最终裁剪空间坐标。这个坐标会被后续的图形管线用于裁剪、透视除法和视口变换到屏幕空间。

每个矩阵都会对 gl_Position进行变换，最终时将顶点定位在裁剪空间内。所以在渲染时我们会应用不同的矩阵，直到获得裁剪空间的顶点坐标。

在每次顶点着色器运行结束时，OpenGL 期望坐标在特定范围内，并且任何超出此范围的坐标都将被剪裁。被剪切的坐标将被丢弃，因此剩余的坐标最终将在屏幕上显示为片段。这也是 clip space (裁剪空间)名称的由来。

1
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

因为矩阵乘法是右乘计算的，实际计算顺序：modelMatrix → viewMatrix → projectionMatrix。组合顺序不能变，等价于下面的代码

1
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
2
vec4 viewPosition = viewMatrix * modelPosition;
3
vec4 projectionPosition = projectionMatrix * viewPosition;
4

5
gl_Position = projectionPosition;

fragment.glsl#

1
precision mediump float;
2

3
uniform vec3 uColor;
4
// 声明一个 uniform sampler2D，用于表示可以在片段着色器中采样的纹理
5
uniform sampler2D uTexture;
6

7
varying vec2 vUv;
8
varying float vElevation;
9

10
void main() {
11
    // 第一个参数是纹理，第二个参数是在纹理的哪个位置着色也就是uv坐标
12
    vec4 textrueColor = texture2D(uTexture, vUv);
13
    textrueColor.rgb *= vElevation * 2.0 + 0.5; // [0.3, 0.7]
14
    // gl_FragColor = vec4(uColor, 1.0);
15

16
    gl_FragColor = vec4(textrueColor);
17
}

展开收起

1
precision mediump float;

定义浮点数的精度：highp，mediump，lowp

为什么需要？当你在处理非常大、非常小的数值时，或者需要大幅缩小场景，然后放大到场景中的一个很小的物体上，可能会影响渲染效果。

highp会影响性能，而且低端设备上可能无法支持；lowp可能因为缺乏精度引发错误。所以通常使用 mediump

1
uniform sampler2D uTexture;

申明一个 uniform的 sampler2D(2D textrue)类型，存储了纹理数据

1
varying vec2 vUv;
2
varying float vElevation;

从 vertex.glsl 中接收插值vec2 vUv和float vElevation

fragment shader 不能直接获取attribute，如果要获取uv坐标，需要通过 vertex shader，发送给 fragment shader 接收，并且要取别名不能重复声明变量。

1
vec4 textrueColor = texture2D(uTexture, vUv);

texture2D(sampler2D sampler, vec2 uv) 是一个用于从2D纹理中采样颜色值的内置函数，根据给定的纹理坐标从绑定的纹理中获取对应的颜色数据。为3D模型的每个顶点指定UV坐标，告诉渲染器：“将纹理图像中(u, v)位置的颜色，应用到该顶点对应的模型表面区域”。

输入两个参数，第一个参数是纹理，第二个参数是在纹理的哪个位置着色也就是uv坐标；输出一个 vec4 类型的颜色值（RGBA格式）

1
gl_FragColor = vec4(uColor, 1.0); // 应用 material.uniforms.uColor 的颜色
2

3
gl_FragColor = vec4(textrueColor); // 应用采样后的纹理颜色

gl_FragColor = vec4(r, g, b, a)给每个可见片段上色，直接决定了渲染到屏幕（或帧缓冲）的像素颜色。若要更改透明度(a)时，需要给material设置 transparent: true

如果想查看某些值，我们可以发送给gl_FragColor显示，例如查看uv gl_FragColor = vec4(vUv, 1.0, 1.0);

ShaderMaterial#

ShaderMaterial和RawShaderMaterial基本相同，只不过ShaderMaterial提前加入了一些声明：

1
uniform mat4 projectionMatrix;
2
uniform mat4 viewMatrix;
3
uniform mat4 modelMatrix;
4

5
attribute vec3 position;
6
attribute vec2 uv;
7

8
precision mediump float;

RawShaderMaterial中所有uniforms和attributes需用户手动声明和赋值。

THREE Modules

Thu, 10 Apr 2025 08:34:08 GMT

export

test.js

1
const somethingToExport = {
2
  name: 'test',
3
}
4
export { somethingToExport }
5

6
// script.js
7
import * as test from './test'
8
console.log(test.somethingToExport)
9
// or
10
import { somethingToExport } from './test'
11
console.log(somethingToExport)

test.js

1
const somethingToExport = {
2
  name: 'test',
3
}
4
export default somethingToExport
5

6
// script.js
7
import somethingToExport from './test.js'
8
console.log(somethingToExport)

Experience Class#

首先创建一个Experience类，将所有与 WebGL 相关的内容全部放在里面。大的类都在这儿实例化，并且设置为单例类。只有在第一次实例化时，会创建一个实例，若已经创建过实例对象，则会返回那个实例对象。类似于vuex一个全局变量

1
import * as THREE from 'three'
2
import Sizes from './Utils/Sizes.js'
3
import Time from './Utils/Time.js'
4
import Debug from './Utils/Debug.js'
5
import Camera from './Camera.js'
6
import Renderer from './Renderer.js'
7
import World from './World/World.js'
8
import Resources from './Utils/Resources.js'
9
import sources from './sources.js'
10

11
let instance = null
12
// 单例模式，确保只有一个Experience实例存在
13
export default class Experience {
14
  constructor(canvas) {
15
    if (instance) {
16
      return instance
17
    }
18
    instance = this
19

20
    // 添加为全局变量，方便控制台查看，可加可不加
21
    window.experience = this
22

23
    // Options
24
    this.canvas = canvas
25

26
    // setup
27
    this.debug = new Debug()
28
    this.sizes = new Sizes()
29
    this.time = new Time()
30
    this.scene = new THREE.Scene()
31
    this.resources = new Resources(sources)
32
    this.camera = new Camera()
33
    this.renderer = new Renderer()
34
    this.world = new World()
35

36
    // EventEmitter的方法
37
    // 监听窗口大小变化事件，调用resize方法
38
    this.sizes.on('resize', () => {
39
      this.resize()
40
    })
41
    // 监听时间变化事件，调用update方法
42
    this.time.on('tick', () => {
43
      this.update()
44
    })
45
  }
46

47
  resize() {
48
    this.camera.resize()
49
    this.renderer.resize()
50
  }
51
  update() {
52
    this.camera.update()
53
    this.world.update()
54
    // render 放在最后，确保所有物体都渲染完成
55
    this.renderer.update()
56
  }
57

58
  destroy() {
59
    // EventEmitter的方法，移除事件监听
60
    this.sizes.off('resize')
61
    this.time.off('tick')
62

63
    // 遍历场景中的所有物体
64
    this.scene.traverse(child => {
65
      // 检查物体是否是Mesh
66
      if (child instanceof THREE.Mesh) {
67
        child.geometry.dispose()
68

69
        // 遍历网格模型的材质，调用dispose方法
70
        for (const key in child.material) {
71
          const value = child.material[key]
72
          if (value && typeof value.dispose === 'function') {
73
            value.dispose()
74
          }
75
        }
76
      }
77

78
      this.camera.controls.dispose()
79
      this.renderer.instance.dispose()
80
      if (this.debug.active) this.debug.ui.destroy()
81
    })
82
  }
83
}

展开收起

Utils#

将 THREEjs 项目通过 class 和 modules 分割为许多小模块方便维护。

Size Class#

size 类，记录窗口大小并且监听resize事件。

通知其他类 size 发生了变化EventEmitter，首先继承class Sizes extends EventEmitter，事件触发时，调用this.trigger('event')，然后再捕获变化 this.sizes.on(()=>{...})

1
import EventEmitter from './EventEmitter.js'
2

3
export default class Sizes extends EventEmitter {
4
  constructor() {
5
    super()
6
    this.width = window.innerWidth
7
    this.height = window.innerHeight
8
    this.pixelRatio = Math.min(window.devicePixelRatio, 2)
9
    window.addEventListener('resize', () => {
10
      this.width = window.innerWidth
11
      this.height = window.innerHeight
12
      this.pixelRatio = Math.min(window.devicePixelRatio, 2)
13

14
      // 使用事件触发器来通知其他模块尺寸发生了变化
15
      this.trigger('resize')
16
    })
17
  }
18
}

展开收起

Time Class#

time 类，记录时间相关的参数，并触发window.requestAnimationFrame渲染页面

1
import EventEmitter from './EventEmitter'
2
export default class Time extends EventEmitter {
3
  constructor() {
4
    super()
5

6
    this.start = Date.now() // 记录开始时间
7
    this.current = this.start // 记录当前时间
8
    this.elapsed = 0 // 记录从开始到现在的时间
9
    this.delta = 16 // 每帧大约时间间隔，默认值为16ms（60fps）
10

11
    window.requestAnimationFrame(() => {
12
      this.tick()
13
    })
14
  }
15

16
  tick() {
17
    const currentTime = Date.now()
18
    this.delta = currentTime - this.current
19
    this.current = currentTime
20
    this.elapsed = this.current - this.start
21

22
    // 触发事件，通知其他模块时间发生了变化
23
    this.trigger('tick')
24

25
    window.requestAnimationFrame(() => {
26
      this.tick()
27
    })
28
  }
29
}

展开收起

Resources Class#

统一加载资源，方便管理。在这个类中实例化所有需要的loader，以及加载asset。

在所有的资源都加载完成之后，告诉其他类资源已经加载完毕

首先创建一个sources.js文件，存放资源的路径

sources.js

1
export default [
2
  {
3
    name: 'environmentMapTexture',
4
    type: 'cubeTexture',
5
    path: [
6
      'textures/environmentMap/px.jpg',
7
      'textures/environmentMap/nx.jpg',
8
      'textures/environmentMap/py.jpg',
9
      'textures/environmentMap/ny.jpg',
10
      'textures/environmentMap/pz.jpg',
11
      'textures/environmentMap/nz.jpg',
12
    ],
13
  },
14
]

在 Resources Class 中，有三个属性

items 已加载的资源 {}
toLoad 需要加载的资源数量 this.sources.length
loaded 已加载的资源数量 0

如果toLoad == loaded表明所有资源都加载完毕了

1
import * as THREE from 'three'
2
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
3
import EventEmitter from './EventEmitter'
4

5
export default class Resources extends EventEmitter {
6
  constructor(sources) {
7
    super()
8
    this.sources = sources
9

10
    this.items = {}
11
    this.toLoad = this.sources.length
12
    this.loaded = 0
13

14
    this.setLoaders()
15
    this.startLoading()
16
  }
17
  // 加载需要的loader
18
  setLoaders() {
19
    this.loaders = {}
20
    this.loaders.gltfLoader = new GLTFLoader()
21
    this.loaders.textureLoader = new THREE.TextureLoader()
22
    this.loaders.cubeTextureLoader = new THREE.CubeTextureLoader()
23
  }
24
  // 通过loader加载资源
25
  startLoading() {
26
    for (const source of this.sources) {
27
      switch (source.type) {
28
        case 'gltfModel':
29
          this.loaders.gltfLoader.load(source.path, file => {
30
            this.sourceLoaded(source, file)
31
          })
32
          break
33
        case 'texture':
34
          this.loaders.textureLoader.load(source.path, file => {
35
            this.sourceLoaded(source, file)
36
          })
37
          break
38
        case 'cubeTexture':
39
          this.loaders.cubeTextureLoader.load(source.path, file => {
40
            this.sourceLoaded(source, file)
41
          })
42
          break
43
      }
44
    }
45
  }
46
  // 资源加载后，存储到items中，并判断是否全部加载完成
47
  sourceLoaded(source, file) {
48
    this.items[source.name] = file
49
    this.loaded++
50
    if (this.loaded === this.toLoad) {
51
      this.trigger('ready')
52
    }
53
  }
54
}

展开收起

Debug Class#

lil-gui设置debug。

在url后面加上#debug会打开调试窗口，通过判断 window.location.hash === '#debug'，如果是才创建G】gui的实例

1
import GUI from 'lil-gui'
2

3
export default class Debug {
4
  constructor() {
5
    // 如果包含debug，则创建一个GUI实例
6
    this.active = window.location.hash === '#debug'
7
    if (this.active) {
8
      this.ui = new GUI()
9
    }
10
  }
11
}

并在 Experience Class中实例化 this.debug = new Debug()

在实例化的类中添加debug object，以 Environment Class为例。在constructor()中创建environment分类，setEnvironmentMap()方法中添加debug选项。在Environment Class可看

1
export default class Environment {
2
  constructor() {
3
    // ...
4
    this.debug = this.experience.debug
5
    if (this.debug.active) {
6
      this.debugFolder = this.debug.ui.addFolder('environment')
7
    }
8
  }
9
  // ...
10
  setEnvironmentMap() {
11
    // ...
12
    this.environmentMap.updateMaterials = () => { ... }
13
    this.environmentMap.updateMaterials()
14
    if (this.debug.active) {
15
      this.debugFolder
16
        .add(this.environmentMap, 'intensity')
17
        .min(0)
18
        .max(4)
19
        .step(0.001)
20
        .onChange(this.environmentMap.updateMaterials)
21
    }
22
  }
23
}

展开收起

EventEmitter Class#

事件监听类，在需要监听的class直接继承

trigger()告诉其他模块触发事件
on() 接收事件触发，执行操作
off() 移除事件监听

1
export default class Sizes extends EventEmitter {
2
  // 使用事件触发器来通知其他模块尺寸发生了变化
3
  this.trigger('resize')
4
}
5

6
// 监听窗口大小变化事件，调用resize方法
7
this.sizes.on('resize', () => {
8
  this.resize()
9
})
10

11
// 移除事件监听
12
this.sizes.off('resize')

EventEmitter

1
export default class EventEmitter {
2
  constructor() {
3
    this.callbacks = {}
4
    this.callbacks.base = {}
5
  }
6

7
  on(_names, callback) {
8
    // Errors
9
    if (typeof _names === 'undefined' || _names === '') {
10
      console.warn('wrong names')
11
      return false
12
    }
13

14
    if (typeof callback === 'undefined') {
15
      console.warn('wrong callback')
16
      return false
17
    }
18

19
    // Resolve names
20
    const names = this.resolveNames(_names)
21

22
    // Each name
23
    names.forEach(_name => {
24
      // Resolve name
25
      const name = this.resolveName(_name)
26

27
      // Create namespace if not exist
28
      if (!(this.callbacks[name.namespace] instanceof Object))
29
        this.callbacks[name.namespace] = {}
30

31
      // Create callback if not exist
32
      if (!(this.callbacks[name.namespace][name.value] instanceof Array))
33
        this.callbacks[name.namespace][name.value] = []
34

35
      // Add callback
36
      this.callbacks[name.namespace][name.value].push(callback)
37
    })
38

39
    return this
40
  }
41

42
  off(_names) {
43
    // Errors
44
    if (typeof _names === 'undefined' || _names === '') {
45
      console.warn('wrong name')
46
      return false
47
    }
48

49
    // Resolve names
50
    const names = this.resolveNames(_names)
51

52
    // Each name
53
    names.forEach(_name => {
54
      // Resolve name
55
      const name = this.resolveName(_name)
56

57
      // Remove namespace
58
      if (name.namespace !== 'base' && name.value === '') {
59
        delete this.callbacks[name.namespace]
60
      }
61

62
      // Remove specific callback in namespace
63
      else {
64
        // Default
65
        if (name.namespace === 'base') {
66
          // Try to remove from each namespace
67
          for (const namespace in this.callbacks) {
68
            if (
69
              this.callbacks[namespace] instanceof Object &&
70
              this.callbacks[namespace][name.value] instanceof Array
71
            ) {
72
              delete this.callbacks[namespace][name.value]
73

74
              // Remove namespace if empty
75
              if (Object.keys(this.callbacks[namespace]).length === 0)
76
                delete this.callbacks[namespace]
77
            }
78
          }
79
        }
80

81
        // Specified namespace
82
        else if (
83
          this.callbacks[name.namespace] instanceof Object &&
84
          this.callbacks[name.namespace][name.value] instanceof Array
85
        ) {
86
          delete this.callbacks[name.namespace][name.value]
87

88
          // Remove namespace if empty
89
          if (Object.keys(this.callbacks[name.namespace]).length === 0)
90
            delete this.callbacks[name.namespace]
91
        }
92
      }
93
    })
94

95
    return this
96
  }
97

98
  trigger(_name, _args) {
99
    // Errors
100
    if (typeof _name === 'undefined' || _name === '') {
101
      console.warn('wrong name')
102
      return false
103
    }
104

105
    let finalResult = null
106
    let result = null
107

108
    // Default args
109
    const args = !(_args instanceof Array) ? [] : _args
110

111
    // Resolve names (should on have one event)
112
    let name = this.resolveNames(_name)
113

114
    // Resolve name
115
    name = this.resolveName(name[0])
116

117
    // Default namespace
118
    if (name.namespace === 'base') {
119
      // Try to find callback in each namespace
120
      for (const namespace in this.callbacks) {
121
        if (
122
          this.callbacks[namespace] instanceof Object &&
123
          this.callbacks[namespace][name.value] instanceof Array
124
        ) {
125
          this.callbacks[namespace][name.value].forEach(function (callback) {
126
            result = callback.apply(this, args)
127

128
            if (typeof finalResult === 'undefined') {
129
              finalResult = result
130
            }
131
          })
132
        }
133
      }
134
    }
135

136
    // Specified namespace
137
    else if (this.callbacks[name.namespace] instanceof Object) {
138
      if (name.value === '') {
139
        console.warn('wrong name')
140
        return this
141
      }
142

143
      this.callbacks[name.namespace][name.value].forEach(function (callback) {
144
        result = callback.apply(this, args)
145

146
        if (typeof finalResult === 'undefined') finalResult = result
147
      })
148
    }
149

150
    return finalResult
151
  }
152

153
  resolveNames(_names) {
154
    let names = _names
155
    names = names.replace(/[^a-zA-Z0-9 ,/.]/g, '')
156
    names = names.replace(/[,/]+/g, ' ')
157
    names = names.split(' ')
158

159
    return names
160
  }
161

162
  resolveName(name) {
163
    const newName = {}
164
    const parts = name.split('.')
165

166
    newName.original = name
167
    newName.value = parts[0]
168
    newName.namespace = 'base' // Base namespace
169

170
    // Specified namespace
171
    if (parts.length > 1 && parts[1] !== '') {
172
      newName.namespace = parts[1]
173
    }
174

175
    return newName
176
  }
177
}

展开收起

Three#

Camera Class#

创建 camera 和轨道控制时，需要提供 size 和 canvas，再 camera class无法直接访问这些属性。可以通过下面3种方法

创建全局变量

1
// Experience Class
2
window.experience = this
3
// Camera Class
4
constructor() {
5
  this.experience = window.experience
6
}

参数传递

1
// Experience Class
2
this.camera = new Camera(this)
3
// Camera Class
4
constructor(experience) {
5
  this.experience = experience
6
}

使用单例(singleton)

单例类只有在第一次实例化时，会创建一个实例，若已经创建过实例对象，则会返回那个实例对象。

1
// Experience Class
2
let instance = null
3
// 单例模式，确保只有一个Experience实例存在
4
export default class Experience {
5
  constructor(canvas) {
6
    if (instance) {
7
      return instance
8
    }
9
    instance = this
10
  // ...
11
    this.camera = new Camera()
12
  }
13
}
14

15
// Camera Class
16
import Experience from './Experience'
17
export default class Camera {
18
  constructor() {
19
    // Base camera
20
    this.experience = new Experience()
21
  }
22
}

展开收起

创建 Camera Class，不单独监听resize事件，而是通过Experience类中的sizes.on('resize')来统一监听，防止在每个类中都调用，只监听一次

1
import * as THREE from 'three'
2
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
3
import Experience from './Experience'
4
export default class Camera {
5
  constructor() {
6
    this.experience = new Experience()
7
    this.sizes = this.experience.sizes
8
    this.scene = this.experience.scene
9
    this.canvas = this.experience.canvas
10
    this.setInstance()
11
    this.setOrbitControls()
12
  }
13

14
  setInstance() {
15
    this.instance = new THREE.PerspectiveCamera(35, this.sizes.width / this.sizes.height, 0.1, 100)
16
    this.instance.position.set(6, 4, 8)
17
    this.scene.add(this.instance)
18
  }
19
  setOrbitControls() {
20
    this.controls = new OrbitControls(this.instance, this.canvas)
21
    this.controls.enableDamping = true
22
  }
23
  // resize 事件触发时调用，更新相机的宽高比
24
  resize() {
25
    this.instance.aspect = this.sizes.width / this.sizes.height
26
    this.instance.updateProjectionMatrix()
27
  }
28
  // tick 事件触发时调用，更新相机的控制器
29
  update() {
30
    this.controls.update()
31
  }
32
}

展开收起

Renderer Class#

1
import * as THREE from 'three'
2
import Experience from './Experience'
3
export default class Renderer {
4
  constructor() {
5
    this.experience = new Experience()
6
    this.canvas = this.experience.canvas
7
    this.sizes = this.experience.sizes
8
    this.scene = this.experience.scene
9
    this.camera = this.experience.camera
10
    this.setInstance()
11
  }
12
  setInstance() {
13
    this.instance = new THREE.WebGLRenderer({
14
      canvas: this.canvas,
15
      antialias: true,
16
    })
17
    this.instance.toneMapping = THREE.CineonToneMapping
18
    this.instance.toneMappingExposure = 1.75
19
    this.instance.shadowMap.enabled = true
20
    this.instance.shadowMap.type = THREE.PCFSoftShadowMap
21
    this.instance.setClearColor('#211d20')
22
    this.instance.setSize(this.sizes.width, this.sizes.height)
23
    this.instance.setPixelRatio(Math.min(window.devicePixelRatio, 2))
24
  }
25
  resize() {
26
    this.instance.setSize(this.sizes.width, this.sizes.height)
27
    this.instance.setPixelRatio(Math.min(window.devicePixelRatio, 2))
28
  }
29
  update() {
30
    this.instance.render(this.scene, this.camera.instance)
31
  }
32
}

展开收起

Wolrd#

Wolrd Class#

Wolrd 类包含了，需要加载的lights，models，meshes等等都在这里实例化。自身在 Experience Class中实例化

1
import * as THREE from 'three'
2
import Experience from '../Experience.js'
3
import Environment from './Environment.js'
4
import Floor from './Floor.js'
5
import Fox from './Fox.js'
6
export default class World {
7
  constructor() {
8
    this.experience = new Experience()
9
    this.scene = this.experience.scene
10
    this.resources = this.experience.resources
11

12
    // 监听资源加载完成事件
13
    this.resources.on('ready', () => {
14
      this.floor = new Floor()
15
      this.fox = new Fox()
16
      // environmentMap 需要在最后执行，否则之后的还没加入sence导致添加不上
17
      this.environment = new Environment()
18
    })
19
  }
20

21
  update() {
22
    if (this.fox) {
23
      this.fox.update()
24
    }
25
  }
26
}

展开收起

Environment Class#

创建环境贴图，添加debug选项

1
import * as THREE from 'three'
2
import Experience from '../Experience.js'
3

4
export default class Environment {
5
  constructor() {
6
    this.experience = new Experience()
7
    this.scene = this.experience.scene
8
    this.resources = this.experience.resources
9
    this.debug = this.experience.debug
10

11
    if (this.debug.active) {
12
      this.debugFolder = this.debug.ui.addFolder('environment')
13
    }
14

15
    this.setSunlight()
16
    this.setEnvironmentMap()
17
  }
18

19
  setSunlight() {
20
    this.sunlight = new THREE.DirectionalLight('#ffffff', 4)
21
    this.sunlight.castShadow = true
22
    this.sunlight.shadow.camera.far = 15
23
    this.sunlight.shadow.mapSize.set(1024, 1024)
24
    this.sunlight.shadow.normalBias = 0.05
25
    this.sunlight.position.set(3.5, 2, -1.25)
26
    this.scene.add(this.sunlight)
27
    if (this.debug.active) {
28
      this.debugFolder
29
        .add(this.sunlight, 'intensity')
30
        .name('sunlightIntensity')
31
        .min(0)
32
        .max(10)
33
        .step(0.001)
34

35
      this.debugFolder
36
        .add(this.sunlight.position, 'x')
37
        .min(-5)
38
        .max(5)
39
        .step(0.001)
40
    }
41
  }
42
  setEnvironmentMap() {
43
    this.environmentMap = {}
44
    this.environmentMap.intensity = 0.4
45
    this.environmentMap.texture = this.resources.items.environmentMapTexture
46
    this.environmentMap.texture.colorSpace = THREE.SRGBColorSpace
47
    // this.scene.background = this.environmentMap.texture
48
    this.scene.environment = this.environmentMap.texture
49
    // 给mesh添加环境贴图
50
    this.environmentMap.updateMaterials = () => {
51
      this.scene.traverse(child => {
52
        if (
53
          child instanceof THREE.Mesh &&
54
          child.material instanceof THREE.MeshStandardMaterial
55
        ) {
56
          child.material.envMap = this.environmentMap.texture
57
          child.material.envMapIntensity = this.environmentMap.intensity
58
          child.material.needsUpdate = true
59
        }
60
      })
61
    }
62
    this.environmentMap.updateMaterials()
63
    if (this.debug.active) {
64
      this.debugFolder
65
        .add(this.environmentMap, 'intensity')
66
        .min(0)
67
        .max(4)
68
        .step(0.001)
69
        .onChange(this.environmentMap.updateMaterials)
70
    }
71
  }
72
}

展开收起

Floor Class#

地板，一个CircleGeometry,用于接受阴影

1
import * as THREE from 'three'
2
import Experience from '../Experience.js'
3

4
export default class Floor {
5
  constructor() {
6
    this.experience = new Experience()
7
    this.scene = this.experience.scene
8
    this.resources = this.experience.resources
9

10
    this.setGeometry()
11
    this.setTexture()
12
    this.setMaterial()
13
    this.setMesh()
14
  }
15

16
  setGeometry() {
17
    this.geometry = new THREE.CircleGeometry(5, 64)
18
  }
19
  setTexture() {
20
    this.texture = {}
21
    this.texture.color = this.resources.items.grassColorTexture
22
    this.texture.color.repeat.set(1.5, 1.5)
23
    this.texture.color.colorSpace = THREE.SRGBColorSpace
24
    this.texture.color.wrapS = THREE.RepeatWrapping
25
    this.texture.color.wrapT = THREE.RepeatWrapping
26

27
    this.texture.normal = this.resources.items.grassNormalTexture
28
    this.texture.normal.repeat.set(1.5, 1.5)
29
    this.texture.normal.wrapS = THREE.RepeatWrapping
30
    this.texture.normal.wrapT = THREE.RepeatWrapping
31
  }
32
  setMaterial() {
33
    this.material = new THREE.MeshStandardMaterial({
34
      map: this.texture.color,
35
      normalMap: this.texture.normal,
36
    })
37
  }
38
  setMesh() {
39
    this.mesh = new THREE.Mesh(this.geometry, this.material)
40
    this.mesh.rotation.x = -Math.PI * 0.5
41
    this.mesh.receiveShadow = true
42
    this.scene.add(this.mesh)
43
  }
44
}

展开收起

Fox Class#

加载 fox model ，添加动画和debug调试

1
import * as THREE from 'three'
2
import Experience from '../Experience.js'
3

4
export default class Fox {
5
  constructor() {
6
    this.experience = new Experience()
7
    this.sence = this.experience.scene
8
    this.resources = this.experience.resources
9
    this.time = this.experience.time
10
    this.debug = this.experience.debug
11

12
    // Debug
13
    if (this.debug.active) {
14
      this.debugFolder = this.debug.ui.addFolder('fox')
15
    }
16

17
    // model
18
    this.resource = this.resources.items.foxModel
19
    this.setModel()
20
    this.setAnimation()
21
  }
22
  setModel() {
23
    this.model = this.resource.scene
24
    this.model.scale.set(0.02, 0.02, 0.02)
25
    this.sence.add(this.model)
26

27
    // 给模型添加阴影
28
    this.model.traverse(child => {
29
      if (child instanceof THREE.Mesh) {
30
        child.castShadow = true
31
      }
32
    })
33
  }
34
  setAnimation() {
35
    this.animation = {}
36
    // 获取动画
37
    this.animation.mixer = new THREE.AnimationMixer(this.model)
38
    // 动作
39
    this.animation.actions = {}
40
    this.animation.actions.idle = this.animation.mixer.clipAction(
41
      this.resource.animations[0]
42
    )
43
    this.animation.actions.walking = this.animation.mixer.clipAction(
44
      this.resource.animations[1]
45
    )
46
    this.animation.actions.running = this.animation.mixer.clipAction(
47
      this.resource.animations[2]
48
    )
49

50
    this.animation.actions.current = this.animation.actions.idle
51
    this.animation.actions.current.play()
52

53
    // 切换动画的过渡
54
    this.animation.play = name => {
55
      const newAction = this.animation.actions[name]
56
      const oldAction = this.animation.actions.current
57

58
      newAction.reset()
59
      newAction.play()
60
      newAction.crossFadeFrom(oldAction, 1)
61

62
      this.animation.actions.current = newAction
63
    }
64
    // 添加debug选项
65
    if (this.debug.active) {
66
      const debugObject = {
67
        playIdle: () => this.animation.play('idle'),
68
        playWalking: () => this.animation.play('walking'),
69
        playRunning: () => this.animation.play('running'),
70
      }
71
      this.debugFolder.add(debugObject, 'playIdle')
72
      this.debugFolder.add(debugObject, 'playWalking')
73
      this.debugFolder.add(debugObject, 'playRunning')
74
    }
75

76
    // this.animation.action = this.animation.mixer.clipAction(
77
    //   this.resource.animations[0]
78
    // )
79
    // this.animation.action.play()
80
  }
81
  // 每帧更新动画
82
  // update方法会在Experience Class的update方法中被调用
83
  update() {
84
    this.animation.mixer.update(this.time.delta * 0.001)
85
  }
86
}

展开收起

Destroy#

首先移除事件监听，因为通知事件是继承 EventEmitter Class，所以直接调用 off方法

1
this.sizes.off('resize')
2
this.time.off('tick')

移除sence中的对象，通过遍历整个sence，查找需要处理的对象。how to dispose of object 主要移除geometry，material，texture，control等等

如果是Mesh,直接调用dispose()方法，遍历material如果有dispose()就调用

最后卸载 camera renderer debug

1
  destroy() {
2
    // EventEmitter的方法，移除事件监听
3
    this.sizes.off('resize')
4
    this.time.off('tick')
5

6
    // 遍历场景中的所有物体
7
    this.scene.traverse(child => {
8
      // 检查物体是否是Mesh
9
      if (child instanceof THREE.Mesh) {
10
        child.geometry.dispose()
11

12
        // 遍历网格模型的材质，调用dispose方法
13
        for (const key in child.material) {
14
          const value = child.material[key]
15
          if (value && typeof value.dispose === 'function') {
16
            value.dispose()
17
          }
18
        }
19
      }
20
    })
21
    this.camera.controls.dispose()
22
    this.renderer.instance.dispose()、
23
    if (this.debug.active) this.debug.ui.destroy()
24
  }

展开收起

如何移除 GitHub 中的 contributors

Sun, 06 Apr 2025 06:57:08 GMT

如果你在某次 commit 时，忘记 git config 设置自己的 username 和 email了，发现仓库主页 contributors，多了一个contributor，那么如何才能移除呢？

虽然官方没有移除contributor的办法，但是我们可以替换掉所有的username和email啊这样全都是我们提交的了

通过 git filter-branch Git 内置的重写历史工具，允许批量修改提交记录。

--commit-filter指定一个自定义脚本，针对每个提交执行操作。脚本的返回值会替换原始提交。

将作者信息替换为新的姓名和邮箱

Terminal window

1
git filter-branch --commit-filter '
2
    if [ "$GIT_AUTHOR_EMAIL" = "old email@example.com" ];
3
    then
4
        GIT_AUTHOR_NAME="new username";
5
        GIT_AUTHOR_EMAIL="new email@example.com";
6
        git commit-tree "$@";
7
    else
8
        git commit-tree "$@";
9
    fi' HEAD

再将提交者信息替换为新的姓名和邮箱

Terminal window

1
git filter-branch --commit-filter '
2
    if [ "$GIT_COMMITTER_EMAIL" = "old email@example.com" ];
3
    then
4
        GIT_COMMITTER_NAME="new username";
5
        GIT_COMMITTER_EMAIL="new email@example.com";
6
        git commit-tree "$@";
7
    else
8
        git commit-tree "$@";
9
    fi' HEAD

这两个命令的作用是重写Git提交历史，将特定作者邮箱的提交修改为新的作者姓名和邮箱。

当然官方推荐使用更安全的替代工具 git filter-repo。

至此commit记录里面的作者改掉了，可是那该死的主页上还有contributor怎么办？

我们可以拷贝一个版本库，在新的仓库里面提交。

在 GitHub 上创建一个全新的仓库，并且创建一个main 分支
将原来版本库重命名，并且将内容拷贝到新的仓库
新的仓库就是完完全全修改了git记录的仓库了

怎么样很简单吧

建立好代码备份后，在本地仓库添加新创建的远程仓库，移除掉原来旧的远程仓库，拉取新的仓库，最后把本地强制覆盖远程仓库

Terminal window

1
git remote add localrepository https://github.com/your-account/new-repository.git
2
git remote remove origin
3
git pull localrepository
4
git push --force-with-lease localrepository main

最后，再将新的仓库 git clone 下来开发。

至此，新的仓库保留了所有的git记录，并且username和email也改掉了，新仓库首页也没有该死的contributors了，めでたいめでたい。至于旧的祝他幸福。

Vuex

Sat, 08 Oct 2022 02:21:45 GMT

Vuex 是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

Vuex 理解#

Vuex 是一个全局的共享存储区域，相当于是一个数据仓库

Vuex 是为了保存组件之间的共享数据而诞生的，如果组件之间要有共享数据，可以直接挂载到 Vuex 中，而不必通过父子组件直接的传值了，而私有的数据则不需要挂载到 Vuex 中，只有需要共享的数据才放在 Vuex 中，私有的数据只需要放在组件的 data 中即可

多组件共享状态的问题#

多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
以前的解决办法：

a. 将数据以及操作数据的行为都定义在父组件

b. 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)

vuex 就是用来解决这个问题的

状态自管理应用#

这个状态自管理应用包含以下几个部分：

state: 驱动应用的数据源
view: 以声明方式将 state 映射到视图
actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)

以下是一个表示“单向数据流”理念的简单示意：

vue_Vuex_状态自管理应用

Vuex 的结构模型#

vue_Vuex_结构模型

搭建vuex环境#

下载vuex插件：npm i vuex

注：vue2环境中不支持 vuex4，所以在 vue2 中应该使用 npm i vuex@3 命令安装 vuex3
创建文件：src/store/index.js

1
//引入Vue核心库
2
import Vue from 'vue'
3
//引入Vuex
4
import Vuex from 'vuex'
5
//应用Vuex插件
6
Vue.use(Vuex)
7

8
//准备actions对象——响应组件中用户的动作
9
const actions = {}
10
//准备mutations对象——修改state中的数据
11
const mutations = {}
12
//准备state对象——保存具体的数据
13
const state = {}
14

15
//创建并暴露store
16
export default new Vuex.Store({
17
  actions,
18
  mutations,
19
  state
20
})

展开收起

在main.js中创建vm时传入store配置项

1
//引入store
2
import store from './store'
3

4
//创建vm
5
new Vue({
6
  el:'#app',
7
  render: h => h(App),
8
  store,
9
})

项目结构#

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

Terminal window

1
├── index.html
2
├── main.js
3
├── api
4
│   └── ... # 抽取出API请求
5
├── components
6
│   ├── App.vue
7
│   └── ...
8
└── store
9
    ├── index.js          # 我们组装模块并导出 store 的地方
10
    ├── actions.js        # 根级别的 action
11
    ├── mutations.js      # 根级别的 mutation
12
    └── modules
13
        ├── cart.js       # 购物车模块
14
        └── products.js   # 产品模块

核心概念#

vuex中一共有五个状态 State Getter Mutation Action Module

State#

state 提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，类似于 Vue 中的 data属性
在vuex中state中定义数据，可以在任何组件中进行调用

1
import Vue from 'vue'
2
import Vuex from 'vuex'
3

4
Vue.use(Vuex)
5

6
export default new Vuex.Store({
7
    //数据，相当于data
8
    state: {
9
        name: '张三',
10
        age: 12,
11
        sum: 0,
12
    },
13
})

使用：

在标签中直接使用

1
<div>{{ $store.state.name }}</div>
2
<div>{{ $store.state.age }}</div>

组件中使用

1
this.$store.state.name
2
this.$store.state.age

Mutations#

包含多个直接更新 state 的方法(回调函数)的对象
谁来触发: action 中的 commit('mutationName')
只能包含同步的代码, 不能写异步代码

1
 const mutations = {
2
  mutationName (state, value) {
3
    // 更新 state 某个属性的操作
4
  }
5
}
6
第一个参数：state 等同于 store.state ，若在模块中则为局部状态
7

8
第二个参数：value 可以为任意类型，但最后都会包装成一个对象

以加法、减法操作为例，state.sum 加上或减去 value

1
mutations: {
2
    JIA(state, value) {
3
        state.sum += value
4
    },
5
    JIAN(state, value) {
6
        state.sum -= value
7
    },
8
},

Actions#

包含多个事件回调函数的对象
通过执行: commit()来触发 mutation 的调用，间接更新 state
谁来触发: 组件中: this.$store.dispatch('actionName', value) value为参数
可以包含异步代码（如定时器，ajax）

1
const actions = {
2
  actionName (context, value) {
3
    commit('对应的mutationsName', value)
4
  }
5
 }
6
第一个参数：context对象
7
包含：{
8
    state,      // 等同于 `store.state`，若在模块中则为局部状态
9
    rootState,  // 等同于 `store.state`，只存在于模块中
10
    commit,     // 等同于 `store.commit`
11
    dispatch,   // 等同于 `store.dispatch`
12
    getters,    // 等同于 `store.getters`
13
    rootGetters // 等同于 `store.getters`，只存在于模块中
14
}
15
第二个参数： 可以为任意类型，但最后都会包装成一个对象

展开收起

以 0.5s 后如果sum为奇数则加的加法操作为例：

1
const actions = {
2
    jiaWait(context, value) {
3
        setTimeout(() => {
4
            if (context.state.sum % 2 != 0) {
5
              context.commit('JIA', value)
6
          }
7
        }, 500)
8
    },
9
},

Getters#

包含多个计算属性(get)的对象
当state中的数据需要经过加工后再使用时，可以使用getters加工，类似于 Vue 中的 computed属性
谁来读取: 组件中: $store.getters.xxx

1
const getters = {
2
    getterName(state) {
3
        return
4
    },
5
}

以将 sum乘 10 为例：

1
const getters = {
2
    bigSum(state) {
3
        return state.sum * 10
4
    },
5
},

Modules#

包含多个 module
一个 module 是一个 store 的配置对象，可分别写在不同 js文件中，然后暴露即可，但是需要加上namespaced: true,
与一个组件(包含有共享数据)对应

1
import Vue from 'vue'
2
import Vuex from 'vuex'
3
Vue.use(Vuex)
4

5
const moduleA = {
6
    namespaced:true,//开启命名空间
7
    state: {},
8
    mutations: {},
9
    actions: {},
10
    getters: {},
11
}
12
const moduleB = {
13
    namespaced:true,//开启命名空间
14
    state: {},
15
    mutations: {},
16
    actions: {},
17
    getters: {},
18
}
19
const store = new Vuex.Store({
20
    modules: {
21
        moduleA: moduleA,
22
        moduleB: moduleB,
23
        // ES6 简写
24
        // moduleA,
25
        // moduleB,
26
    },
27
})
28
store.state.moduleA // -> moduleA 的状态
29
store.state.moduleB // -> moduleB 的状态

展开收起

四个`map`方法的使用#

导入

1
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

`mapState`方法：#

用于帮助我们映射state中的数据为计算属性

1
computed: {
2
    //借助mapState生成计算属性：sum、school、subject（对象写法）
3
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
4

5
    //借助mapState生成计算属性：sum、school、subject（数组写法）
6
    ...mapState(['sum','school','subject']),
7
},

`mapGetters`方法：#

用于帮助我们映射getters中的数据为计算属性

1
computed: {
2
    //借助mapGetters生成计算属性：bigSum（对象写法）
3
    ...mapGetters({bigSum:'bigSum'}),
4

5
    //借助mapGetters生成计算属性：bigSum（数组写法）
6
    ...mapGetters(['bigSum'])
7
},

`mapActions`方法：#

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

1
methods:{
2
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
3
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
4

5
    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
6
    ...mapActions(['jiaOdd','jiaWait'])
7
}

`mapMutations`方法：#

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

1
methods:{
2
    //靠mapActions生成：increment、decrement（对象形式）
3
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
4

5
    //靠mapMutations生成：JIA、JIAN（对象形式）
6
    ...mapMutations(['JIA','JIAN']),
7
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则传的参数是事件对象(event)。

具体案例：

1
<template>
2
    <div>
3
        <h1>当前求和为：{{ sum }}</h1>
4
        <h3>当前求和放大10倍为：{{ bigSum }}</h3>
5
        <h3>年龄：{{ age }}</h3>
6
        <h3>姓名：{{ name }}</h3>
7
        <select v-model.number="n">
8
            <option value="1">1</option>
9
            <option value="2">2</option>
10
            <option value="3">3</option>
11
        </select>
12
        <!-- 用了mapActions 和 mapMutations 的话要主动传参 -->
13
        <button @click="increment(n)">+</button>
14
        <button @click="decrement(n)">-</button>
15
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
16
        <button @click="incrementWait(n)">等0.5s再加</button>
17
    </div>
18
</template>
19

20
<script>
21
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
22
    export default {
23
        name: 'Count',
24
        data() {
25
            return {
26
                n: 1, //用户选择的数字
27
            }
28
        },
29
        computed: {
30
            ...mapState(['sum', 'age', 'name']),
31
            ...mapGetters(['bigSum']),
32
        },
33
        methods: {
34
            ...mapActions({ incrementOdd: 'sumOdd', incrementWait: 'sumWait' }),
35
            ...mapMutations({ increment: 'sum', decrement: 'reduce' }),
36
        },
37
        mounted() {
38
            console.log('Count', this)
39
        },
40
    }
41
</script>

展开收起

模块化#

目的：让代码更好维护，让多种数据分类更加明确。

语法#

以加法操作为例，直接写在store.js中

store.js

1
import Vue from 'vue'
2
import Vuex from 'vuex'
3

4
Vue.use(Vuex)
5

6
const addCountOptions = {
7
    namespaced: true, //开启命名空间
8
    actions: {
9
        jiaWait(context, value) {
10
            setTimeout(() => {
11
                if (context.state.sum % 2 != 0) {
12
                    context.commit('JIA', value)
13
                }
14
            }, 500)
15
        },
16
    },
17
    mutations: {
18
        JIA(state, value) {
19
            context.sum += value
20
        },
21
        JIAN(state, value) {
22
            context.sum -= value
23
        },
24
    },
25
    state: {
26
        sum: 0,
27
        name: 'tom',
28
    },
29
    getters: {
30
        bigSum(state) {
31
            return state.sum * 10
32
        },
33
    },
34
}
35

36
export default new Vuex.Store({
37
    modules: {
38
        addCountOptions,
39
    },
40
})

展开收起

或者写入单独的js文件中

addCount.js

1
export default {
2
    namespaced: true, //开启命名空间
3
    actions: {},
4
    mutations: {},
5
    state: {},
6
    getters: {},
7
}

store.js

1
import Vue from 'vue'
2
import Vuex from 'vuex'
3
import addCountOptions from './addCount'
4

5
Vue.use(Vuex)
6

7
export default new Vuex.Store({
8
    modules: {
9
        addCountOptions,
10
    },
11
})

读取`state`数据#

开启命名空间后，组件中读取state数据：

1
//方式一：自己直接读取
2
this.$store.state.addCountOptions.sum
3

4
//方式二：借助mapState读取：
5
// 用 mapState 取 addCountOptions 中的state 必须加上 'addCountOptions'
6
...mapState('countAbout',['sum','name']),

读取`getters`数据#

开启命名空间后，组件中读取getters数据：

1
//方式一：自己直接读取，getters中没有addCountOptions属性，
2
    //因此只能使用 addCountOptions/bigSum
3
this.$store.getters['addCountOptions/bigSum']
4

5
//方式二：借助mapGetters读取：
6
...mapGetters('addCountOptions',['bigSum'])

调用`dispatch`#

开启命名空间后，组件中调用dispatch

1
//方式一：自己直接dispatch
2
this.$store.dispatch('addCountOptions/jiaWait',value)
3

4
//方式二：借助mapActions：在标签绑定method时必须手动传入参数 incrementWait(value)
5
...mapActions('addCountOptions',{incrementWait:'jiaWait'})

调用`commit`#

开启命名空间后，组件中调用commit

1
//方式一：自己直接commit
2
this.$store.commit('addCountOptions/JIA',value)
3
this.$store.commit('addCountOptions/JIAN',value)
4

5
//方式二：借助mapMutations：在标签绑定method时必须手动传入参数 increment(value)
6
...mapMutations('addCountOptions',{increment:'JIA',decrement:'JIAN'}),

Vue 插件

Sat, 08 Oct 2022 02:15:18 GMT

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种：

添加全局方法或者 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vuex，vue-router

定义插件#

1
对象.install = function (Vue, options) {
2
    // 1. 添加全局过滤器
3
    Vue.filter(....)
4

5
    // 2. 添加全局指令
6
    Vue.directive(....)
7

8
    // 3. 配置全局混入(合)
9
    Vue.mixin(....)
10

11
    // 4. 添加实例方法
12
    Vue.prototype.$myMethod = function () {...}
13
    Vue.prototype.$myProperty = xxxx
14
}

使用插件#

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

1
// 调用 `MyPlugin.install(Vue)`
2
Vue.use(MyPlugin)
3

4
new Vue({
5
  // ...组件选项
6
})

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

具体案例#

plugin.js

1
export default {
2
    install(Vue, x, y, z) {
3
        console.log(x, y, z)
4
        //全局过滤器
5
        Vue.filter('mySlice', function (value) {
6
            return value.slice(0, 4)
7
        })
8

9
        //定义全局指令
10
        Vue.directive('fbind', {
11
            //指令与元素成功绑定时（一上来）
12
            bind(element, binding) {
13
                element.value = binding.value
14
            },
15
            //指令所在元素被插入页面时
16
            inserted(element, binding) {
17
                element.focus()
18
            },
19
            //指令所在的模板被重新解析时
20
            update(element, binding) {
21
                element.value = binding.value
22
            }
23
        })
24

25
        //定义混入
26
        Vue.mixin({
27
            data() {
28
                return {
29
                    x: 100,
30
                    y: 200
31
                }
32
            },
33
        })
34

35
        //给Vue原型上添加一个方法（vm和vc就都能用了）
36
        Vue.prototype.hello = () => { alert('你好啊aaaa') }
37
    }
38
}

展开收起

main.js

1
// 引入插件
2
import plugin from './plugin'
3

4
// 使用插件
5
Vue.use(plugin)

然后就可以在别的组件使用插件里的功能了。

Mixin (混入)

Sat, 08 Oct 2022 01:14:08 GMT

mixin#

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项

Mixins 是一种分发 Vue 组件中可复用功能的非常灵活的一种方式。页面的风格不用，但是执行的方法和需要的数据类似就可以选择使用混入

混合对于封装一小段想要复用的代码来讲是有用的。它们当然不是唯一可行的。混合很好，它不需要传递状态，但是这种模式当然也可能会被滥用

区别#

mixin混入对象和Vuex的区别#

Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的
mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数
mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖

与公共组件的区别#

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件

基本使用#

1
// 定义一个混入对象 mixin.js
2
export const myMixin = {
3
    methods: {
4
        hello() {
5
            console.log('hello from mixin!')
6
        },
7
    },
8
    mounted() {
9
        this.hello()
10
    }
11
}
12

13
// 定义一个使用混入对象的组件
14
import { myMixin } from '../mixin'
15
const MixinComponent = Vue.extend({
16
    mixins: [myMixin],
17
})
18
// or
19
export default {
20
    name: 'MixinComponent',
21
    mixins: [myMixin],
22
}

展开收起

选项合并规则#

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

数据对象内#

mixin 的数据对象和组件的数据发生冲突时以组件数据优先。

1
var mixin = {
2
    data() {
3
        return {
4
            message: 'hello',
5
            foo: 'abc',
6
        }
7
    },
8
}
9
new Vue({
10
    mixins: [mixin],
11
    data() {
12
        return {
13
            message: 'goodbye',
14
            bar: 'def',
15
        }
16
    },
17
    created() {
18
        console.log(this.data)
19
        // => { message: "goodbye", foo: "abc", bar: "def" }
20
    },
21
})

展开收起

钩子函数#

同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。

1
var mixin = {
2
    created() {
3
        console.log('混入对象的钩子被调用')
4
    },
5
}
6
new Vue({
7
    mixins: [mixin],
8
    created() {
9
        console.log('组件钩子被调用')
10
    },
11
})
12
// => "混入对象的钩子被调用"
13
// => "组件钩子被调用"

值为对象的选项#

值为对象的选项，例如 methods，components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

1
var mixin = {
2
    methods: {
3
        foo() {
4
            console.log('foo')
5
        },
6
        conflicting() {
7
            console.log('from mixin')
8
        },
9
    },
10
}
11
var vm = new Vue({
12
    mixins: [mixin],
13
    methods: {
14
        bar() {
15
            console.log('bar')
16
        },
17
        conflicting() {
18
            console.log('from self')
19
        },
20
    },
21
})
22
vm.foo() // => "foo"
23
vm.bar() // => "bar"
24
vm.conflicting() // => "from self"

展开收起

全局混入（不推荐）#

全局混合被注册到了每个单一组件上。因此，它们的使用场景极其有限并且要非常的小心。一个我能想到的用途就是它像一个插件，你需要赋予它访问所有东西的权限。但即使在这种情况下，我也对你正在做的保持警惕，尤其是你在应用中扩展的函数，可能对你来说是不可知的。

1
Vue.mixin({
2
    mounted() {
3
        console.log("我是mixin")
4
    }
5
})
6
new Vue({
7
    //...
8
})

注意: 一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑

1
// 为自定义的选项 'myOption' 注入一个处理器。
2
Vue.mixin({
3
    created() {
4
        const myOption = this.$options.myOption
5
        if (myOption) {
6
            console.log(myOption)
7
        }
8
    },
9
})
10
new Vue({
11
    myOption: 'hello!',
12
})
13

14
// => "hello!"

vue-router

Sat, 08 Oct 2022 01:14:08 GMT

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

vue-router是基于路由和组件的

路由用户设定访问路径的，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

路由的定义#

后端路由：对于普通的网站，所有的超链接都是 URL 地址，所有的 url 地址都对应服务器上对应的资源

后端路由是处理请求的回调函数
前端路由：对于单页面应用程序来说，主要通过 URL 中的 hash(#号)来实现不同页面之间的切换，同时，hash 有一个特点：HTTP 请求中不会包含 hash 相关的内容；所以，单页面程序中的页面跳转主要用 hash 实现,在单页面应用中这就叫做前端路由

前端路由让构建单页面应用变得易如反掌

基本使用#

安装vue-router，命令：npm i vue-router

编写router配置项:

1
//引入VueRouter
2
import VueRouter from 'vue-router'
3
//引入Luyou 组件
4
import About from '../components/About'
5
import Home from '../components/Home'
6

7
//创建router实例对象，去管理一组一组的路由规则
8
const router = new VueRouter({
9
    /*
10
      route这个配置对象中的route表示路由器匹配规则的意思
11
      每个路由规则都是一个规则对象,身上有两个必须的属性:
12
      第一个属性为path,表示监听哪个路由链接地址
13
      第二个属性为component,表示如果路由前面匹配到了path路径,则展示component属性对于的组件
14
      */
15
  routes:[
16
         //通过redirect属性设置路由重定向,当访问根目录的时候自动跳转到/login目录
17
         {
18
             path: "/",
19
             redirect: "/login"
20
         },
21

22
    {
23
      path:'/about',
24
      component:About
25
    },
26
    {
27
      path:'/home',
28
      component:Home
29
    }
30
  ]
31
})
32

33
//暴露router
34
export default router

展开收起

挂载到vue实例

1
import Vue from 'vue'
2
import App from './App.vue'
3
import VueRouter from 'vue-router'
4

5
import router from './router'
6

7
Vue.use(VueRouter)
8
new Vue({
9
    render: (h) => h(App),
10
    router,
11
}).$mount('#app')

实现切换（active-class可配置高亮样式）

1
<router-link active-class="active" to="/about">About</router-link>

指定展示位置
```
1
<router-view></router-view>
```

多级（嵌套）路由#

如果想要在一层路由组件下面开启第二层组件，不能够直接通过二级的路由链接得到二级的路由组件，因为这样一级的链接组件就会消失

需要通过routes路由器匹配规则中相应规则的 children 属性，在该属性构成的数组中写入子路由来实现路由嵌套的功能

配置路由规则，使用children配置项：

1
const router =  new VueRouter({
2
    routes:[
3
        {
4
            path:'/about',
5
            component:About,
6
        },
7
        {
8
            path:'/home',
9
            component:Home,
10
            children:[ //通过children配置子级路由
11
                {
12
                    path:'news', //此处一定不要写：/news
13
                    component:News
14
                },
15
                {
16
                    path:'message',//此处一定不要写：/message
17
                    component:Message
18
                }
19
            ]
20
        }
21
    ]
22
})

展开收起

跳转（要写完整路径）：

1
<router-link to="/home/news">News</router-link>

指定展示位置
```
1
<router-view></router-view>
```

命名路由#

通过在<router-link></router-link>的组件中 to 指向一个带有 name 属性的对象，而在路由规则中也添加一个对应的 name 属性实现路由跳转，该方法能让我们更加轻松的进行路由规则的匹配

给路由命名：

1
const router =  new VueRouter({
2
    routes:[
3
        {
4
            path:'/demo',
5
            component:Demo,
6
            children:[
7
                {
8
                    path:'test',
9
                    component:Test,
10
                    children:[
11
                        {
12
                              name:'hello' //给路由命名
13
                            path:'welcome',
14
                            component:Hello,
15
                        }
16
                    ]
17
                }
18
            ]
19
        }
20
    ]
21
})

展开收起

简化跳转：

1
<!--简化前，需要写完整的路径 -->
2
<router-link to="/demo/test/welcome">跳转</router-link>
3

4
<!--简化后，直接通过名字跳转 -->
5
<router-link :to="{name:'hello'}">跳转</router-link>
6

7
<!--简化写法配合传递参数 -->
8
<router-link
9
  :to="{
10
    name:'hello',
11
    query:{
12
       id:666,
13
            title:'你好'
14
    }
15
  }"
16
>
17
    跳转
18
</router-link>

展开收起

路由传参#

一个 Vue 组件内置的$route 属性可以代表着正在进行跳转的路由

query#

当在路由器中链接中使用查询字符串(url 后面的?后的一系列值),不用修改路由规则中的 path 属性的路径，在路由视图的组件中可用通过 this.$route 获取该路由实例，通过该实例的 query 属性获取传入的参数的属性和值

传递参数

1
<!-- 跳转并携带query参数，to的字符串写法 -->
2
<router-link to="/home/message/detail?id=666&title=你好">跳转</router-link>
3

4
<!-- 跳转并携带query参数，to的对象写法 -->
5
<router-link
6
    :to="{
7
        path:'/home/message/detail',
8
        query:{
9
            id:666,
10
            title:'你好'
11
        }
12
    }"
13
>
14
    跳转
15
</router-link>

展开收起

接收参数：

1
$route.query.id
2
$route.query.title

params#

使用 params 来获取参数需要在路由规则中定义参数，然后在路由器链接中需要在后面跟上对应数量的/+值传给参数实现传参，通过该实例的 params 属性获取传入的参数的属性和值

配置路由，声明接收params参数

1
const router =  new VueRouter({
2
    routes:[
3
        {
4
            path:'/home',
5
            component:Home,
6
            children:[
7
                {
8
                    path:'news',
9
                    component:News,
10
                },
11
                {
12
                    component:Message,
13
                    children:[
14
                        {
15
                            name:'xiangqing',
16
                            path:'detail/:id/:title', //使用占位符声明接收params参数
17
                            component:Detail,
18
                        }
19
                    ]
20
                }
21
            ]
22
        }
23
    ]
24
})

展开收起

传递参数

1
<!-- 跳转并携带params参数，to的字符串写法 -->
2
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
3

4
<!-- 跳转并携带params参数，to的对象写法 -->
5
<router-link
6
  :to="{
7
    name:'xiangqing', // 必须使用name属性，不能用path
8
    params:{
9
       id:666,
10
            title:'你好'
11
    }
12
  }"
13
>
14
    跳转
15
</router-link>

展开收起

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接收参数：

1
$route.params.id
2
$route.params.title

路由的props#

作用：让路由组件更方便的收到参数

1
const router =  new VueRouter({
2
    routes: [
3
        {
4
            name:'xiangqing',
5
            path:'detail',
6
            component:Detail,
7

8
            //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
9
            // props:{a:900}
10

11
            //第二种写法：props值为布尔值，布尔值为true，
12
            //  则把路由收到的所有params参数通过props传给Detail组件
13
            // props:true
14

15
            //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
16
            props($route) {
17
                return {
18
                  id: $route.query.id,
19
                  title:$route.query.title,
20
                  a: 1,
21
                  b: 'hello'
22
                }
23
            }
24
        }
25
    ]
26
})

展开收起

对应组件的具体代码

1
<template>
2
  <ul>
3
      <h1>Detail</h1>
4
      <li>消息编号：{{id}}</li>
5
      <li>消息标题：{{title}}</li>
6
      <li>a:{{a}}</li>
7
      <li>b:{{b}}</li>
8
  </ul>
9
</template>
10

11
<script>
12
export default {
13
    name: 'Detail',
14
    props: ['id', 'title', 'a', 'b'],
15
    mounted () {
16
        console.log(this.$route);
17
    }
18
}
19
</script>

展开收起

route与route 与 route与router#

this.$route 是路由的参数对象，所有的路由参数如 pararms 和 query 都属于该属性的参数
this.$router 是一个路由导航对象，用它可以方便的使用 JS 代码，实现路由器的前进，后退，跳转到新的 url 地址

$route 表示(当前路由信息对象)#

表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取。

$route.path

字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
$route.params

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.hash

当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
$route.fullPath

完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.matched

数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name

当前路径名字
$route.meta

对象，路由元信息，可以以对象的形式添加自定义的信息

$router对象#

全局的路由实例，是router构造方法的实例。在 Vue 实例内部，你可以通过 $router 访问路由实例

this.$router.push()#

1
// 字符串
2
      this.$router.push('home')
3
// 对象
4
      this.$router.push({ path: 'home' })
5
// 命名的路由
6
      this.$router.push({ name: 'user', params: { userId: 123 }})
7
// 带查询参数，变成 /register?plan=123
8
      this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其实和<router-link :to="...">是等同的。 注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

this.$router.go()#

1
// 页面路由跳转 正数前进或者负数后退
2
this.$router.go(-1) // 后退1步
3
this.$router.go(2) // 前进2步
4

5
this.$router.forward() //前进
6
this.$router.back() //后退

this.$router.replace()#

1
//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
2
不会向 history 栈添加一个新的记录
3
<router-link to="/05" replace>05</router-link>
4

5
// 一般使用replace来做404页面
6
this.$router.replace('/')

缓存路由组件#

作用：让不展示的路由组件保持挂载，不被销毁。
具体编码：

这个 include 指的是组件名

1
<keep-alive include="News">
2
    <router-view></router-view>
3
</keep-alive>

route生命周期钩子#

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。具体名字：

activated路由组件被激活时触发。
deactivated路由组件失活时触发。

这两个生命周期钩子需要配合前面的缓存路由组件使用（没有缓存路由组件不起效果）

路由守卫#

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫#

全局前置守卫包含三个 beforeEach 前置守卫，affterEach 后置守卫，beforeResolve 解析守卫

router.beforeEach#

router.beforeEach((to,from,next)=>{})

回调函数中的参数，

to：进入到哪个路由去
from：从哪个路由离开
next：函数，决定是否展示你要看到的路由页面。

next方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 toprop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

从名字全局前置守卫不难理解，它是全局的，即对整个单页应用（SPA）中的所有路由都生效，所以当定义了全局的前置守卫，在进入每一个路由之前都会调用这个回调

router.beforeResolve#

router.beforeResolve((to, from, next) => {})

参数与beforeEach相同

to：进入到哪个路由去
from：从哪个路由离开
next：函数，决定是否展示你要看到的路由页面。

他们两个的区别

执行的时机不一样

beforeEach 是在路由规则被循环之前执行 beforResolve 是在组件被解析之后调用
执行顺序

beforeEach 要比 beforResolve 先执行

router.afterEach#

router.afterEach((to, from) => {})

只有两个参数，

to：进入到哪个路由去
from：从哪个路由离开

全局后置守卫是整个单页应用中每一次路由跳转后都会执行其中的回调。所以多用于路由跳转后的相应页面操作，并不像全局前置守卫那样会在回调中进行页面的重定向或跳转。

案例#

1
//全局前置守卫：初始化时执行、每次路由切换前执行
2
router.beforeEach((to,from,next)=>{
3
  if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
4
    if(localStorage.getItem('school') === 'zhejiang'){ //权限控制的具体规则
5
      next() //放行
6
    }else{
7
      alert('暂无权限查看')
8
      // next({name:'guanyu'})
9
    }
10
  }else{
11
    next() //放行
12
  }
13
})
14

15
//全局后置守卫：初始化时执行、每次路由切换后执行
16
router.afterEach((to,from)=>{
17
  if(to.meta.title){
18
    document.title = to.meta.title //修改网页的title
19
  }else{
20
    document.title = 'vue_test'
21
  }
22
})

展开收起

独享守卫#

独享守卫只有beforeEnter，并且写在routes的子路由中，仅对配置的一个路由生效

beforeEnter#

beforeEnter:(to,from,next)=>{}

参数与beforeEach相同

to：进入到哪个路由去
from：从哪个路由离开
next：函数，决定是否展示你要看到的路由页面。

与全局路由守卫用法一致，但是只能针对一个页面使用

案例#

1
const router =  new VueRouter({
2
    routes: [
3
        {
4
            name:'xinwen',
5
            path:'news',
6
            component:News,
7
            meta:{isAuth:true,title:'新闻'},
8
            beforeEnter: (to, from, next) => {
9
                console.log('独享路由守卫',to,from)
10
                if(to.meta.isAuth){ //判断是否需要鉴权
11
                    if(localStorage.getItem('school')==='atguigu'){
12
                        next()
13
                    }else{
14
                        alert('学校名不对，无权限查看！')
15
                    }
16
                }else{
17
                    next()
18
                }
19
            }
20
        },
21
    ]
22
)}

展开收起

组件内的守卫#

组件内的守卫包含三个 beforeRouterEnter ，beforeRouterUpdated， beforeRouterLeave

beforeRouterEnter#

beforeRouteEnter:(to,from,next)=>{}

参数与全局路由守卫一致，触发在进入组件之前。当守卫执行前，组件实例还没被创建，故无法访问 this

项目需要在进入某个页面前，判断从特定页面进来时，做某些处理。例如：只有从详情页回到列表页需要重新调接口。此时，用到了beforeRouteEnter方法。

注意：在内部获取不到外部的this，方法、变量等都获取不到。但vm可以获取到method中的方法以及变量

beforeRouterUpdated#

beforeRouterUpdated:(to,from,next)=>{}

参数与全局路由守卫一致

在当前路由改变，但是该组件被复用时调用，即路由路径不变，调用的是同个界面，即组件被连续复用的时候，会调用到beforeRouteUpdate触发

beforeRouterLeave#

beforeRouterLeave:(to,from,next)=>{}

参数与全局路由守卫一致，导航离开该组件的对应路由时调用

在页面离开时做的操作，最常见的场景：用户修改了页面某些字段，还没有保存就要离开当前页面。此时在页面离开前需要给用户提示

注意：此时函数内部可以访问到this，执行完要做的操作后，必须写 next()，否则页面不会跳转

案例#

1
export default {
2
  name: 'About',
3
  beforeCreate() {
4
    console.log('beforeCreate')
5
  },
6

7
  mounted() {
8
    console.log('mounted')
9
  },
10
  beforeDestroy() {
11
    console.log('beforeDestroy')
12
  },
13

14
  //通过路由规则，进入该组件时被调用
15
  beforeRouteEnter(to, from, next) {
16
    console.log('beforeRouteEnter', to, from)
17
    if (to.meta.isAuth) {
18
      //判断是否需要鉴权
19
      if (localStorage.getItem('school') === 'xuexiao') {
20
        next()
21
      } else {
22
        alert('学校名不对，无权限查看！')
23
      }
24
    } else {
25
      next()
26
    }
27
  },
28

29
  //通过路由规则，离开该组件时被调用
30
  beforeRouteLeave(to, from, next) {
31
    console.log('beforeRouteLeave', to, from)
32
    next()
33
  },
34
}
35

36
//输出：
37
// beforeRouteEnter
38
// beforeCreate
39
// mounted
40
// beforeRouteLeave
41
// beforeDestroy

展开收起

路由器的两种工作模式#

路由器的两种工作模式分别为hash模式和history模式，默认是hash模式。

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

设置模式#

1
const router =  new VueRouter({
2
  mode:'history', // 默认不写mode 是hash
3
  routes:[{}],
4
})

hash模式#

路由器默认的工作模式是hash模式。因此我们看到的是

1
http://localhost:8080/#/
2
http://localhost:8080/#/about
3
http://localhost:8080/#/home

地址中永远带着#号，不美观。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好，hash模式所有浏览器天生支持

history模式#

路由器工作模式为history模式时，我们看到的是

1
http://localhost:8080/
2
http://localhost:8080/about
3
http://localhost:8080/home

地址干净，美观。
history模式，它内部使用的是h5中提供的api，兼容性没有hash模式的兼容性好
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

Vue 脚手架

Fri, 07 Oct 2022 08:54:08 GMT

使用前置：
第一步(没有安装过的执行)：全局安装 @vue/cli
npm install -g @vue/cli
第二步：切换到要创建项目的目录，然后使用命令创建项目
vue create xxxxx
第三步：启动项目
npm run serve

脚手架文件结构#

1
├── node_modules
2
├── public
3
│   ├── favicon.ico: 页签图标
4
│   └── index.html: 主页面
5
├── src
6
│   ├── assets: 存放静态资源
7
│   │   └── logo.png
8
│   │── component: 存放组件
9
│   │   └── HelloWorld.vue
10
│   │── App.vue: 汇总所有组件
11
│   │── main.js: 入口文件
12
├── .gitignore: git版本管制忽略的配置
13
├── babel.config.js: babel的配置文件
14
├── package.json: 应用包配置文件
15
├── README.md: 应用描述文件
16
├── package-lock.json：包版本控制文件

展开收起

脚手架demo#

components:#

就直接把单文件组件的 School.vue 和 Student.vue 两个文件直接拿来用，不需要修改。

App.vue:#

引入这两个组件，注册一下这两个组件，再使用。

1
<template>
2
  <div id="app">
3
    <img alt="Vue logo" src="./assets/logo.png">
4
    <Student></Student>
5
    <School></School>
6
  </div>
7
</template>
8

9
<script>
10
import School from './components/School.vue'
11
import Student from './components/Student.vue'
12

13
export default {
14
  name: 'App',
15
  components: {
16
    School,
17
    Student
18
  }
19
}
20
</script>
21

22
<style>
23
#app {
24
  font-family: Avenir, Helvetica, Arial, sans-serif;
25
  -webkit-font-smoothing: antialiased;
26
  -moz-osx-font-smoothing: grayscale;
27
  text-align: center;
28
  color: #2c3e50;
29
  margin-top: 60px;
30
}
31
</style>

展开收起

main.js:#

入口文件

1
import Vue from 'vue'
2
import App from './App.vue'
3

4
Vue.config.productionTip = false
5

6
new Vue({
7
  render: h => h(App),
8
}).$mount('#app')

接下来就要详细讲解 main.js 中的 render 函数

render函数#

基本介绍#

之前的写法是这样：

1
import App from './App.vue'
2

3
new Vue({
4
  el:'#root',
5
  template:`<App></App>`,
6
  components:{App},
7
})

如果这样子写，运行的话会引发如下的报错

vue_脚手架_render函数

报错的意思是，是在使用运行版本的 vue ，没有模板解析器。

从上面的小知识可以知道，我们引入的 vue 不是完整版的，是残缺的（为了减小vue的大小）。所以残缺的vue.js 只有通过 render 函数才能把项目给跑起来。

来解析一下render

1
// render最原始写的方式
2
// render是个函数，还能接收到参数a
3
// 这个 createElement 很关键，是个回调函数
4
new Vue({
5
  render(createElement) {
6
      console.log(typeof createElement)
7
      // 这个 createElement 回调函数能创建元素
8
      // 因为残缺的vue 不能解析 template，所以render就来帮忙解决这个问题
9
      // createElement 能创建具体的元素
10
      return createElement('h1', 'hello')
11
  }
12
}).$mount('#app')

vue_脚手架_render函数2

因为 render 函数内并没有用到 this，所以可以简写成箭头函数。

1
new Vue({
2
  // render: h => h(App),
3
  render: (createElement) => {
4
    return createElement(App)
5
  }
6
}).$mount('#app')

再简写：

1
new Vue({
2
  // render: h => h(App),
3
  render: createElement => createElement(App)
4
}).$mount('#app')

最后把 createElement 换成 h 就完事了。

总结#

对象内写方法最原始的：

1
let obj = {
2
    name: 'aaa',
3
    work: function (salary) {
4
        return '工资' + salary;
5
    }
6
}

ES6 简化版：

1
let obj = {
2
    name: 'aaa',
3
    work(salary) {
4
        return '工资' + salary;
5
    }
6
}

箭头函数简化版:

1
let obj = {
2
    name: 'aaa',
3
    work: (salary) => {
4
        return '工资' + salary;
5
    }
6
}

箭头函数再简化（最终版）：

1
// 只有一个参数就可以把圆括号去了，函数体内部只有一个 return 就可以把大括号去掉，return去掉
2
let obj = {
3
    name: 'aaa',
4
    work: salary => '工资' + salary;
5
}

这样就可以理解 render 函数的简写方式了。

来个不同版本 vue 的区别

vue.js与vue.runtime.xxx.js的区别：
- vue.js是完整版的Vue，包含：核心功能+模板解析器。
- vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

修改脚手架的默认配置#

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

脚手架中的index.html#

1
<!DOCTYPE html>
2
<html lang="">
3
  <head>
4
    <meta charset="utf-8">
5
  <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
  <!-- 开启移动端的理想视口 -->
8
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
9
  <!-- 配置页签图标 -->
10
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11
  <!-- 引入第三方样式 -->
12
  <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
13
  <!-- 配置网页标题 -->
14
    <title>硅谷系统</title>
15
  </head>
16
  <body>
17
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
18
    <noscript>
19
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
20
    </noscript>
21
    <!-- 容器 -->
22
    <div id="app"></div>
23
    <!-- built files will be auto injected -->
24
  </body>
25
</html>

展开收起

组件间通信

Fri, 07 Oct 2022 06:25:42 GMT

props#

方式#

一个组件里面引入另外一个组件，此时构成了一种“父子关系”，当前组件为“父”，引入的组件为“子”，如当前组件（父），在父组件中通过 :message向子组件通信。

父组件 Parent.vue

1
<template>
2
    <div class="parent-box">
3
        <div>
4
            <div>我是父组件</div>
5
            <div>{{ message }}</div>
6
        </div>
7
        <children :message="toChildrenMsg"></children>
8
    </div>
9
</template>
10

11
<script>
12
    import Children from './Children.vue' //当前页引入子组件
13
    export default {
14
        name: 'Parent',
15
        components: {
16
            Children,
17
        },
18
        data() {
19
            return {
20
                message: '我是父组件的内容',
21
                toChildrenMsg: '从父组件传过到子组件的内容',
22
            }
23
        },
24
    }
25
</script>

展开收起

子组件 Children.vue

1
<template>
2
    <div class="children-box">
3
        <div>
4
            <div>我是子组件</div>
5
            <div>{{ message }}</div>
6
        </div>
7
    </div>
8
</template>
9

10
<script>
11
    export default {
12
        name: 'Children',
13
        props: {
14
            message: {
15
                type: String, //类型判断
16
                default: '', //默认值
17
            },
18
        },
19
    }
20
</script>

展开收起

在子组件通过props进行接收，注意子组件props里面接收的对象名称必须与父组件中在子组件绑定的名称一致，当前例子为message，可以在组件中this.message的方式使用props里面的值。

优缺点#

此方式用于父组件向子组件传递数据
所有标签属性都会成为组件对象的属性，模板组件可以直接引用
问题:

a. 如果需要向非子后代传递数据必须多层逐层传递

b. 兄弟组件间也不能直接 props 通信，必须借助父组件才可以

自定义事件#

组件自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件

使用场景

A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

第一种绑定方式#

在父组件中：<Demo @hello="test"/>或 <Demo v-on:hello="test"/>

App.vue

1
<template>
2
  <div class="app">
3
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
4
    <Student @atguigu="getStudentName"/>
5
  </div>
6
</template>
7

8
<script>
9
  import Student from './components/Student'
10

11
  export default {
12
    name:'App',
13
    components:{Student},
14
    data() {
15
      return {
16
        msg:'你好啊！',
17
        studentName:''
18
      }
19
    },
20
    methods: {
21
      getStudentName(name,...params){
22
        console.log('App收到了学生名：',name,params)
23
        this.studentName = name
24
      }
25
    }
26
  }
27
</script>

展开收起

Student.vue

1
<template>
2
  <div class="student">
3
    <button @click="sendStudentlName">把学生名给App</button>
4
  </div>
5
</template>
6

7
<script>
8
  export default {
9
    name:'Student',
10
    data() {
11
      return {
12
        name:'张三',
13
      }
14
    },
15
    methods: {
16
      sendStudentlName(){
17
        //触发Student组件实例身上的atguigu事件
18
        this.$emit('atguigu',this.name,666,888,900)
19
      }
20
    },
21
  }
22
</script>
23

24
<style lang="less" scoped>
25
  .student{
26
    background-color: pink;
27
    padding: 5px;
28
    margin-top: 30px;
29
  }
30
</style>

展开收起

当子组件Student.vue触发点击事件时，Student.vue中$emit执行，触发 App.vue组件上Student组件实例身上的atguigu事件，将this.$emit('atguigu',this.name,666,888,900)中，需要的参数交给App.vue以实现子组件向父组件传参。

第二种绑定方式#

在父组件中：使用 this.$refs.xxx.$on()

这样写起来更灵活，比如可以加定时器啥的。

App.vue

1
<template>
2
  <div class="app">
3
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
4
    <Student ref="student"/>
5
  </div>
6
</template>
7

8
<script>
9
  import Student from './components/Student'
10

11
  export default {
12
    name:'App',
13
    components:{Student},
14
    data() {
15
      return {
16
        studentName:''
17
      }
18
    },
19
    methods: {
20
      getStudentName(name,...params){
21
        console.log('App收到了学生名：',name,params)
22
        this.studentName = name
23
      },
24
    },
25
    mounted() {
26
      this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
27
      // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
28
    },
29
  }
30
</script>

展开收起

Student.vue

1
<template>
2
  <div class="student">
3
    <button @click="sendStudentlName">把学生名给App</button>
4
  </div>
5
</template>
6

7
<script>
8
  export default {
9
    name:'Student',
10
    data() {
11
      return {
12
        name:'张三',
13
      }
14
    },
15
    methods: {
16
      sendStudentlName(){
17
        //触发Student组件实例身上的atguigu事件
18
        this.$emit('atguigu',this.name,666,888,900)
19
      }
20
    },
21
  }
22
</script>

展开收起

上述实例代码中，在父组件 App.vue 中为 Student组件取别名 <Student ref="student"/>，通过this.$refs.student.$on('atguigu',this.getStudentName)绑定自定义事件 atguigu ，然后在子组件Student中触发事件传参

注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

解绑自定义事件#

解绑自定义事件，this.$off('atguigu')

1
this.$off('atguigu') //解绑一个自定义事件
2
// this.$off(['atguigu','demo']) //解绑多个自定义事件
3
// this.$off() //解绑所有的自定义事件

在绑定自定义事件后，如果组价执行完毕，在beforeDestroy钩子中解绑自定义事件，防止冲突

全局事件总线#

全局事件总线是一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线#

在main.js中，创建 Vue实例时，使用Vue.prototype.$bus = this

1
new Vue({
2
  el:'#app',
3
  render: h => h(App),
4
  beforeCreate() {
5
    Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
6
  },
7
})

使用全局事件总线#

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
1
methods(){
2
  demo(data){}
3
}
4
//
5
mounted() {
6
  this.$bus.$on('xxxx',this.demo)
7
}
```
提供数据：this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

实例代码#

School.vue

1
<template>
2
  <div class="school">
3
    <h2>学校名称：{{name}}</h2>
4
    <h2>学校地址：{{address}}</h2>
5
  </div>
6
</template>
7

8
<script>
9
  export default {
10
    name:'School',
11
    data() {
12
      return {
13
        name:'尚硅谷',
14
        address:'北京',
15
      }
16
    },
17
        methods: {
18
            demo(data) {
19
                console.log('我是School组件，收到了数据',data)
20
            }
21
        }
22
    mounted() {
23
            // 在接收数据的组件上绑定事件
24
      this.$bus.$on('hello',this.demo)
25
    },
26
    beforeDestroy() {
27
            // 解绑事件
28
      this.$bus.$off('hello')
29
    },
30
  }
31
</script>

展开收起

Student.vue

1
<template>
2
  <div class="student">
3
    <h2>学生姓名：{{name}}</h2>
4
    <h2>学生性别：{{sex}}</h2>
5
    <button @click="sendStudentName">把学生名给School组件</button>
6
  </div>
7
</template>
8

9
<script>
10
  export default {
11
    name:'Student',
12
    data() {
13
      return {
14
        name:'张三',
15
        sex:'男',
16
      }
17
    },
18
    methods: {
19
      sendStudentName(){
20
                // 触发想接收数据的组件上的事件，传入想发送的数据
21
        this.$bus.$emit('hello',this.name)
22
      }
23
    },
24
  }
25
</script>

展开收起

vue_组件间通信_全局事件总线

消息订阅与发布#

一种组件间通信的方式，适用于任意组件间通信。

使用方法#

安装pubsub：npm i pubsub-js
引入: import pubsub from 'pubsub-js'

接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

1
import PubSub from 'pubsub-js' //引入
2
PubSub.subscribe('delete', function(msg, data){ }) //订阅
3
PubSub.publish('delete', data) //发布消息

提供数据：pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

实例代码#

订阅消息School.vue

1
<template>
2
  <div class="school">
3
    <h2>学校名称：{{name}}</h2>
4
    <h2>学校地址：{{address}}</h2>
5
  </div>
6
</template>
7

8
<script>
9
  import pubsub from 'pubsub-js'
10
  export default {
11
    name:'School',
12
    data() {
13
      return {
14
        name:'尚硅谷',
15
        address:'北京',
16
      }
17
    },
18
    mounted() {
19
      /* this.$bus.$on('hello',(data)=>{
20
        console.log('我是School组件，收到了数据',data)
21
      }) */
22
      this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
23
        console.log(this)
24
        // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
25
      })
26
    },
27
    beforeDestroy() {
28
      // this.$bus.$off('hello')
29
      pubsub.unsubscribe(this.pubId)
30
    },
31
  }
32
</script>

展开收起

发布消息Student.vue

1
<template>
2
  <div class="student">
3
    <h2>学生姓名：{{name}}</h2>
4
    <h2>学生性别：{{sex}}</h2>
5
    <button @click="sendStudentName">把学生名给School组件</button>
6
  </div>
7
</template>
8

9
<script>
10
  import pubsub from 'pubsub-js'
11
  export default {
12
    name:'Student',
13
    data() {
14
      return {
15
        name:'张三',
16
        sex:'男',
17
      }
18
    },
19
    mounted() {
20
      // console.log('Student',this.x)
21
    },
22
    methods: {
23
      sendStudentName(){
24
        // this.$bus.$emit('hello',this.name)
25
        pubsub.publish('hello',666)
26
      }
27
    },
28
  }
29
</script>

展开收起

slot插槽#

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽
注意：插槽内容是在父组件中编译后, 再传递给子组件的。

基本用法#

vue 官方规定：每一个 slot 插槽，都要有一个 name 名称

如果省略了 slot 的 name 属性，则有一个默认名称叫做 default

在封装组件时，可以通过 <slot></slot> 元素定义插槽，从而为用户预留内容占位符。

如果在父组件引用子组件中没有结构，则会显示子组件中插槽<slot></slot>的内容

默认插槽#

1
// 父组件中：
2
<Category>
3
    <div>html结构1</div>
4
</Category>
5
//子组件中：
6
<template>
7
    <div>
8
        <!-- 定义插槽 -->
9
        <slot>插槽默认内容...</slot>
10
    </div>
11
</template>

具名插槽#

子组件：如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot></slot> 插槽指定具体的name 名称。这种带有具体名称的插槽叫做“具名插槽”。
父组件：在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用v-slot 指令，并以v-slot 的参数的形式提供其名称，v-slot也有缩写，即把参数之前的所有内容v-slot: 替换为字符#

注意：没有指定 name 名称的插槽，会有隐含的名称叫做 default

1
// 父组件中：
2
<Category>
3
    <template slot="center">
4
        <div>html结构1</div>
5
    </template>
6

7
    <template v-slot:header>
8
        <div>html结构2</div>
9
    </template>
10

11
    <template #footer>
12
        <div>html结构3</div>
13
    </template>
14
</Category>
15
// 子组件中：
16
<template>
17
    <div>
18
        <!-- 定义插槽 -->
19
        <slot name="center">插槽默认内容1...</slot>
20
        <slot name="header">插槽默认内容2...</slot>
21
        <slot name="footer">插槽默认内容3...</slot>
22
    </div>
23
</template>

展开收起

作用域插槽#

理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）

1
// 父组件中：
2
<Category>
3
    <template scope="scopeData">
4
        <!-- 生成的是ul列表 -->
5
        <ul>
6
            <li v-for="g in scopeData.games" :key="g">{{g}}</li>
7
        </ul>
8
    </template>
9
</Category>
10

11
<Category>
12
    <template slot-scope="scopeData">
13
        <!-- 生成的是h4标题 -->
14
        <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
15
    </template>
16
</Category>
17

18
// 子组件中：
19
<template>
20
    <div>
21
        <!-- 通过数据绑定就可以把子组件的数据传到父组件 -->
22
        <slot :games="games"></slot>
23
    </div>
24
</template>
25

26
<script>
27
    export default {
28
        name: 'Category',
29
        props: ['title'],
30
        //数据在子组件自身
31
        data() {
32
            return {
33
                games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
34
            }
35
        },
36
    }
37
</script>

展开收起

按键修饰符

Thu, 06 Oct 2022 21:10:42 GMT

在绑定了键盘或鼠标的点击事件后,可以通过按下的按键触发要进行的事件,这时需要在后方添加表示按键的修辞符

按键码#

可以通过 keyCode 的值来绑定需要触发的按键

1
<input v-on:keyup.13="submit" />

部分特殊的按键码可以使用别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

也可以自定义按键修饰符的别名

1
Vue.config.keyCodes.f1 =112
2
//使用Vue对象上的全局属性config.keyCodes来定义别名
3
//在绑定时就可以使用v-on:keyup.f1直接对f1按键进行操作了

系统修饰符#

系统修辞符监听仅在同时按下了绑定键盘或鼠标按钮时才会触发事件

键盘#

.ctrl
.alt
.shift
.meta

注意:

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。

在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。

在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

1
<!-- Alt + C -->
2
<input @keyup.alt.67="clear" />
3

4
<!-- Ctrl + Click -->
5
<div @click.ctrl="doSomething">Do something</div>

鼠标#

.left
.right
.middle 鼠标中键

注意事项#

注<修饰键与常规按键不同>，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果只想要单独触发，则需要使用 keycode 编码或.exact修饰符

.exact

.exact 修饰符允许用户控制由精确的系统修饰符组合触发的事件

1
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
2
<button @click.ctrl="onClick">A</button>
3

4
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
5
<button @click.ctrl.exact="onCtrlClick">A</button>
6

7
<!-- 没有任何系统修饰符被按下的时候才触发 -->
8
<button @click.exact="onClick">A</button>

Vue 组件

Thu, 06 Oct 2022 07:30:42 GMT

组件的定义#

组件的出现是为了拆分 Vue 实例的代码量，能够让我们以不同的组件来划分不同的功能模板，将来需要什么样的功能，只需要调用对应的组件就可以了

组件化与模块化的区别

模块化是从代码逻辑的角度进行划分的;方便代码分层开发，保证每个功能模块的职能单一
组件化是从 UI 界面的角度进行划分的，前端的组件化是为了方便 UI 组件的重用

组件基本使用#

组件的注意事项:

**每个组件必须只有一个根元素，**可以将模板的内容包裹在一个父元素内来解决这个问题
组件中可以有自己的 data 数据，使用方式同 Vue 实例中一样，但是组件的 data 只能是一个方法，而且必须要返回一个包含了数据的对象，因为需要每个组件之间相互独立，如果不是一个函数，那么每个组件就会影响其他的组件 如果要想同时影响其他数据，可以创建一个外部的镀锡，每次 data 返回这个对象

组件名#

在创建一个组件时，我们始终需要给该组件一个名字用作标识，组件名的有多种写法

短横线命名法，使用短横线命名法来命名组件在使用的时候也是直接将引用的组件名作为标签名来使用
**驼峰命名法，**使用驼峰命名法命名的组件在引用这个组件时可以通过两种命名的方式来引用

**注意:**当用作标签时只能使用短横线命名法，所以最好都使用短横线命名法来命名

创建组件#

方式1：先创建一个组件构造器，然后由组件构造器创建组件，如:var myCom =Vue.extend(option)
方式2：使用Vue.component()直接创建组件。Vue.component('componentName',option) ， option相当于创建vue对象传入的配置对象
方式3：把组件的 name 属性作为注册后组件的名称

1
    //方式1 创建hello组件
2
    const hello = Vue.extend({
3
        template:`
4
        <div>
5
          <h2>你好啊！{{name}}</h2>
6
          </div>
7
      `,
8
        data(){
9
            return {
10
                name:'Tom'
11
            }
12
        }
13
    })
14

15
    // 方式2
16
    Vue.component('hello', {
17
        template:`
18
        <div>
19
          <h2>你好啊！{{name}}</h2>
20
          </div>
21
      `,
22
        data(){
23
            return {
24
                name:'Tom'
25
            }
26
        }
27
    })
28

29
    //方式3
30
    <template>
31
      <div>
32
        <h2>你好啊！{{name}}</h2>
33
       </div>
34
    </template>
35

36
    <script>
37
    export default {
38
        name: 'hello',
39
        data(){
40
            return {
41
                name:'Tom'
42
            }
43
    }
44
    </script>

展开收起

注册组件#

全局组件注册#

在<script>标签中直接使用 Vue.component(componentName, component) 方法

1
<script>
2
  //全局注册组件 hello
3
  Vue.component('school', school)
4
</script>

局部组件注册#

在需要使用的页面中，创建的vue 实例中，component项中注册

1
<script>
2
  //创建vm
3
    new Vue({
4
        el: '#root',
5
        data: {
6
            msg:'你好啊！'
7
        },
8
        //注册组件（局部注册）
9
        components: {
10
            hello: hello,
11
            // ES6简写形式
12
            // hello,
13
        }
14
    })
15
</script>

展开收起

区别#

被全局注册的组件，可以在全局任何一个组件内使用
被局部注册的组件，只能在当前注册的范围内使用

应用场景

如果某些组件在开发期间的使用频率很高，推荐进行全局注册
如果某些组件只在特定的情况下会被用到，推荐进行局部注册

使用组件#

在页面注册组件后，使用 <组件名/> 或 <组件名><组件名/> 的方式

关于组件名#

一个单词组成：

第一种写法(首字母小写)：school
第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签#

第一种写法：<school></school>

第二种写法：<school/>

备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

VueComponent#

hello组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend()生成的。
我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建hello组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！(这个VueComponent可不是实例对象)
关于this指向：
- 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
- new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

一个重要的内置关系#

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

vue_组件_一个重要的内置关系

Props#

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
1
props:{
2
  name:{
3
        type:String, //类型
4
        required:true, //必要性
5
        default:'老王' //默认值
6
  }
7
}
```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

子组件是无法直接使用父组件的 data 中的数据的，需要通过 props 属性才能够使用父组件传入过来的值

向子组件传入数据#

在父组件的引用中填入属性名与对应的属性值,然后在子组件的 props 值填入与引用子组件的属性名一致的属性名，就可以在子组件中引用父组件的数据了，就如访问 data 中的值一样

父组件 App.vue

1
<template>
2
    <div id="app">
3
        // 向子组件传入 {name:'haha', age:this.age}
4
        <School name="haha" :age="this.age"></School>
5
    </div>
6
</template>
7

8
  <script>
9
    import School from './components/School.vue'
10

11
    export default {
12
        name: 'App',
13
        data() {
14
            return {
15
                age: 360,
16
            }
17
        },
18
        components: {
19
            School,
20
        },
21
    }
22
</script>

展开收起

子组件 School.vue

1
<template>
2
    <div class="demo">
3
        <h2>学校名称：{{ name }}</h2>
4
        <h2>学校年龄：{{ age }}</h2>
5
        <h2>学校地址：{{ address }}</h2>
6
    </div>
7
</template>
8

9
  <script>
10
    export default {
11
        name: 'School',
12
        // 最简单的写法：props: ['name', 'age']
13
        props: {
14
            name: {
15
                type: String,
16
                required: true, // 必须要传的
17
            },
18
            age: {
19
                type: Number,
20
                required: true,
21
            },
22
        },
23
        data() {
24
            return {
25
                address: '北京昌平',
26
            }
27
        },
28
    }
29
</script>

展开收起

注意:

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop，但是为了方便可以传入一个对象,调用对象的属性来使用传入的数据
组件中的所有 props 中的数据都是通过父组件传递给子组件的，**不要试图去修改 props 中传入的数据,**一般都是只读的，如果修改 Vue 会抛出报错信息
可以通过 v-bind 动态传递给 prop 一个值
子组件的 data 数据并不是通过父组件传递过来的,而是子组件自身私有的，比如子组件通过 Ajax 请求回来的数据都可以放在 data 身上，子组件的 data 上的数据都是可读可写的

Prop 的大小写#

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的短横线分隔命名

1
<blog-post post-title="hello!"></blog-post>
2

3
<script>
4
    Vue.component('blog-post', {
5
        props: ['postTitle'],
6
        template: '<h3>{{ postTitle }}</h3>',
7
    })
8
</script>

Prop 类型#

如果希望传入的 prop 都有指令的值类型,可以用对象的方式来，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型。除此之外，还可以用于配置其他高级选项

1
//数组形式
2
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
3
//对象形式
4
props: {
5
    title: String,
6
    likes: Number,
7
    isPublished: Boolean,
8
    commentIds: Array,
9
    author: Object,
10
}
11
// 简单语法
12
Vue.component('props-demo-simple', {
13
    props: ['size', 'myMessage'],
14
})
15

16
// 对象语法，提供校验
17
Vue.component('props-demo-advanced', {
18
    props: {
19
        // 检测类型
20
        height: Number,
21
        // 检测类型 + 其他验证
22
        age: {
23
            type: Number,
24
            default: 0, //设置默认值
25
            required: true, //是否必须
26
            validator: function (value) {
27
                //对值进行验证
28
                return value >= 0
29
            },
30
        },
31
    },
32
})

展开收起

动态传递 Prop#

可以通过 v-bind 的方式动态传递一个变量值给一个 prop，通过 name="xxx"的方式，会将 xxx 解析为字符串，因此应用 v-bind方式传入一个 js 表达式

传入一个数字

1
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
2
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
3
<blog-post v-bind:likes="42"></blog-post>
4

5
<!-- 用一个变量进行动态赋值。-->
6
<blog-post v-bind:likes="post.likes"></blog-post>

传入一个布尔值

1
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
2
<blog-post is-published></blog-post>
3

4
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
5
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
6
<blog-post v-bind:is-published="false"></blog-post>
7

8
<!-- 用一个变量进行动态赋值。-->
9
<blog-post v-bind:is-published="post.isPublished"></blog-post>

传入一个数组

1
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
2
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
3
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
4

5
<!-- 用一个变量进行动态赋值。-->
6
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

传入一个对象

1
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
2
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
3
<blog-post
4
    v-bind:author="{
5
      name: 'Veronica',
6
      company: 'Veridian Dynamics'
7
    }"
8
></blog-post>
9

10
<!-- 用一个变量进行动态赋值。-->
11
<blog-post v-bind:author="post.author"></blog-post>

传入一个对象的所有属性

如果想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind(取代 v-bind:prop-name)

1
post: {
2
    id: 1,
3
    title: 'My Journey with Vue'
4
}
5
<blog-post v-bind="post"></blog-post>
6

7
<!--与下面的方法等价-->
8
<blog-post v-bind:id="post.id"  v-bind:title="post.title"></blog-post>

$ref 属性#

被用来给元素或子组件注册引用信息（id的替代者），通过这个引用的 ID,父组件可以直接通过this.$refs访问这个组件或子元素
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
- 打标识：<h1 ref="xxx"></h1>或 <School ref="xxx"></School>
- 获取：this.$refs.xxx

1
<div id="app">
2
    <div>
3
        <input type="button" value="获取元素内容" @click="getElement" />
4
        <!-- 使用 ref 获取元素 -->
5
        <h1 ref="myh1">这是一个大大的H1</h1>
6

7
        <hr />
8
        <!-- 使用 ref 获取子组件 -->
9
        <my-com ref="mycom"></my-com>
10
    </div>
11
</div>
12

13
<script>
14
    Vue.component('my-com', {
15
        template: '<h5>这是一个子组件</h5>',
16
        data() {
17
            return {
18
                name: '子组件',
19
            }
20
        },
21
    })
22

23
    // 创建 Vue 实例，得到 ViewModel
24
    var vm = new Vue({
25
        el: '#app',
26
        data: {},
27
        methods: {
28
            getElement() {
29
                // 通过 this.$refs 来获取元素
30
                console.log(this.$refs.myh1.innerText) // 这是一个大大的H1
31
                // 通过 this.$refs 来获取组件
32
                console.log(this.$refs.mycom.name) // 子组件
33
            },
34
        },
35
    })
36
</script>

展开收起

过渡与动画

Thu, 06 Oct 2022 05:35:27 GMT

Vue 中可以通过transition组件来实现过渡效果 Vue 在插入,更新或者移除 DOM 时,提供多种不同方式的应用过渡效果

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡的类名#

自身实现的类名#

这些类名是 transition 组件中自定好的,在使用的时候只需要在 CSS 中写入特定的类名和样式就可以了

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，此时元素还没有进入过渡，在元素被插入之后的下一帧移除
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数
v-leave-to<定义离开过渡的结束状态>。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

注:

一般都是使用 v-enter,v-leave-to 与 v-enter-active 和 v-leave-active 的组合
对于这些在过渡中切换的类名来说,如果使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀,如果使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter,通过这个可以绑定:name 实现动态过渡的效果

1
<style>
2
  // 动画进入，离开的样式
3
    .fade-enter-active,
4
    .fade-leave-active {
5
        transition: opacity 0.5s;
6
    }
7
    // 动画进入的起点，动画离开的终点
8
    .fade-enter,
9
    .fade-leave-to {
10
        opacity: 0;
11
    }
12
</style>
13

14
<div id="demo">
15
    <button v-on:click="show = !show">Toggle</button>
16
    <transition name="fade">
17
        <p v-if="show">hello</p>
18
    </transition>
19
</div>
20

21
<script>
22
    new Vue({
23
        el: '#demo',
24
        data: {
25
            show: true,
26
        },
27
    })
28
</script>

展开收起

动画效果同过渡效果，只是在动画中 v-enter 这个类名在插入 DOM 中后不会立刻被删除，而是在animationend事件触发时才会被删除

自定义过渡的类名#

可以通过引入第三方库实现过渡效果,这时需要使用自定义过渡的类名来加第三方库的过渡效果使用

可以通过以下特性来自定义过渡类名,这些类名分别也对应着上方的执行时期,它们的优先级高于普通的类名

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

在这些自定义的属性中可以写入要引入的第三方库的 CSS 样式就能实现效果

1
<link
2
    href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
3
    rel="stylesheet"
4
    type="text/css"
5
/>
6

7
<div id="example">
8
    <button @click="show = !show">Toggle render</button>
9
    <transition
10
        name="custom-classes-transition"
11
        enter-active-class="animated tada"
12
        leave-active-class="animated bounceOutRight"
13
    >
14
        <p v-if="show">hello</p>
15
    </transition>
16
</div>
17

18
<script>
19
    new Vue({
20
        el: '#example',
21
        data: {
22
            show: true,
23
        },
24
    })
25
</script>

展开收起

实例#

1
<!DOCTYPE html>
2
<html lang="en">
3
    <head>
4
        <meta charset="UTF-8" />
5
        <title>过渡与动画</title>
6
        <style>
7
            .fade1-enter,
8
            .fade1-leave-to {
9
                opacity: 0;
10
            }
11
            .fade1-enter-active,
12
            .fade1-leave-active {
13
                transition: opacity 1s;
14
            }
15
            .fade2-enter {
16
                opacity: 0;
17
                transform: translateX(-20px);
18
            }
19
            .fade2-leave-to {
20
                opacity: 0;
21
                transform: translateX(20px);
22
            }
23
            .fade2-enter-active,
24
            .fade2-leave-active {
25
                transition: all 3s;
26
            }
27
        </style>
28
    </head>
29
    <body>
30
        <!--
31
        1. vue动画的理解
32
            操作css的transition或animation
33
            vue会给目标元素添加/移除特定的class
34
        2. 基本过渡动画的编码
35
            1). 在目标元素外包裹<transition name="xxx">
36
            2). 定义class样式
37
                1>. 指定过渡样式: transition
38
                2>. 指定隐藏时的样式: opacity/其它
39
        3. 过渡的类名
40
            xxx-enter-active: 指定显示的transition
41
            xxx-leave-active: 指定隐藏的transition
42
            xxx-enter: 指定隐藏时的样式
43
    -->
44
        <div id="app1">
45
            <button @click="isShow = !isShow">Destroy</button>
46
            <transition name="fade1">
47
                <p v-if="isShow">Hello</p>
48
            </transition>
49
        </div>
50
        <div id="app2">
51
            <button @click="isShow = !isShow">Destroy</button>
52
            <transition name="fade2">
53
                <p v-if="isShow">Hello</p>
54
            </transition>
55
        </div>
56
        <script type="text/javascript" src="./vue.js"></script>
57
        <script type="text/javascript">
58
            new Vue({
59
                el: '#app1',
60
                data() {
61
                    return {
62
                        isShow: 'false',
63
                    }
64
                },
65
            })
66
            new Vue({
67
                el: '#app2',
68
                data() {
69
                    return {
70
                        isShow: 'false',
71
                    }
72
                },
73
            })
74
        </script>
75
    </body>
76
</html>

展开收起

初始渲染过渡#

为transition组件添加一个简单的属性 appear 就能够实现在刚开始渲染的时候就使用一次enter-active-class来实现开始渲染列表的过渡效果

初始渲染时也可以使用自定义的 CSS 类名进行初始渲染

appear-class
appear-active-class
appear-to-class

注意<使用自定义类名进行渲染时也需要添加> appear 属性

1
<transition
2
    appear
3
    appear-class="custom-appear-class"
4
    appear-to-class="custom-appear-to-class"
5
    appear-active-class="custom-appear-active-class"
6
>
7
    <!-- ... -->
8
</transition>
9

10
<!--当然也可以使用JS的钩子函数-->
11
<transition
12
    appear
13
    v-on:before-appear="customBeforeAppearHook"
14
    v-on:appear="customAppearHook"
15
    v-on:after-appear="customAfterAppearHook"
16
    v-on:appear-cancelled="customAppearCancelledHook"
17
>
18
    <!-- ... -->
19
</transition>

展开收起

显性定义过渡时间#

默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下，可以用 <transition> 组件上的绑定的 duration 属性定制一个显性的过渡持续时间 (以毫秒为单位)

1
<transition :duration="1000">...</transition>

可以传入一个对象分别对移入和移除的时间进行设置

1
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JS 钩子#

除了通过 CSS 实现过渡效果，还可以用 JS 中的钩子函数实现过渡效果，这些钩子可以结合 CSS 使用，也可以全部单独使用

1
    <transition
2
        v-on:before-enter="beforeEnter"
3
        v-on:enter="enter"
4
        v-on:after-enter="afterEnter"
5
        v-on:enter-cancelled="enterCancelled"
6
        v-on:before-leave="beforeLeave"
7
        v-on:leave="leave"
8
        v-on:after-leave="afterLeave"
9
        v-on:leave-cancelled="leaveCancelled"
10
    >
11
        <!-- ... -->
12
    </transition>
13
// ----
14
methods :{
15
    // --------
16
    // 进入中
17
    // --------
18
    beforeEnter: function (el) {
19
        // ...
20
    },
21
    // 当与 CSS 结合使用时
22
    // 回调函数 done 是可选的 enter:
23
    enter: function(el, done) {
24
        // ...
25
        el.offsetWidth
26
        //玄学操作,不加这个设置全JS样式时,动画不会有过渡效果出现,可以认为是这个操作会强制动画刷新
27
        done()
28
        //done()所代表的函数就是下一个结束afterEnter的函数,只有调用了这个回调函数才会执行下面的方法
29
    },
30
    afterEnter: function (el) {
31
        // ...
32
    },
33
    enterCancelled: function (el) {
34
        // ...
35
    },
36
    // --------
37
    // 离开时
38
    // --------
39
    beforeLeave: function (el) {
40
        // ...
41
    },
42
    // 当与 CSS 结合使用时
43
    // 回调函数 done 是可选的 leave:
44
    function(el, done) {
45
        //  ...
46
        done()
47
    },
48
    afterLeave: function (el) {
49
        // ...
50
    },
51
    // leaveCancelled 只用于  v-show 中
52
    leaveCancelled: function (el) {
53
        // ...
54
    },
55
}

展开收起

注意:

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

多个元素过渡#

对于原生标签可以使用 v-if和v-else 来实现多标签过渡效果

注意<当有相同标签名的元素切换时>，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容

1
<transition>
2
    <button v-if="isEditing" key="save">Save</button>
3
    <button v-else key="edit">Edit</button>
4
</transition>
5
<!--也可以也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else-->
6
<transition>
7
    <button v-bind:key="isEditing">
8
        {{ isEditing ? 'Save' : 'Edit' }}
9
    </button>
10
</transition>

过渡模式

通过 mode 属性来定义多个元素过渡时的过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开
out-in：当前元素先进行过渡，完成之后新元素过渡进入

1
<transition mode="out-in"></transition>

列表过渡#

渲染一整个列表时,如用 v-for 来渲染,就需要使用< transition-group> 组件、

注意:

不同于 < transition>组件，< transition-group>组件会以一个真实元素呈现,默认为一个 <span>标签,可以通过 tag 特性更换为其他元素 **如:**内部是 li 列表,那么可以用<transition-grounp tag="ul">来让该组件被渲染时表现为 ul
过渡模式不可用，因为不再相互切换特有的元素
内部元素必须要有提供唯一的 key 属性值

添加与删除列表#

通过对一个transiton-grounp用过渡的类名和实现当个成员在过渡时的效果

1
<style>
2
    .list-item {
3
        display: inline-block;
4
        margin-right: 10px;
5
    }
6
    .list-enter-active,
7
    .list-leave-active {
8
        transition: all 1s;
9
    }
10
    .list-enter, .list-leave-to
11
    /* .list-leave-active for below version 2.1.8 */ {
12
        opacity: 0;
13
        transform: translateY(30px);
14
    }
15
</style>
16

17
<div id="list-demo" class="demo">
18
    <button v-on:click="add">Add</button>
19
    <button v-on:click="remove">Remove</button>
20
    <transition-group name="list" tag="p">
21
        <span v-for="item in items" v-bind:key="item" class="list-item">
22
            {{ item }}
23
        </span>
24
    </transition-group>
25
</div>
26

27
<script>
28
    new Vue({
29
        el: '#list-demo',
30
        data: {
31
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
32
            nextNum: 10,
33
        },
34
        methods: {
35
            randomIndex: function () {
36
                return Math.floor(Math.random() * this.items.length)
37
            },
38
            add: function () {
39
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
40
            },
41
            remove: function () {
42
                this.items.splice(this.randomIndex(), 1)
43
            },
44
        },
45
    })
46
</script>

展开收起

排序过渡列表#

上方的添加与删除列表只会对进行操作的成员自身产生过渡效果，对组件中的其他成员没有过渡效果,如果要想通过过渡效果进行添加,需要使用 v-move 的类名写入 CSS 样式，该效果会在组件的成员改变其定位的时候起作用，所以要想起过渡效果还需要在过渡时将元素的定位改变为绝对定位，也可以通过 name 属性来自定义前缀，也能通过 move-class 属性 CSS 效果

1
<style>
2
    .flip-list-move {
3
        transition: transform 1s;
4
    }
5
</style>
6

7
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
8

9
<div id="flip-list-demo" class="demo">
10
    <button v-on:click="shuffle">Shuffle</button>
11
    <transition-group name="flip-list" tag="ul">
12
        <li v-for="item in items" v-bind:key="item">{{ item }}</li>
13
    </transition-group>
14
</div>
15

16
<script>
17
    new Vue({
18
        el: '#flip-list-demo',
19
        data: {
20
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
21
        },
22
        methods: {
23
            shuffle: function () {
24
                this.items = _.shuffle(this.items)
25
            },
26
        },
27
    })
28
</script>

展开收起

交错过渡列表#

通过 JS 钩子来实现列表的过渡效果,使 data 属性与 JS 进行数据通信,就可以实现列表的交错过渡效果

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
2

3
<div id="staggered-list-demo">
4
    <input v-model="query" />
5
    <transition-group
6
        name="staggered-fade"
7
        tag="ul"
8
        v-bind:css="false"
9
        v-on:before-enter="beforeEnter"
10
        v-on:enter="enter"
11
        v-on:leave="leave"
12
    >
13
        <li
14
            v-for="(item, index) in computedList"
15
            v-bind:key="item.msg"
16
            v-bind:data-index="index"
17
        >
18
            {{ item.msg }}
19
        </li>
20
    </transition-group>
21
</div>
22

23
<script>
24
    new Vue({
25
        el: '#staggered-list-demo',
26
        data: {
27
            query: '',
28
            list: [
29
                { msg: 'Bruce Lee' },
30
                { msg: 'Jackie Chan' },
31
                { msg: 'Chuck Norris' },
32
                { msg: 'Jet Li' },
33
                { msg: 'Kung Fury' },
34
            ],
35
        },
36
        computed: {
37
            computedList: function () {
38
                var vm = this
39
                return this.list.filter(function (item) {
40
                    return (
41
                        item.msg
42
                            .toLowerCase()
43
                            .indexOf(vm.query.toLowerCase()) !== -1
44
                    )
45
                })
46
            },
47
        },
48
        methods: {
49
            beforeEnter: function (el) {
50
                el.style.opacity = 0
51
                el.style.height = 0
52
            },
53
            enter: function (el, done) {
54
                var delay = el.dataset.index * 150
55
                setTimeout(function () {
56
                    Velocity(
57
                        el,
58
                        { opacity: 1, height: '1.6em' },
59
                        { complete: done }
60
                    )
61
                }, delay)
62
            },
63
            leave: function (el, done) {
64
                var delay = el.dataset.index * 150
65
                setTimeout(function () {
66
                    Velocity(
67
                        el,
68
                        { opacity: 0, height: 0 },
69
                        { complete: done }
70
                    )
71
                }, delay)
72
            },
73
        },
74
    })
75
</script>

展开收起

Promise

Tue, 04 Oct 2022 07:48:08 GMT

Promise 是什么#

理解 Promise#

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

从语法上看：Promise是一个构造函数 (自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法)
功能上看：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

Promise 的三种状态#

实例对象promise中的一个属性 PromiseState，用于存放 Promise 的三种状态 pending resolved/fullfilled rejected

pending 变为 resolved/fullfilled
pending 变为 rejected

注：

对象的状态不受外界影响
只有这两种，且一个 promise 对象只能改变一次
一旦状态改变，就不会再变，任何时候都可以得到这个结果
无论成功还是失败，都会有一个结果数据。成功的结果数据一般称为 value，而失败的一般称为 reason。

Promise对象的值#

实例对象promise的另一个值 PromiseResult 保存着对象成功/失败的值（value/reason）

Promise 的基本使用#

1
const promise = new Promise(function (resolve, reject) {
2
    // ... some code
3
    if (/* 异步操作成功 */ ) {
4
        resolve(value)
5
    } else {
6
        reject(reason)
7
    }
8
})

Promise构造函数接受一个函数（执行器函数）作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数value传递出去； reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数error/reason传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

1
Promise.then(
2
    function (value) {
3
        // success
4
    },
5
    function (reason) {
6
        // failure
7
    }
8
)

then方法可以接受两个回调函数作为参数。

第一个回调函数onResolved()是Promise对象的状态变为resolved时调用
第二个回调函数onRejected()是Promise对象的状态变为rejected时调用
这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数

例：

1
// 创建一个新的p对象promise
2
const p = new Promise((resolve, reject) => {
3
    // 执行器函数
4
    // 执行异步操作任务
5
    setTimeout(() => {
6
        const time = Date.now()
7
        // 如果当前时间是偶数代表成功，否则失败
8
        if (time % 2 == 0) {
9
            // 如果成功，调用resolve(value)
10
            resolve('成功的数据，time=' + time)
11
        } else {
12
            // 如果失败，调用reject(reason)
13
            reject('失败的数据，time=' + time)
14
        }
15
    }, 1000)
16
})
17

18
p.then(
19
    (value) => {
20
        // 接收得到成功的value数据 onResolved
21
        console.log('成功的回调', value) // 成功的回调 成功的数据，time=1615015043258
22
    },
23
    (reason) => {
24
        // 接收得到失败的reason数据 onRejected
25
        console.log('失败的回调', reason) // 失败的回调 失败的数据，time=1615014995315
26
    }
27
)

展开收起

.then() 和执行器(executor)同步执行，.then() 中的回调函数异步执行

为什么要使用 Promise#

指定回调函数的方式更加灵活#

ES5：必须在启动异步任务前指定

1
// 1. 纯回调的形式
2
// 成功的回调函数
3
function successCallback(result) {
4
    console.log('声音文件创建成功：' + result)
5
}
6
// 失败的回调函数
7
function failureCallback(error) {
8
    console.log('声音文件创建失败：' + error)
9
}
10
// 必须先指定回调函数，再执行异步任务
11
createAudioFileAsync(audioSettings, successCallback, failureCallback)
12
// 回调函数在执行异步任务（函数）前就要指定

promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)

1
// 2. 使用Promise
2
const promise = createAudioFileAsync(audioSettings) // 执行2秒
3
setTimeout(() => {
4
  promise.then(successCallback, failureCallback) // 也可以获取
5
}, 3000)

支持链式调用，可以解决回调地狱问题#

什么是回调地狱#

回调函数嵌套调用，外部回调函数异步执行的结果是其内部嵌套的回调函数执行的条件

1
doSomething(function(result) {
2
    doSomethingElse(result, function(newResult) {
3
       doThirdThing(newResult, function(finalResult) {
4
          console.log('Got the final result:' + finalResult)
5
      }, failureCallback)
6
    }, failureCallback)
7
}, failureCallback)

回调地狱的缺点

不便于阅读
不便于异常处理

使用 promise 的链式调用解决回调地狱#

1
doSomething()
2
    .then((result) => doSomethingElse(result))
3
    .then((newResult) => doThirdThing(newResult))
4
    .then((finalResult) => {
5
        console.log('Got the final result:' + finalResult)
6
    })
7
    .catch(failureCallback)

回调地狱的终极解决方案 async/await#

1
async function request() {
2
    try {
3
        const result = await doSomething()
4
        const newResult = await doSomethingElse(result)
5
        const finalResult = await doThirdThing(newResult)
6
        console.log('Got the final result:' + finalResult)
7
    } catch (error) {
8
        failureCallback(error)
9
    }
10
}

Promise 相关方法#

Promise 构造函数：`Promise(executor) {}`#

executor 函数：同步执行 (resolve, reject) => {}
resolve 函数：内部定义成功时调用的函数 resove(value)
reject 函数：内部定义失败时调用的函数 reject(reason)

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved)，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected)，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

executor 是执行器，会在 Promise 内部立即同步回调，异步操作 resolve/reject 就在 executor 中执行

Promise.prototype.then ()#

p.then(onResolved, onRejected)

指定两个回调（成功+失败）

onResolved 函数：成功的回调函数 (value) => {}
onRejected 函数：失败的回调函数 (reason) => {}

then()的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数(可选)是rejected状态的回调函数。

then方法返回的是一个新的Promise实例(注意，不是原来那个Promise实例)。因此可以采用链式写法，即then方法后面再调用另一个then方法。

指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象

Promise.prototype.catch()#

p.catch(onRejected)

指定失败的回调

onRejected 函数：失败的回调函数 (reason) => {}

1
new Promise((resolve, reject) => {
2
    // excutor执行器函数
3
    setTimeout(() => {
4
        if (/* 异步操作成功 */) {
5
            resolve('成功的数据') // resolve()函数
6
        } else {
7
            reject('失败的数据') //reject()函数
8
        }
9
    }, 1000)
10
})
11
    .then((value) => {
12
        // onResolved()函数
13
        console.log(value) // 成功的数据
14
    })
15
    .catch((reason) => {
16
        // onRejected()函数
17
        console.log(reason) // 失败的数据
18
    })

展开收起

这是then() 的语法糖，相当于 then(undefined, onRejected)

Promise.resolve()#

Promise.resolve(value)

value：将被 Promise 对象解析的参数，也可以是一个成功或失败的 Promise 对象
return ：返回一个带着给定值解析过的 Promise 对象，如果参数本身就是一个 Promise 对象，则直接返回这个 Promise 对象。

Promise.resolve方法的参数分成四种情况。

参数是一个Promise实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

1
let p2 = Promise.resolve(
2
    new Promise((resolve, reject) => {
3
        // resolve('OK') // 成功的Promise
4
        reject('Error')
5
    })
6
)
7
console.log(p2) // Promise {<rejected>: 'Error'}
8
p2.catch((reason) => {
9
    console.log(reason) // Error
10
})

参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。
```
1
let thenable = {
2
  then: function (resolve, reject) {
3
        resolve(42)
4
  },
5
}
```
Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
```
1
let thenable = {
2
  then: function (resolve, reject) {
3
    resolve(42)
4
  },
5
}
6

7
let p1 = Promise.resolve(thenable);
8
p1.then(function (value) {
9
  console.log(value); // 42
10
})
```
上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。
参数不是具有then方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。
```
1
const p = Promise.resolve("Hello");
2

3
p.then(function (s) {
4
  console.log(s);
5
});
6
// Hello
```
上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作(判断方法是字符串对象不具有 then 方法)，返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve方法的参数，会同时传给回调函数。
不带有任何参数

Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法。
```
1
const p = Promise.resolve();
2

3
p.then(function () {
4
  // ...
5
})
```
上面代码的变量p就是一个 Promise 对象。

需要注意的是，立即resolve的 Promise 对象，是在本轮“事件循环”(event loop)的结束时，而不是在下一轮“事件循环”的开始时。
```
1
setTimeout(function () {
2
  console.log("three")
3
}, 0)
4

5
Promise.resolve().then(function () {
6
  console.log("two")
7
})
8

9
console.log("one")
10

11
// one
12
// two
13
// three
```
上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行，因此最先输出

Promise.reject()#

Promise.resolve(reason)

reason：失败的原因
return：返回一个失败的 promise 对象，该实例的状态为rejected。

1
let p = Promise.reject(521)
2
let p2 = Promise.reject('iloveyou')
3
let p3 = Promise.reject(
4
    new Promise((resolve, reject) => {
5
        resolve('OK')
6
    })
7
)
8

9
console.log(p) // Promise {<rejected>: 521}
10
console.log(p2) // Promise {<rejected>: 'iloveyou'}
11
console.log(p3) // Promise {<rejected>: Promise}

注：

Promise.resolve()/Promise.reject() 方法就是一个语法糖
用来快速得到Promise对象

1
//产生一个成功值为1的promise对象
2
new Promise((resolve, reject) => {
3
    resolve(1)
4
})
5
//相当于
6
const p1 = Promise.resolve(1)
7
const p2 = Promise.resolve(2)
8
const p3 = Promise.reject(3)
9

10
p1.then((value) => {
11
    console.log(value)
12
}) // 1
13
p2.then((value) => {
14
    console.log(value)
15
}) // 2
16
p3.catch((reason) => {
17
    console.log(reason)
18
}) // 3

展开收起

Promise.all()#

Promise.all(iterable)

iterable：包含 n 个 promise 的可迭代对象，如 Array 或 String
return：返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一个失败了就直接失败

成功：

1
let p1 = new Promise((resolve, reject) => {
2
    resolve('OK')
3
})
4
let p2 = Promise.resolve('Success')
5
let p3 = Promise.resolve('Oh Yeah')
6

7
const result = Promise.all([p1, p2, p3])
8
console.log(result) // Promise {<pending>}
9
                       [[PromiseResult]]: Array(3)
10
                        0: "OK"
11
                        1: "Success"
12
                        2: "Oh Yeah"
13
                        length: 3

失败：

1
let p1 = new Promise((resolve, reject) => {
2
    resolve('OK')
3
})
4
let p2 = Promise.reject('Error')
5
let p3 = Promise.resolve('Oh Yeah')
6

7
const result = Promise.all([p1, p2, p3])
8
console.log(result) //Promise {<pending>}
9
            [[PromiseResult]]: "Error"

Promise.race()#

Promise.race(iterable)

iterable：包含 n 个 promise 的可迭代对象，如 Array 或 String
return：返回一个新的 promise，第一个完成的 promise 的结果状态就是最终的结果状态 谁先完成就输出谁(不管是成功还是失败)

1
const pRace = Promise.race([p1, p2, p3])
2
// 谁先完成就输出谁(不管是成功还是失败)
3
const p1 = new Promise((resolve, reject) => {
4
    setTimeout(() => {
5
        resolve(1)
6
    }, 1000)
7
})
8
const p2 = Promise.resolve(2)
9
const p3 = Promise.reject(3)
10

11
pRace.then(
12
    (value) => {
13
        console.log('race onResolved()', value)
14
    },
15
    (reason) => {
16
        console.log('race onRejected()', reason)
17
    }
18
)
19
//race onResolved() 2

展开收起

Promise.prototype.finally()#

finally() 方法返回一个Promise。在promise结束时，无论结果是resolved或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式，避免了同样的语句需要在then()和catch()中各写一次的情况。

finally本质上是then方法的特例。

1
promise.finally(() => {
2
    // 语句
3
})
4

5
// 等同于
6
promise.then(
7
    (result) => {
8
        // 语句
9
        return result
10
    },
11
    (error) => {
12
        // 语句
13
        throw error
14
    }
15
)

展开收起

实例：

1
// resolve 的值是 undefined
2
Promise.resolve(2).then(
3
    () => {},
4
    () => {}
5
)
6

7
// resolve 的值是 2
8
Promise.resolve(2).finally(() => {})
9

10
// reject 的值是 undefined
11
Promise.reject(3).then(
12
    () => {},
13
    () => {}
14
)
15

16
// reject 的值是 3
17
Promise.reject(3).finally(() => {})

展开收起

Promise 的相关问题#

如何改变 promise 的状态#

resolve(value)：如果当前是 pending 就会变为 `resolved“
“reject(reason)：如果当前是 pending就会变为rejected`
抛出异常：如果当前是 pending 就会变为 rejected

1
const p = new Promise((resolve, reject) => {
2
    //resolve(1) // promise变为resolved成功状态
3
    //reject(2) // promise变为rejected失败状态
4
    throw new Error('出错了') // 抛出异常，promise变为rejected失败状态，reason为抛出的error
5
})
6
p.then(
7
    (value) => {},
8
    (reason) => {
9
        console.log('reason', reason)
10
    }
11
)
12
// reason Error

一个 promise 指定多个成功/失败回调函数，都会调用吗#

当 promise 改变为对应状态时都会调用

1
const p = new Promise((resolve, reject) => {
2
    //resolve(1)
3
    reject(2)
4
})
5
p.then(
6
    (value) => {},
7
    (reason) => {
8
        console.log('reason', reason)
9
    }
10
)
11
p.then(
12
    (value) => {},
13
    (reason) => {
14
        console.log('reason2', reason)
15
    }
16
)
17
// reason 2
18
// reason2 2

展开收起

改变 promise 状态和指定回调函数谁先谁后#

都有可能，常规是先指定回调再改变状态，但也可以先改状态再指定回调

如何先改状态再指定回调

在执行器中直接调用 resolve()/reject()
延迟更长时间才调用 then()

1
let p = new Promise((resolve, reject) => {
2
// setTimeout(() => {
3
resolve('OK')
4
// }, 1000); // 有异步就先指定回调，否则先改变状态
5
})
6

7
p.then(
8
    (value) => {
9
        console.log(value)
10
    },
11
    (reason) => {}
12
)

什么时候才能得到数据？

如果先指定的回调，那当状态发生改变时，回调函数就会调用得到数据
如果先改变的状态，那当指定回调时，回调函数就会调用得到数据

1
new Promise((resolve, reject) => {
2
    setTimeout(() => {
3
        resolve(1) // 改变状态
4
    }, 1000)
5
}).then(
6
    // 指定回调函数 （先指定）
7
    (value) => {},
8
    (reason) => {}
9
)

此时，先指定回调函数，保存当前指定的回调函数；后改变状态(同时指定数据)，然后异步执行之前保存的回调函数。

1
new Promise((resolve, reject) => {
2
    resolve(1) // 改变状态
3
}).then(
4
    // 指定回调函数
5
    (value) => {},
6
    (reason) => {}
7
)
8

9
这种写法，先改变的状态(同时指定数据)，后指定回调函数(不需要再保存)，直接异步执行回调函数

1
###  promise.then() 返回的新 promise 的结果状态由什么决定
2

3
- 简单表达：由 `then()` 指定的回调函数执行的结果决定

let p = new Promise((resolve, reject) => { resolve(‘ok’) }) //执行 then 方法 let result = p.then( (value) => { console.log(value) //ok }, (reason) => { console.warn(reason) } ) console.log(result) // Promise {} // Prototype: Promise // PromiseState: “fulfilled” // PromiseResult: undefined

1
- 详细表达
2

3
1. 如果抛出异常，新 `promise` 变为 `rejected`，`reason` 为抛出的异常

let p = new Promise((resolve, reject) => { resolve(‘ok’) }) //执行 then 方法 let result = p.then( (value) => { //1. 抛出错误 throw ‘出了问题’ }, (reason) => { console.warn(reason) } ) console.log(result) // Promise {} Prototype: Promise PromiseState: “rejected” PromiseResult: “出了问题

1
2. 如果返回的是非 `promise` 的任意值，新 `promise` 变为 `resolved`，`value` 为返回的值

1
let p = new Promise((resolve, reject) => {
2
    resolve('ok')
3
})
4
//执行 then 方法
5
let result = p.then(
6
    (value) => {
7
        //2. 返回结果是非 Promise 类型的对象
8
        return 521
9
    },
10
    (reason) => {
11
        console.warn(reason)
12
    }
13
)
14

15
console.log(result)
16
  // Promise {<pending>}
17
        [[Prototype]]: Promise
18
        [[PromiseState]]: "fulfilled"
19
        [[PromiseResult]]: 521

展开收起

1
3. 如果返回的是另一个新 `promise`，此 `promise` 的结果就会成为新 `promise` 的结果

1
let p = new Promise((resolve, reject) => {
2
    resolve('ok')
3
})
4
//执行 then 方法
5
let result = p.then(
6
    (value) => {
7
        //3. 返回结果是 Promise 对象
8
        return new Promise((resolve, reject) => {
9
            // resolve('success');
10
            reject('error')
11
        })
12
    },
13
    (reason) => {
14
        console.warn(reason)
15
    }
16
)
17

18
console.log(result)
19
  // Promise {<pending>}
20
        [[Prototype]]: Promise
21
        [[PromiseState]]: "rejected"
22
        [[PromiseResult]]: "error"

展开收起

1
例：

1
new Promise((resolve, reject) => {
2
    resolve(1)
3
})
4
    .then(
5
        (value) => {
6
            console.log('onResolved1()', value)
7
            //return 2                   // onResolved2() 2
8
            //return Promise.resolve(3)  // onResolved2() 3
9
            //return Promise.reject(4)   // onRejected2() 4
10
            //throw 5                    // onRejected2() 5
11
        },
12
        (reason) => {
13
            console.log('onRejected1()', reason)
14
        }
15
    )
16
    .then(
17
        (value) => {
18
            console.log('onResolved2()', value)
19
        },
20
        (reason) => {
21
            console.log('onRejected2()', reason)
22
        }
23
    )
24
// onResolved1() 1
25
// onResolved2() undefined
26
// Promise {<fulfilled>: undefined}
27
// 对应输出如上所示

展开收起

1
2

3
### promise 如何串联多个操作任务？
4

5
1. `promise` 的 `then()` 返回一个新的 `promise`，可以并成 `then()` 的链式调用
6
2. 通过 `then` 的链式调用串联多个同步/异步任务

let p = new Promise((resolve, reject) => { setTimeout(() => { resolve(‘OK’) }, 1000) })

p.then((value) => { return new Promise((resolve, reject) => { console.log(‘value’) // OK resolve(‘success’) }) }) .then((value) => { console.log(value) // success }) .then((value) => { console.log(value) // undefined }) // OK success undefined

1
例：

new Promise((resolve, reject) => { setTimeout(() => { console.log(‘执行任务1(异步)’) resolve(1) }, 1000) }) .then((value) => { console.log(‘任务1的结果’, value) console.log(‘执行任务2(同步)’) return 2 // 同步任务直接return返回结果 }) .then((value) => { console.log(‘任务2的结果’, value) return new Promise((resolve, reject) => { // 异步任务需要包裹在Promise对象中 setTimeout(() => { console.log(‘执行任务3(异步)’) resolve(3) }, 1000) }) }) .then((value) => { console.log(‘任务3的结果’, value) }) // 执行任务1(异步) // 任务1的结果 1 // 执行任务2(同步) // 任务2的结果 2 // 执行任务3(异步) // 任务3的结果 3

1
### Promise 异常穿透(传透)
2

3
1. 当使用 `promise` 的 `then` 链式调用时，可以在最后指定失败的回调
4
2. 前面任何操作出了异常，都会传到最后失败的回调中处理

1
相当于这种写法：多写了很多`reason => {throw reason}`

new Promise((resolve, reject) => { //resolve(1) reject(1) }) .then( (value) => { console.log(‘onResolved1()’, value) return 2 }, (reason) => { throw reason } // 抛出失败的结果reason ) .then( (value) => { console.log(‘onResolved2()’, value) return 3 }, (reason) => { throw reason } // 抛出失败的结果reason ) .then( (value) => { console.log(‘onResolved3()’, value) }, (reason) => { throw reason } // 抛出失败的结果reason ) .catch((reason) => { console.log(‘onRejected1()’, reason) }) // onRejected1() 1

1
所以失败的结果是一层一层处理下来的，最后传递到 `catch` 中。
2

3
注：将 `reason => {throw reason}` 替换为 `reason => Promise.reject(reason)` 也是一样的
4

5
### 中断 promise 链
6

7
当使用 `promise` 的 `then` 链式调用时，在中间中断，不再调用后面的回调函数
8

9
办法：在回调函数中返回一个 `pending` 状态的 `promise` 对象

new Promise((resolve, reject) => { //resolve(1) reject(1) }) .then((value) => { console.log(‘onResolved1()’, value) return 2 }) .then((value) => { console.log(‘onResolved2()’, value) return 3 }) .then((value) => { console.log(‘onResolved3()’, value) }) .catch((reason) => { console.log(‘onRejected1()’, reason) }) .then( (value) => { console.log(‘onResolved4()’, value) }, (reason) => { console.log(‘onRejected2()’, reason) } ) // onRejected1() 1 // onResolved4() undefined

1
为了在 `catch` 中就中断执行，可以这样写：

new Promise((resolve, reject) => { //resolve(1) reject(1) }) .then((value) => { console.log(‘onResolved1()’, value) return 2 }) .then((value) => { console.log(‘onResolved2()’, value) return 3 }) .then((value) => { console.log(‘onResolved3()’, value) }) .catch((reason) => { console.log(‘onRejected1()’, reason) return new Promise(() => {}) // 返回一个pending的promise }) .then( (value) => { console.log(‘onResolved4()’, value) }, (reason) => { console.log(‘onRejected2()’, reason) } ) // onRejected1() 1

1
在 `catch` 中返回一个新的 `promise`，且这个 `promise` 没有结果。
2

3
由于，返回的新的 `promise` 结果决定了后面 `then` 中的结果，所以后面的 `then` 中也没有结果。
4

5
这就实现了中断 `promise链`的效果。

Vue 基本指令

Sun, 18 Sep 2022 08:23:42 GMT

v-text#

v-text，该指令的用法同原生 JS 中的 innerText，更新绑定元素内部的文本内容

1
    <div id="div">
2
        <span v-text="msg"></span>
3
        <!--不会有闪烁问题--><!-- 和下面的一样 -->
4
        <span>{{msg}}</span>
5
    </div>

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html#

v-html，该指令用法同原生 JS 的 innerHTML，可以解析内部的 HTML 标签

v-cloak#

v-cloak，该指令 CSS 一起使用，用于隐藏还没有开始编译的{{}}(插值表达式)直到编译完成，解决其闪烁问题使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

v-show#

v-show，该指令用于显示和隐藏 DOM 元素，根据表达式之真假值，切换元素的 display 属性值

v-show 值为true时显示
当条件变化时该指令触发过渡效果，切换频率较高的场景
不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
v-show 指令不支持在<template>< /template>标签上写，也不支持 v-else，一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好

v-if，v-else 与 v-else-if#

v-if，该指令用于是否渲染 DOM 元素，传入一个布尔值，通过该布尔值的条件改变实现对于 DOM 元素的删除和重建，该指令不同于 v-show，而是会完全销毁这个 DOM 元素 **注意:**当条件变化时该指令触发过渡效果

v-else，该指令用于不需要任何表达式，但是在该指令的前一个兄弟元素必须有 v-if 或者 v-else-if 指令，该指令的用处是为 v-if 或者 v-else-if 添加 else 的选项

1
    <div v-if="Math.random() > 0.5">Now you see me</div>
2
    <div v-else>Now you don't</div>

v-else-if，该指令用于用于 v-if 的 else if 选项，前一个兄弟元素必须要 v-if 指令，并且该指令可以链式调用，也就是说可以调用多次 v-else-if 指令

1
    <div v-if="type === 'A'">A</div>
2
    <div v-else-if="type === 'B'">B</div>
3
    <div v-else-if="type === 'C'">C</div>
4
    <div v-else>Not A/B/C</div>

v-for#

v-for该指令可以基于源数据多次渲染元素或模板块，用于循环遍历某个数组或对象，如果只用一个变量代表得到是数组或对象的 value 值

**注意<在内部必须使用固定的> item in/of items**形式的特殊语法(下面的 in 都可以用 of 代替，并且更符合实际)

1
    <ul id="example-1">
2
        <li v-for="item in items">
3
            {{ item.message }}
4
            <!--Foo Bar-->
5
        </li>
6
    </ul>
7
    <script>
8
        var example1 = new Vue({
9
            el: '#example-1'，
10
            data: {
11
                items: [{ message: 'Foo' }， { message: 'Bar' }]，
12
            }，
13
        })
14
    </script>

遍历数组时其实还支持第二个变量，代表的是遍历数组的索引值

1
    <ul id="example-2">
2
        <li v-for="(item， index) in items">
3
            {{ parentMessage }} - {{ index }} - {{ item.message }}
4
            <!--
5
              Parent-0-Foo
6
              Parent-1-Bar
7
          -->
8
        </li>
9
    </ul>
10
    <script>
11
        var example2 = new Vue({
12
            el: '#example-2'，
13
            data: {
14
                parentMessage: 'Parent'，
15
                items: [{ message: 'Foo' }， { message: 'Bar' }]，
16
            }，
17
        })
18
    </script>

展开收起

遍历对象时还可以接受第二三两个变量，分别代表了键名和索引值

1
  <ul id="v-for-object" class="demo">
2
      <div v-for="(value， key， index) in object">
3
          {{ index }}. {{ key }}: {{ value }}
4
          <!--
5
         0. firstName: John
6
         1. lastName: Doe
7
         2. age: 30
8
        -->
9
      </div>
10
  </ul>
11
  <script>
12
      new Vue({
13
          el: '#v-for-object'，
14
          data: {
15
              object: {
16
                  firstName: 'John'，
17
                  lastName: 'Doe'，
18
                  age: 30，
19
              }，
20
          }，
21
      })
22
  </script>

展开收起

**注意:**当 v-for 和 v-if 处于同一节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，当想为仅有的一些项渲染节点时，这种优先级的机制会十分有用

1
    <li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}</li>
2
    <!--
3
        官方并不建议v-for和v-if指令一起使用，如果要使用这种方式，就进行条件渲染
4
    -->
5

6
    <!--
7
        如果想有条件才继续v-for指令，则可以将v-if置于外层元素(或<template>)上
8
    -->
9
    <ul v-if="todos.length">
10
        <li v-for="todo in todos">{{ todo }}</li>
11
    </ul>
12
    <p v-else>No todos left!</p>
13
    <!--
14
        条件渲染
15
        v-if如果想只写一个而同时切换多个元素，可以在最外成包裹一层<template></template>，
16
        在这个标签上面使用v-if，在渲染的时候并不会将<template>标签渲染出来
17
    -->

展开收起

v-bind#

v-bind，该指令用于动态绑定一个或多个特性，该方法绑定的特性与普通的属性效果一致，只是其内部会被解析为 JS 表达式，而不是普通特性一样会是一个字符串 修辞符

.prop 被用于绑定 DOM 属性(property)
.camel 将短横线命名法特性名转换为驼峰命名法
.sync 会扩展成一个更新父组件绑定值的 v-on 侦听器

注意

该指令有其简写写法，通过冒号:来代替 v-bind:

该指令可以动态对绑定的参数进行改变，参数用[]括起来

1
  <!-- 绑定一个属性 -->
2
  <img v-bind:src="imageSrc">
3

4
  <!-- 动态特性名 (2.6.0+) -->
5
  <button v-bind:[key]="value"></button>
6

7
  <!-- 缩写 -->
8
  <img :src="imageSrc">
9

10
  <!-- 动态特性名缩写 (2.6.0+) -->
11
  <button :[key]="value"></button>
12

13
  <!-- 内联字符串拼接 -->
14
  <img :src="'/path/to/images/' + fileName">
15

16
  <!-- class 绑定 -->
17
  <div :class="{ red: isRed }"></div><!--对象通过布尔值确定是否传入class中-->
18
  <div :class="[classA， classB]"></div><!--数组会直接将类名传入到class中-->
19
  <div :class="[classA， { classB: isB， classC: isC }]"><!--对象和数组可以混用-->
20

21
  <!-- style 绑定 -->
22
  <div :style="{ fontSize: size + 'px' }"></div><!--通过对象写入每个属性-->
23
  <div :style="[styleObjectA， styleObjectB]"></div><!--数组的成员中实际是一个个对象-->
24

25
  <!-- 绑定一个有属性的对象 -->
26
  <div v-bind="{ id: someProp， 'other-attr': otherProp }"></div>
27

28
  <!-- 通过 prop 修饰符绑定 DOM 属性 -->
29
  <div v-bind:text-content.prop="text"></div>
30

31
  <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
32
  <my-component :prop="someThing"></my-component>
33

34
  <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
35
  <child-component v-bind="$props"></child-component>
36

37
  <!-- XLink -->
38
  <svg><a :xlink:special="foo"></a></svg>

展开收起

v-on#

v-on，该指令用于绑定监听事件，表达式可以是一个方法的名字或一个内联语句(也就是说在传入事件的时候可以选择加()可以选择不加()，推荐在传入参数的时候添加，在不传参的时候写事件名)

**参数:**该指令的参数为原生 JS 中的事件名，只不过没有 on

修饰符

.stop 调用 event.stopPropagation()，会阻止本元素上的事件进行冒泡传播
.prevent 调用 event.preventDefault()，不能和.passive 一起使用
.capture 添加事件侦听器时使用 capture 模式，父元素会执行在子元素上进行的同名事件
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调，只会真正自己触发的事件才会进行，和.stop 是有区别的，这个只会阻止自己的冒泡，但不会阻止该元素的父元素事件的冒泡进行
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调，可以是表示键盘字符的数字或者表示特效事件的按键修饰符
.native 监听组件根元素的原生事件，一个 Vue 实例内部通过只能 v-on 只能绑定自己内部的方法，不能绑定原生 DOM 事件的方法，通过该修饰符就可以使用原生 JS 的事件方法了
.once 只触发一次回调
.left 只当点击鼠标左键时触发
.right 只当点击鼠标右键时触发
.middle 只当点击鼠标中键时触发
.passive 不用查找是否阻止默认事件的请求直接进行操作。如在滚动页面时的 onscroll 事件，每次触发事件时浏览器都会查看是否有阻止默认滚动事件的操作，但是如果本来就没有进行这个操作，在滚动的时候就会出现卡的的情况，因为在触发滚动条滚动时总会先查找请求，这个修饰符就是告诉浏览器不用进行查找直接进行滚动操作。因为作用的冲突，所以不能和.prevent 一起使用

注意:

该指令有简写形式，通过@来代替 v-on:

该指令可以动态对绑定的参数进行改变，参数用中括号[]括起来

1
  <!-- 方法处理器 -->
2
  <button v-on:click="doThis"></button>
3

4
  <!-- 动态事件 (2.6.0+) -->
5
  <button v-on:[event]="doThis"></button>
6

7
  <!-- 内联语句 -->
8
  <button v-on:click="doThat('hello'， $event)"></button>
9

10
  <!-- 缩写 -->
11
  <button @click="doThis"></button>
12

13
  <!-- 动态事件缩写 (2.6.0+) -->
14
  <button @[event]="doThis"></button>
15

16
  <!-- 停止冒泡 -->
17
  <button @click.stop="doThis"></button>
18

19
  <!-- 阻止默认行为 -->
20
  <button @click.prevent="doThis"></button>
21

22
  <!-- 阻止默认行为，没有表达式 -->
23
  <form @submit.prevent></form>
24

25
  <!--  串联修饰符 -->
26
  <button @click.stop.prevent="doThis"></button>
27

28
  <!-- 键修饰符，键别名 -->
29
  <input @keyup.enter="onEnter">
30

31
  <!-- 键修饰符，键代码 -->
32
  <input @keyup.13="onEnter">
33

34
  <!-- 点击回调只会触发一次 -->
35
  <button v-on:click.once="doThis"></button>
36

37
  <!-- 对象语法 (2.4.0+) -->
38
  <button v-on="{ mousedown: doThis， mouseup: doThat }"></button>
39

40
  <!-- 组件中的自定义事件 -->
41
  <my-component @my-event="handleThis"></my-component>
42

43
  <!-- 内联语句 -->
44
  <my-component @my-event="handleThis(123， $event)"></my-component>
45

46
  <!-- 组件中的原生事件 -->
47
  <my-component @click.native="onClick"></my-component>

展开收起

v-model#

v-model，该指令用于表单内的标签进行双向的数据绑定

**注意:**v-model 只能绑定给 input，textarea，select 等表单元素和自定义的组件中，除此之外不能在其他标签上绑定 与v-bind的区别：

v-bind是单向绑定，而v-model是双向绑定；
v-bind只能将vue中的数据同步到页面，而v-model不只能将vue中的数据同步到页面，还可以将用户数据的数据赋值给vue中的属性

修辞符:

.lazy 取代 input 监听 change 事件，默认在用户写入值时是使用的 input 事件，也就是当值输入完成后才会触发事件，而 change 是一些有输入法的语言在值还没有输入时就时刻监听改变
.number 输入字符串转为有效的数字
.trim 输入首尾空格过滤

用法:

如果是对 input 文本框和 textarea 绑定的，绑定的值会根据输入的内容，就是将内部的变量的值改为 value 中的值
**如果是对复选框绑定的 **
- 如果绑定的变量不是数组，会根据复选框是否被选中而改变为 false 或 true，即使原来不是布尔值也会被强制转换为布尔值，这是因为双向的数据绑定，如果是有多个复选框，那么则会一起被选中或不选中
- 如果变量是数组，则会将 value 属性中的值(没有写 value 属性会传入 null)传入该数组作为其中的一个成员，Vue 会根据数组内部的值来判断是否选中该复选框(内部其实就是这样运作的)，如果 value 值一样会有多个复选框被选中，再次点击就会将该值删去然后取消复选框的选中
  
  Jack John Mike
  Checked names: {{ checkedNames }}
如果是对单选按钮进行绑定的，变量值会随着选中单选框的 value 值而变化，如果变量的值刚开始就是一个单选框的 value 值，那么就会自动选中这个单选框 **注意: **
- 单选框和复选框即使不写相同的 name 而只绑定了相同的 modle 也会认做是一类单选框的，但是最好还是将 name 写上
- 单选框和复选框都可以通过 v-bind:value 绑定的 value 值来设置值自身的 value 值

如果是对选择框 select 进行绑定的，绑定的变量的值会随着选中的 option 选项内部的内容而发生变化，如果 option 没有写 value 属性，该变量会变成<option></option>内部的值，如果有 value 属性，变量会变成 value 值而不是 option 的内容

1
  <div id="example">
2
      <select v-model="selected">
3
          <option disabled value="">请选择</option>
4
          <option>A</option>
5
          <option>B</option>
6
          <option>C</option>
7
      </select>
8
      <span>Selected: {{ selected }}</span>
9
  </div>
10
  <script>
11
      new Vue({
12
          el: '#example'，
13
          data: {
14
              selected: ''，
15
          }，
16
      })
17
  </script>

展开收起

注意: 在 s 多选时要绑定一个数组，将上方的 selected:[]，这样在选入的时候就能将每个选择的选项的值加到变量中去，还可以是一个对象，但是要通过 v-bind:value 绑定

v-pre#

该指令不接受任何表达式，使用了该指令的元素 Vue 在编译时跳过这个元素和它的子元素的编译过程，可以用来显示原始的模板{{}}标签，跳过大量没有指令的节点会加快编译

v-once#

该指令不需要表达式，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。以后数据的改变不会引起v-once所在结构的更新，这可以用于优化更新性能

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

Vue 生命周期

Sun, 18 Sep 2022 07:14:08 GMT

生命周期#

又名：生命周期回调函数、生命周期函数、生命周期钩子。

是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

生命周期函数中的this指向是vm 或组件实例对象。

vue生命周期

Vue 实例创建阶段#

var vm=new Vue()，创建出一个 Vue 实例对象
beforeCreat，当 Vue 实例被完全创建出来之前，就会执行该函数，这是表示刚初始化了一个空的 Vue 对象，还未进行数据代理

**注意:**在 beforeCreat 生命周期函数执行的时候，data 和 methods 等中的数据还没有初始化，所以在这里面调用这些 data 或 methods 等中的属性和方法会报错
created，在该函数中，data 和 methods 等数据已经被初始化好了，如果要调用 methods 中的方法或者 data 中的数据，最早只能在 created 中进行操作

**注:**如果要发 Ajax 请求尽量在这个阶段发送
在这两个生命周期函数之间（create，beforeMount）进行 Vue 的编译模板，把 Vue 代码中的那些指令进行执行，最终在内存中生成一个编译好的最终模板字符串(虚拟 DOM)，然后把这个字符串渲染为内存中的 DOM，但是此时只是在内存中渲染 DOM，还没有将其挂载到页面中去
beforeMount，在该函数中模板已经在内存中了，但是还没有把模板渲染到页面中，也就是说{{}}中的内容还没有被解析，页面中的元素还没有真正被替换，只是写了一些模板字符串将内存中的 DOM 挂载到页面中去
mounted，表示内存中的 DOM 已经挂载到页面中了，用户已经可以看到渲染好的页面了

注意: mounted 是实例创建期间执行的最后一个生命周期函数，当执行完 mounted 就表示实例已经完全被创建好了如果要通过某些插件操作页面上的 DOM 节点，最早要在 mounted 中进行

Vue 实例运行阶段#

下面两个生命周期必须要数据发生改变时才会进行，会根据 data 数据的改变触发 0 次或多次

beforeUpdate，这个函数表明 Vue 实例在运行时数据已经被更新，而页面还没有被更新的时间节点，当执行该函数时，页面中显示的数据还是没有更新前的数据，而 data 中的数据是最新的，页面还没有和数据实现同步
在这两个函数之间(beforeUpdate， updated)，会根据 data 中的最新数据，重新渲染出一份最新的内存 DOM 树(虚拟DOM)，当最新的内存 DOM 树被更新之后，会把最新的内存 DOM 树重新渲染到真实的页面中去，完成数据从 data 到页面视图的更新
updated，当这个函数执行时证明 data 中的数据已经和页面中的数据保存同步更新了

Vue 实例销毁阶段#

beforeDestroy，当执行该函数时，Vue 实例就已经从运行阶段进入到了销毁阶段，实例上的所以属性如 data，methods 等都还是处于可用状态，还没有真正的执行销毁
destroyed，当执行到该函数时，Vue 实例已经被完全销毁，此时所有实例中的属性都不可用了

注意#

常用的生命周期钩子：
1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何信息。
2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

Vue实例对象

Sat, 30 Jul 2022 08:58:08 GMT

创建并绑定 Vue 对象#

Vue 也是一个构造函数,通过 new Vue()可以创建一个 Vue 对象,通过 Vue 对象进行对 DOM 元素以及内部的子孙元素的操作

1
    new Vue({
2
        el: '#div',
3
        /*
4
        在Vue中通过el属性来绑定一个DOM元素,从而让该DOM元素以及内部都绑定Vue的相关操作,一般是通过ID进行查找,因为这样才能够精确绑定
5
        */
6
        data: {
7
            //data属性中包含着在el中使用的使用的变量或属性
8
            msg: 123,
9
        },
10
        //也可以使用函数形式的
11
        data() {
12
            return {
13
                msg: 123,
14
            }
15
        },
16
        //methods属性包含着需要使用的方法
17
        methods: {
18
            show() {
19
                console.log(this.msg)
20
            },
21
        },
22
    })

展开收起

注<在实例内部使用定义的属性或方法时不能直接使用>,必须通过 this 来指定需要用的属性

vue 实例中的参数与选项#

el:"#id", //DOM 成员（1/3）提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
template:"<tag></tag>", //DOM 成员（2/3）一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发
slot render: (h)=>{h(App)}, //DOM 成员（3/3）字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。
```
1
  // 原理
2
  render: (h) => {
3
    return <APP></APP>
4
  } // 可以代替components和template
```
data //数据成员（1/6）
```
1
  data():{ return{ } }
```
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化
methods //数据成员（2/6）
```
1
  methods:{ func(){ } }
```
methods 将被混入到 Vue 实例中，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用方法中的 this 自动绑定为 Vue 实例
watch //数据成员（3/6）
```
1
  watch: {
2
    key: value,
3
    $route(newValue, oldValue) {//监控路由}
4
  }
```
Vue的监视属性，整个为一个对象，键是需要观察的表达式，值是对应回调函数
computed //数据成员（4/6）
```
1
  computed: {
2
    getTotalCount() {
3
        const totalCount = 0
4
        return totalCount
5
    },
6
}
```
vue 的计算属性，将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
props //数据成员（5/6）
```
1
  props:['counts','ids']
```
用于父子组件的 eventbus 传值，是数组或对象，props 的成员是子组件接收的来自父组件的数据
propsData //数据成员（6/6）创建实例时传递 props。主要作用是方便测试。基本不使用。

filters //资源（1/3）

1
  filters(
2
      'filterName',
3
      (input,
4
      function () {
5
          return newvalue
6
      })
7
  )

包含 Vue 实例可用过滤器的哈希表。

directives //资源（2/3）包含 Vue 实例可用指令的哈希表。
components //资源（3/3）（即该组件的子实例）这里是包含 Vue 实例可用组件的哈希表。
name //杂项（1/6）允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
parent //杂项（2/6）指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
mixins //杂项（3/6） mixins 选项接受一个混合对象的数组。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
extends //杂项（4/6）允许声明扩展另一个组件。这主要是为了便于扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。
delimiters //杂项（5/6）改变纯文本插入分隔符。
functional //杂项（6/6）使组件无状态（没有 data ）和无实例（没有 this 上下

常用指令实例#

1
  <!DOCTYPE html>
2
  <html lang="en">
3
      <head>
4
          <meta charset="UTF-8" />
5
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
          <title>startVue</title>
7
      </head>
8
      <body>
9
          <div id="app">
10
              <!-- {{}}双大括号表达式，里面是js代码 -->
11
              <p>{{ msg }}</p>
12

13
              <!-- 相当于innerText -->
14
              <p v-text="str"></p>
15

16
              <!-- 相当于innerHTML -->
17
              <p v-html="str"></p>
18

19
              <!-- 强制绑定事件, 一般用于用于响应式地更新HTML attribute, 简写方式:
20
              从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
21
              <a v-bind:[attributeName]="url"> ... </a>
22
              这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。
23
              例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"
24
              那么这个绑定将等价于 v-bind:href-->
25
              <a v-bind:href="url">Baidu</a>
26

27
              <!-- 绑定事件监听,监听 DOM 事件, 简写方式@ -->
28
              <button v-on:click="test">Submit</button>
29

30
              <!-- 双向绑定事件,动态实时更新里面的内容 -->
31
              <div>
32
                  <input type="text" v-model="input" placeholder="Please input" />
33
                  <p>{{ input }}</p>
34
              </div>
35
          </div>
36
      </body>
37
      <script text="javascript" src="./vue.js"></script>
38
      <script text="javascript">
39
          const app = new Vue({
40
              //要挂载的位置
41
              //在Vue中通过el属性来绑定一个DOM元素,从而让该DOM元素以及内部都绑定Vue的相关操作
42
              //一般是通过ID进行查找,因为这样才能够精确绑定
43
              el: '#app', // data属性中包含着在el中使用的使用的变量或属性
44
              data: {
45
                  msg: 'xhw',
46
                  str: '<a href="#">XHW</a>',
47
                  url: 'https://www.baidu.com',
48
                  input: '',
49
              }, // methods属性包含着需要使用的方法
50
              /**
51
               * 也可以写成(以组件形式里必须写成这个)
52
               * data() {
53
               *     return {
54
               *
55
               * }
56
               * },
57
               */ methods: {
58
                  test() {
59
                      alert('!!!')
60
                  },
61
              },
62
          })
63
      </script>
64
  </html>

展开收起

`vm.$mount`#

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例

**注意:**这个方法返回实例自身,因而可以链式调用其它实例方法

1
    var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // 创建并挂载到 #app (会替换 #app)
2
    new MyComponent().$mount('#app') // 同上
3
    new MyComponent({ el: '#app' }) // 或者，在文档之外渲染并且随后挂载 var
4
    component = new MyComponent().$mount()
5
    document.getElementById('app').appendChild(component.$el)

字符串的扩展

Wed, 27 Jul 2022 06:19:08 GMT

字符的 Unicode 表示法#

JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

1
    '\u0061'
2
    // "a"

但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示

ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符

1
    '\u{20BB7}'
2
    // "𠮷"
3

4
    '\u{41}\u{42}\u{43}'
5
    // "ABC"
6

7
    let hello = 123
8
    hello // 123
9

10
    '\u{1F680}' === '\uD83D\uDE80'
11
    // true

上面代码中，最后一个例子表明，大括号表示法与四字节的 UTF-16 编码是等价的。

有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符

1
    'z' === 'z' // true
2
    '\172' === 'z' // true
3
    '\x7A' === 'z' // true
4
    '\u007A' === 'z' // true
5
    '\u{7A}' === 'z' // true

codePointAt()#

JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符)，JavaScript 会认为它们是两个字符

1
    var s = '𠮷'
2

3
    s.length // 2
4
    s.charAt(0) // ''
5
    s.charAt(1) // ''
6
    s.charCodeAt(0) // 55362
7
    s.charCodeAt(1) // 57271

上面代码中，汉字“𠮷”(注意，这个字不是“吉祥”的“吉”)的码点是0x20BB7，UTF-16 编码为0xD842 0xDFB7(十进制为55362 57271)，需要4个字节储存。对于这种4个字节的字符，JavaScript 不能正确处理，字符串长度会误判为2，而且charAt方法无法读取整个字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值

ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

1
    let s = '𠮷a'
2

3
    s.codePointAt(0) // 134071
4
    s.codePointAt(1) // 57271
5

6
    s.codePointAt(2) // 97

codePointAt方法的参数，是字符在字符串中的位置(从 0 开始)。上面代码中，JavaScript 将“𠮷 a”视为三个字符，codePointAt 方法在第一个字符上，正确地识别了“𠮷”，返回了它的十进制码点 134071(即十六进制的20BB7)。在第二个字符(即“𠮷”的后两个字节)和第三个字符“a”上，codePointAt方法的结果与charCodeAt方法相同。

总之，codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。

codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。

1
    let s = '𠮷a'
2

3
    s.codePointAt(0).toString(16) // "20bb7"
4
    s.codePointAt(2).toString(16) // "61"

您可能注意到了，codePointAt方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt方法传入 2。解决这个问题的一个办法是使用for...of循环，因为它会正确识别 32 位的 UTF-16 字符

1
    let s = '𠮷a'
2
    for (let ch of s) {
3
        console.log(ch.codePointAt(0).toString(16))
4
    }
5
    // 20bb7
6
    // 6

String.fromCodePoint()#

ES5 提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF)。

1
    String.fromCharCode(0x20bb7)
2
    // "ஷ"

上面代码中，String.fromCharCode不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符。

ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。

1
  String.fromCodePoint(0x20bb7)
2
  // "𠮷"
3
  String.fromCodePoint(0x78, 0x1f680, 0x79) === "x\uD83D\uDE80y"
4
  // true

上面代码中，如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。

注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上

字符串的遍历器接口#

ES6 为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。

1
    for (let codePoint of 'foo') {
2
        console.log(codePoint)
3
    }
4
    // "f"
5
    // "o"
6
    // "o"

除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点

1
    let text = String.fromCodePoint(0x20bb7)
2

3
    for (let i = 0; i < text.length; i++) {
4
        console.log(text[i])
5
    }
6
    // " "
7
    // " "
8

9
    for (let i of text) {
10
        console.log(i)
11
    }
12
    // "𠮷"

上面代码中，字符串text只有一个字符，但是for循环会认为它包含两个字符(都不可打印)，而for...of循环会正确识别出这一个字符

includes(), startsWith(), endsWith()#

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。 ES6 又提供了三种新方法。

includes(): 返回布尔值，表示是否找到了参数字符串。
startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith(): 返回布尔值，表示参数字符串是否在原字符串的尾部

1
let s = 'Hello world!'
2

3
s.startsWith('Hello') // true
4
s.endsWith('!') // true
5
s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置

1
    let s = 'Hello world!'
2

3
    s.startsWith('world', 6) // true
4
    s.endsWith('Hello', 5) // true
5
    s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束

repeat()#

repeat方法返回一个新字符串，表示将原字符串重复n次。

1
    'x'.repeat(3) // "xxx"
2
    'hello'.repeat(2) // "hellohello"
3
    'na'.repeat(0) // ""

参数如果是小数，会被取整。

1
  "na".repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity，会报错

1
    'na'.repeat(Infinity)
2
    // RangeError
3
    'na'.repeat(-1)
4
    // RangeError

但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0

1
  "na".repeat(-0.9) // ""

参数NaN等同于 0。

1
  "na".repeat(NaN) // ""

如果repeat的参数是字符串，则会先转换成数字。

1
  "na".repeat("na") // ""
2
  "na".repeat("3") // "nanana"

padStart()，padEnd()#

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。 padStart()用于头部补全，padEnd()用于尾部补全

1
  "x".padStart(5, "ab") // 'ababx'
2
  "x".padStart(4, "ab") // 'abax'
3

4
  "x".padEnd(5, "ab") // 'xabab'
5
  "x".padEnd(4, "ab") // 'xaba'

上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串

1
    'xxx'.padStart(2, 'ab') // 'xxx'
2
    'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串

1
    'abc'.padStart(10, '0123456789')
2
    // '0123456abc'

如果省略第二个参数，默认使用空格补全长度

1
    'x'.padStart(4) // '   x'
2
    'x'.padEnd(4) // 'x   '

padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串

1
    '1'.padStart(10, '0') // "0000000001"
2
    '12'.padStart(10, '0') // "0000000012"
3
    '123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

1
    '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
2
    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

matchAll()#

matchAll方法返回一个正则表达式在当前字符串的所有匹配

模板字符串#

传统的 JavaScript 语言，输出模板通常是这样写的(下面使用了 jQuery 的方法)。

1
    $('#result').append(
2
        'There are <b>' +
3
            basket.count +
4
            '</b> ' +
5
            'items in your basket, ' +
6
            '<em>' +
7
            basket.onSale +
8
            '</em> are on sale!'
9
    )

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

1
    $('#result').append(`
2
        There are <b>${basket.count}</b> items
3
        in your basket, <em>${basket.onSale}</em>
4
        are on sale!
5
    `)

模板字符串(template string)是增强版的字符串，用反引号(```)标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

1
    // 普通字符串
2
    ;`In JavaScript '\n' is a line-feed.` // 多行字符串
3
    `In JavaScript this is not legal.`
4

5
    console.log(`string text line 1 string text line 2`)
6

7
    // 字符串中嵌入变量
8
    let name = 'Bob',
9
        time = 'today'
10
    ;`Hello ${name}, how are you ${time}?`
11
    // Hello Bob, how are you today?

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

1
  let greeting = `\`Yo\` World!`

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

1
  $("#list").html(`
2
  <ul>
3
    <li>first</li>
4
    <li>second</li>
5
  </ul>
6
  `)

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果您不想要这个换行，可以使用trim方法消除它

1
  $("#list").html(
2
    `
3
  <ul>
4
    <li>first</li>
5
    <li>second</li>
6
  </ul>
7
  `.trim()
8
  )

模板字符串中嵌入变量，需要将变量名写在${}之中。

1
    function authorize(user, action) {
2
        if (!user.hasPrivilege(action)) {
3
            throw new Error(
4
                // 传统写法为
5
                // 'User '
6
                // + user.name
7
                // + ' is not authorized to do '
8
                // + action
9
                // + '.'
10
                `User ${user.name} is not authorized to do ${action}.`
11
            )
12
        }
13
    }

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

1
    let x = 1
2
    let y = 2
3

4
    ;`${x} + ${y} = ${x + y}` // "1 + 2 = 3"
5
    `${x} + ${y * 2} = ${x + y * 2}`
6
    // "1 + 4 = 5"
7

8
    let obj = { x: 1, y: 2 }
9
    ;`${obj.x + obj.y}`
10
    // "3"

模板字符串之中还能调用函数。

1
    function fn() {
2
        return 'Hello World'
3
    }
4

5
    ;`foo ${fn()} bar`
6
    // foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法

如果模板字符串中的变量没有声明，将报错。

1
  // 变量place没有声明
2
  let msg = `Hello, ${place}`
3
  // 报错

由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出

1
  `Hello ${"World"}`
2
  // "Hello World"

标签模板#

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

1
    alert`123`
2
    // 等同于
3
    alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

1
    let a = 5
2
    let b = 10
3

4
    tag`Hello ${a + b} world ${a * b}`
5
    // 等同于
6
    tag(['Hello ', ' world ', ''], 15, 50)

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。

函数tag依次会接收到多个参数。

1
    function tag(stringArr, value1, value2) {
2
        // ...
3
    }
4

5
    // 等同于
6

7
    function tag(stringArr, ...values) {
8
        // ...
9
    }

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

tag函数所有参数的实际值如下。

第一个参数: [‘Hello ’, ’ world ’, ”]
第二个参数: 15
第三个参数: 50

也就是说，tag函数实际上以下面的形式调用。

1
  tag(["Hello ", " world ", ""], 15, 50)

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。

1
    let a = 5
2
    let b = 10
3

4
    function tag(s, v1, v2) {
5
        console.log(s[0])
6
        console.log(s[1])
7
        console.log(s[2])
8
        console.log(v1)
9
        console.log(v2)
10

11
        return 'OK'
12
    }
13

14
    tag`Hello ${a + b} world ${a * b}`
15
    // "Hello "
16
    // " world "
17
    // ""
18
    // 15
19
    // 50
20
    // "OK"

展开收起

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。

1
    let message = SaferHTML`<p>${sender} has sent you a message.</p>`
2

3
    function SaferHTML(templateData) {
4
        let s = templateData[0]
5
        for (let i = 1; i < arguments.length; i++) {
6
            let arg = String(arguments[i])
7

8
            // Escape special characters in the substitution.
9
            s += arg
10
                .replace(/&/g, '&amp;')
11
                .replace(/</g, '&lt;')
12
                .replace(/>/g, '&gt;')
13

14
            // Don't escape special characters in the template.
15
            s += templateData[i]
16
        }
17
        return s
18
    }

展开收起

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。

1
  let sender = '<script>alert("abc")</script>' // 恶意代码
2
  let message = SaferHTML`<p>${sender} has sent you a message.</p>`
3

4
  message
5
  // <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

String.raw()#

ES6 还为原生的 String 对象，提供了一个raw方法。

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串，对应于替换变量后的模板字符串

1
    String.raw`Hi\n${2 + 3}!`
2
    // 返回 "Hi\\n5!"
3

4
    String.raw`Hi\u000A!`
5
    // 返回 "Hi\\u000A!"

如果原字符串的斜杠已经转义，那么String.raw会进行再次转义。

1
  String.raw`Hi\\n`
2
  // 返回 "Hi\\\\n"

String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

1
    String.raw({ raw: 'test' }, 0, 1, 2)
2
    // 't0e1s2t'
3

4
    // 等同于
5
    String.raw({ raw: ['t', 'e', 's', 't'] }, 0, 1, 2)

作为函数，String.raw的代码实现基本如下

1
    String.raw = function (strings, ...values) {
2
        let output = ''
3
        let index
4
        for (index = 0; index < values.length; index++) {
5
            output += strings.raw[index] + values[index]
6
        }
7

8
        output += strings.raw[index]
9
        return output
10
    }

模板字符串的限制#

前面提到标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，导致无法嵌入其他语言。

举例来说，标签模板里面可以嵌入 LaTEX 语言。

1
    function latex(strings) {
2
        // ...
3
    }
4

5
    let document = latex`
6
        \newcommand{\fun}{\textbf{Fun!}}  // 正常工作
7
        \newcommand{\unicode}{\textbf{Unicode!}} // 报错
8
        \newcommand{\xerxes}{\textbf{King!}} // 报错
9

10
        Breve over the h goes \u{h}ere // 报错
11
        `

上面代码中，变量document内嵌的模板字符串，对于 LaTEX 语言来说完全是合法的，但是 JavaScript 引擎会报错。原因就在于字符串的转义。

模板字符串会将\u00FF和\u{42}当作 Unicode 字符进行转义，所以解析\unicode时报错；而\x56会被当作十六进制字符串转义，所以\xerxes会报错。也就是说，\u和\x在 LaTEX 里面有特殊含义，但是 JavaScript 将它们转义了。

为了解决这个问题，ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义，就返回undefined，而不是报错，并且从raw属性上面可以得到原始字符串。

1
    function tag(strs) {
2
        strs[0] === undefined
3
        strs.raw[0] === '\\unicode and \\u{55}'
4
    }
5
    tag`\unicode and \u{55}`

上面代码中，模板字符串原本是应该报错的，但是由于放松了对字符串转义的限制，所以不报错了，JavaScript 引擎将第一个字符设置为undefined，但是raw属性依然可以得到原始字符串，因此tag函数还是可以对原字符串进行处理。

注意，这种对字符串转义的放松，只在标签模板解析字符串时生效，不是标签模板的场合，依然会报错

1
  let bad = `bad escape sequence: \unicode` // 报错

Module 的加载实现

Sun, 24 Jul 2022 00:58:59 GMT

本章介绍如何在浏览器和 Node 之中加载 ES6 模块，以及实际开发中经常遇到的一些问题(比如循环加载)

浏览器加载#

传统方法#

在 HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。

1
    <!-- 页面内嵌的脚本 -->
2
    <script type="application/javascript">
3
        // module code
4
    </script>
5

6
    <!-- 外部脚本 -->
7
    <script type="application/javascript" src="path/to/myModule.js"></script>

上面代码中，由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

1
  <script src="path/to/myModule.js" defer></script>
2
  <script src="path/to/myModule.js" async></script>

上面代码中，<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令

注： defer与async的区别是: defer要等到整个页面在内存中正常渲染结束(DOM 结构完全生成，以及其他脚本执行完成)，才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的

加载规则#

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性

1
  <script type="module" src="./foo.js"></script>

上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性

1
  <script type="module" src="./foo.js"></script>
2
  <!-- 等同于 -->
3
  <script type="module" src="./foo.js" defer></script>

如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行

<script>标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染

1
  <script type="module" src="./foo.js" async></script>

一旦使用了async属性，<script type="module">就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块

ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致

1
    <script type="module">
2
        import utils from './utils.js'
3

4
        // other code
5
    </script>

对于外部的模块脚本(上例是foo.js)，有几点需要注意

代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
模块脚本自动采用严格模式，不管有没有声明use strict。
模块之中，可以使用import命令加载其他模块(.js后缀不可省略，需要提供绝对 URL 或相对 URL)，也可以使用export命令输出对外接口。
模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。
同一个模块如果加载多次，将只执行一次。

下面是一个示例模块。

1
    import utils from 'https://example.com/js/utils.js'
2

3
    const x = 1
4

5
    console.log(x === window.x) //false
6
    console.log(this === undefined) // true

利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中

1
  const isNotModuleScript = this !== undefined

ES6 模块与 CommonJS 模块的差异#

讨论 Node 加载 ES6 模块之前，必须了解 ES6 模块与 CommonJS 模块完全不同。

它们有两个重大差异。

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

第二个差异是因为 CommonJS 加载的是一个对象(即module.exports属性)，该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

下面重点解释第一个差异。

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。请看下面这个模块文件lib.js的例子

lib.js

1
    var counter = 3
2
    function incCounter() {
3
        counter++
4
    }
5
    module.exports = {
6
        counter: counter,
7
        incCounter: incCounter,
8
    }

上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后，在main.js里面加载这个模块

main.js

1
  var mod = require("./lib")
2

3
  console.log(mod.counter) // 3
4
  mod.incCounter()
5
  console.log(mod.counter) // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值

lib.js

1
    var counter = 3
2
    function incCounter() {
3
        counter++
4
    }
5
    module.exports = {
6
        get counter() {
7
            return counter
8
        },
9
        incCounter: incCounter,
10
    }

上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了

1
  $ node main.js
2
  3
3
  4

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块

lib.js

1
    export let counter = 3
2
    export function incCounter() {
3
        counter++
4
    }
5

6
    // main.js
7
    import { counter, incCounter } from './lib'
8
    console.log(counter) // 3
9
    incCounter()
10
    console.log(counter) // 4

上面代码说明，ES6 模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。

例：m1.js的变量foo，在刚加载时等于bar，过了 500 毫秒，又变为等于baz

m1.js

1
    export var foo = 'bar'
2
    setTimeout(() => (foo = 'baz'), 500)
3

4
    // m2.js
5
    import { foo } from './m1.js'
6
    console.log(foo)
7
    setTimeout(() => console.log(foo), 500)

上面代码中，m1.js的变量foo，在刚加载时等于bar，过了 500 毫秒，又变为等于baz

让我们看看，m2.js能否正确读取这个变化

1
  $ babel-node m2.js
2

3
  bar
4
  baz

上面代码表明，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块

由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错

lib.js

1
    export let obj = {}
2

3
    // main.js
4
    import { obj } from './lib'
5

6
    obj.prop = 123 // OK
7
    obj = {} // TypeError

上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。

最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例

mod.js

1
    function C() {
2
        this.sum = 0
3
        this.add = function () {
4
            this.sum += 1
5
        }
6
        this.show = function () {
7
            console.log(this.sum)
8
        }
9
    }
10

11
    export let c = new C()

上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

x.js

1
    import { c } from './mod'
2
    c.add()
3

4
    // y.js
5
    import { c } from './mod'
6
    c.show()
7

8
    // main.js
9
    import './x'
10
    import './y'

现在执行main.js，输出的是1。

1
  $ babel-node main.js
2
  1

这就证明了x.js和y.js加载的都是C的同一个实例

Node 加载#

概述#

Node 对 ES6 模块的处理比较麻烦，因为它有自己的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将两者分开，ES6 模块和 CommonJS 采用各自的加载方案。

Node 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。require命令不能加载.mjs文件，会报错，只有import命令才可以加载.mjs文件。反过来，.mjs文件里面也不能使用require命令，必须使用import

为了与浏览器的import加载规则相同，Node 的.mjs文件支持 URL 路径

1
  import "./foo?query=1" // 加载 ./foo 传入参数 ?query=1

上面代码中，脚本路径带有参数?query=1，Node 会按 URL 规则解读。同一个脚本只要参数不同，就会被加载多次，并且保存成不同的缓存。由于这个原因，只要文件名中含有:、%、#、?等特殊字符，最好对这些字符进行转义。

目前，Node 的import命令只支持加载本地模块(file:协议)，不支持加载远程模块。如果模块名不含路径，那么import命令会去node_modules目录寻找这个模块

1
    import 'baz'
2
    import 'abc/123'

如果模块名包含路径，那么import命令会按照路径去寻找这个名字的脚本文件

1
    import 'file:///etc/config/app.json'
2
    import './foo'
3
    import './foo?search'
4
    import '../bar'
5
    import '/baz'

如果脚本文件省略了后缀名，比如import './foo'，Node 会依次尝试四个后缀名: ./foo.mjs、./foo.js、./foo.json、./foo.node。如果这些脚本文件都不存在，Node 就会去加载./foo/package.json的main字段指定的脚本。如果./foo/package.json不存在或者没有main字段，那么就会依次加载./foo/index.mjs、./foo/index.js、./foo/index.json、./foo/index.node。如果以上四个文件还是都不存在，就会抛出错误。

最后，Node 的import命令是异步加载，这一点与浏览器的处理方法相同

内部变量#

ES6 模块应该是通用的，同一个模块不用修改，就可以用在浏览器环境和服务器环境。为了达到这个目标，Node 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。

首先，就是this关键字。ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是两者的一个重大差异。

其次，以下这些顶层变量在 ES6 模块之中都是不存在的

arguments
require
module
exports
__filename
__dirname

如果您一定要使用这些变量，有一个变通方法，就是写一个 CommonJS 模块输出这些变量，然后再用 ES6 模块加载这个 CommonJS 模块。但是这样一来，该 ES6 模块就不能直接用于浏览器环境了，所以不推荐这样做

expose.js

1
    module.exports = { __dirname }
2

3
    // use.mjs
4
    import expose from './expose.js'
5
    const { __dirname } = expose

上面代码中，expose.js是一个 CommonJS 模块，输出变量__dirname，该变量在 ES6 模块之中不存在。ES6 模块加载expose.js，就可以得到__dirname

ES6 模块加载 CommonJS 模块#

CommonJS 模块的输出都定义在module.exports这个属性上面。Node 的import命令加载 CommonJS 模块，Node 会自动将module.exports属性，当作模块的默认输出，即等同于export default xxx。

下面是一个 CommonJS 模块。

a.js

1
    module.exports = {
2
        foo: 'hello',
3
        bar: 'world',
4
    }
5

6
    // 等同于
7
    export default {
8
        foo: 'hello',
9
        bar: 'world',
10
    }

import命令加载上面的模块，module.exports会被视为默认输出，即import命令实际上输入的是这样一个对象{ default: module.exports }。

所以，一共有三种写法，可以拿到 CommonJS 模块的module.exports

1
    // 写法一
2
    import baz from './a'
3
    // baz = {foo: 'hello', bar: 'world'};
4

5
    // 写法二
6
    import { default as baz } from './a'
7
    // baz = {foo: 'hello', bar: 'world'};
8

9
    // 写法三
10
    import * as baz from './a'
11
    // baz = {
12
    //   get default() {return module.exports;},
13
    //   get foo() {return this.default.foo}.bind(baz),
14
    //   get bar() {return this.default.bar}.bind(baz)
15
    // }

展开收起

上面代码的第三种写法，可以通过`baz.default`拿到`module.exports`。`foo`属性和`bar`属性就是可以通过这种方法拿到了`module.exports`#

下面是一些例子

b.js

1
    module.exports = null
2

3
    // es.js
4
    import foo from './b'
5
    // foo = null
6

7
    import * as bar from './b'
8
    // bar = { default:null }

上面代码中，es.js采用第二种写法时，要通过bar.default这样的写法，才能拿到module.exports。

c.js

1
    module.exports = function two() {
2
        return 2
3
    }
4

5
    // es.js
6
    import foo from './c'
7
    foo() // 2
8

9
    import * as bar from './c'
10
    bar.default() // 2
11
    bar() // throws, bar is not a function

上面代码中，bar本身是一个对象，不能当作函数调用，只能通过bar.default调用。

CommonJS 模块的输出缓存机制，在 ES6 加载方式下依然有效

foo.js

1
    module.exports = 123
2
    setTimeout((_) => (module.exports = null))

上面代码中，对于加载foo.js的脚本，module.exports将一直是123，而不会变成null。

由于 ES6 模块是编译时确定输出接口，CommonJS 模块是运行时确定输出接口，所以采用import命令加载 CommonJS 模块时，不允许采用下面的写法。

1
  // 不正确
2
  import { readFile } from "fs"

上面的写法不正确，因为fs是 CommonJS 格式，只有在运行时才能确定readFile接口，而import命令要求编译时就确定这个接口。解决方法就是改为整体输入

1
    // 正确的写法一
2
    import * as express from 'express'
3
    const app = express.default()
4

5
    // 正确的写法二
6
    import express from 'express'
7
    const app = express()

CommonJS 模块加载 ES6 模块#

CommonJS 模块加载 ES6 模块，不能使用require命令，而要使用import()函数。ES6 模块的所有输出接口，会成为输入对象的属性

es.mjs

1
    let foo = { bar: 'my-default' }
2
    export default foo
3

4
    // cjs.js
5
    const es_namespace = await import('./es.mjs')
6
    // es_namespace = {
7
    //     get default() {},
8
    // }
9
    console.log(es_namespace.default)
10
    // { bar:'my-default' }

上面代码中，default接口变成了es_namespace.default属性

下面是另一个例子

es.js展开收起

1
    export let foo = { bar: 'my-default' }
2
    export { foo as bar }
3
    export function f() {}
4
    export class c {}
5

6
    // cjs.js
7
    const es_namespace = await import('./es')
8
    // es_namespace = {
9
    //     get foo() {
10
    //         return foo
11
    //     },
12
    //     get bar() {
13
    //         return foo
14
    //     },
15
    //     get f() {
16
    //         return f
17
    //     },
18
    //     get c() {
19
    //         return c
20
    //     },
21
    // }

展开收起

循环加载#

“循环加载”(circular dependency)指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本

a.js

1
    var b = require('b')
2

3
    // b.js
4
    var a = require('a')

通常，“循环加载”表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。

但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现a依赖b，b依赖c，c又依赖a这样的情况。这意味着，模块加载机制必须考虑“循环加载”的情况。

对于 JavaScript 语言来说，目前最常见的两种模块格式 CommonJS 和 ES6，处理“循环加载”的方法是不一样的，返回的结果也不一样

CommonJS 模块的加载原理#

介绍 ES6 如何处理“循环加载”之前，先介绍目前最流行的 CommonJS 模块格式的加载原理。

CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。

1
    {
2
        id: '...',
3
        exports: {},
4
        loaded: true,
5
    }

上面代码就是 Node 内部加载模块后生成的一个对象。该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。

以后需要用到这个模块的时候，就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。也就是说，CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存

CommonJS 模块的循环加载#

CommonJS 模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。

让我们来看，Node 官方文档里面的例子。脚本文件a.js代码如下

1
    exports.done = false
2
    var b = require('./b.js')
3
    console.log('在 a.js 之中,b.done = %j', b.done)
4
    exports.done = true
5
    console.log('a.js 执行完毕')

上面代码之中，a.js脚本先输出一个done变量，然后加载另一个脚本文件b.js。注意，此时a.js代码就停在这里，等待b.js执行完毕，再往下执行。

再看b.js的代码

1
    exports.done = false
2
    var a = require('./a.js')
3
    console.log('在 b.js 之中，a.done = %j', a.done)
4
    exports.done = true
5
    console.log('b.js 执行完毕')

上面代码之中，b.js执行到第二行，就会去加载a.js，这时，就发生了“循环加载”。系统会去a.js模块对应对象的exports属性取值，可是因为a.js还没有执行完，从exports属性只能取回已经执行的部分，而不是最后的值。

a.js已经执行的部分，只有一行。

1
  exports.done = false

因此，对于b.js来说，它从a.js只输入一个变量done，值为false。

然后，b.js接着往下执行，等到全部执行完毕，再把执行权交还给a.js。于是，a.js接着往下执行，直到执行完毕。我们写一个脚本main.js，验证这个过程。

1
    var a = require('./a.js')
2
    var b = require('./b.js')
3
    console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done)

执行main.js，运行结果如下

1
  $ node main.js
2

3
  在 b.js 之中，a.done = false
4
  b.js 执行完毕
5
  在 a.js 之中，b.done = true
6
  a.js 执行完毕
7
  在 main.js 之中, a.done=true, b.done=true

上面的代码证明了两件事。一是，在b.js之中，a.js没有执行完毕，只执行了第一行。二是，main.js执行到第二行时，不会再次执行b.js，而是输出缓存的b.js的执行结果，即它的第四行。

1
  exports.done = true

总之，CommonJS 输入的是被输出值的拷贝，不是引用。

另外，由于 CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心

1
    var a = require('a') // 安全的写法
2
    var foo = require('a').foo // 危险的写法
3

4
    exports.good = function (arg) {
5
        return a.foo('good', arg) // 使用的是 a.foo 的最新值
6
    }
7

8
    exports.bad = function (arg) {
9
        return foo('bad', arg) // 使用的是一个部分加载时的值
10
    }

上面代码中，如果发生循环加载，require('a').foo的值很可能后面会被改写，改用require('a')会更保险一点

ES6 模块的循环加载#

ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用import从一个模块加载变量(即import foo from 'foo')，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

请看下面这个例子。

a.mjs

1
    import { bar } from './b'
2
    console.log('a.mjs')
3
    console.log(bar)
4
    export let foo = 'foo'
5

6
    // b.mjs
7
    import { foo } from './a'
8
    console.log('b.mjs')
9
    console.log(foo)
10
    export let bar = 'bar'

上面代码中，a.mjs加载b.mjs，b.mjs又加载a.mjs，构成循环加载。执行a.mjs，结果如下。

1
  $ node --experimental-modules a.mjs
2
  b.mjs
3
  ReferenceError: foo is not defined

上面代码中，执行a.mjs以后会报错，foo变量未定义，这是为什么？

让我们一行行来看，ES6 循环加载是怎么处理的。首先，执行a.mjs以后，引擎发现它加载了b.mjs，因此会优先执行b.mjs，然后再执行a.mjs。接着，执行b.mjs的时候，已知它从a.mjs输入了foo接口，这时不会去执行a.mjs，而是认为这个接口已经存在了，继续往下执行。执行到第三行console.log(foo)的时候，才发现这个接口根本没定义，因此报错。

解决这个问题的方法，就是让b.mjs运行的时候，foo已经有定义了。这可以通过将foo写成函数来解决。

a.mjs展开收起

1
    import { bar } from './b'
2
    console.log('a.mjs')
3
    console.log(bar())
4
    function foo() {
5
        return 'foo'
6
    }
7
    export { foo }
8

9
    // b.mjs
10
    import { foo } from './a'
11
    console.log('b.mjs')
12
    console.log(foo())
13
    function bar() {
14
        return 'bar'
15
    }
16
    export { bar }

展开收起

这时再执行a.mjs就可以得到预期结果

1
  $ node --experimental-modules a.mjs
2
  b.mjs
3
  foo
4
  a.mjs
5
  bar

这是因为函数具有提升作用，在执行import {bar} from './b'时，函数foo就已经有定义了，所以b.mjs加载的时候不会报错。这也意味着，如果把函数foo改写成函数表达式，也会报错

a.mjs

1
    import { bar } from './b'
2
    console.log('a.mjs')
3
    console.log(bar())
4
    const foo = () => 'foo'
5
    export { foo }

上面代码的第四行，改成了函数表达式，就不具有提升作用，执行就会报错。

我们再来看 ES6 模块加载器SystemJS给出的一个例子

even.js

1
    import { odd } from './odd'
2
    export var counter = 0
3
    export function even(n) {
4
        counter++
5
        return n === 0 || odd(n - 1)
6
    }
7

8
    // odd.js
9
    import { even } from './even'
10
    export function odd(n) {
11
        return n !== 0 && even(n - 1)
12
    }

上面代码中，even.js里面的函数even有一个参数n，只要不等于 0，就会减去 1，传入加载的odd()。odd.js也会做类似操作。

运行上面这段代码，结果如下

1
  $ babel-node
2
  > import * as m from './even.js';
3
  > m.even(10);
4
  true
5
  > m.counter
6
  6
7
  > m.even(20)
8
  true
9
  > m.counter
10
  17

上面代码中，参数n从 10 变为 0 的过程中，even()一共会执行 6 次，所以变量counter等于 6。第二次调用even()时，参数n从 20 变为 0，even()一共会执行 11 次，加上前面的 6 次，所以变量counter等于 17。

这个例子要是改写成 CommonJS，就根本无法执行，会报错

even.js

1
    var odd = require('./odd')
2
    var counter = 0
3
    exports.counter = counter
4
    exports.even = function (n) {
5
        counter++
6
        return n == 0 || odd(n - 1)
7
    }
8

9
    // odd.js
10
    var even = require('./even').even
11
    module.exports = function (n) {
12
        return n != 0 && even(n - 1)
13
    }

上面代码中，even.js加载odd.js，而odd.js又去加载even.js，形成“循环加载”。这时，执行引擎就会输出even.js已经执行的部分(不存在任何结果)，所以在odd.js之中，变量even等于undefined，等到后面调用even(n - 1)就会报错

1
  $ node
2
  > var m = require('./even');
3
  > m.even(10)
4
  TypeError: even is not a function

ES6 模块的转码#

浏览器目前还不支持 ES6 模块，为了现在就能使用，可以将转为 ES5 的写法。除了 Babel 可以用来转码之外，还有以下两个方法，也可以用来转码

ES6 module transpiler#

ES6 module transpiler是 square 公司开源的一个转码器，可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法，从而在浏览器中使用

首先，安装这个转码器。

1
  npm install -g es6-module-transpiler

然后，使用compile-modules convert命令，将 ES6 模块文件转码。

1
  compile-modules convert file1.js file2.js

-o参数可以指定转码后的文件名。

1
  compile-modules convert -o out.js file1.js

SystemJS#

另一种解决方法是使用 SystemJS 。它是一个垫片库(polyfill)，可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块，将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。

使用时，先在网页内载入system.js文件

1
  <script src="system.js"></script>

然后，使用System.import方法加载模块文件。

1
  <script>
2
    System.import("./app.js")
3
  </script>

上面代码中的./app，指的是当前目录下的 app.js 文件。它可以是 ES6 模块文件，System.import会自动将其转码。

需要注意的是，System.import使用异步加载，返回一个 Promise 对象，可以针对这个对象编程。

下面是一个模块文件。

1
    // app/es6-file.js:
2

3
    export class q {
4
        constructor() {
5
            this.es6 = 'hello'
6
        }
7
    }

然后，在网页内加载这个模块文件

1
  <script>
2
      System.import('app/es6-file').then(function (m) {
3
          console.log(new m.q().es6) // hello
4
      })
5
  </script>

上面代码中，System.import方法返回的是一个 Promise 对象，所以可以用then方法指定回调函数。

Module 模块化

Fri, 22 Jul 2022 00:32:08 GMT

模块化 module#

基本概述#

历史上，JavaScript 一直没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

1
    // CommonJS模块
2
    let { stat, exists, readFile } = require('fs')
3

4
    // 等同于
5
    let _fs = require('fs')
6
    let stat = _fs.stat
7
    let exists = _fs.exists
8
    let readfile = _fs.readfile

上面代码的实质是整体加载fs模块(即加载fs的所有方法)，生成一个对象(_fs)，然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入

1
  // ES6模块
2
  import { stat, exists, readFile } from "fs"

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象

由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。除了静态加载带来的各种好处，ES6 模块还有以下好处。

不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
不再需要对象作为命名空间(比如Math对象)，未来这些功能可以通过模块提供。

严格模式#

ES6 的模块自动采用严格模式，不管您有没有在模块头部加上"use strict"。

严格模式主要有以下限制。

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)

上面这些限制，模块都必须遵守。其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this

export 命令#

模块功能主要由两个命令构成: export和import。

export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果您希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

分别暴露#

下面是一个 JS 文件，里面使用export命令输出变量，在每个需要暴露的变量前加上export关键字

profile.js

1
    export var firstName = 'Michael'
2
    export var lastName = 'Jackson'
3
    export function fun() {
4
      console.log("fun");
5
  }

上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量

统一暴露#

在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在var语句前)是等价的

profile.js

1
    var firstName = 'Michael'
2
    var lastName = 'Jackson'
3
    function fun() {
4
      console.log("fun");
5
  }
6

7
    export { firstName, lastName, fun }

注意#

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名
```
1
  function v1() {}
2
  function v2() {}
3

4
  export {
5
      v1 as streamV1,
6
      v2 as streamV2,
7
      v2 as streamLatestVersion
8
  }
```
上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次
export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值
```
1
  export var foo = 'bar'
2
  setTimeout(() => (foo = 'baz'), 500)
```
上面代码输出变量foo，值为bar，500 毫秒之后变成baz

import 命令#

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块

解构赋值形式#

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块(profile.js)对外接口的名称相同。类似于解构赋值的形式

1
  import { firstName, lastName, fun } from "./profile.js"

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名

1
  import { lastName as surname } from "./profile.js"

整体加载形式#

除了指定加载某个输出值，还可以使用整体加载，即用星号(*)指定一个对象，所有输出值都加载在这个对象上面

1
    import * as info from './profile.js'

注意，模块整体加载所在的那个对象，应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许

1
  import * as info from './profile.js'
2
  info.firstName = 'a'
3
  // Cannot assign to read only property 'firstName' of object '[object Module]'

export default 命令#

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出

export-default.js

1
    export default function () {
2
        console.log('foo')
3
    }

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

import-default.js

1
    import customName from './export-default'
2
    customName() // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号

export default命令用在非匿名函数前，也是可以的

export-default.js

1
    export default function foo() {
2
        console.log('foo')
3
    }
4

5
    // 或者写成
6

7
    function foo() {
8
        console.log('foo')
9
    }
10

11
    export default foo

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载

下面比较一下默认输出和正常输出

1
    // 第一组
2
    export default function crc32() {
3
        // 输出
4
        // ...
5
    }
6

7
    import crc32 from 'crc32' // 输入
8

9
    // 第二组
10
    export function crc32() {
11
        // 输出
12
        // ...
13
    }
14

15
    import { crc32 } from 'crc32' // 输入

展开收起

上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应export default命令。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许您为它取任意名字

所以，下面的写法是有效的

modules.js

1
    function add(x, y) {
2
        return x * y
3
    }
4
    export { add as default }
5
    // 等同于
6
    // export default add
7

8
    // app.js
9
    import { default as foo } from 'modules'
10
    // 等同于
11
    // import foo from 'modules'

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句

1
    // 正确
2
    export var a = 1
3

4
    // 正确
5
    var a = 1
6
    export default a
7

8
    // 错误
9
    export default var a = 1

例：有了export default命令，输入模块时就非常直观了，以输入 lodash 模块为例

1
  import _ from "lodash"

如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面这样

1
  import _, { each, each as forEach } from "lodash"

对应上面代码的export语句如下。

1
    export default function (obj) {}
2

3
    export function each(obj, iterator, context) {}
4

5
    export { each as forEach }

上面代码的最后一行的意思是，暴露出forEach接口，默认指向each接口，即forEach和each指向同一个方法

export default也可以用来输出类

MyClass.js

1
    export default class {}
2

3
    // main.js
4
    import MyClass from 'MyClass'
5
    let o = new MyClass()

export 与 import 的复合写法#

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起

1
    export { foo, bar } from 'my_module'
2

3
    // 可以简单理解为
4
    import { foo, bar } from 'my_module'
5
    export { foo, bar }

上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar

模块的接口改名和整体输出，也可以采用这种写法

1
  // 接口改名
2
  export { foo as myFoo } from "my_module"
3

4
  // 整体输出
5
  export * from "my_module"

默认接口的写法如下

1
  export { default } from "foo"

具名接口改为默认接口的写法如下

1
    export { es6 as default } from './someModule'
2

3
    // 等同于
4
    import { es6 } from './someModule'
5
    export default es6

默认接口也可以改名为具名接口

1
    export { default as es6 } from './someModule'

下面三种import语句，没有对应的复合写法。

1
    import * as someIdentifier from 'someModule'
2
    import someIdentifier from 'someModule'
3
    import someIdentifier, { namedIdentifier } from 'someModule'

模块的继承#

模块之间也可以继承。

假设有一个circleplus模块，继承了circle模块

circleplus.js

1
    export * from 'circle'
2
    export var e = 2.71828182846
3
    export default function (x) {
4
        return Math.exp(x)
5
    }

上面代码中的export *，表示再输出circle模块的所有属性和方法。注意，export *命令会忽略circle模块的default方法。然后，上面代码又输出了自定义的e变量和默认方法

这时，也可以将circle的属性或方法，改名后再输出

circleplus.js

1
    export { area as circleArea } from 'circle'

上面代码表示，只输出circle模块的area方法，且将其改名为circleArea

加载上面模块的写法如下

main.js

1
    import * as math from 'circleplus'
2
    import exp from 'circleplus'
3
    console.log(exp(math.e))

上面代码中的import exp表示，将circleplus模块的默认方法加载为exp方法

跨模块常量#

由于const声明的常量只在当前代码块有效，如果想设置跨模块的常量(即跨多个文件)，或者说一个值要被多个模块共享，可以采用下面的写法

1
    // constants.js 模块
2
    export const A = 1
3
    export const B = 3
4
    export const C = 4
5

6
    // test1.js 模块
7
    import * as constants from './constants'
8
    console.log(constants.A) // 1
9
    console.log(constants.B) // 3
10

11
    // test2.js 模块
12
    import { A, B } from './constants'
13
    console.log(A) // 1
14
    console.log(B) // 3

如果要使用的常量非常多，可以建一个专门的constants目录，将各种常量写在不同的文件里面，保存在该目录下

constants/db.js

1
    export const db = {
2
        url: 'https://my.couchdbserver.local:5984',
3
        admin_username: 'admin',
4
        admin_password: 'admin password',
5
    }
6

7
    // constants/user.js
8
    export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator']

然后，将这些文件输出的常量，合并在index.js里面

constants/index.js

1
    export { db } from './db'
2
    export { users } from './users'

使用的时候，直接加载index.js就可以了。

script.js

1
  import { db, users } from "./constants/index"

import()#

简介#

前面介绍过，import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行(import命令叫做“连接” binding 其实更合适)。所以，下面的代码会报错

1
    // 报错
2
    if (x === 2) {
3
        import MyModual from './myModual'
4
    }

上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中(比如，在if代码块之中，或在函数之中)。这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

1
    const path = './' + fileName
2
    const myModual = require(path)

上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道。import命令做不到这一点

因此，有一个提案，建议引入import()函数，完成动态加载

1
  import(specifier)

上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载

import()返回一个 Promise 对象。下面是一个例子。

1
    const main = document.querySelector('main')
2

3
    import(`./section-modules/${someVariable}.js`)
4
        .then((module) => {
5
            module.loadPageInto(main)
6
        })
7
        .catch((err) => {
8
            main.textContent = err.message
9
        })

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载

适用场合#

下面是import()的一些适用场合

按需加载#

import()可以在需要的时候，再加载某个模块

1
    button.addEventListener('click', (event) => {
2
        import('./dialogBox.js')
3
            .then((dialogBox) => {
4
                dialogBox.open()
5
            })
6
            .catch((error) => {
7
                /* Error handling */
8
            })
9
    })

上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块

条件加载#

import()可以放在if代码块，根据不同的情况，加载不同的模块

1
    if (condition) {
2
        import('moduleA').then()
3
    } else {
4
        import('moduleB').then()
5
    }

上面代码中，如果满足条件，就加载模块 A，否则加载模块 B

动态的模块路径#

import()允许模块路径动态生成

1
  import(f()).then()

上面代码中，根据函数f的返回结果，加载不同的模块

注意点#

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口

1
    import('./myModule.js').then(({ export1, export2 }) => {
2
        // ...·
3
    })

上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。

如果模块有default输出接口，可以用参数直接获得

1
    import('./myModule.js').then((myModule) => {
2
        console.log(myModule.default)
3
    })
4

5
  //上面的代码也可以使用具名输入的形式
6
    import('./myModule.js').then(({ default: theDefault }) => {
7
        console.log(theDefault)
8
    })

如果想同时加载多个模块，可以采用下面的写法

1
    Promise.all([
2
        import('./module1.js'),
3
        import('./module2.js'),
4
        import('./module3.js')])
5
    .then(([module1, module2, module3]) => {
6

7
    })

import()也可以用在 async 函数之中。

1
    async function main() {
2
        const myModule = await import('./myModule.js')
3
        const { export1, export2 } = await import('./myModule.js')
4
        const [module1, module2, module3] = await Promise.all([
5
            import('./module1.js'),
6
            import('./module2.js'),
7
            import('./module3.js'),
8
        ])
9
    }
10
    main()

对象的扩展

Wed, 20 Jul 2022 00:57:08 GMT

属性的简介表示#

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

1
    const foo = "bar"
2
    const baz = { foo }
3
    baz // {foo: "bar"}
4

5
    // 等同于
6
    // const baz = { foo: foo }

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。下面是另一个例子

1
    function f(x, y) {
2
        return { x, y };
3
    }
4

5
    // 等同于
6

7
    function f(x, y) {
8
        return { x: x,  y: y };
9
    }
10

11
    f(1, 2); // Object {x: 1, y: 2}

除了属性简写，方法也可以简写，利用方法名加括号替代属性名加函数形式

1
    const o = {
2
        method() {
3
            return "Hello!"
4
        },
5
    }
6

7
    // 等同于
8

9
    const o = {
10
        method: function () {
11
            return "Hello!"
12
        },
13
    }

属性名表达式#

JavaScript 定义对象的属性，有两种方法

1
  // 方法一
2
  obj.foo = true
3

4
  // 方法二
5
  obj["a" + "bc"] = 123 //{abc: 123}

方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内

如果使用字面量方式定义对象(使用大括号)，在 ES5 中只能使用方法一(标识符)定义属性。 ES6 允许字面量定义对象时，用方法二(表达式)作为对象的属性名，即把表达式放在方括号内。

1
    let lastWord = 'last word'
2

3
    const a = {
4
        'first word': 'hello',
5
        [lastWord]: 'world',
6
    }
7

8
    a['first word'] // "hello"
9
    a[lastWord] // "world"
10
    a['last word'] // "world"

注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

1
    const keyA = { a: 1 };
2
    const keyB = { b: 2 };
3

4
    const myObject = {
5
      [keyA]: "valueA",
6
      [keyB]: "valueB",
7
    };
8

9
    myObject; // Object {[object Object]: "valueB"}

上面代码中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性

方法的 name 属性#

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性

1
    const person = {
2
        sayName() {
3
            console.log('hello!')
4
        },
5
    }
6

7
    person.sayName.name // "sayName"

如果对象的方法使用了取值函数(getter)和存值函数(setter)，则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set

1
    const obj = {
2
        get foo() {},
3
        set foo(x) {},
4
    }
5

6
    obj.foo.name
7
    // TypeError: Cannot read property 'name' of undefined
8

9
    const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo')
10

11
    descriptor.get.name // "get foo"
12
    descriptor.set.name // "set foo"

有两种特殊情况: bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。

1
    new Function().name // "anonymous"
2

3
    var doSomething = function () {
4
        // ...
5
    }
6
    doSomething.bind().name // "bound doSomething"

如果对象的方法是一个 Symbol 值，那么name属性返回的是这个 Symbol 值的描述。

1
    const key1 = Symbol('description')
2
    const key2 = Symbol()
3
    let obj = {
4
        [key1]() {},
5
        [key2]() {},
6
    }
7
    obj[key1].name // "[description]"
8
    obj[key2].name // ""

Object.is()#

ES5 比较两个值是否相等，只有两个运算符: 相等运算符(==)和严格相等运算符(===)。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。 JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。

ES6 提出“Same-value equality”(同值相等)算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符(===)的行为基本一致。不同之处只有两个: 一是+0不等于-0，二是NaN等于自身。

1
    Object.is('foo', 'foo')  // true
2
    Object.is({}, {})   // false
3

4
    +0 === -0 //true
5
    NaN === NaN // false
6

7
    Object.is(+0, -0) // false
8
    Object.is(NaN, NaN) // true

ES5 可以通过下面的代码，部署Object.is。

1
    Object.defineProperty(Object, 'is', {
2
        value: function (x, y) {
3
            if (x === y) {
4
                // 针对+0 不等于 -0的情况
5
                return x !== 0 || 1 / x === 1 / y
6
            }
7
            // 针对NaN的情况
8
            return x !== x && y !== y
9
        },
10
        configurable: true,
11
        enumerable: false,
12
        writable: true,
13
    })

Object.assign()#

用法#

Object.assign方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象(target)。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象

1
    const target = { a: 1 }
2

3
    const source1 = { b: 2 }
4
    const source2 = { c: 3 }
5

6
    Object.assign(target, source1, source2)
7
    target // {a:1, b:2, c:3}

如果只有一个参数，Object.assign会直接返回该参数。

1
  const obj = { a: 1 }
2
  Object.assign(obj) === obj // true

如果该参数不是对象，则会先转成对象，然后返回。

1
  typeof Object.assign(2) // "object"

由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

1
  Object.assign(undefined) // 报错
2
  Object.assign(null) // 报错

如果非对象参数出现在源对象的位置(即非首参数)，那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。

1
  let obj = { a: 1 };
2
  Object.assign(obj, undefined) === obj; // true
3
  Object.assign(obj, null) === obj; // true

其他类型的值(即数值、字符串和布尔值)不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

1
  const v1 = "abc"
2
  const v2 = true
3
  const v3 = 10
4

5
  const obj = Object.assign({}, v1, v2, v3)
6
  console.log(obj) // { "0": "a", "1": "b", "2": "c" }

上面代码中，v1、v2、v3分别是字符串、布尔值和数值，结果只有字符串合入目标对象(以字符数组的形式)，数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性。

1
  Object(true) // {[[PrimitiveValue]]: true}
2
  Object(10) //  {[[PrimitiveValue]]: 10}
3
  Object("abc") // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代码中，布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性[[PrimitiveValue]]上面，这个属性是不会被Object.assign拷贝的。只有字符串的包装对象，会产生可枚举的实义属性，那些属性则会被拷贝。

Object.assign拷贝的属性是有限制的，只拷贝源对象的自身属性(不拷贝继承属性)，也不拷贝不可枚举的属性(enumerable: false)。

1
    Object.assign(
2
        { b: 'c' },
3
        Object.defineProperty({}, 'invisible', {
4
            enumerable: false,
5
            value: 'hello',
6
        })
7
    )
8
    // { b: 'c' }

上面代码中，Object.assign要拷贝的对象只有一个不可枚举属性invisible，这个属性并没有被拷贝进去。属性名为 Symbol 值的属性，也会被Object.assign拷贝。

1
  Object.assign({ a: "b" }, { [Symbol("c")]: "d" })
2
  // { a: 'b', Symbol(c): 'd' }

注意#

浅拷贝#

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

1
    const obj1 = { a: { b: 1 } }
2
    const obj2 = Object.assign({}, obj1)
3

4
    obj1.a.b = 2
5
    obj2.a.b // 2

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。

同名属性的替换#

对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加

1
    const target = { a: { b: 'c', d: 'e' } }
2
    const source = { a: { b: 'hello' } }
3
    Object.assign(target, source)
4
    // { a: { b: 'hello' } }

上面代码中，target对象的a属性被source对象的a属性整个替换掉了，而不会得到{ a: { b: 'hello', d: 'e' } }的结果。这通常不是开发者想要的，需要特别小心。一些函数库提供Object.assign的定制版本(比如 Lodash 的_.defaultsDeep方法)，可以得到深拷贝的合并。

数组的处理#

Object.assign可以用来处理数组，但是会把数组视为对象。

1
  Object.assign([1, 2, 3], [4, 5]);
2
  // [4, 5, 3]

上面代码中，Object.assign把数组视为属性名为 0、1、2 的对象，因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。

取值函数的处理#

Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

1
    const source = {
2
        get foo() {
3
            return 1
4
        },
5
    }
6
    const target = {}
7

8
    Object.assign(target, source)
9
    // { foo: 1 }

上面代码中，source对象的foo属性是一个取值函数，Object.assign不会复制这个取值函数，只会拿到值以后，将这个值复制过去。

常见用途#

为对象添加属性#

1
    class Point {
2
        constructor(x, y) {
3
            Object.assign(this, { x, y })
4
        }
5
    }
6

7
  // 等价于
8
    class Point2 {
9
        constructor(x, y) {
10
            this.x = x
11
            this.y = y
12
        }
13
    }

上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。

为对象添加方法#

1
    Object.assign(SomeClass.prototype, {
2
        someMethod(arg1, arg2) {},
3
        anotherMethod() {},
4
    })
5

6
    // 等同于下面的写法
7
    SomeClass.prototype.someMethod = function (arg1, arg2) {}
8
    SomeClass.prototype.anotherMethod = function () {}

上面代码使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用Object.assign方法添加到SomeClass.prototype之中。

克隆对象#

1
    function clone(origin) {
2
        return Object.assign({}, origin)
3
    }

上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。

不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码。

1
    function clone(origin) {
2
        let originProto = Object.getPrototypeOf(origin)
3
        return Object.assign(Object.create(originProto), origin)
4
    }

合并多个对象#

将多个对象合并到某个对象。

1
  const merge = (target, ...sources) => Object.assign(target, ...sources)

如果希望合并后返回一个新对象，可以改写上面函数，对一个空对象合并。

1
  const merge = (...sources) => Object.assign({}, ...sources)

为属性指定默认值#

1
    const DEFAULTS = {
2
        logLevel: 0,
3
        outputFormat: 'html',
4
    }
5

6
    function processContent(options) {
7
        options = Object.assign({}, DEFAULTS, options)
8
        console.log(options)
9
        // ...
10
    }

上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。

注意，由于存在浅拷贝的问题，DEFAULTS对象和options对象的所有属性的值，最好都是简单类型，不要指向另一个对象。否则，DEFAULTS对象的该属性很可能不起作用。

1
    const DEFAULTS = {
2
        url: {
3
            host: 'example.com',
4
            port: 7070,
5
        },
6
    }
7

8
    processContent({ url: { port: 8000 } })
9
    // {
10
    //   url: {port: 8000}
11
    // }

上面代码的原意是将url.port改成 8000，url.host不变。实际结果却是options.url覆盖掉DEFAULTS.url，所以url.host就不存在了

属性的可枚举性和遍历#

可枚举性#

对象的每个属性都有一个描述对象(Descriptor)，用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

1
    let obj = { foo: 123 }
2
    Object.getOwnPropertyDescriptor(obj, 'foo')
3
    //  {
4
    //    value: 123,
5
    //    writable: true,
6
    //    enumerable: true,
7
    //    configurable: true
8
    //  }

描述对象的enumerable属性，称为”可枚举性“，如果该属性为false，就表示某些操作会忽略当前属性

目前，有四个操作会忽略enumerable为false的属性。

for...in循环: 只遍历对象自身的和继承的可枚举的属性。
Object.keys(): 返回对象自身的所有可枚举的属性的键名。
JSON.stringify(): 只串行化对象自身的可枚举的属性。
Object.assign(): 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

这四个操作之中，前三个是 ES5 就有的，最后一个Object.assign()是 ES6 新增的。其中，只有for...in会返回继承的属性，其他三个方法都会忽略继承的属性，只处理对象自身的属性。实际上，引入“可枚举”(enumerable)这个概念的最初目的，就是让某些属性可以规避掉for...in操作，不然所有内部属性和方法都会被遍历到。比如，对象原型的toString方法，以及数组的length属性，就通过“可枚举性”，从而避免被for...in遍历到。

1
    Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
2
    // false
3

4
    Object.getOwnPropertyDescriptor([], 'length').enumerable
5
    // false

另外，ES6 规定，所有 Class 的原型的方法都是不可枚举的

1
    Object.getOwnPropertyDescriptor(
2
        class { foo() {} }.prototype, 'foo'
3
    ).enumerable
4
    // false

总的来说，操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以，尽量不要用for...in循环，而用Object.keys()代替

属性的遍历#

ES6 一共有 5 种方法可以遍历对象的属性。

for…in#

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

Object.keys(obj)#

Object.keys返回一个数组，包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

Object.getOwnPropertyNames(obj)#

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性(不含 Symbol 属性，但是包括不可枚举属性)的键名。

Object.getOwnPropertySymbols(obj)#

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

Reflect.ownKeys(obj)#

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列。

最后遍历所有 Symbol 键，按照加入时间升序排列。

1
  Reflect.ownKeys({ [Symbol()]: 0, b: 0, 10: 0, 2: 0, a: 0 })
2
  // ['2', '10', 'b', 'a', Symbol()]

上面代码中，Reflect.ownKeys方法返回一个数组，包含了参数对象的所有属性。这个数组的属性次序是这样的，首先是数值属性2和10，其次是字符串属性b和a，最后是 Symbol 属性

Object.getOwnPropertyDescriptors()#

前面说过，Object.getOwnPropertyDescriptor方法会返回某个对象属性的描述对象(descriptor)。ES2017 引入了Object.getOwnPropertyDescriptors方法，返回指定对象所有自身属性(非继承属性)的描述对象

1
    const obj = {
2
        foo: 123,
3
        get bar() {
4
            return 'abc'
5
        },
6
    }
7

8
    Object.getOwnPropertyDescriptors(obj)
9
    // { foo:
10
    //    { value: 123,
11
    //      writable: true,
12
    //      enumerable: true,
13
    //      configurable: true },
14
    //   bar:
15
    //    { get: [Function: get bar],
16
    //      set: undefined,
17
    //      enumerable: true,
18
    //      configurable: true } }

展开收起

上面代码中，Object.getOwnPropertyDescriptors方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象

该方法的实现非常容易。

1
    function getOwnPropertyDescriptors(obj) {
2
        const result = {}
3
        for (let key of Reflect.ownKeys(obj)) {
4
            result[key] = Object.getOwnPropertyDescriptor(obj, key)
5
        }
6
        return result
7
    }

该方法的引入目的，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题

1
    const source = {
2
        set foo(value) {
3
            console.log(value)
4
        },
5
    }
6

7
    const target1 = {}
8
    Object.assign(target1, source)
9

10
    Object.getOwnPropertyDescriptor(target1, 'foo')
11
    // { value: undefined,
12
    //   writable: true,
13
    //   enumerable: true,
14
    //   configurable: true }

上面代码中，source对象的foo属性的值是一个赋值函数，Object.assign方法将这个属性拷贝给target1对象，结果该属性的值变成了undefined。这是因为Object.assign方法总是拷贝一个属性的值，而不会拷贝它背后的赋值方法或取值方法

这时，Object.getOwnPropertyDescriptors方法配合Object.defineProperties方法，就可以实现正确拷贝

1
    const source = {
2
        set foo(value) {
3
            console.log(value)
4
        },
5
    }
6

7
    const target2 = {}
8
    Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source))
9
    Object.getOwnPropertyDescriptor(target2, 'foo')
10
    // { get: undefined,
11
    //   set: [Function: set foo],
12
    //   enumerable: true,
13
    //   configurable: true }

上面代码中，两个对象合并的逻辑可以写成一个函数

1
  const shallowMerge = (target, source) =>
2
    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source))

Object.getOwnPropertyDescriptors方法的另一个用处，是配合Object.create方法，将对象属性克隆到一个新对象。这属于浅拷贝

1
    const clone = Object.create(
2
        Object.getPrototypeOf(obj),
3
        Object.getOwnPropertyDescriptors(obj))
4

5
    // 或者
6

7
    const shallowClone = (obj) =>
8
        Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj))

另外，Object.getOwnPropertyDescriptors方法可以实现一个对象继承另一个对象。以前，继承另一个对象，常常写成下面这样。

1
    const obj = {
2
        __proto__: prot,
3
        foo: 123,
4
    }

ES6 规定__proto__只有浏览器要部署，其他环境不用部署。如果去除__proto__，上面代码就要改成下面这样

1
    const obj = Object.create(prot)
2
    obj.foo = 123
3

4
    // 或者
5

6
    const obj = Object.assign(Object.create(prot), {
7
        foo: 123,
8
    })

有了Object.getOwnPropertyDescriptors，我们就有了另一种写法

1
    const obj = Object.create(
2
        prot,
3
        Object.getOwnPropertyDescriptors({
4
            foo: 123,
5
        })
6
    )

Object.getOwnPropertyDescriptors也可以用来实现 Mixin(混入)模式

1
    let mix = (object) => ({
2
        with: (...mixins) =>
3
            mixins.reduce(
4
                (c, mixin) => Object.create(c, Object.getOwnPropertyDescriptors(mixin)),
5
                object
6
            ),
7
    })
8

9
    // multiple mixins example
10
    let a = { a: 'a' }
11
    let b = { b: 'b' }
12
    let c = { c: 'c' }
13
    let d = mix(c).with(a, b)
14

15
    d.c // "c"
16
    d.b // "b"
17
    d.a // "a"

展开收起

上面代码返回一个新的对象d，代表了对象a和b被混入了对象c的操作。

出于完整性的考虑，Object.getOwnPropertyDescriptors进入标准以后，以后还会新增Reflect.getOwnPropertyDescriptors方法

ES6 中的隐式原型#

`proto`属性#

__proto__属性(前后各两个下划线)，用来读取或设置当前对象的prototype对象。目前，所有浏览器(包括 IE11)都部署了这个属性

1
    // es5 的写法
2
    const obj = {
3
        method: function () {},
4
    }
5
    obj.__proto__ = someOtherObj
6

7
    // es6 的写法
8
    var obj = Object.create(someOtherObj)
9
    obj.method = function () {}

该属性没有写入 ES6 的正文，而是写入了附录，原因是__proto__前后的双下划线，说明它本质上是一个内部属性，而不是一个正式的对外的 API，只是由于浏览器广泛支持，才被加入了 ES6。

标准明确规定，只有浏览器必须部署这个属性，其他运行环境不一定需要部署，而且新的代码最好认为这个属性是不存在的。因此，无论从语义的角度，还是从兼容性的角度，都不要使用这个属性，而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。

实现上，__proto__调用的是Object.prototype.__proto__，具体实现如下。

1
    Object.defineProperty(Object.prototype, '__proto__', {
2
        get() {
3
            let _thisObj = Object(this)
4
            return Object.getPrototypeOf(_thisObj)
5
        },
6
        set(proto) {
7
            if (this === undefined || this === null) {
8
                throw new TypeError()
9
            }
10
            if (!isObject(this)) {
11
                return undefined
12
            }
13
            if (!isObject(proto)) {
14
                return undefined
15
            }
16
            let status = Reflect.setPrototypeOf(this, proto)
17
            if (!status) {
18
                throw new TypeError()
19
            }
20
        },
21
    })
22

23
    function isObject(value) {
24
        return Object(value) === value
25
    }

展开收起

如果一个对象本身部署了__proto__属性，该属性的值就是对象的原型。

1
  Object.getPrototypeOf({ __proto__: null })
2
  // null

Object.create()#

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

1
  Object.create(proto, [propertiesObject])

Object.create() ，可以理解为继承一个对象，添加的属性是在原型下

1
    let a = { rep: 'apple' }
2
    let b = Object.create(a)  //等价于 b.__proto__ = a
3

4
    console.log(b) // {}
5
    console.log(b.__proto__) // {rep: "apple"}
6
    console.log(b.rep) // {rep: "apple"}

此时这个值不是b自身的，是它通过原型链__proto__来访问到b的值

Object.setPrototypeOf()#

Object.setPrototypeOf方法的作用与__proto__相同，用来设置一个对象的prototype对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法

1
    // 格式
2
    Object.setPrototypeOf(object, prototype)
3

4
    // 用法
5
    const o = Object.setPrototypeOf({}, null)

该方法等同于下面的函数。

1
    function setPrototypeOf(obj, proto) {
2
        obj.__proto__ = proto
3
        return obj
4
    }

下面是一个例子。

1
    let proto = {}
2
    let obj = { x: 10 }
3
    Object.setPrototypeOf(obj, proto)
4

5
    proto.y = 20
6
    proto.z = 40
7

8
    obj.x // 10
9
    obj.y // 20
10
    obj.z // 40

上面代码将proto对象设为obj对象的原型，所以从obj对象可以读取proto对象的属性。

如果第一个参数不是对象，会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果

1
    Object.setPrototypeOf(1, {}) === 1 // true
2
    Object.setPrototypeOf('foo', {}) === 'foo' // true
3
    Object.setPrototypeOf(true, {}) === true // true

由于undefined和null无法转为对象，所以如果第一个参数是undefined或null，就会报错

Object.getPrototypeOf()#

该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象

1
  Object.getPrototypeOf(obj)

下面是一个例子。

1
    function Rectangle() {}
2

3
    const rec = new Rectangle()
4

5
    Object.getPrototypeOf(rec) === Rectangle.prototype
6
  Object.getPrototypeOf(rec) === rec.__proto__  //不推荐这种写法
7
    // true
8

9
    Object.setPrototypeOf(rec, Object.prototype)
10
    Object.getPrototypeOf(rec) === Rectangle.prototype // false
11
  Object.getPrototypeOf(rec) === Object.prototype // true

如果参数不是对象，会被自动转为对象。

1
    // 等同于 Object.getPrototypeOf(Number(1))
2
    Object.getPrototypeOf(1)
3
    // Number {[[PrimitiveValue]]: 0}
4

5
    // 等同于 Object.getPrototypeOf(String('foo'))
6
    Object.getPrototypeOf('foo')
7
    // String {length: 0, [[PrimitiveValue]]: ""}
8

9
    // 等同于 Object.getPrototypeOf(Boolean(true))
10
    Object.getPrototypeOf(true)
11
    // Boolean {[[PrimitiveValue]]: false}
12

13
    Object.getPrototypeOf(1) === Number.prototype // true
14
    Object.getPrototypeOf('foo') === String.prototype // true
15
    Object.getPrototypeOf(true) === Boolean.prototype // true

展开收起

如果参数是undefined或null，它们无法转为对象，所以会报错

super 关键字#

我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

1
    const proto = {
2
        foo: 'hello',
3
    }
4

5
    const obj = {
6
        foo: 'world',
7
        find() {
8
            return super.foo
9
        },
10
    }
11

12
    Object.setPrototypeOf(obj, proto)
13
    obj.find() // "hello"

上面代码中，对象obj的find方法之中，通过super.foo引用了原型对象proto的foo属性。

注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错

1
    // 报错
2
    const obj = {
3
        foo: super.foo,
4
    }
5

6
    // 报错
7
    const obj = {
8
        foo: () => super.foo,
9
    }
10

11
    // 报错
12
    const obj = {
13
        foo: function () {
14
            return super.foo
15
        },
16
    }

展开收起

上面三种super的用法都会报错，因为对于 JavaScript 引擎来说，这里的super都没有用在对象的方法之中。第一种写法是super用在属性里面，第二种和第三种写法是super用在一个函数里面，然后赋值给foo属性。目前，只有对象方法的简写法（foo(){}）可以让 JavaScript 引擎确认，定义的是对象的方法。

JavaScript 引擎内部，super.foo等同于Object.getPrototypeOf(this).foo(属性)或Object.getPrototypeOf(this).foo.call(this)(方法)。

1
    const proto = {
2
        x: 'hello',
3
        foo() {
4
            console.log(this.x)
5
        },
6
    }
7

8
    const obj = {
9
        x: 'world',
10
        foo() {
11
            super.foo()
12
        },
13
    }
14

15
    Object.setPrototypeOf(obj, proto)
16

17
    obj.foo() // "world"

展开收起

上面代码中，super.foo指向原型对象proto的foo方法，但是绑定的this却还是当前对象obj，因此输出的就是world

Object.keys()，Object.values()，Object.entries()#

Object.keys()#

ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

1
    var obj = { foo: 'bar', baz: 42 }
2
    Object.keys(obj)
3
    // ["foo", "baz"]

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用

1
    let { keys, values, entries } = Object
2
    let obj = { a: 1, b: 2, c: 3 }
3

4
    for (let key of keys(obj)) {
5
        console.log(key) // 'a', 'b', 'c'
6
    }
7

8
    for (let value of values(obj)) {
9
        console.log(value) // 1, 2, 3
10
    }
11

12
    for (let [key, value] of entries(obj)) {
13
        console.log([key, value]) // ['a', 1], ['b', 2], ['c', 3]
14
    }

Object.values()#

Object.values方法返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值，属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

1
    const obj = { foo: 'bar', baz: 42 }
2
    Object.values(obj)  // ["bar", 42]
3

4
  var an_obj = { 100: 'a', 2: 'b', 7: 'c' }
5
  console.log(Object.values(an_obj)); // ['b', 'c', 'a']

注：

Object.values只返回对象自身的可遍历属性
```
1
 const obj = Object.create({}, { p: { value: 42 } })
2
 Object.values(obj) // []
```
上面代码中，Object.create方法的第二个参数添加的对象属性(属性p)，如果不显式声明，默认是不可遍历的，因为p的属性描述对象的enumerable默认是false，Object.values不会返回这个属性。只要把enumerable改成true，Object.values就会返回属性p的值即：
```
1
 const obj = Object.create(
2
     {},
3
     {
4
         p: {
5
             value: 42,
6
             enumerable: true,
7
         },
8
     }
9
 )
10
 Object.values(obj) // [42]
```

Object.values会过滤属性名为 Symbol 值的属性

1
 Object.values({ [Symbol()]: 123, foo: 'abc' })
2
 // ['abc']

如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组
```
1
 Object.values('foo')
2
 // ['f', 'o', 'o']
```
上面代码中，字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此，Object.values返回每个属性的键值，就是各个字符组成的一个数组
如果参数不是对象，Object.values会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。所以，Object.values会返回空数组

1
 Object.values(42) // []
2
 Object.values(true) // []

Object.entries#

Object.entries方法返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组,除了返回值不一样，该方法的行为与Object.values基本一致

1
    const obj = { foo: 'bar', baz: 42 }
2
    Object.entries(obj)
3
    // [ ["foo", "bar"], ["baz", 42] ]

如果原对象的属性名是一个 Symbol 值，该属性会被忽略，而Reflect.ownEntries()方法，返回对象自身的所有属性

1
    Object.entries({ [Symbol()]: 123, foo: 'abc' })
2
    // [ [ 'foo', 'abc' ] ]

注：

Object.entries的基本用途是遍历对象的属性

1
 let obj = { one: 1, two: 2 }
2
 for (let [k, v] of Object.entries(obj)) {
3
     console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`)
4
 }
5
 // "one": 1
6
 // "two": 2

Object.entries方法的另一个用处是，将对象转为真正的Map结构

1
 const obj = { foo: 'bar', baz: 42 }
2
 const map = new Map(Object.entries(obj))
3
 map // Map { foo: "bar", baz: 42 }

对象的扩展运算符 `...`#

解构赋值#

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面

1
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
2
    x // 1
3
    y // 2
4
    z // { a: 3, b: 4 }

上面代码中，变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(a和b)，将它们连同值一起拷贝过来

注:

由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象
```
1
 let { x, y, ...z } = null // 运行时错误
2
 let { x, y, ...z } = undefined // 运行时错误
```

解构赋值必须是最后一个参数，否则会报错

1
 let { ...x, y, z } = obj // 句法错误
2
 let { x, ...y, ...z } = obj // 句法错误

解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本
```
1
 let obj = { a: { b: 1 } }
2
 let { ...x } = obj
3
 obj.a.b = 2
4
 x.a.b // 2
```
扩展运算符的解构赋值，不能复制继承自原型对象的属性。
```
1
 let o1 = { a: 1 }
2
 let o2 = { b: 2 }
3
 o2.__proto__ = o1
4
 let { ...o3 } = o2
5
 o3 // { b: 2 }
6
 o3.a // undefined
```
上面代码中，对象o3复制了o2，但是只复制了o2自身的属性，没有复制它的原型对象o1的属性例： const o = Object.create({ x: 1, y: 2 }) o.z = 3
```
1
 let { x, ...newObj } = o
2
 let { y, z } = newObj
3
 x // 1
4
 y // undefined
5
 z // 3
```
上面代码中，变量x是单纯的解构赋值，所以可以读取对象o继承的属性；变量y和z是扩展运算符的解构赋值，只能读取对象o自身的属性，所以变量z可以赋值成功，变量y取不到值。

ES6 规定，变量声明语句之中，如果使用解构赋值，扩展运算符后面必须是一个变量名，而不能是一个解构赋值表达式，所以上面代码引入了中间变量newObj，如果写成下面这样会报错
```
1
 let { x, ...{ y, z } } = o;
2
 // SyntaxError: ... must be followed by an identifier in declaration contexts
```
解构赋值的一个用处，是扩展某个函数的参数，引入其他操作
```
1
 function baseFunction({ a, b }) {
2
     // ...
3
 }
4
 function wrapperFunction({ x, y, ...restConfig }) {
5
     // 使用 x 和 y 参数进行操作
6
     // 其余参数传给原始函数
7
     return baseFunction(restConfig)
8
 }
```
上面代码中，原始函数baseFunction接受a和b作为参数，函数wrapperFunction在baseFunction的基础上进行了扩展，能够接受多余的参数，并且保留原始函数的行为

扩展运算符`...`#

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性，拷贝到当前对象之中，这等同于使用Object.assign方法

1
    let z = { a: 3, b: 4 }
2
    let n = { ...z }
3
    n // { a: 3, b: 4 }
4
  // 等同于
5
  let n2 = Object.assign({}, z)

上面的例子只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法

1
    // 写法一 （不推荐）
2
    const clone1 = {
3
        __proto__: Object.getPrototypeOf(obj),
4
        ...obj,
5
    }
6

7
    // 写法二
8
    const clone2 = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj)
9

10
    // 写法三
11
    const clone3 = Object.create(
12
        Object.getPrototypeOf(obj),
13
        Object.getOwnPropertyDescriptors(obj)
14
    )

注：

扩展运算符可以用于合并两个对象

1
 let ab = { ...a, ...b }
2
 // 等同于
3
 let ab2 = Object.assign({}, a, b)

如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉

1
 let a = { x: 'x', y: 'y', z: 'z' }
2
 let aWithOverrides = { ...a, x: 1, y: 2 }
3
 // 等同于
4
 let aWithOverrides = { ...a, ...{ x: 1, y: 2 } }
5
 // 等同于
6
 let x = 1,
7
     y = 2,
8
     aWithOverrides = { ...a, x, y }
9
 // 等同于
10
 let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 })
11
 // {x: 1, y: 2, z: 'z'}

如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值

1
 let a = { x: 'x', z: 'z' }
2
 let aWithDefaults = { x: 1, y: 2, ...a }
3
 // 等同于
4
 let aWithDefaults2 = Object.assign({}, { x: 1, y: 2 }, a)
5
 // 等同于
6
 let aWithDefaults3 = Object.assign({ x: 1, y: 2 }, a)
7
 // {x: 'x', y: 2, z: 'z'}

与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式

1
 let x = 2
2
 const obj = {
3
     ...(x > 1 ? { a: 1 } : {}),
4
     b: 2,
5
 }
6
 // {a: 1, b: 2}

如果扩展运算符后面是一个空对象，则没有任何效果。
```
1
 {...{}, a: 1}
2
 // { a: 1 }
```
如果扩展运算符的参数是null或undefined，这两个值会被忽略，不会报错
```
1
 let emptyObject = { ...null, ...undefined } // {} 不报错
```

扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的。

1
 // 并不会抛出错误，因为 x 属性只是被定义，但没执行
2
 let aWithXGetter = {
3
     ...a,
4
     get x() {
5
         throw new Error('not throw yet')
6
     },
7
 }
8

9
 // 会抛出错误，因为 x 属性被执行了
10
 let runtimeError = {
11
     ...a,
12
     ...{
13
         get x() {
14
             throw new Error('throw now')
15
         },
16
     },
17
 }

展开收起

Class的继承

Sun, 26 Jun 2022 00:22:19 GMT

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

extends关键字#

Class 可以通过extends关键字实现继承

1
    class Point {
2
        constructor(x, y) {
3
            this.x = x;
4
            this.y = y;
5
        }
6

7
        toString() {
8
            return "(" + this.x + ", " + this.y + ")";
9
        }
10
    }
11

12
    class ColorPoint extends Point {
13
        constructor(x, y, color) {
14
            super(x, y); // 调用父类的constructor(x, y)
15
            this.color = color;
16
        }
17

18
        toString() {
19
            return this.color + " " + super.toString(); // 调用父类的toString()
20
        }
21
    }

展开收起

上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。 constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

Object.getPrototypeOf()#

Object.getPrototypeOf方法可以用来从子类上获取父类。

1
  Object.getPrototypeOf(ColorPoint) === Point
2
  // true

因此，可以使用这个方法判断，一个类是否继承了另一个类。

super#

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

作为函数调用#

super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

1
    class A {}
2

3
    class B extends A {
4
        constructor() {
5
            super()
6
        }
7
    }

子类B的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错

super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)

1
    class A {
2
        constructor() {
3
            console.log(new.target.name);
4
        }
5
    }
6
    class B extends A {
7
        constructor() {
8
            super();
9
        }
10
    }
11
    new A(); // A
12
    new B(); // B

new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。

作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错

###作为对象使用 ### super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类

1
    class A {
2
        p() {
3
            return 2
4
        }
5
    }
6

7
    class B extends A {
8
        constructor() {
9
            super()
10
            console.log(super.p()) // 2
11
        }
12
    }
13

14
    let b = new B()

上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的，而定义在父类原型对象上的，super 就可以直接取到

1
    class A {
2
        constructor() {
3
            this.p = 2
4
        }
5
    }
6
    A.prototype.x = 2
7

8
    class B extends A {
9
        p() {
10
            return super.p
11
        }
12
        x() {
13
            return super.x
14
        }
15
    }
16

17
    let b = new B()
18
    b.p() // undefined
19
    b.x() // 2

展开收起

ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

1
    class A {
2
        constructor() {
3
            this.x = 1
4
        }
5
        print() {
6
            console.log(this.x)
7
        }
8
    }
9

10
    class B extends A {
11
        constructor() {
12
            super()
13
            this.x = 2
14
        }
15
        m() {
16
            super.print()
17
        }
18
    }
19

20
    let b = new B()
21
    b.m() // 2

展开收起

上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()内部的this指向子类B的实例，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)。

由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

1
    class A {
2
        constructor() {
3
            this.x = 1
4
        }
5
    }
6

7
    class B extends A {
8
        constructor() {
9
            super()
10
            this.x = 2
11
            super.x = 3
12
            console.log(super.x) // undefined
13
            console.log(this.x) // 3
14
        }
15
    }
16

17
    let b = new B()

展开收起

上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。

如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。

1
    class Parent {
2
        static myMethod(msg) {
3
            console.log('static', msg)
4
        }
5

6
        myMethod(msg) {
7
            console.log('instance', msg)
8
        }
9
    }
10

11
    class Child extends Parent {
12
        static myMethod(msg) {
13
            super.myMethod(msg)
14
        }
15

16
        myMethod(msg) {
17
            super.myMethod(msg)
18
        }
19
    }
20

21
    Child.myMethod(1) // static 1
22

23
    let child = new Child()
24
    child.myMethod(2) // instance 2

展开收起

上面代码中，super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。

另外，在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。

1
    class A {
2
        constructor() {
3
            this.x = 1
4
        }
5
        static print() {
6
            console.log(this.x)
7
        }
8
    }
9

10
    class B extends A {
11
        constructor() {
12
            super()
13
            this.x = 2
14
        }
15
        static m() {
16
            super.print()
17
        }
18
        m() {
19
            super.print()
20
        }
21
    }
22

23
    B.x = 3
24
    B.m() // 3
25
    new B().m() //TypeError: (intermediate value).print is not a function

展开收起

静态方法B.m里面，super.print指向父类的静态方法。这个方法里面的this指向的是B，而不是B的实例，而普通方法B.m()中，由于super指向父类的原型对象A.prototype，其中没有 print()这个方法，所以会报错

最后，由于对象总是继承其他对象的，所以可以在任意一个对象中，使用super关键字

1
    let obj = {
2
        toString() {
3
            return "MyObject: " + super.toString()
4
        },
5
    }
6

7
    obj.toString() // MyObject: [object Object]

类的 `prototype` 属性和`proto`属性#

大多数浏览器的 ES5 实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。

子类的__proto__属性，表示构造函数的继承，总是指向父类。
子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

1
class A {}
2

3
class B extends A {}
4

5
B.__proto__ === A // true
6
B.prototype.__proto__ === A.prototype // true

这样的结果是因为，类的继承是按照下面的模式实现的:

1
  class A {}
2

3
  class B {}
4

5
  // B 的实例继承 A 的实例
6
  Object.setPrototypeOf(B.prototype, A.prototype)
7
  // 等同于B.prototype.__proto__ = A.prototype
8
  // B 继承 A 的静态属性
9

10
  Object.setPrototypeOf(B, A)
11
  // 等同于B.__proto__ = A
12

13
  const b = new B()

这两条继承链，可以这样理解: 作为一个对象，子类(B)的原型(__proto__属性)是父类(A)；作为一个构造函数，子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例

实例的 `proto` 属性#

子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性。也就是说，子类的原型的原型，是父类的原型

1
    class A {}
2
    class B extends A {}
3
    let a = new A()
4
    let b = new B()
5

6
  b.__proto__ === B.prototype //true
7
  b.__proto__.__proto__ === a.__proto__ //true

因此，通过子类实例的__proto__.__proto__属性，可以修改父类实例的行为

1
    b.__proto__.__proto__.fun = function () {
2
        console.log("fun")
3
    }
4

5
    a.fun() // "fun"

原生构造函数的继承#

原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()

以前，这些原生构造函数是无法继承的，比如，不能自己定义一个Array的子类。

1
    function MyArray() {
2
        Array.apply(this, arguments);
3
    }
4

5
    MyArray.prototype = Object.create(Array.prototype, {
6
        constructor: {
7
            value: MyArray,
8
            writable: true,
9
            configurable: true,
10
            enumerable: true,
11
        },
12
    })

上面代码定义了一个继承 Array 的MyArray类。但是，这个类的行为与Array完全不一致。

1
  let colors = new MyArray()
2
    colors[0] = 'red'
3
    colors.length // 0
4

5
    colors.length = 0
6
    colors[0] // "red"

之所以会发生这种情况，是因为子类无法获得原生构造函数的内部属性，通过Array.apply()或者分配给原型对象都不行。原生构造函数会忽略apply方法传入的this，也就是说，原生构造函数的this无法绑定，导致拿不到内部属性。

ES5 是先新建子类的实例对象this，再将父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数。比如，Array构造函数有一个内部属性[[DefineOwnProperty]]，用来定义新属性时，更新length属性，这个内部属性无法在子类获取，导致子类的length属性行为不正常。

下面的例子中，我们想让一个普通对象继承Error对象。

1
  let e = {}
2

3
  Object.getOwnPropertyNames(Error.call(e))
4
  // [ 'stack' ]
5

6
  Object.getOwnPropertyNames(e)
7
  // []

上面代码中，我们想通过Error.call(e)这种写法，让普通对象e具有Error对象的实例属性。但是，Error.call()完全忽略传入的第一个参数，而是返回一个新对象，e本身没有任何变化。这证明了Error.call(e)这种写法，无法继承原生构造函数。

ES6 允许继承原生构造函数定义子类，因为 ES6 是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。

下面是ES6中一个继承Array的例子。

1
    class MyArray extends Array {
2
        constructor(...args) {
3
            super(...args)
4
        }
5
    }
6

7
    let arr = new MyArray();
8
    arr[0] = 12
9
    arr.length // 1
10

11
    arr.length = 0
12
    arr[0] // undefined

上面代码定义了一个MyArray类，继承了Array构造函数，因此就可以从MyArray生成数组的实例。这意味着，ES6 可以自定义原生数据结构(比如Array、String等)的子类，这是 ES5 无法做到的。

上面这个例子也说明，extends关键字不仅可以用来继承类，还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上，定义自己的数据结构。

下面就是定义了一个带版本功能的数组。

1
    class VersionedArray extends Array {
2
        constructor() {
3
            super()
4
            this.history = [[]]
5
        }
6
        commit() {
7
            this.history.push(this.slice())
8
        }
9
        revert() {
10
            this.splice(0, this.length, ...this.history[this.history.length - 1])
11
        }
12
    }
13

14
    let x = new VersionedArray()
15

16
    x.push(1)
17
    x.push(2)
18
    x // [1, 2]
19
    x.history // [[]]
20

21
    x.commit()
22
    x.history // [[], [1, 2]]
23

24
    x.push(3)
25
    x // [1, 2, 3]
26
    x.history // [[], [1, 2]]
27

28
    x.revert()
29
    x // [1, 2]

展开收起

上面代码中，VersionedArray会通过commit方法，将自己的当前状态生成一个版本快照，存入history属性。revert方法用来将数组重置为最新一次保存的版本。除此之外，VersionedArray依然是一个普通数组，所有原生的数组方法都可以在它上面调用。

Class的基本用法

Sat, 25 Jun 2022 00:11:40 GMT

ES6 提供了更接近传统语言的写法，引入了 Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

简介#

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

1
    function Obj(x, y) {
2
        this.x = x
3
        this.y = y
4
    }
5

6
    Obj.prototype.add = function () {
7
        return this.x + this.y
8
    }
9

10
    let num = new Obj(1, 2)

上面的代码用 ES6 的class改写，就是下面这样

1
    class Obj {
2
        constructor(x, y){
3
            this.x = x
4
            this.y = y
5
        }
6
        add() {
7
            return this.x + this.y
8
        }
9
    }

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象

obj 类除了构造方法，还定义了一个 add() 方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法,类的数据类型就是函数，类本身就指向构造函数。

1
  class Obj {
2
    // ...
3
  }
4

5
  typeof Obj // "function"
6
  Obj === Obj.prototype.constructor // true

构造函数的 prototype 属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的 prototype 属性上面

1
    class Obj {
2
    constructor(){  }
3
        add() {  }
4
    }
5
  //等同于
6
  Obj.prototype = {
7
    constructor(){  },
8
        add() {  }
9
  }

因此在类的实例上调用方法。相当于调用原型上的方法。

constructor方法#

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加

1
  class Obj {}
2

3
  // 等同于
4
  class Obj {
5
    constructor() {}
6
  }

上面代码中，定义了一个空的类 Obj，JavaScript 引擎会自动为它添加一个空的constructor方法。 constructor方法默认返回实例对象(即this)，完全可以指定返回另外一个对象

1
    class Foo {
2
        constructor(){
3
            return {}
4
        }
5
    }
6
    new Foo() instanceof Foo  // flase

constructor 函数返回一个全新的对象，结果导致实例对象不是Foo类的实例

注：类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，构造函数不用new也可以执行。

new操作符#

众所周知，在JS中，new的作用是通过构造函数来创建一个实例对象

实际上，new 操作符帮我们做了这些事

帮我们创建了一个空对象，例如：obj；
将空对象原型的内存地址__proto__指向函数的原型对象；
利用函数的call方法，将原本指向window的绑定对象this指向了obj。（这样一来，当我们向函数中再传递实参时，对象的属性就会被挂载到obj上。）

利用函数返回对象obj。

1
 function Foo(name) {
2
     this.name = name
3
 }
4
 let foo = new Foo("aaa")
5

6
 //等价于
7
 function Foo(name) {
8
     this.name = name
9
     return this          //4
10
 }
11
 let obj = {}           //1
12
 obj.__proto__ = Foo.prototype  //2
13
 // Foo.call(obj, 'aaa')
14
 let foo = Foo.call(obj, 'aaa') //3

注：类的构造函数与普通构造函数之间的区别是，调用构造函数必须使用new 操作符。而普通构造函数如果不使用 new 调用，name就会以全局的 this （通常是 window）作为内部对象。调用类构造函数时如果忘记使用 new 则会报错。

类的实例对象#

与 ES5 一样，实例的属性除非显式定义在其本身(即定义在this对象上)，否则都是定义在原型上(即定义在class上)。

1
  //定义类
2
  class Point {
3
    constructor(x, y) {
4
      this.x = x
5
      this.y = y
6
    }
7

8
    toString() {
9
      return "(" + this.x + ", " + this.y + ")"
10
    }
11
  }
12

13
  let point = new Point(2, 3)
14

15
  point.toString() // (2, 3)
16

17
  point.hasOwnProperty("x") // true
18
  point.hasOwnProperty("y") // true
19
  point.hasOwnProperty("toString") // false
20
  point.__proto__.hasOwnProperty("toString") // true

展开收起

上面代码中，x和y都是实例对象point自身的属性(因为定义在this变量上)，所以hasOwnProperty方法返回true，而toString是原型对象的属性(因为定义在Point类上)，所以hasOwnProperty方法返回false。这些都与 ES5 的行为保持一致。

与 ES5 一样，类的所有实例共享一个原型对象。

1
  let p1 = new Point(2, 3)
2
  let p2 = new Point(3, 2)
3

4
  p1.__proto__ === p2.__proto__  //true

上面代码中，p1和p2都是Point的实例，它们的原型都是Point.prototype，所以__proto__属性是相等的。

这也意味着，可以通过实例的__proto__属性为“类”添加方法。

proto 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。

Class表达式#

与函数一样，类也可以使用表达式的形式定义

1
  const MyClass = class Me {
2
    getClassName() {
3
      return Me.name
4
    }
5
  }

上面代码使用表达式定义了一个类。需要注意的是，这个类的名字是MyClass而不是Me，Me只在 Class 的内部代码可用，指代当前类。如果类的内部没用到的话，可以省略 Me

1
  let inst = new MyClass()
2
  inst.getClassName() // Me
3
  Me.name // ReferenceError: Me is not defined

采用 Class 表达式，可以写出立即执行的 Class。

1
  let person = new (class {
2
    constructor(name) {
3
      this.name = name
4
    }
5

6
    sayName() {
7
      console.log(this.name)
8
    }
9
  })("张三")
10

11
  person.sayName() // "张三"

Class 的取值函数(getter)和存值函数(setter)#

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

1
    class MyClass {
2
        constructor() {
3
            // ...
4
        }
5
        get prop() {
6
            return "getter"
7
        }
8
        set prop(value) {
9
            console.log("setter: " + value)
10
        }
11
    }
12

13
    let inst = new MyClass()
14

15
    inst.prop = 123  // setter: 123
16

17
    inst.prop  // 'getter'

展开收起

上面代码中，prop属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。

存值函数和取值函数是设置在属性的 Descriptor 对象上的

1
  class CustomHTMLElement {
2
    constructor(element) {
3
      this.element = element
4
    }
5

6
    get html() {
7
      return this.element.innerHTML
8
    }
9

10
    set html(value) {
11
      this.element.innerHTML = value
12
    }
13
  }
14

15
  let descriptor = Object.getOwnPropertyDescriptor(
16
    CustomHTMLElement.prototype,
17
    "html"
18
  );
19

20
  "get" in descriptor // true
21
  "set" in descriptor // true

展开收起

上面代码中，存值函数和取值函数是定义在html属性的描述对象上面，这与 ES5 完全一致

Class 的 Generator 方法#

如果某个方法之前加上星号(*)，就表示该方法是一个 Generator 函数。

1
  class Foo {
2
    constructor(...args) {
3
      this.args = args;
4
    }
5
    *[Symbol.iterator]() {
6
      for (let arg of this.args) {
7
        yield arg;
8
      }
9
    }
10
  }
11

12
  for (let x of new Foo("hello", "world")) {
13
    console.log(x);
14
  }
15
  // hello
16
  // world

展开收起

上面代码中，Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。 Symbol.iterator方法返回一个Foo类的默认遍历器，for...of循环会自动调用这个遍历器

Class 的静态方法#

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

1
  class Foo {
2
    static classMethod() {
3
      return "hello"
4
    }
5
  }
6

7
  Foo.classMethod() // 'hello'
8

9
  let foo = new Foo()
10
  foo.classMethod() // TypeError: foo.classMethod is not a function

Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用Foo.classMethod()，而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。

1
    class Foo {
2
        static bar() {
3
            this.baz()
4
        }
5
        static baz() {
6
            console.log("hello")
7
        }
8
        baz() {
9
            console.log("world")
10
        }
11
    }
12

13
    Foo.bar() // hello

静态方法bar调用了this.baz，这里的this指的是Foo类，而不是Foo的实例，等同于调用Foo.baz。另外，从这个例子还可以看出，静态方法可以与非静态方法重名

父类的静态方法，可以被子类继承

1
    class Foo {
2
        static classMethod() {
3
            return "hello"
4
        }
5
    }
6

7
    class Bar extends Foo {}
8

9
    Bar.classMethod(); // 'hello'

并且，静态方法也是可以从super对象上调用的。

1
    class Foo {
2
        static classMethod() {
3
            return "hello"
4
        }
5
    }
6

7
    class Bar extends Foo {
8
        static classMethod() {
9
            return super.classMethod() + ", too"
10
        }
11
    }
12

13
    Bar.classMethod() // "hello, too"

Class 的静态属性#

类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了。

1
    class MyClass {
2
        static myStaticProp = 'aa'
3

4
        constructor() {
5
            console.log(MyClass.myStaticProp) // 'aa'
6
        }
7
    }

set 与 map

Sat, 18 Dec 2021 18:11:59 GMT

set#

基本用法#

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

set 结构的声明#

1
  let s = new Set()
2
  let s2 = new Set([1, 2, 3, 4])

set 的初始化#

Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数，用来初始化

1
  let arr = [1, 2, 3, 4]
2
  let s = new Set(arr)
3

4
  let s2 = new Set()
5
  arr.forEach((x) => s.add(x))
6

7
  let s3 = new Set(document.querySelectorAll("div"))

set 转换为数组#

使用...扩展运算符或Array.from方法

1
  let s = new Set([1, 2, 3, 4])
2
  let arr = [...s]
3
  let arr2 = Array.from(set)

因此有两种数组去重的方法

1
    let s = new Set([1, 1, 2, 3, 4, 2])
2
    let arr = [...s]
3
    let arr2 = Array.from(s)

注#

向 Set 加入值的时候，不会发生类型转换，所以5和”5”是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符(===)，主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。

1
  let set = new Set()
2
  let a = NaN
3
  let b = NaN
4
  set.add(a)
5
  set.add(b)
6
  // Set {NaN}

上面代码向 Set 实例添加了两个NaN，但是只能加入一个。这表明，在 Set 内部，两个NaN是相等.另外，两个对象总是不相等的

1
    let set = new Set()
2

3
    set.add({})
4
    set.size // 1
5

6
    set.add({})
7
    set.size // 2

Set 实例的属性和方法#

属性：

Set.prototype.constructor: 构造函数，默认就是Set函数。
Set.prototype.size: 返回Set实例的成员总数。

方法： Set 实例的方法分为两大类: 操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法

add(value): 添加某个值，返回 Set 结构本身。
delete(value): 删除某个值，返回一个布尔值，表示删除是否成功。
has(value): 返回一个布尔值，表示该值是否为Set的成员。
clear(): 清除所有成员，没有返回值。

1
    s.add(1).add(2).add(2)
2
    s.size // 2
3

4
    s.has(1) // true
5
    s.has(2) // true
6
    s.has(3) // false
7

8
    s.delete(2)
9
    s.has(2) // false

遍历操作#

Set 结构的实例有四个遍历方法，可以用于遍历成员。

keys(): 返回键名的遍历器
values(): 返回键值的遍历器
entries(): 返回键值对的遍历器
forEach(): 使用回调函数遍历每个成员

需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。

`keys()`，`values()`，`entries()`#

以上三个方法的返回值都是遍历器对象。由于 Set 结构没有键名，只有键值(或者说键名和键值是同一个值)，所以keys()方法和values()方法的行为完全一致

1
  let set = new Set(["red", "green", "blue"]);
2

3
  for (let item of set.keys()) {
4
    console.log(item);
5
  }
6
  // red
7
  // green
8
  // blue
9

10
  for (let item of set.values()) {
11
    console.log(item);
12
  }
13
  // red
14
  // green
15
  // blue
16

17
  for (let item of set.entries()) {
18
    console.log(item);
19
  }
20
  // ["red", "red"]
21
  // ["green", "green"]
22
  // ["blue", "blue"]

展开收起

上面代码中，entries()方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法

1
  Set.prototype[Symbol.iterator] === Set.prototype.values  // true

`forEach()`#

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

1
    set = new Set(["red", "bule", "black"])
2
    set.forEach((value, key) => console.log(key + " : " + value))
3
  // red : red
4
  // bule : bule
5
  // black : black

上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身(上例省略了该参数)。这里需要注意，Set 结构的键名就是键值(两者是同一个值)，因此第一个参数与第二个参数的值永远都是一样的。另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象

遍历的应用#

实现并集(Union)、交集(Intersect)和差集(Difference)

1
    let s = new Set([1, 2, 3])
2
    let s2 = new Set([2, 3, 4])
3

4
    // 并集
5
    let union = new Set([...s, ...s2])
6
    //交集
7
    let intersect = new Set([...s].filter(num => s2.has(num)))
8
    //差集
9
    let difference = new Set([...s].filter(num => !s2.has(num)))

如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用Array.from()方法。

1
  // 方法一
2
  let set = new Set([1, 2, 3]);
3
  set = new Set([...set].map(val => val * 2));
4
  // set的值是2, 4, 6
5

6
  // 方法二
7
  let set = new Set([1, 2, 3]);
8
  set = new Set(Array.from(set, val => val * 2));
9
  // set的值是2, 4, 6

map#

JavaScript 的对象(Object)，本质上是键值对的集合(Hash 结构)，但是传统上只能用字符串当作键。这给它的使用带来了很大的限制

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果您需要“键值对”的数据结构，Map 比 Object 更合适。

基本使用#

map 创建#

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组

1
    let m = new Map([
2
        ["name", "tom"],
3
        ["age", 18]
4
    ])
5
  m.size //2

上面代码在新建 Map 实例时，就指定了两个键name和age，相当于下面代码

1
    let item = [
2
        ['name', 'tom'],
3
        ['age', 18],
4
    ]
5

6
    let m = new Map()
7
    item.forEach(([key, value]) => m.set(key, value))

不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。

1
    let s = new Set([
2
        ["name", "tom"],
3
        ["age", 18]
4
    ])
5

6
    let m = new Map(s)
7
  let m2 = new Map(m)
8
  console.log(m == m2) //false

同样的值的两个实例，在 Map 结构中被视为两个键

1
    const map = new Map()
2

3
    const k1 = ['a']
4
    const k2 = ['a']
5

6
    map.set(k1, 111).set(k2, 222)
7

8
    map.get(k1) // 111
9
    map.get(k2) // 222

变量k1和k2的值是一样的，但是它们在 Map 结构中被视为两个键由上可知，Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞(clash)的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名

map 的属性和操作方法#

`size` 属性#

size属性返回map的成员总数

1
 let map = new Map()
2
 map.set("foo", 1)
3
 map.set("bar", 2)
4
// map.size == 3

`set(key, value)`#

set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键

1
 let m = new Map()
2
 let a = "abc"
3
 m.set(a, 3) //键是变量
4
 m.set("edition", 6) // 键是字符串
5
 m.set(262, "standard") // 键是数值
6
 m.set(undefined, "nah") // 键是 undefined

set()方法返回的是当前的Map对象，因此可以采用链式写法。

1
let a = "abc"
2
const m = new Map().set(a, 3).set("edition", 6).set(262, "standard")

`get(key)`#

get() 方法读取key所对应的键值

1
 let map = new Map([
2
     ["foo", 1]
3
 ])
4
map.get("foo") // 1

`has(key)`#

has()方法返回一个布尔值，表示某个键是否在当前 Map 对象之中

1
 let map = new Map([
2
     ["foo", 1]
3
 ])
4
map.has("foo") // true
5
map.has("bar") //false

`delete(key)`#

delete()方法删除某个键，返回true。如果删除失败，返回false

1
 let map = new Map([
2
     ["foo", 1]
3
 ])
4
 map.delete("foo")
5
 console.log(map.has("foo")) // false

`clear()`#

clear()方法清除所有成员，没有返回值

1
let map = new Map([
2
     ["foo", 1],
3
     ["bar", 2]
4
 ])
5
 map.clear()
6
 map.size //0

map 的遍历操作#

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

keys(): 返回键名的遍历器。
values(): 返回键值的遍历器。
entries(): 返回所有成员的遍历器。
forEach(): 遍历 Map 的所有成员

1
    let map = new Map([
2
        ["foo", 1],
3
        ["bar", 2]
4
    ])
5

6
    for (const key of map.keys()) {
7
        console.log(key)
8
    }
9
    // foo , bar
10

11
    for (const value of map.values()) {
12
        console.log(value)
13
    }
14
    // 1 , 2
15

16
    for (const item of map.entries()) {
17
        console.log(item)
18
    }
19
    // ["foo", 1] , ["bar", 2]
20

21
    for (const [key, value] of map.entries()) {
22
      console.log(key, value)
23
    }
24
    // ["foo", 1] , ["bar", 2]
25

26
    // 等同于使用map.entries()
27
    for (const [key, value] of map) {
28
      console.log(key, value);
29
    }
30
    // ["foo", 1] , ["bar", 2]

展开收起

上面代码最后的那个例子，表示 Map 结构的默认遍历器接口(Symbol.iterator属性)，就是entries()方法

1
  map[Symbol.iterator] === map.entries
2
  // true

结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤(Map 本身没有map和filter方法)。

1
  const map0 = new Map().set(1, "a").set(2, "b").set(3, "c")
2

3
  const map1 = new Map([...map0].filter(([k, v]) => k < 3))
4
  // 产生 Map 结构 {1 => 'a', 2 => 'b'}
5

6
  const map2 = new Map([...map0].map(([k, v]) => [k * 2, "_" + v]))
7
  // 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

Ajax跨域

Mon, 06 Dec 2021 00:08:27 GMT

同源策略#

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。 所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

什么是跨域#

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

非同源限制#

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 AJAX 请求

跨域解决方法#

JSONP#

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

1
  // 处理服务器返回回调函数的数据
2
  <script type="text/javascript">
3
      function dosomething(res){
4
          // 处理获得的数据
5
          console.log(res.data)
6
      }
7
  </script>
8
  // 向服务器127.0.0.1:8000/test发出请求，
9
      该请求的查询字符串有一个callback参数，用来指定回调函数的名字
10
  <script src="http://127.0.0.1:8000/test?callback=dosomething"></script>
11

12

13
  // node 部分
14
  app.all('/test',(request, response) => {
15
      // response.send('console.log("hello jsonp")');
16
      const data = {
17
          data: "data"
18
      };
19
      //将数据转化为字符串
20
      let str = JSON.stringify(data)
21
      //返回结果
22
      response.end(`dosomething(${str})`)
23
    // 返回的结果 dosomething({"data":"data"})
24
  })

展开收起

CORS#

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问

1
  // node
2
  app.all('/cors-server', (request, response)=>{
3
    //设置响应头
4
    response.setHeader("Access-Control-Allow-Origin", "*")
5
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500")
6
    response.send('hello CORS');
7
  })

Axios

Thu, 25 Nov 2021 05:35:27 GMT

创建 API#

API 的分类#

REST API: restful （Representational State Transfer (资源)表现层状态转化）
1. 发送请求进行CRUD 哪个操作由请求方式来决定
2. 同一个请求路径可以进行多个操作
3. 请求方式会用到GET/POST/PUT/DELETE
非REST API: restless
1. 请求方式不决定请求的CRUD 操作
2. 一个请求路径只对应一个操作
3. 一般只有GET/POST

使用json-server 搭建REST API#

json-server#

json-server 是用来快速搭建REST API 的工具包

使用json-server#

在线文档: https://github.com/typicode/json-server
下载: npm install -g json-server
目标根目录下创建数据库 json 文件: db.json

1
{
2
  "posts": [
3
    { "id": 1, "title": "json-server", "author": "typicode" },
4
    { "id": 2, "title": "json-server2", "author": "typicode" }
5
  ],
6
  "comments": [
7
    { "id": 1, "body": "some comment", "postId": 1 }
8
  ],
9
  "profile": { "name": "typicode" }
10
}

启动服务器执行命令: json-server --watch db.json
使用浏览器访问测试 http://localhost:3000/posts

XHR 的 ajax封装 (简单版axios)#

特点#

函数的返回值为promise, 成功的结果为response, 失败的结果为error
能处理多种类型的请求: GET/POST/PUT/DELETE
函数的参数为一个配置对象

1
{
2
  url: '', // 请求地址
3
  method: '', // 请求方式GET/POST/PUT/DELETE
4
  params: {}, // GET/DELETE 请求的 query 参数
5
  data: {}, // POST/PUT 请求的请求体参数
6
}

响应 json数据自动解析为 js的对象/数组

编码实现#

1
function axios({ url, method = 'GET', params = {}, data = {} }) {
2
    // 返回一个promise对象
3
    return new Promise((resolve, reject) => {
4
        // 处理method 转大写
5
        method = method.toUpperCase()
6

7
        // 处理 query参数（拼接到url上）id=1&xxx=abc
8
        let queryString = ''
9
        Object.keys(params).forEach((key) => {
10
            queryString += `${key}=${params[key]}&`
11
        })
12
        if (queryString) {
13
            // 去除最后的'&'
14
            queryString = queryString.substring(0, queryString.length - 1)
15
            // 接到url
16
            url += '?' + queryString
17
        }
18

19
        // 1. 执行异步Ajax请求
20
        // 创建xhr对象
21
        const request = new XMLHttpRequest()
22
        // 打开连接（初始化请求，没有请求）
23
        request.open(method, url, true)
24
        // 发送请求
25
        if (method === 'GET' || method === 'DELETE') {
26
            request.send() // undefined
27
        } else if (method === 'POST' || method === 'PUT') {
28
            // 设置请求头，告诉服务器请求体的格式是json
29
            request.setRequestHeader(
30
                'Content-Type',
31
                'appliaction/json;charset=utf-8'
32
            )
33
            // 发送json格式请求参数
34
            request.send(JSON.stringify(data)) // 异步执行
35
        }
36

37
        // 绑定状态改变的监听
38
        request.onreadystatechange = function () {
39
            // 同步执行
40
            // 如果请求没有完成，直接结束
41
            if (request.readyState !== 4) {
42
                return
43
            }
44
            // 如果响应状态码在[200, 300)之间代表成功，否则失败
45
            const { status, statusText } = request
46
            if (status >= 200 && status <= 299) {
47
                // 2.1 如果请求成功，调用resolve()
48
                // 准备结果数据对象response
49
                const response = {
50
                    data: JSON.parse(request.response),
51
                    status,
52
                    statusText,
53
                }
54
                resolve(response)
55
            } else {
56
                // 2.2 如果请求失败，调用reject()
57
                reject(new Error('request error status is ' + status))
58
            }
59
        }
60
    })
61
}

展开收起

使用测试#

1
// 1. GET请求：从服务器端获取数据
2
function testGet() {
3
    axios({
4
        url: 'http://localhost:3000/posts',
5
        method: 'GET',
6
        params: {
7
            id: 1,
8
            xxx: 'abc',
9
        },
10
    }).then(
11
        (response) => {
12
            console.log(response)
13
        },
14
        (error) => {
15
            alert(error.message)
16
        }
17
    )
18
}
19

20
// 2. POST请求：向服务器端添加数据
21
function testPost() {
22
    axios({
23
        url: 'http://localhost:3000/posts',
24
        method: 'POST',
25
        data: {
26
            title: 'json-server_post',
27
            author: 'typicode_post',
28
        },
29
    }).then(
30
        (response) => {
31
            console.log(response)
32
        },
33
        (error) => {
34
            alert(error.message)
35
        }
36
    )
37
}
38
// 3. PUT请求：服务器更新数据
39
function testPut() {
40
    axios({
41
        url: 'http://localhost:3000/posts/1',
42
        method: 'PUT',
43
        data: {
44
            title: 'json-server_put',
45
            author: 'typicode_put',
46
        },
47
    }).then(
48
        (response) => {
49
            console.log(response)
50
        },
51
        (error) => {
52
            alert(error.message)
53
        }
54
    )
55
}
56

57
// 4. DELETE请求：服务器删除数据
58
function testDelete() {
59
    axios({
60
        url: 'http://localhost:3000/posts/2',
61
        method: 'delete',
62
    }).then(
63
        (response) => {
64
            console.log(response)
65
        },
66
        (error) => {
67
            alert(error.message)
68
        }
69
    )
70
}

展开收起

axios 的理解和使用#

axios 是什么#

前端最流行的 ajax请求库
react/vue 官方都推荐使用 axios 发ajax 请求
文档: https://github.com/axios/axios

axios 特点#

基于 xhr + promise 的异步 ajax请求库
浏览器端/node 端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

axios 常用语法#

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url 发get 请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get 请求
axios.delete(url[, config]): 发delete 请求
axios.post(url[, data, config]): 发post 请求
axios.put(url[, data, config]): 发put 请求
axios.defaults.xxx: 请求的默认全局配置（method\baseURL\params\timeout…）
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

使用示例#

GET 请求#

1
// 为给定 ID 的 user 创建请求
2
axios
3
    .get('/user?ID=12345')
4
    .then(function (response) {
5
        console.log(response)
6
    })
7
    .catch(function (error) {
8
        console.log(error)
9
    })
10

11
// 可选地，上面的请求可以这样做
12
axios
13
    .get('/user', {
14
        params: {
15
            ID: 12345,
16
        },
17
    })
18
    .then(function (response) {
19
        console.log(response)
20
    })
21
    .catch(function (error) {
22
        console.log(error)
23
    })

展开收起

通过语法糖发送GET请求#

1
axios(config)
2

3
// 发送 POST 请求
4
axios({
5
    method: 'post',
6
    url: '/user/12345',
7
    data: {
8
        firstName: 'Fred',
9
        lastName: 'Flintstone',
10
    },
11
})
12

13
// 发送 GET 请求（默认的方法）
14
axios('/user/12345')
15

16
// 发送 GET 请求（axios.get方法）
17
axios.get('/user/12345')

展开收起

重点注意#

`axios.create(config)`#

根据指定配置创建一个新的 axios, 也就是每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?
- 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理（比如有多个baseURL需要指定）
- 解决: 创建2 个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

1
const instance = axios.create({
2
    // instance是函数类型
3
    baseURL: 'http://localhost:3000',
4
})
5
// 使用instance发Ajax请求
6
instance({
7
    url: '/posts',
8
})
9
instance.get('/posts')

拦截器函数的调用顺序#

说明: 调用axios()并不是立即发送ajax 请求, 而是需要经历一个较长的流程
流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response

1
// 添加两个请求拦截器(回调函数)
2
axios.interceptors.request.use(
3
    (config) => {
4
        console.log('request interceptor1 onResolved()') // -----------2
5
        return config
6
    },
7
    (error) => {
8
        console.log('request interceptor1 onRejected()')
9
        return Promise.reject(error)
10
    }
11
)
12

13
axios.interceptors.request.use(
14
    (config) => {
15
        console.log('request interceptor2 onResolved()') // -----------1
16
        return config
17
    },
18
    (error) => {
19
        console.log('request interceptor2 onRejected()')
20
        return Promise.reject(error)
21
    }
22
)
23

24
// 添加两个响应拦截器
25
axios.interceptors.response.use(
26
    (resopnse) => {
27
        console.log('response interceptor1 onResolved()') // -----------3
28
        return resopnse
29
    },
30
    (error) => {
31
        console.log('response interceptor1 onRejected()')
32
        return Promise.reject(error)
33
    }
34
)
35

36
axios.interceptors.response.use(
37
    (resopnse) => {
38
        console.log('response interceptor2 onResolved()') // -----------4
39
        return resopnse
40
    },
41
    (error) => {
42
        console.log('response interceptor2 onRejected()')
43
        return Promise.reject(error)
44
    }
45
)
46

47
axios
48
    .get('http://localhost:3000/posts')
49
    .then((response) => {
50
        console.log('data', response.data) //data Array(4) -------------5
51
    })
52
    .catch((error) => {
53
        cosole.log('error', error.message)
54
    })
55

56
// request interceptor2 onResolved()
57
// request interceptor1 onResolved()
58
// response interceptor1 onResolved()
59
// response interceptor2 onResolved()
60
// data Array(4)

展开收起

取消请求#

基本流程#

配置 cancelToken 对象
缓存用于取消请求的 cancel 函数
在后面特定时机调用 cancel 函数取消请求
在错误回调中判断如果 error 是 cancel, 做相应处理

实现功能#

在请求一个接口前, 取消前面一个未完成的请求

1
let cancel // 用于保存取消请求的函数
2
function getProducts1() {
3
    // 在准备发请求前，取消未完成的请求
4
    if (typeof cancel === 'function') {
5
        cancel('取消请求')
6
    }
7
    axios({
8
        url: 'http://localhost:4000/products1',
9
        cancelToken: new axios.CancelToken(function executor(c) {
10
            // c是用于取消当前请求的函数
11
            // 保存取消函数，用于之后可能需要取消当前请求
12
            cancel = c
13
        }),
14
    }).then(
15
        (response) => {
16
            cancel = null
17
            console.log('请求1成功了', response.data)
18
        },
19
        (error) => {
20
            if (axios.isCancel(error)) {
21
                console.log('请求1取消的错误', error.message)
22
            } else {
23
                // 请求出错了
24
                cancel = null
25
                console.log('请求1失败了', error.message, error) // 请求1失败了 强制取消请求 Cancel {message: "强制取消请求"}
26
            }
27
        }
28
    )
29
}
30

31
function getProducts2() {
32
    // 在准备发请求前，取消未完成的请求
33
    if (typeof cancel === 'function') {
34
        cancel('取消请求')
35
    }
36
    axios({
37
        url: 'http://localhost:4000/products2',
38
        cancelToken: new axios.CancelToken(function executor(c) {
39
            cancel = c
40
        }),
41
    }).then(
42
        (response) => {
43
            cancel = null
44
            console.log('请求2成功了', response.data)
45
        },
46
        (error) => {
47
            if (axios.isCancel(error)) {
48
                console.log('请求2取消的错误', error.message)
49
            } else {
50
                cancel = null
51
                console.log('请求2失败了', error.message, error)
52
            }
53
        }
54
    )
55
}
56
function cancelReq() {
57
    // 执行取消请求的函数
58
    if (typeof cancel === 'function') {
59
        cancel('强制取消请求')
60
    } else {
61
        console.log('没有可取消的请求')
62
    }
63
}

展开收起

使用拦截器，减少重复代码#

1
// 添加请求拦截器
2
axios.interceptors.request.use((config) => {
3
    // 只写一个成功的回调
4
    // 在准备发请求前，取消未完成的请求
5
    if (typeof cancel === 'function') {
6
        cancel('取消请求')
7
    }
8
    // 添加一个cancelToken的配置
9
    config.cancelToken = new axios.CancelToken(function executor(c) {
10
        // c是用于取消当前请求的函数
11
        // 保存取消函数，用于之后可能需要取消当前请求
12
        cancel = c
13
    })
14
    return config
15
})
16

17
// 添加响应拦截器
18
axios.interceptors.response.use(
19
    (response) => {
20
        // 成功的回调
21
        cancel = null
22
        return response
23
    },
24
    (error) => {
25
        // 失败的回调
26
        if (axios.isCancel(error)) {
27
            // 请求取消的错误
28
            console.log('请求取消的错误', error.message)
29
            // 中断promise链
30
            return new Promise(() => {})
31
        } else {
32
            // 请求出错了
33
            cancel = null
34
            // 将错误向下传递
35
            // throw error
36
            return Promise.reject(error)
37
        }
38
    }
39
)
40

41
let cancel // 用于保存取消请求的函数
42
function getProducts1() {
43
    axios({
44
        url: 'http://localhost:4000/products1',
45
    }).then(
46
        (response) => {
47
            console.log('请求1成功了', response.data)
48
        },
49
        (error) => {
50
            // 只用处理请求失败的情况，取消请求的错误不用处理
51
            console.log('请求1失败了', error.message, error)
52
        }
53
    )
54
}
55

56
function getProducts2() {
57
    axios({
58
        url: 'http://localhost:4000/products2',
59
    }).then(
60
        (response) => {
61
            console.log('请求2成功了', response.data)
62
        },
63
        (error) => {
64
            console.log('请求2失败了', error.message, error)
65
        }
66
    )
67
}
68
function cancelReq() {
69
    if (typeof cancel === 'function') {
70
        cancel('强制取消请求')
71
    } else {
72
        console.log('没有可取消的请求')
73
    }
74
}

展开收起

Fetch

Thu, 25 Nov 2021 05:35:27 GMT

fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。fetch 不是 ajax 的进一步封装，而是原生 js。Fetch 函数就是原生 js，没有使用 XMLHttpRequest 对象

Fetch 的参数#

url ,该参数定义要获取的资源,可以是一个 url 字符串,也可以是一个 Request 对象
options ,该参数可选,为一个对象,内部含有一些对请求的设置属性
- method<请求使用的方法>。如、POST 等
- headers<请求头信息>。形式为 Headers 对象或 ByteString
- body<请求的> body 信息,可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息
- mode<请求的模式>。如 cors、no-cors 或者 same-origin
- credentiala<请求的> credentials。如 omit、same-origin 或者 include
- cache<请求的> cache 模式,no-store,reload,no-cache 或者 only-if-cached

response 对象#

response 为一个 Promise 对象成功时传回的对象,该属性含有对应返回数据的属性和方法

属性#

status (number),HTTP 请求结果参数,在 100-599 范围
statusText (string),服务器返回的状态报告
ok (boolean),如果返回 200 表示请求成功则为 true
headers (Headers),返回头部信息,该属性后面也有对应的方法
has(name) (boolean),判断是否存在该信息头
get(name) (string),获取信息头的数据
getAll(name) (Array),获取所有头部数据
set(name,value),设置请求头信息
append(name,value),添加 header 的内容
delete(name),删除 header 的信息
forEach(function(value,name){...},[thisContext]),循环读取 header 的信息
url (string),详细的地址

方法#

text(),以 string 的形式生成请求 text
json(),生成 JSON.parse(responseText)的结果
blob(),生成一个 Blob
arrayBuffer(),生成一个 ArrayBuffer
formData(),生成格式化数据,可用于其它的请求

其他方法#

clone(),创建一个 Response 对象的克隆
Response.error(),返回一个绑定了网络错误的新的 Response 对象
Response.redirect(),用另一个 URL 创建一个新的 Resonse 对象

用法#

get#

1
  fetch("a.html")
2
      .then(function (response) {
3
          return response.text()
4
      })
5
      .then(function (response) {
6
          document.body.innerHTML = response
7
      })

post#

1
  fetch("a.html", {
2
      method: "POST",
3
      headers: {
4
          "Accept": "application/json",
5
          "Content-Type": "application/json";
6
      },
7
      body: JSON.stringify({
8
          user: "zhangsan",
9
          pwd: 123456;
10
      })
11
  })

与原生 Ajax 的比较#

原生 Ajax#

1
  var Ajax = new XMLHttpRequest()
2
  Ajax.open("GET", url)
3
  Ajax.responseType = "json"
4
  Ajax.send()
5
  Ajax.onreadystatechange = function () {
6
      console.log(Ajax.response)
7
  }
8
  Ajax.onerror = function () {
9
      console.log("error")
10
  }

fetch#

1
  fetch(url).then(function (response) {
2
      return response.json() //相当于JSON.parse(response);
3
  }).then(function (data) {
4
      console.log(data)
5
  }).catch(function (err) {
6
      console.log("error", err)
7
  });
8

9
  //使用箭头函数
10
  fetch(url).then(
11
      response => response.json()
12
  ).then(
13
      data => console.log(data)
14
  ).catch(
15
      err => console.log("error", err)
16
  );
17

18
  //使用async函数
19
  let Fetch = async function () {
20
      try {
21
          let response = await fetch(url)
22
          let data = await response.json()
23
          console.log(data)
24
      } catch (err) {
25
          console.log("error", err)
26
      }
27
  }

展开收起

原生Ajax

Tue, 23 Nov 2021 06:59:27 GMT

Ajax 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，既是一个对象，也是一种方法模式

AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的不使用 Ajax 的网页如果需要更新内容,必需重载整个网页

用法#

创建 Ajax 对象#

通过 XMLHttpRequest()类创建一个 Ajax 对象(此方法不兼容 IE6 以下浏览器)

1
  var Ajax=new XMLHttpRequest()

在 IE6 以下浏览器通过 ActiveXObject("Microsoft.XMLHTTP")创建一个 Ajax 对象

1
  var Ajax=new ActiveXObject("Microsoft.XMLHTTP")

初始化#

通过 open() 方法，可以设置跟后台交互的一些行为,该方法有三个参数 1、method；2、url；3、boolean

method 请求方式,一个包含具体请求方式的字符串

主要请求方式：
- POST,建议在添加数据时使用
- GET,建议在查询数据时使用
- PUT,建议在修改数据时使用
- DELETE,建议在删除数据时使用

url,要请求数据的具体地址

bool,进行同步或异步传输,true 为异步,false 为同步

1
  Ajax.open("GET", "http://localhost:8000", true)

设置需求

1
  // 如果想用GET的时候直接添加需求,可以在url后面加上?再写具体的需求,多个需求通过&符号连接
2
  var Ajax = new XMLHttpRequest()
3
  Ajax.open("GET","https://www.baidu.com?user=zhangsan&pwd=123456",true)
4

5

6
  // 如果是POST请求,需要设置请求头信息,如:
7
  // 表单格式请求头信息的写法
8

9
  Ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //url格式
10

11
  // 或
12

13
  Ajax.setRequestHeader("Content-Type","application/json")//json格式
14

15
  //在下一步的send()方法中传入需求
16
  Ajax.send("user=zhangsan&pwd=123456")
17

18
  // 如果想用GET的时候直接添加需求,可以在url后面加上?再写具体的需求,多个需求通过&符号连接
19
  Ajax.open("GET","https://www.baidu.com?user=zhangsan&pwd=123456",true)
20

21

22
  // 如果是POST请求,需要设置请求头信息,如:
23
  // 表单格式请求头信息的写法
24

25
  Ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //url格式
26

27
  // 或
28

29
  Ajax.setRequestHeader("Content-Type","application/json")//json格式
30

31
  //在下一步的send()方法中传入需求
32
  Ajax.send("user=zhangsan&pwd=123456")

展开收起

GET 与 POST 区别 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

发送请求#

通过 send()方法正式发送请求

1
  Ajax.send()

注: 如果请求方式是 POST 方式,添加的需求作为参数写入 send()方法中

1
  Ajax.send('a=100&b=200&c=300')

返回请求结果#

每当 readyState 改变时，就会触发 onreadystatechange 事件，因此可以给元素绑定onreadystatechange事件，来接受响应的事件 XMLHttpRequest 对象有三个非常重要的属性：onreadystatechange、readyState、status

原生Ajax2

readyState属性：

原生Ajax1

通过 status(http 的状态码)属性的值判断请求后的结果从而得到请求信息,一般该值为 200 到 300 直接和等于 304 时代表请求成功,值为 404 代表请求失败

response 属性保留着后台返回到前端的数据

1
  Ajax.onreadystatechange = function () {
2
      if (Ajax.readyState === 4) {
3
          //确定http的状态码
4
          if ((Ajax.status >= 200 && Ajax.status < 300) || Ajax.status === 304) {
5
              console.log(Ajax.response);
6
          }
7
      }
8
  }

XmlHttpRequest 对象的主要方法与属性#

XmlHttpRequest 对象的主要方法#

void open(String method,String url,Boolen async)用于创建请求参数：
- method：请求方式（字符串类型），如：POST、GET、DELETE…
- url：要请求的地址（字符串类型）
- async：是否异步（布尔类型）
void send(String body)用于发送请求参数：
- body：要发送的数据（字符串类型）
void setRequestHeader(String header,String value) 用于设置请求头参数：
- header：请求头的 key（字符串类型）
- vlaue：请求头的 value（字符串类型）
String getAllResponseHeaders() 获取所有响应头返回值：
- 响应头数据（字符串类型）
String getResponseHeader(String header) 获取响应头中指定 header 的值参数：
- header：响应头的 key（字符串类型）返回值：
- 响应头中指定的 header 对应的值
void abort() 终止请求

XmlHttpRequest 对象的主要属性#

Number readyState 状态值（整数）详细：
- 0-未初始化，尚未调用 open()方法；
- 1-启动，调用了 open()方法，未调用 send()方法；
- 2-发送，已经调用了 send()方法，未接收到响应；
- 3-接收，已经接收到部分响应数据；
- 4-完成，已经接收到全部响应数据；
Function onreadystatechange 当 readyState 的值改变时自动触发执行其对应的函数（回调函数）
String responseText服务器返回的数据（字符串类型）
XmlDocument responseXML服务器返回的数据（Xml 对象）
Number states 状态码（整数），如：200、404…
String statesText状态文本（字符串），如：OK、NotFound…

总结#

定义 XMLHttpRequest 对象
初始化设置请求方法和URL （open() 方法）
发送请求（send() 方法）
注册监听的回调函数
拿到返回值，对页面进行操作

node

Fri, 19 Nov 2021 04:18:41 GMT

node简介#

Node是对ES标准一个实现，Node也是一个JS引擎，通过Node可以使js代码在服务器端执行，Node仅仅对ES标准进行了实现，所以在Node中不包含DOM 和 BOM

node的模块化#

在Node中，一个js文件就是一个模块

每一个js文件中的js代码都是独立运行在一个函数中而不是全局作用域，所以一个模块的中的变量和函数在其他模块中无法访问

CommonJS#

模块就是一个js文件，在模块内部任何变量或其他对象都是私有的，不会暴露给外部模块。

在CommonJS模块化规范中，在模块内部定义了一个module对象，module对象内部存储了当前模块的基本信息，同时module对象中有一个属性名为exports，exports用来指定需要向外部暴露的内容。只需要将需要暴露的内容设置为exports或exports的属性，其他模块即可通过require来获取这些暴露的内容。

加载模块#

使用 require() 方法，可以加载需要的内置模块、用户自定义模块、第三方模块进行使用。

注意：使用 require() 方法加载其它模块时，会执行被加载模块中的代码。

1
// 加载内置 fs 模块
2
const fs = require('fs')
3

4
// 加载自定义模块
5
const m = require('./myModule.js')
6

7
// 加载第三方模块
8
const moment = require('moment')
9

10
// 通过解构赋值按需加载模块
11
const { a, b } = require('./myModule.js')

module 对象#

在每个 .js 自定义模块中都有一个 module 对象，它里面存储了和当前模块有关的信息，打印如下

1
console.log(module)
2

3
// output
4
Module {
5
  id: '.',
6
  path: 'D:\\study\\nodejs\\moudle',
7
  exports: {},
8
  parent: null,
9
  filename: 'D:\\study\\nodejs\\moudle\\myMoudle.js',
10
  loaded: false,
11
  children: [],
12
  paths: [
13
    'D:\\study\\nodejs\\moudle\\node_modules',
14
    'D:\\study\\nodejs\\node_modules',
15
    'D:\\study\\node_modules',
16
    'D:\\node_modules'
17
  ]
18
}

展开收起

module.exports对象#

在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。

外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。

1
const a = 10
2
const b = 20
3
const obj = { name: "孙悟空" }
4

5
module.exports.a = a
6
module.exports.b = b
7

8
// const {a, b} = require("./m.js")

1
const a = 10
2
const b = 20
3
const obj = { name: "孙悟空" }
4

5
module.exports = { a, b, obj}
6

7
// const {a, b, obj} = require("./m.js")

默认情况下，Node.js会将以下内容视为CommonJS模块：

使用.cjs为扩展名的文件
当前的package.json的type属性为commonjs时，扩展名为.js的文件
当前的package.json不包含type属性时，扩展名为.js的文件
文件的扩展名是mjs、cjs、json、node、js以外的值时（type不是module时）

exports 对象#

由于 module.exports 单词写起来比较复杂，为了简化向外共享成员的代码，Node 提供了 exports 对象。

默认情况下， exports 和 module.exports 指向同一个对象。最终共享的结果，还是以 module.exports 指向的对象为准

1
console.log(module.exports === exports) // true

1
const a = 10
2
const b = 20
3
const obj = { name: "孙悟空" }
4

5
exports.a = a
6
exports.b = b
7

8
// const {a, b} = require("./m.js")

exports 和 module.exports 的使用误区#

时刻谨记，require() 模块时，得到的永远是 module.exports 指向的对象

1
exports.obj = { name: '孙悟空' }
2

3
module.exports = {
4
  a: 10,
5
  b: 20,
6
}
7

8
// const m = require("./m.js")
9
// console.log(m) // { a: 10, b: 20 }

**注意：**为了防止混乱，建议不要在同一个模块中同时使用 exports 和 module.exports

文件作为模块#

当我们加载一个自定义的文件模块时，模块的路径必须以/、./或../开头。如果不以这些开头，node会认为你要加载的是核心模块或node_modules中的模块。

当我们要加载的模块是一个文件模块时，CommonJS规范会先去寻找该文件，比如：require("./m1")时，会首先寻找名为m1的文件。如果这个文件没有找到，它会自动为文件添加扩展名然后再查询。扩展名的顺序为：js、json、node。

还是上边的例子，如果没有找到m1，则会按照顺序搜索m1.js、m1.json、m1.node哪个先找到则返回哪个，如果都没有找到则报错。

文件夹作为模块#

当我们使用一个文件夹作为模块时，文件夹中必须有一个模块的主文件。如果文件夹中含有package.json文件且文件中设置main属性，则main属性指定的文件会成为主文件，导入模块时就是导入该文件。如果没有package.json，则node会按照index.js、index.node的顺序寻找主文件。

Node_modules#

如果我们加载的模块没有以/、./或../开头，且要加载的模块不是核心模块，node会自动去node_modules目录下去加载模块。

node会先去当前目录下的node_modules下去寻找模块，找到则使用，没找到则继续去上一层目录中寻找，以此类推，知道找到根目录下的node_modules为止。

比如，当前项目的目录为：'C:\Users\lilichao\Desktop\Node-Course\myProject\node_modules'，则模块查找顺序依次为：

1
‘C:\Users\lilichao\Desktop\Node-Course\node_modules’,
2
‘C:\Users\lilichao\Desktop\node_modules’,
3
‘C:\Users\lilichao\node_modules’,
4
‘C:\Users\node_modules’,
5
‘C:\node_modules’

模块的包装#

每一个CommonJS模块在执行时，外层都会被套上一个函数：

1
(function(exports, require, module, __filename, __dirname) {
2
  // 模块代码会被放到这里
3
})

所以我们之所以能在CommonJS模块中使用exports、require并不是因为它们是全局变量。它们实际上以参数的形式传递进模块的。

exports，用来设置模块向外部暴露的内容

require，用来引入模块的方法

module，当前模块的引用

__filename，模块的路径

__dirname，模块所在目录的路径

ES模块化#

2015年随着ES6标准的发布，ES的内置模块化系统也应运而生，并且在Node.js中同样也支持ES标准的模块化。

需要注意的是，Node.js默认并不支持ES模块化，如果需要使用可以采用两种方式。

方式一，直接将所有的js文件修改为mjs扩展名。

方式二，修改package.json中type属性为module。

导出#

1
// 导出变量（命名导出）
2
export let name1, name2, …, nameN;
3
export let name1 = …, name2 = …, …, nameN;
4

5
// 导出函数（命名导出）
6
export function functionName(){...}
7

8
// 导出类（命名导出）
9
export class ClassName {...}
10

11
// 导出一组
12
export { name1, name2, …, nameN }
13

14
// 重命名导出
15
export { variable1 as name1, variable2 as name2, …, nameN }
16

17
// 解构赋值后导出
18
export const { name1, name2: bar } = o
19

20
// 默认导出
21
export default expression
22
export default function (…) { … } // also class, function*
23
export default function name1(…) { … } // also class, function*
24
export { name1 as default, … };
25

26
// 聚合模块
27
export * from …; // 将其他模块中的全部内容导出（除了default）
28
export * as name1 from …; // ECMAScript® 2O20 将其他模块中的全部内容以指定别名导出
29
export { name1, name2, …, nameN } from …; // 将其他模块中的指定内容导出
30
export { import1 as name1, import2 as name2, …, nameN } from …; // 将其他模块中的指定内容重命名导出
31
export { default, … } from …;

展开收起

引入#

1
// 引入默认导出
2
import defaultExport from "module-name"
3

4
// 将所有模块导入到指定命名空间中
5
import * as name from "module-name"
6

7
// 引入模块中的指定内容
8
import { export1 } from "module-name"
9
import { export1 , export2 } from "module-name"
10

11
// 以指定别名引入模块中的指定内容
12
import { export1 as alias1 } from "module-name"
13
import { export1 , export2 as alias2 , [...] } from "module-name"
14

15
// 引入默认和其他内容
16
import defaultExport, { export1 [ , [...] ] } from "module-name"
17
import defaultExport, * as name from "module-name"
18

19
// 引入模块
20
import "module-name"

展开收起

less

Tue, 16 Nov 2021 05:13:01 GMT

less 是一种动态样式语言,属于 CSS 预处理器的范畴,它拓展了 CSS 语言,其余的 CSS 预处理器有 sass 和 stylus 等 less 增加了变量,MIxin,函数等特性,使 CSS 更易维护和扩展,less 既可以在客户端上运行,也可以借助 node.js 在服务端运行

less 的注释#

less 中的注释和 CSS 一样有两种单行注释 //，多行注释 /**/

区别：以 // 开头的注释不会被编译到 CSS 文件中，而通过 /**/ 包裹的注释才会被编译在 CSS 文件中

less 的变量#

less 中使用@来申明和使用一个变量，所有变量声明方法相同

具体用法为: @变量名:属性值

1
  @pink:pink //在以后的使用中就可以用@pink 来代替 pink

变量作为普通属性值使用，直接用这个变量:@变量名 变量作为选择器或者属性名来使用，需要在变量两边加上{}，{selector} 变量作为 url，使用是也需要在两边加上{}: {url}

变量的加载会有延迟效果,当整个文件的所有东西被加载完时才会将变量赋值给对应的属性

变量运用的时候会现在自身的作用域里面找到是否定义了该变量,如果定义了就直接用自身作用域中的,如果没有才会在外层逐层寻找,如果在最外层都没有找到对应的变量就会报错

1
  @var: 0;
2

3
  .class {
4
      @var: 1;
5
      .brass {
6
          @var: 2;
7
          width: @var;
8
          @var: 3;
9
      }
10
      height: @var;
11
  }
12

13
  /*
14
        最终的结果为  height:1;  width:3;
15
        变量在最后赋完所有值才会赋值给属性,
16
      而且这个赋值也是只针对自身的作用域
17
    */

展开收起

less 的导入#

在 less 中使用@import 关键字能够将需要的文件中的代码导入到当前的 less 文件中

导入 less 文件可一直接导入
```
1
  @import "a.less";
```
导入 CSS 文件时需要申明这是 CSS 文件
```
1
  @import (CSS) "b.css";
```

嵌套规则#

基本嵌套规则#

less 中可以在父选择器中包含有子选择器,在转换为 CSS 文件的时候会自动用空格来隔开

1
  .father {
2

3
      .child {
4

5
      }
6
  }
7

8
  /*
9
       通过上方的写法可以分别对父元素和子元素进行样式设置
10
     */

&符号的使用#

&符号能取消默认的嵌套关系的中的空格，从而从父子关系变成兄弟关系，这个兄弟关系是本身拓展出的一些兄弟关系,如伪类选择器等，可以理解为 & 符号就是这个选择器本身

1
  .father {
2

3
      .child {
4
          background-color: red;
5

6
          &:hover {
7
              background-color: pink;
8
          }
9
      }
10
  }
11

12
  //相当于
13
  .father .child {
14
    background-color: red;
15
  }
16
  .father .child:hover {
17
    background-color: pink;
18
  }

展开收起

less 的运算#

在 less 中可以进行加减乘除的运算

注意<在> less 的计算中计算的双方只需要一方带单位,最后再计算的时候单位会保留下来加在新值的后面

1
  .box {
2
    widht: (100+100px);
3
  }

less 的混合#

混合就是将一系列属性从一个规则集引入到另外一个规则集的方式，相当于直接复制

普通混合#

把样式中共同的代码单独提出来在最上方,单独的用一个类名来定义,然后在下面输入的时候通过 .类名/; 来调用

1
  .mix {
2
      //不加()是普通混合,会被编译到CSS文件中
3
      width: 100px;
4
      height: 100px;
5
      background-color: red;
6
  }
7

8
  .father {
9
      width: 200px;
10
      height: 200px;
11

12
      .child1 {
13
          .mix; //调用混合样式
14
      }
15

16
      .child2 {
17
          .mix;
18
      }
19
  }

展开收起

不带输出混合#

不带输出混合与普通混合最大的区别就是：不带输出混合不会编译到 css 文件中，而普通混合则会

1
  .mix() {
2
      //不加()是普通混合,会被编译到CSS文件中
3
      width: 100px;
4
      height: 100px;
5
      background-color: red;
6
  }
7

8
  .father {
9
      width: 200px;
10
      height: 200px;
11

12
      .child1 {
13
          .mix(); //调用混合样式
14
      }
15

16
      .child2 {
17
          .mix();
18
      }
19
  }

展开收起

带参数的混合#

混合的参数也是通过变量使用的形式来定义的，混合中加参数的用法和函数类似，为了方便记忆可以理解为函数，但是不是函数，同时这个参数还可以有默认的值，默认值的定义也是和变量的定义相同

1
  .mix(@w: 10px, @h: 10px, @c: pink) {
2
      width: @w;
3
      height: @h;
4
      background-color: @c;
5
  }
6

7
  .father {
8
      width: 200px;
9
      height: 200px;
10

11
      .child1 {
12
          .mix(100px, 100px, red);
13
      }
14

15
      .child2 {
16
          .mix(50px, 50px, black);
17
      }
18
  }

展开收起

如果想对上述单个属性赋值，而其他属性使用默认值的话，可使用命名参数混合

命名参数混合#

在实参传递给形参值的时候可以不用按照顺序进行传递，而是直接通过参数的指定进行传参，这样就能够实现当只想传递某些参数而不是所有参数的时候参数的值不产生混乱

实参传入命名参数的时候和变量定义的时候是一样的

1
  .mix(@w: 10px, @h: 10px, @c: pink) {
2
      width: @w;
3
      height: @h;
4
      background-color: @c;
5
  }
6

7
  .father {
8
      width: 200px;
9
      height: 200px;
10

11
      .child1 {
12
          .mix(100px, 100px, red);
13
      }
14

15
      .child2 {
16
          .mix(@c:black);
17
      }
18
  }

展开收起

匹配模式#

用一些专门的标识符放在形参的首位用做匹配，注意这个是标识符不用@符号，当使用的时候会根据传入的第一个参数，匹配到那个，就使用哪一个样式

1
  .float(l, @w) {
2
      float: left;
3
      width: @w;
4
  }
5

6
  .float(r, @w) {
7
      float: right;
8
      width: @w;
9
  }
10

11
  .box1 {
12
      height: 200px;
13
      background: green;
14
      .float(l, 200px);
15
  }
16

17
  .box2 {
18
      width: 300px;
19
      height: 200px;
20
      background: green;
21
      .float(r, 200px);
22
  }

展开收起

arguments 变量#

arguments 相当于是类中所有实参的集合，其作用和 js 中的 arguments 类似这个变量是 less 已经设置了的,可以直接调用它来使用,调用它的时候它包含了所有传入的实参,同时每个实参是通过空格隔开的

1
  .border(@size,@style,@color) {
2
    border: @arguments;
3
  }
4
  div {
5
    width: 200px;
6
    height: 200px;
7
    .border(1px, solid, #000);
8
  }

注意<和> js 中不一样的是这个属性虽然保留着所有实参但是在命名类的时候还是需要写入对应的形参，不然会出现报错

less 的继承#

less 的继承性能上高于 less 的混合,但是灵活性弱于混合,继承不支持参数的形式,同时后面也不加(),继承的类是需要被编译到 CSS 文件中的

less 的继承用关键词 &:extend() 函数来实现，下面是一种用法

1
  .jicheng{
2
      width: 100px;
3
      height: 100px;
4
      background: red;
5
  }
6
  .box:extend(.jicheng){
7
      border: solid 1px black;
8
  }
9

10
  // 相当于
11
  .jicheng,
12
  .box {
13
    width: 100px;
14
    height: 100px;
15
    background: red;
16
  }
17
  .box {
18
    border: solid 1px black;
19
  }

展开收起

同时也可以继承所有状态（如伪类选择器），name:extend（继承类名 all）{}

1
  .jicheng{
2
      width: 100px;
3
      height: 100px;
4
      background: red;
5
  }
6
  .jicheng:hover{
7
      background: black;
8
  }
9
  .box:extend(.jicheng){
10
      border: solid 1px black;
11
  }
12
  .box2:extend(.jicheng all){
13
      border: solid 1px black;
14
  }
15

16
  //相当于
17
  .jicheng,
18
  .box,
19
  .box2 {
20
    width: 100px;
21
    height: 100px;
22
    background: red;
23
  }
24
  .jicheng:hover,
25
  .box2:hover {
26
    background: black;
27
  }
28
  .box {
29
    border: solid 1px black;
30
  }
31
  .box2 {
32
    border: solid 1px black;
33
  }

展开收起

less 的避免编译#

在 less 中如果想要一些值不被运算想要原封不动的变成 CSS 文件,可以用 ~"值"的方式直接将值原封传递给 CSS 文件

1
  * {
2
    margin: ~"calc(100px + 100)"; //calc()是CSS中本来就有的计算形式的函数
3
  }

Symbol

Thu, 11 Nov 2021 23:08:35 GMT

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。如在对象中添加一个方法，这个方法名有可能导致重名，引起冲突

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型

对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突

基本使用#

声明方式:

1
    let s = Symbol()
2
    console.log(s, typeof s) // Symbol() 'symbol'

Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分

1
    let s1 = Symbol("s1");
2
    let s2 = Symbol("s2");
3

4
    console.log(s1) // Symbol(s1)
5
    console.log(s2) // Symbol(s2)
6

7
    console.log(s1.toString()) // "Symbol(s1)"
8
    console.log(s2.toString()) // "Symbol(s2)"

如果 Symbol 的参数是一个对象，就会调用该对象的toString()方法，将其转为字符串，然后才生成一个 Symbol 值

1
    const obj = {
2
        name: "obj",
3
        toString: function() {
4
            return this.name
5
        }
6
    }
7

8
    let s = Symbol(obj)
9
    console.log(s) //Symbol(obj)

注，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的

1
  // 没有参数的情况
2
  let s1 = Symbol()
3
  let s2 = Symbol()
4

5
  s1 === s2 // false
6

7
  // 有参数的情况
8
  let s1 = Symbol("s")
9
  let s2 = Symbol("s")
10

11
  s1 === s2 // false

Symbol 值不能与其他类型的值进行运算和比较，会报错

1
    let s = Symbol("s")
2
    let result = s + 100
3
  // TypeError: Cannot convert a Symbol value to a number

Symbol.for()#

有时，我们希望重新使用同一个 Symbol 值，Symbol.for()方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值

1
  Symbol.for("foo") // 创建一个 symbol 并放入 symbol 注册表中，键为 "foo"
2
  Symbol.for("foo") // 从 symbol 注册表中读取键为"foo"的 symbol
3
  Symbol.for("foo") === Symbol.for("foo") // true
4

5
  Symbol("bar") === Symbol("bar") // false，Symbol() 函数每次都会返回新的一个 symbol
6

7
  var sym = Symbol.for("mario")
8
  sym.toString()
9
  // "Symbol(mario)"，mario 既是该 symbol 在 symbol 注册表中的键名，又是该 symbol 自身的描述字符串

Symbol.for()与Symbol()这两种写法，都会生成新的 Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。Symbol.for()不会每次调用就返回一个新的 Symbol 类型的值，而是会先检查给定的key是否已经存在，如果不存在才会新建一个值

Symbol.keyFor()#

Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的 key

1
  let s1 = Symbol.for("foo")
2
  Symbol.keyFor(s1) // "foo"
3

4
  let s2 = Symbol("foo")
5
  Symbol.keyFor(s2) // undefined

变量s2属于未登记的 Symbol 值，所以返回undefined

需要注意的是，Symbol.for()为 Symbol 值登记的名字，是全局环境的，可以在不同的 iframe 或 service worker 中取到同一个值

1
  iframe = document.createElement("iframe")
2
  iframe.src = String(window.location)
3
  document.body.appendChild(iframe)
4

5
  iframe.contentWindow.Symbol.for("foo") === Symbol.for("foo")  // true

内置的 Symbol 值#

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法

Symbol.hasInstance#

对象的Symbol.hasInstance属性，指向一个内部方法。当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法。比如，foo instanceof Foo在语言内部，实际调用的是Foo[Symbol.hasInstance](foo)

1
    class MyClass {
2
        [Symbol.hasInstance](foo) {
3
            return foo instanceof Array;
4
        }
5
    }
6

7
    [1, 2, 3] instanceof new MyClass(); // true

上面代码中，MyClass是一个类，new MyClass()会返回一个实例。该实例的Symbol.hasInstance()方法，会在进行instanceof运算时自动调用，判断左侧的运算子是否为Array的实例

Symbol.isConcatSpreadable#

对象的Symbol.isConcatSpreadable属性等于一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开

1
    let arr1 = ["c", "d"];
2
    ["a", "b"].concat(arr1, "e"); // ['a', 'b', 'c', 'd', 'e']
3
    arr1[Symbol.isConcatSpreadable]; // undefined
4

5
    let arr2 = ["c", "d"];
6
    arr2[Symbol.isConcatSpreadable] = false;
7
    ["a", "b"].concat(arr2, "e"); // ['a', 'b', ['c','d'], 'e']

上面代码说明，数组的默认行为是可以展开，Symbol.isConcatSpreadable默认等于undefined。该属性等于true时，也有展开的效果

类似数组的对象正好相反，默认不展开。它的Symbol.isConcatSpreadable属性设为true，才可以展开

1
    let obj = {
2
        length: 2,
3
        0: "c",
4
        1: "d"
5
    };
6
    ["a", "b"].concat(obj, "e"); // ['a', 'b', obj, 'e']
7

8
    obj[Symbol.isConcatSpreadable] = true;
9
    ["a", "b"].concat(obj, "e"); // ['a', 'b', 'c', 'd', 'e']

Symbol.species#

对象的Symbol.species属性，指向一个构造函数。创建衍生对象时，会使用该属性

1
    class MyArray extends Array {}
2

3
    const a = new MyArray(1, 2, 3);
4
    const b = a.map((x) => x);
5
    const c = a.filter((x) => x > 1);
6

7
    b instanceof MyArray; // true
8
    c instanceof MyArray; // true

上面代码中，子类MyArray继承了父类Array，a是MyArray的实例，b和c是a的衍生对象。您可能会认为，b和c都是调用数组方法生成的，所以应该是数组(Array的实例)，但实际上它们也是MyArray的实例

Symbol.match#

对象的Symbol.match属性，指向一个函数。当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值

1
    String.prototype.match(regexp);
2
    // 等同于
3
    regexp[Symbol.match](this);
4

5
    class MyMatcher {
6
        [Symbol.match](string) {
7
            return "hello world".indexOf(string);
8
        }
9
    }
10

11
    "e".match(new MyMatcher()); // 1

Symbol.replace#

对象的Symbol.replace属性，指向一个方法，当该对象被String.prototype.replace方法调用时，会返回该方法的返回值

1
    String.prototype.replace(searchValue, replaceValue);
2
    // 等同于
3
    searchValue[Symbol.replace](this, replaceValue);

例：

1
    const x = {};
2
    x[Symbol.replace] = (...s) => console.log(s);
3

4
    "Hello".replace(x, "World"); // ["Hello", "World"]

Symbol.replace方法会收到两个参数，第一个参数是replace方法正在作用的对象，上面例子是Hello，第二个参数是替换后的值，上面例子是World

Symbol.search#

对象的Symbol.search属性，指向一个方法，当该对象被String.prototype.search方法调用时，会返回该方法的返回值

1
    String.prototype.search(regexp);
2
    // 等同于
3
    regexp[Symbol.search](this);
4

5
    class MySearch {
6
        constructor(value) {
7
                this.value = value;
8
            }
9
            [Symbol.search](string) {
10
                return string.indexOf(this.value);
11
            }
12
    }
13
    "foobar".search(new MySearch("foo")); // 0

Symbol.split#

对象的Symbol.split属性，指向一个方法，当该对象被String.prototype.split方法调用时，会返回该方法的返回值

1
  String.prototype.split(separator, limit);
2

3
  separator[Symbol.split](this, limit);

例：

1
    class MySplitter {
2
        constructor(value) {
3
                this.value = value;
4
            }
5
            [Symbol.split](string) {
6
                let index = string.indexOf(this.value);
7
                if (index === -1) {
8
                    return string;
9
                }
10
                return [string.substr(0, index), string.substr(index + this.value.length)];
11
            }
12
    }
13

14
    "foobar".split(new MySplitter("foo"));
15
    // ['', 'bar']
16

17
    "foobar".split(new MySplitter("bar"));
18
    // ['foo', '']
19

20
    "foobar".split(new MySplitter("baz"));
21
    // 'foobar'

展开收起

上面方法使用Symbol.split方法，重新定义了字符串对象的split方法的行为

Symbol.iterator#

对象的Symbol.iterator属性，指向该对象的默认遍历器方法

1
    const myIterable = {};
2
    myIterable[Symbol.iterator] = function * () {
3
        yield 1;
4
        yield 2;
5
        yield 3;
6
    };
7

8
    [...myIterable]; // [1, 2, 3]

对象进行for...of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器

1
    class Collection {
2
        *[Symbol.iterator]() {
3
            let i = 0;
4
            while (this[i] !== undefined) {
5
                yield this[i];
6
                ++i;
7
            }
8
        }
9
    }
10

11
    let myCollection = new Collection();
12
    myCollection[0] = 1;
13
    myCollection[1] = 2;
14

15
    for (let value of myCollection) {
16
        console.log(value);
17
    }
18
    // 1
19
    // 2

展开收起

Symbol.toPrimitive#

对象的Symbol.toPrimitive属性，指向一个方法。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。 Symbol.toPrimitive被调用时，会接受一个字符串参数，表示当前运算的模式，一共有三种模式。

Number: 该场合需要转成数值
String: 该场合需要转成字符串

Default: 该场合可以转成数值，也可以转成字符串

1
  let obj = {
2
      [Symbol.toPrimitive](hint) {
3
          switch (hint) {
4
              case "number":
5
                  return 123;
6
              case "string":
7
                  return "str";
8
              case "default":
9
                  return "default";
10
              default:
11
                  throw new Error();
12
          }
13
      },
14
  };
15

16
  2 * obj; // 246
17
  3 + obj; // '3default'
18
  obj == "default"; // true
19
  String(obj); // 'str'

展开收起

Symbol.toStringTag#

对象的Symbol.toStringTag属性，指向一个方法。在该对象上面调用Object.prototype.toString方法时，如果这个属性存在，它的返回值会出现在toString()方法返回的字符串之中，表示对象的类型。也就是说，这个属性可以用来定制[object Object]或[object Array]中object后面的那个字符串

1
    // 例一
2
    ({
3
        [Symbol.toStringTag]: "Foo"
4
    }.toString());
5
    // "[object Foo]"
6

7
    // 例二
8
    class Collection {
9
        get[Symbol.toStringTag]() {
10
            return "xxx";
11
        }
12
    }
13
    let x = new Collection();
14
    Object.prototype.toString.call(x); // "[object xxx]"

ES6 新增内置对象的Symbol.toStringTag属性值如下。

JSON[Symbol.toStringTag]: ‘JSON’
Math[Symbol.toStringTag]: ‘Math’
Module 对象 M[Symbol.toStringTag]: ‘Module’
ArrayBuffer.prototype[Symbol.toStringTag]: ‘ArrayBuffer’
DataView.prototype[Symbol.toStringTag]: ‘DataView’
Map.prototype[Symbol.toStringTag]: ‘Map’
Promise.prototype[Symbol.toStringTag]: ‘Promise’
Set.prototype[Symbol.toStringTag]: ‘Set’
%TypedArray%.prototype[Symbol.toStringTag]: ‘Uint8Array’等
WeakMap.prototype[Symbol.toStringTag]: ‘WeakMap’
WeakSet.prototype[Symbol.toStringTag]: ‘WeakSet’
%MapIteratorPrototype%[Symbol.toStringTag]: ‘Map Iterator’
%SetIteratorPrototype%[Symbol.toStringTag]: ‘Set Iterator’
%StringIteratorPrototype%[Symbol.toStringTag]: ‘String Iterator’
Symbol.prototype[Symbol.toStringTag]: ‘Symbol’
Generator.prototype[Symbol.toStringTag]: ‘Generator’
GeneratorFunction.prototype[Symbol.toStringTag]: ‘GeneratorFunction

Symbol.unscopables#

对象的Symbol.unscopables属性，指向一个对象。该对象指定了使用with关键字时，哪些属性会被with环境排除

1
    Array.prototype[Symbol.unscopables];
2
    // {
3
    //   copyWithin: true,
4
    //   entries: true,
5
    //   fill: true,
6
    //   find: true,
7
    //   findIndex: true,
8
    //   includes: true,
9
    //   keys: true
10
    // }
11

12
    Object.keys(Array.prototype[Symbol.unscopables]);
13
    // ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'includes', 'keys']

上面代码说明，数组有 7 个属性，会被with命令排除

1
    // 没有 unscopables 时
2
    class MyClass {
3
        foo() {
4
            return 1;
5
        }
6
    }
7

8
    var foo = function () {
9
        return 2;
10
    };
11

12
    with(MyClass.prototype) {
13
        foo(); // 1
14
    }
15

16
    // 有 unscopables 时
17
    class MyClass {
18
        foo() {
19
            return 1;
20
        }
21
        get[Symbol.unscopables]() {
22
            return {
23
                foo: true
24
            };
25
        }
26
    }
27

28
    var foo = function () {
29
        return 2;
30
    };
31

32
    with(MyClass.prototype) {
33
        foo(); // 2
34
    }

展开收起

上面代码通过指定Symbol.unscopables属性，使得with语法块不会在当前作用域寻找foo属性，即foo将指向外层作用域的变量

函数的扩展

Tue, 09 Nov 2021 05:57:08 GMT

函数参数的默认值#

ES6 允许给函数参数赋值初始值

基本用法#

通过给形参赋初始值，具有默认值的参数, 一般位置要靠后(潜规则)，只有当传入的参数的值为undefined时才会使用默认值

1
  function log(x, y = "World") {
2
    console.log(x, y)
3
  }
4

5
  log("Hello") // Hello World
6
  log("Hello", "China") // Hello China
7
  log("Hello", "") // Hello

使用参数默认值时，函数不能有同名参数

1
    // 不报错，但是先传入的同名参数会被后面覆盖
2
    function fun(x, x, y) {
3
        // ...
4
    }
5

6
    // 报错
7
    function fun(x, x, y = 1) {
8
        // ...
9
    }
10
    // SyntaxError: Duplicate parameter name not allowed in this context

与解构赋值默认值结合使用#

参数默认值可以与解构赋值的默认值，结合起来使用

1
  function fun({ x, y = 5 }) {
2
    console.log(x, y);
3
  }
4

5
  fun({}); // undefined 5
6
  fun({ x: 1 }); // 1 5
7
  fun({ x: 1, y: 2 }); // 1 2
8
  fun(); // TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值

只有当函数fun的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数fun调用时没提供参数，变量x和y就不会生成，从而报错

1
  function fun({ x, y = 5 } = {}) {
2
    console.log(x, y)
3
  }
4

5
  fun() // undefined 5

上面代码指定，如果没有提供参数，函数fun的参数默认为一个空对象

例：

1
  function fetch(url, { body = "", method = "GET", headers = {} }) {
2
    console.log(method);
3
  }
4

5
  fetch("https://example.com", {});
6
  // "GET"
7

8
  fetch("https://example.com");
9
  // 报错

上面代码中，如果函数fetch的第二个参数是一个对象，就可以为它的三个属性设置默认值。这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

1
  function fetch(url, { body = "", method = "GET", headers = {} } = {}) {
2
    console.log(method);
3
  }
4

5
  fetch("https://example.com");
6
  // "GET"

上面代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET

问：以下代码有何区别

1
  // 写法一
2
  function m1({ x = 0, y = 0 } = {}) {
3
    return [x, y]
4
  }
5

6
  // 写法二
7
  function m2({ x, y } = { x: 0, y: 0 }) {
8
    return [x, y]
9
  }

上面两种写法都对函数的参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值

1
  // 函数没有参数的情况
2
  m1() // [0, 0]
3
  m2() // [0, 0]
4

5
  // x 和 y 都有值的情况
6
  m1({ x: 3, y: 8 }) // [3, 8]
7
  m2({ x: 3, y: 8 }) // [3, 8]
8

9
  // x 有值，y 无值的情况
10
  m1({ x: 3 }) // [3, 0]
11
  m2({ x: 3 }) // [3, undefined]
12

13
  // x 和 y 都无值的情况
14
  m1({}) // [0, 0];
15
  m2({}) // [undefined, undefined]

展开收起

函数的 length 属性#

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数

1
    (function (a) {}).length // 1
2
    (function (a = 5) {}).length // 0
3
    (function (a, b, c = 5) {}).length // 2

因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了

1
  (function (a, b = 1, c) {}).length  // 1

作用域#

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域(context)。等到初始化结束，这个作用域就会消失

1
  let x = 1
2

3
  function fun(x, y = x) {
4
      console.log(y)
5
  }
6

7
  fun(2) // 2

上面代码中，参数y的默认值等于x，调用fun()时，此时形成了封闭的作用域，默认值x指向第一个参数x，也就是2

1
    let x = 1
2

3
    function fun(y = x) {
4
        let x = 3
5
        console.log(y)
6
    }
7

8
    fun() // 1

上面代码中，函数f调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x。

如果此时，全局变量x不存在，就会报错

rest 参数#

ES6 引入 rest 参数(形式为…变量名)，用于获取函数的多余参数，这样就不需要使用arguments对象了。 rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

1
    // ES5 获取实参的方式
2
    function fun(){
3
        console.log(arguments)
4
    }
5
    fun('a','b','c')
6

7
    // rest 参数
8
    function fun(x, ...args){
9
        console.log(args);// filter some every map
10
    }
11
    fun('a','b','c') // b c

rest 参数必须要放到参数最后，否则会报错

1
    function fun(a, ...args, b) {}
2
  // SyntaxError: Rest parameter must be last formal parameter

函数的length属性，不包括 rest 参数

1
    (function (...args) {}).length // 0
2
    (function (a, b, ...args) {}).length // 2

箭头函数#

ES6 允许使用“箭头”(=>)定义函数

基本用法#

1
    let fun = function (a) {
2
        return a * a
3
    }
4

5
  // 等价于
6
    let fun = (a) => {
7
        return a * a
8
    }

如果箭头函数当形参有且只有一个的时候，可以省略() 当代码体只有一条语句的时候, 可以省略{}，但此时 return 必须省略，return 返回该条语句执行结果

1
    let fun = (a) => {
2
        return a * a
3
    }
4

5
  //等价于
6
  let fun = a => a * a

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错

1
  // 报错
2
  let getTempItem = id => { id: id, name: "Temp" }
3

4
  // 不报错
5
  let getTempItem = id => ({ id: id, name: "Temp" })

注意事项#

this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值

1
 function getName() {
2
     console.log(this.name)
3
 }
4

5
 let getName2 = () => {
6
     console.log(this.name)
7
 }
8

9
 window.name = "window"
10
 const obj = {
11
     name: "obj"
12
 }
13

14
 // 直接调用
15
 getName() //window
16
 getName2() //window
17

18
 // call 方法调用
19
 getName.call(obj) //obj
20
 getName2.call(obj) //window

展开收起

上面代码中都是定义在全局作用域中，而箭头函数getName2() this始终指向全局作用域，不随 call() 的调用而改变

如在回调函数中使用 let div = document.getElementById(“test-div”) div.onclick = function () { // setTimeout(function () { // console.log(this) // 此时this是window // this.style.background = “red” // },2000)

1
     setTimeout(() => {
2
     // 此时this是外部作用域div
3
         this.style.background = "red"
4
     }, 2000)
5
 }

不能作为构造实例化对象,也就是说，不可以使用new命令，否则会抛出一个错误

1
  let Person = (name, age) => {
2
      this.name = name
3
      this.age = age
4
  }
5
  let me = new Person('tom',30)
6
  //Uncaught TypeError: Person is not a constructor
7
  console.log(me)

不能使用 arguments 变量,该对象在函数体内不存在。如果要用，可以用 rest 参数代替

1
  let fun = () => {
2
      console.log(arguments);
3
  }
4
  fun(1, 2)
5
  // ReferenceError: arguments is not defined

变量解构赋值

Sat, 06 Nov 2021 22:57:08 GMT

变量的解构赋值#

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

数组的解构赋值#

1
    const ARR = ["1", "2", "3"]
2
    let [a, b, c] = ARR
3
  //等价于 let [a, b, c] = ["1", "2", "3"]
4
    console.log(a, b, c) // 1 2 3

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

下面是一些使用嵌套数组进行解构的例子

1
    let [, , third] = ["foo", "bar", "baz"]
2
    console.log(third) // "baz"
3

4
    let [x, , y] = [1, 2, 3]
5
    console.log(x) // 1
6
    console.log(y) // 3
7

8
  // ...x 为匹配剩余项
9
    let [head, ...tail] = [1, 2, 3, 4]
10
    console.log(head) // 1
11
    console.log(tail) // [2, 3, 4]
12

13
    let [x, y, ...z] = ["a"]
14
    console.log(x) // "a"
15
    console.log(y) // undefined
16
    console.log(z) // []

展开收起

如果解构不成功，变量的值就等于undefined。

1
  let [foo] = []
2
  let [bar, foo] = [1]
3
  // foo的值都为undefined

解构赋值允许指定默认值。

1
  let [foo = true] = []
2
  console.log(foo) // true
3

4
  let [x, y = "b"] = ["a"]; // x='a', y='b'
5
  let [x, y = "b"] = ["a", undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符(===)，判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

1
  let [x = 1] = [undefined]
2
  console.log(x) // 1
3

4
  let [y = 1] = [null];
5
  console.log(y) // null

对象的解构赋值#

1
    const obj = {
2
        name: "tom",
3
        age: 18,
4
        fun: function () {
5
            console.log("i am tom")
6
        }
7
    }
8
    let {name, age, fun} = obj
9
    console.log(name, age, fun) // tom 18 function()
10
  fun() // i am tom

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则为undefined

1
  let {age, sex} = obj
2
    console.log(age, sex) //18 undefined

如果变量名与属性名不一致，必须写成下面这样:

1
    let { foo: baz } = { foo: "aaa", bar: "bbb" };
2
    console.log(baz) // aaa
3
  console.log(foo) //Uncaught ReferenceError: foo is not defined

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，即 foo 是匹配的模式， baz 才是变量。真正被赋值的是变量 baz ，而不是模式 foo

对象的解构也可以指定默认值,默认值生效的条件是，对象的属性值严格等于undefined

1
  let { x = 3 } = {}
2
  console.log(x) // 3
3

4
  let { x, y = 5 } = { x: 1 }
5
  console.log(x) // 1
6
  console.log(y) // 5
7

8
  let { x: y = 3 } = { x: 5 }
9
  console.log(y) // 5

如果解构失败，变量的值等于undefined。

1
  let { foo } = { bar: "baz" }
2
  console.log(foo) // undefined

字符串的解构赋值#

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象

1
    let [a, b, c, d, e] = "hello"
2
    console.log(a, b, c, d, e) // h e l l o

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

1
    let {length} = "hello
2
    console.log(length) //5

数值和布尔值的解构赋值#

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

1
  let {toString: s} = 123
2
  s === Number.prototype.toString // true
3

4
  let {toString: s} = true
5
  s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

1
  let { prop: x } = undefined // TypeError
2
  let { prop: y } = null // TypeError

函数参数的解构赋值#

函数的参数也可以使用解构赋值

1
  function add([x, y]){
2
    return x + y
3
  }
4

5
  add([1, 2]) // 3
6

7
  [[1, 2], [3, 4]].map(([a, b]) => a + b)  // [ 3, 7 ]

上面代码中，函数add()的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y

函数参数的解构也可以使用默认值

1
  function move({x = 0, y = 0} = {}) {
2
    return [x, y]
3
  }
4

5
  move({x: 3, y: 8});// [3, 8]
6
  move({x: 3}) // [3, 0]
7
  move({}) // [0, 0]
8
  move() // [0, 0]

下面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果undefined就会触发函数参数的默认值

1
  function move({x, y} = { x: 0, y: 0 }) {
2
    return [x, y]
3
  }
4

5
  move({x: 3, y: 8}) // [3, 8]
6
  move({x: 3}) // [3, undefined]
7
  move({}) // [undefined, undefined]
8
  move() // [0, 0]
9

10
  [1, undefined, 3].map((x = 'yes') => x)// [ 1, 'yes', 3 ]

let与const

Sun, 31 Oct 2021 03:02:40 GMT

let与conset#

在ES6中引入了变量声明的两种方式，let 与 conset

let 用来声明变量
conset 用来声明常量

let命令#

基本用法#

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

1
    {
2
        let a = 10
3
        var b = 1
4
    }
5

6
    a // ReferenceError: a is not defined.
7
    b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

例：通过定时器每秒打印0-4

1
    for(var i = 0; i < 5; i++){
2
        setTimeout(function(){
3
            alert(i)
4
        },1000)
5
    }
6
  // 5 5 5 5 5

因为ES5之前没有块级作用域的概念，所以循环定时器、回调函数执行时的 i 定义在window中，当回调函数执行时，会向上级作用域中寻找到window.i 此时 i === 5，故

1
    for(let i = 0; i < 5; i++){
2
        setTimeout(function(){
3
            alert(i)
4
        },1000)
5
    }
6
  // 0 1 2 3 4

在块级作用域中，使用let定义 i , 相当于在每个块级作用域中定义了一个i，回调函数不必在全局作用域中寻找i的值

1
        for (let i = 0; i < 5; i++) {
2
            setTimeout(function () {
3
                alert(i)
4
            }, 1000)
5
        }
6
        {
7
            let i = 0
8
            setTimeout(function () {
9
                alert(i)
10
            }, 1000)
11
        }
12
        {
13
            let i = 1
14
            setTimeout(function () {
15
                alert(i)
16
            }, 1000)
17
        }

展开收起

不存在变量提升#

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。而let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

1
    // var 的情况
2
    console.log(foo) // 输出undefined
3
    var foo = 2
4

5
    // let 的情况
6
    console.log(bar) // 报错ReferenceError
7
    let bar = 2

不允许重复声明#

let 不允许在相同作用域内，重复声明同一个变量。var可以

1
    // 报错
2
    function fun1() {
3
        let a = 10
4
        var a = 1
5
    }
6

7
    // 报错
8
    function fuc2() {
9
        let a = 10
10
        let a = 1
11
    }
12

13
  // 正常
14
    function fu() {
15
        var a = 10
16
        var a = 1
17
    }

展开收起

conset命令#

基本用法#

const 声明一个只读的常量。一旦声明，常量的值就不能改变，一般用 conset 声明的常量用大写表示

1
  const PI = 3.1415
2
  PI // 3.1415
3

4
  PI = 3
5
  // TypeError: Assignment to constant variable.

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

1
  const ITEM
2
  // SyntaxError: Missing initializer in const declaration

const的作用域与let命令相同: 只在声明所在的块级作用域内有效。

1
  if (true) {
2
    const MAX = 5
3
  }
4
  console.log(MAX) //ReferenceError: MAX is not defined

conset的本质#

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动
对于简单类型的数据(数值、字符串、布尔值)，值就保存在变量指向的那个内存地址，因此等同于常量
对于复合类型的数据(主要是对象和数组)，变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的(即总是指向另一个固定的地址)，至于它指向的数据结构是不是可变的，就完全不能控制了
```
1
  const ARR = ["1", "2", "3", "4"]
2
  ARR.push("5")
3
  console.log(ARR) //['1', '2', '3', '4', '5']
4

5
  ARR = ["a", "b", "c"] //TypeError: Assignment to constant variable.
```

对于数组和对象的元素修改, 不算做对常量的修改, 不会报错，因为conset 只能确保对象所指向的地址不能改变，而地址的内容就无法保证了

块级作用域#

为什么需要块级作用域#

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。
```
1
  var tmp = new Date()
2

3
  function fun() {
4
      console.log(tmp)
5
      if (false) {
6
          var tmp = "hello world"
7
      }
8
  }
9

10
  fun(); // undefined
```
上面代码的原意是，if代码块的外部使用外层的 tmp 变量，内部使用内层的 tmp 变量。但是，函数fun()执行后，输出结果为 undefined，原因在于变量提升，导致内层的 tmp 变量覆盖了外层的 tmp 变量。
第二种场景，用来计数的循环变量泄露为全局变量。
```
1
  for(var i = 0; i < 5; i++){
2
      setTimeout(function(){
3
          alert(i)
4
      },1000)
5
  }
6
  // 5 5 5 5 5
```
上面代码中i定义为全局变量，导致回调函数执行时，使用的是全局作用域中的 i

ES6 的块级作用域#

用let命令新增了块级作用域，外层作用域无法获取到内层作用域，内层作用域能获取到外层作用域声明的变量

1
   {
2
        let a = "aa"
3
        {
4
            console.log(a) // aa
5
        }
6
    }
7

8
    {
9
        console.log(b)  // ReferrenceError
10
        {
11
            let b = "bb"
12
        }
13
    }

同时内层作用域可以定义外层作用域的同名变量

1
  {
2
    let a = "Hello World"
3
    {
4
      let a = "Hello World"
5
    }
6
  }

块级作用域与函数声明#

运行环境：ES6浏览器。

可实现的行为：

允许在块级作用域内声明函数
函数声明类似于var，即会提升到全局作用域或函数作用域的头部

函数声明还会提升到所有块级作用域的头部

1
 function func() {
2
     console.log('outside')
3
 }
4
 (function () {
5
     // var Func = undefined;
6
     if (false) {
7
         function func() {
8
             console.log('inside')
9
         }
10
     }
11
     func() //Uncaught TypeError: func is not a function
12
 })() //报错

考虑到环境导致的差异太大，应该避免在块级作用域中声明函数，如果需要，应该写成函数表达式的形式，而不是函数声明语句

ES6的块级作用域允许声明函数的规则只在使用大括号的情况下成立：

1
    'use strict'
2
    if (true) {
3
        function Func1() {} // 不报错
4
    }
5
    if (true)
6
        function Func2() {} // 报错
7
    // In strict mode code, functions can only be declared
8
       at top level or inside a block.

ES6简介

Sun, 31 Oct 2021 03:00:28 GMT

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系#

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件(ECMA-262)的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合，这两个词是可以互换的。

ES6 与 ECMAScript 2015 的关系#

ECMAScript 2015(简称 ES2015)这个词，也是经常可以看到的。它与 ES6 是什么关系呢？

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等。但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程: 任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。

标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符)，基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

jQuery轮播图

Wed, 27 Oct 2021 07:13:14 GMT

jQuery实现轮播图#

功能说明:

点击向右(左)的图标, 平滑切换到下(上)一页
无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
每隔3s自动滑动到下一页
当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
切换页面时, 下面的圆点也同步更新
点击圆点图标切换到对应的页

bug: 快速点击时, 翻页不正常

代码演示#

1
  // html 部分
2
    <div id="container">
3
        <div id="list" style="left: -600px;">
4
            <img src="img/5.jpg" alt="5" />
5
            <img src="img/1.jpg" alt="1" />
6
            <img src="img/2.jpg" alt="2" />
7
            <img src="img/3.jpg" alt="3" />
8
            <img src="img/4.jpg" alt="4" />
9
            <img src="img/5.jpg" alt="5" />
10
            <img src="img/1.jpg" alt="1" />
11
        </div>
12
        <div id="pointsDiv">
13
            <span index="1" class="on"></span>
14
            <span index="2"></span>
15
            <span index="3"></span>
16
            <span index="4"></span>
17
            <span index="5"></span>
18
        </div>
19
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
20
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
21
    </div>
22

23
    // js 部分
24
    $(function () {
25

26
        var $container = $('#container')    //获取整个轮播图外部div
27
        var $list = $('#list')  //获取图片列表div
28
        var $points = $('#pointsDiv>span')  // 获取圆点sapn
29
        var $prev = $('#prev')  // 获取上一张按钮
30
        var $next = $('#next')  // 获取下一张按钮
31
        var PAGE_WIDTH = 600 //一页的宽度
32
        var TIME = 400 // 翻页的持续时间
33
        var ITEM_TIME = 20 // 单元移动的间隔时间
34
        var imgCount = $points.length   //img张数
35
        var index = 0 //当前下标
36
        var moving = false // 标识是否正在翻页(默认没有)
37

38

39
        // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
40
        $next.click(function () {
41
            // 平滑翻到下一页
42
            nextPage(true)
43
        })
44
        $prev.click(function () {
45
            // 平滑翻到上一页
46
            nextPage(false)
47
        })
48

49
        // 3. 每隔3s自动滑动到下一页
50
        var intervalId = setInterval(function () {
51
            nextPage(true)
52
        }, 1000)
53

54
        // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
55
        $container.hover(function () {
56
            // 清除定时器
57
            clearInterval(intervalId)
58
        }, function () {
59
            intervalId = setInterval(function () {
60
                nextPage(true)
61
            }, 1000)
62
        })
63

64
        // 6. 点击圆点图标切换到对应的页
65
        $points.click(function () {
66
            // 目标页的下标
67
            var targetIndex = $(this).index()
68
            // 只有当点击的不是当前页的圆点时才翻页
69
            if (targetIndex != index) {
70
                nextPage(targetIndex)
71
            }
72
        })
73

74
        /**
75
         * 平滑翻页
76
         * @param next
77
         * true: 下一页
78
         * false: 上一页
79
         * 数值: 指定下标页
80
         */
81
        function nextPage(next) {
82
            /*
83
              总的时间: TIME=400
84
              单元移动的间隔时间: ITEM_TIME = 20
85
              总的偏移量: offset
86
              单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)
87

88
              启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
89
             */
90

91
            //如果正在翻页, 直接结束
92
            if (moving) { //已经正在翻页中
93
                return
94
            }
95
            moving = true // 标识正在翻页
96

97
            // 总的偏移量: offset
98
            var offset = 0
99
            // 计算offset
100
            if (typeof next === 'boolean') {
101
                offset = next ? -PAGE_WIDTH : PAGE_WIDTH
102
            } else {
103
                offset = -(next - index) * PAGE_WIDTH
104
            }
105

106
            // 计算单元移动的偏移量: itemOffset
107
            var itemOffset = offset / (TIME / ITEM_TIME)
108
            // 得到当前的left值
109
            var currLeft = $list.position().left
110
            // 计算出目标处的left值
111
            var targetLeft = currLeft + offset
112

113
            // 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
114
            var intervalId = setInterval(function () {
115
                // 计算出最新的currLeft
116
                currLeft += itemOffset
117
                if (currLeft === targetLeft) { // 到达目标位置
118
                    // 清除定时器
119
                    clearInterval(intervalId)
120
                    // 标识翻页停止
121
                    moving = false
122
                    // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
123
                    if (currLeft === -(imgCount + 1) * PAGE_WIDTH) {
124
                        currLeft = -PAGE_WIDTH
125
                    } else if (currLeft === 0) {
126
                        // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
127
                        currLeft = -imgCount * PAGE_WIDTH
128
                    }
129
                }
130
                // 设置left
131
                $list.css('left', currLeft)
132
                // console.log(currLeft)
133
            }, ITEM_TIME)
134

135
            // 更新圆点
136
            updatePoints(next)
137
        }
138

139
        /**
140
         * 更新圆点
141
         * @param next
142
         */
143
        function updatePoints(next) {
144
            // 计算出目标圆点的下标targetIndex
145
            var targetIndex = 0
146
            if (typeof next === 'boolean') {
147
                if (next) {
148
                    targetIndex = index + 1 // [0, imgCount-1]
149
                    if (targetIndex === imgCount) { // 此时看到的是1.jpg-->第1个圆点
150
                        targetIndex = 0
151
                    }
152
                } else {
153
                    targetIndex = index - 1
154
                    if (targetIndex === -1) { // 此时看到的是5.jpg-->第5个圆点
155
                        targetIndex = imgCount - 1
156
                    }
157
                }
158
            } else {
159
                targetIndex = next
160
            }
161

162

163
            // 将当前index的<span>的class移除
164
            // $points.eq(index).removeClass('on')
165
            $points[index].className = ''
166
            // 给目标圆点添加class='on'
167
            // $points.eq(targetIndex).addClass('on')
168
            $points[targetIndex].className = 'on'
169

170
            // 将index更新为targetIndex
171
            index = targetIndex
172
        }
173
    })

展开收起

知识要点#

上段代码中图片切换通过nextPage(next) 函数实现，这样的好处是方便调用，如点击切换，以及循环定时器自调用中。同时圆点的更新和图片切换同时执行。

nextPage(next) 函数

整体思路轮播图实际上是图片的分段移动，通过不断调用循环定时器让图片分段移动，故总偏移量为一张或多张图片宽度，每段时间间隔移动一点距离，到达指定位置后就清除定时器

next 参数的设置 next 参数有三个值，ture：下一页，false ：上一页，数值：指定下标页

1
 if (typeof next === 'boolean') {
2
   //点击上下页按钮时触发
3
   offset = next ? -PAGE_WIDTH : PAGE_WIDTH
4
 } else {
5
   // 点击圆点跳转指定页触发
6
   offset = -(next - index) * PAGE_WIDTH
7
 }

如何解决图片循环展示问题

1
 // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
2
 if (currLeft === -(imgCount + 1) * PAGE_WIDTH) {
3
   currLeft = -PAGE_WIDTH
4
 } else if (currLeft === 0) {
5
   // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
6
   currLeft = -imgCount * PAGE_WIDTH
7
 }

如下图所示，当图片的left === -600*5 时，此时为循环展示的最后一张图片，此时将图片切换到列表第一张图片，以达到无缝切换，第一张同理

jQuery轮播图1.png

如何解决快速点击时, 翻页不正常产生原因：同时执行了多个循环定时器，导致图片div的left属性设置不正常解决办法：通过设置标识符判断循环定时器是否在执行，如果在执行则停止当前正在执行的定时器，开启新的定时器注：在执行nextPage(next) 时 moving 设置为 true，清除定时器时 moving 设置为 false

1
 var moving = false //默认没有反页
2
 nextPage(next){
3
   if (moving) { //如果正在翻页中
4
     return
5
   }
6
   moving = true // 标识正在翻页
7

8
   // 设置定时器
9
   var intervalId = setInterval(function () {
10
       // 。。。
11

12
   // 到达目标位置
13
   if (currLeft === targetLeft) {
14
   // 清除定时器
15
   clearInterval(intervalId)
16

17
   // 标识翻页停止
18
   moving = false
19

20
       // 。。。
21

22
     }
23
   }, ITEM_TIME)
24
 }

展开收起

Sukksa's Blog

react-hooks

React Hooks#

类和函数的差异#

Hook 的含义#

Hook 使用规则#

这是为什么#

为什么 React 不用 Key 寻址#

useState()#

异步批量更新#

函数式状态更新#

惰性初始化#

useEffect()#

语法#

清理函数#

使用#

依赖数组#

数据获取#

事件绑定#

useRef()#

语法#

用法#

访问 DOM 元素#

保存任何可变值#

与 useState() 的区别#

useReducer()#

基本语法#

计数器示例#

惰性初始化#

与 useState() 区别#

useContext()#

基本语法#

1. 创建 Context#

2. 在上层提供数据（Provider）#

3. 在任何子组件中消费（useContext）#

与 useReducer 配合实现全局状态管理#

关于 cesium 在 micro-app 下无法显示的问题

解决过程#

TypeScript 进阶

元组#

简单的例子#

越界的元素#

枚举#

简单的例子#

手动赋值#

常数项和计算所得项#

常数枚举#

外部枚举#

类#

类的概念#

ES6 中类的用法#

属性和方法#

类的继承#

存取器#

静态方法#

ES7 中类的用法#

实例属性#

静态属性#

TypeScript 中类的用法#

public private 和 protected#

参数属性#

readonly#

抽象类#

类的类型#

类实现接口#

接口继承接口#

接口继承类#

为什么要支持这种操作？#

泛型#

简单的例子#

多个类型参数#

泛型约束#

泛型接口#

泛型类#

泛型参数的默认类型#

声明合并#

函数的合并#

接口的合并#

类的合并#

TypeScript 基础

与 `useReducer` 配合实现全局状态管理#

将任何一个类型断言为 `any`#

将 `any` 断言为一个具体的类型#

`useState`#