"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h1: "h1", h2: "h2", h3: "h3", h4: "h4", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "面试篇", children: "面试篇" }), "\n", _jsxs(_components.h2, { id: "一trycatch只能捕捉到同步执行代码块中的错误", children: ["一、", _jsxs(_components.strong, { children: [_jsx(_components.code, { children: "try...catch" }), "只能捕捉到同步执行代码块中的错误"] })] }), "\n", _jsx(_components.p, { children: "例子" }), "\n", _jsx(_components.p, { children: "1、异步方法情况" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "javascript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "javascript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "try" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " setTimeout" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " throw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 200" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " catch" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " (err) " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "log" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<--" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "正确方案" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "-->" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "new" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " reject" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " setTimeout" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " try" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " throw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " catch" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " reject" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 200" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "then" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 正常执行时的处理逻辑" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "catch" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "log" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 这里会捕捉到错误" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "2、promise链下" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "javascript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "javascript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "try" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "then" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " throw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " catch" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " (err) " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "log" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<--" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "正确方案" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "-->" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// 方法一" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "then" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " throw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "catch" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "log" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 这里会捕捉到错误" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// 方法二" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "async" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " handleError" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " try" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "then" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " throw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " catch" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "log" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 这里会捕捉到错误" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: "handleError" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] })] }) }) }), "\n", _jsx(_components.h2, { id: "二在-vue2x-中如何检测数组的变化", children: "二、在 Vue2.x 中如何检测数组的变化" }), "\n", _jsxs(_components.p, { children: ["使用了", _jsx(_components.strong, { children: "函数劫持" }), "的方式，重写了数组的方法，Vue将data中的数组进行了", _jsx(_components.strong, { children: "原型链重写" }), "，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。"] }), "\n", _jsx(_components.h2, { id: "三vue2vue3-diff算法", children: "三、vue2、vue3 diff算法" }), "\n", _jsx(_components.p, { children: "Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。在 Vue 的两个主要版本（Vue 2.x 和 Vue 3.x）中，虚拟 DOM（Virtual DOM）和其 diff 算法是非常重要的特性。diff 算法用于高效地更新 DOM，保持界面和状态的一致。下面我们来详细探讨一下这两个版本中的 diff 算法。" }), "\n", _jsx(_components.h3, { id: "vue-2x-的-diff-算法", children: "Vue 2.x 的 diff 算法" }), "\n", _jsxs(_components.p, { children: ["Vue 2.x 使用的是基于 ", _jsx(_components.a, { href: "https://github.com/snabbdom/snabbdom", children: "Snabbdom" }), " 的 diff 算法，主要特点如下："] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "双端比较" }), "：从新旧节点的两端开始进行比较（头头、头尾、尾头、尾尾），尽可能快地找到不需要移动的节点。"] }), "\n"] }), "\n", _jsx(_components.p, { children: "![image-20240617152232885](/Users/lizehang/Library/Application Support/typora-user-images/image-20240617152232885.png)" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "标记静态节点" }), "：在编译阶段，Vue 2.x 会尝试标记出静态节点，这样在更新过程中可以跳过这些不变的节点，从而提高性能。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SameNode 函数" }), "：判断两个节点是否相同的核心函数。节点相同的条件包括：", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "key 相同" }), "\n", _jsx(_components.li, { children: "标签相同" }), "\n", _jsx(_components.li, { children: "都是注释节点" }), "\n", _jsx(_components.li, { children: "都是文本节点并且内容相同" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "递归更新" }), "：当两个节点被判断为相同时，进行递归更新。对于组件节点，会调用组件的钩子函数进行处理。"] }), "\n"] }), "\n", _jsx(_components.p, { children: "具体的算法步骤可以概述为：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "比较两个节点，如果节点不同，则直接替换。" }), "\n", _jsx(_components.li, { children: "如果节点相同，则递归比较子节点。" }), "\n", _jsx(_components.li, { children: "使用双端比较法减少移动节点的次数。" }), "\n"] }), "\n", _jsx(_components.h3, { id: "vue-3x-的-diff-算法", children: "Vue 3.x 的 diff 算法" }), "\n", _jsx(_components.p, { children: "Vue 3.x 进行了大量的重构，引入了全新的编译器和运行时，其中 diff 算法也得到了显著改进。主要特点如下：" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "块级优化" }), "：在编译阶段，Vue 3.x 会将节点划分为静态和动态的“块”，并使用静态标记（", _jsx(_components.code, { children: "patchFlag" }), "）来标记哪些部分需要更新，从而减少不必要的比较。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "缓存节点" }), "：Vue 3.x 会缓存一些节点的状态，从而避免不必要的重新创建和销毁。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "更高效的 SameNode 函数" }), "：进一步优化了 SameNode 函数的逻辑，使得比较更为高效。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "最长递增子序列" }), "：使用了最长递增子序列（Longest Increasing Subsequence, LIS）算法来优化节点的移动操作，这样可以在节点移动时，最大限度地减少实际 DOM 操作。"] }), "\n"] }), "\n", _jsx(_components.p, { children: "具体的算法步骤可以概述为：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "比较根节点，如果根节点不同，则直接替换。" }), "\n", _jsxs(_components.li, { children: ["如果根节点相同，则根据静态标记（", _jsx(_components.code, { children: "patchFlag" }), "）和节点类型（组件、文本、元素等）进行不同的处理。"] }), "\n", _jsx(_components.li, { children: "对于子节点，使用最长递增子序列算法减少移动操作。" }), "\n", _jsx(_components.li, { children: "根据缓存的状态和静态标记，跳过不必要的比较和更新。" }), "\n"] }), "\n", _jsx(_components.h3, { id: "举例说明", children: "举例说明" }), "\n", _jsx(_components.p, { children: "假设有如下虚拟 DOM 结构：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "html", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "ul" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "a" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "A" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "b" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "B" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "c" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "C" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "d" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "D" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.p, { children: "我们将其更新为：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "html", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "ul" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "b" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "B" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "a" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "A" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "d" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "D" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "c" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "C" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h4, { id: "vue-2x", children: "Vue 2.x" }), "\n", _jsx(_components.p, { children: "Vue 2.x 的算法会逐一比较每个节点：" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["比较 ", _jsx(_components.code, { children: "

" }), " 和 ", _jsx(_components.code, { children: "

" }), "，不同。"] }), "\n", _jsxs(_components.li, { children: ["比较 ", _jsx(_components.code, { children: "

" }), " 和 ", _jsx(_components.code, { children: "

" }), "，不同。"] }), "\n", _jsx(_components.li, { children: "最终需要移动和重新插入节点。" }), "\n"] }), "\n", _jsx(_components.h4, { id: "vue-3x", children: "Vue 3.x" }), "\n", _jsx(_components.p, { children: "Vue 3.x 的算法会利用静态标记和最长递增子序列算法：" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["比较根节点 ", _jsx(_components.code, { children: "

" }), " 和 ", _jsx(_components.code, { children: "
" }), " 需要交换位置，但不需要重新创建。"] }), "\n", _jsxs(_components.li, { children: ["利用", _jsx(_components.strong, { children: "最长递增子序列算法" }), "，确定最少的 DOM 操作次数。"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "总结", children: "总结" }), "\n", _jsx(_components.p, { children: "Vue 2.x 和 Vue 3.x 的 diff 算法在基本原理上相似，但 Vue 3.x 进行了更深入的优化，特别是在静态标记和节点移动方面，大大提高了性能和效率。这使得 Vue 3.x 在处理大型应用时，能够更加高效地更新 DOM，提升用户体验。" }), "\n", _jsx(_components.h2, { id: "四数组去重", children: "四、数组去重" }), "\n", _jsx(_components.h3, { id: "1原始类型", children: "1、原始类型" }), "\n", _jsx(_components.p, { children: "new Set" }), "\n", _jsx(_components.h3, { id: "2引用类型", children: "2、引用类型" }), "\n", _jsx(_components.p, { children: "根据对象某个key去重 [...new Map(arr.map(i=>[i.key,i])).values]" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://p.ipic.vip/u5jf7r.png", alt: "" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

面试题记录-2024

目录