zhyp-vue2-common-ui 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/zhyp-vue2-common-ui.common.js.map +1 -0
- package/lib/zhyp-vue2-common-ui.umd.js.map +1 -0
- package/lib/zhyp-vue2-common-ui.umd.min.js.map +1 -0
- package/package.json +6 -1
- package/packages/battery-charging/index.js +7 -0
- package/packages/battery-charging/src/index.vue +126 -0
- package/packages/button/index.js +9 -0
- package/packages/button/src/button.vue +60 -0
- package/packages/index.js +26 -0
- package/.prettierrc.json +0 -4
- package/docs/README.en.md +0 -37
- package/docs/README.md +0 -5
- package/docs/deploy.sh +0 -22
- package/docs/docs/.vitepress/config/navConfig.js +0 -10
- package/docs/docs/.vitepress/config/sidebarConfig.js +0 -18
- package/docs/docs/.vitepress/config.js +0 -39
- package/docs/docs/.vitepress/dist/404.html +0 -21
- package/docs/docs/.vitepress/dist/IOS/Object-C/mac-question.html +0 -28
- package/docs/docs/.vitepress/dist/IOS/Object-C/oc-question.html +0 -35
- package/docs/docs/.vitepress/dist/IOS/Object-C/teammeeting.html +0 -58
- package/docs/docs/.vitepress/dist/assets/IOS_Object-C_mac-question.md.iNoUPpvj.js +0 -5
- package/docs/docs/.vitepress/dist/assets/IOS_Object-C_mac-question.md.iNoUPpvj.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/IOS_Object-C_oc-question.md.yl7-X1lB.js +0 -12
- package/docs/docs/.vitepress/dist/assets/IOS_Object-C_oc-question.md.yl7-X1lB.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/IOS_Object-C_teammeeting.md.rpxsBzUu.js +0 -35
- package/docs/docs/.vitepress/dist/assets/IOS_Object-C_teammeeting.md.rpxsBzUu.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/app.d_BG5PHp.js +0 -7
- package/docs/docs/.vitepress/dist/assets/catalog.md.-j_-LmKq.js +0 -1
- package/docs/docs/.vitepress/dist/assets/catalog.md.-j_-LmKq.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/chunks/framework.4Tex8Uls.js +0 -2
- package/docs/docs/.vitepress/dist/assets/chunks/theme.Jw7HlF7i.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_css_css-question.md.HKzi87sa.js +0 -98
- package/docs/docs/.vitepress/dist/assets/frontend_css_css-question.md.HKzi87sa.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_es6_es6-arr.md.jEmK171f.js +0 -29
- package/docs/docs/.vitepress/dist/assets/frontend_es6_es6-arr.md.jEmK171f.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_es6_es6.md.kVe9WLW9.js +0 -53
- package/docs/docs/.vitepress/dist/assets/frontend_es6_es6.md.kVe9WLW9.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_js_js-method.md.1rKvqPT0.js +0 -258
- package/docs/docs/.vitepress/dist/assets/frontend_js_js-method.md.1rKvqPT0.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue-question.md.LrOKTqRK.js +0 -56
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue-question.md.LrOKTqRK.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue-study.md.rj4_xBjU.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue-study.md.rj4_xBjU.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue3-question.md.Mp2SP8bL.js +0 -87
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue3-question.md.Mp2SP8bL.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue3-study.md.mgccM28h.js +0 -769
- package/docs/docs/.vitepress/dist/assets/frontend_vue_vue3-study.md.mgccM28h.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/index.md.t_TVKlD7.js +0 -1
- package/docs/docs/.vitepress/dist/assets/index.md.t_TVKlD7.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-italic-cyrillic.-nLMcIwj.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-italic-greek-ext.hznxWNZO.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-italic-greek.PSfer2Kc.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-italic-latin-ext.RnFly65-.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-italic-latin.27E69YJn.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-italic-vietnamese.xzQHe1q1.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-cyrillic.jIZ9REo5.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-greek-ext.9JiNzaSO.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-greek.Cb5wWeGA.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-latin-ext.GZWE-KO4.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-latin.bvIUbFQP.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/inter-roman-vietnamese.paY3CzEB.woff2 +0 -0
- package/docs/docs/.vitepress/dist/assets/other_regular_regular-check.md.fqxAGj-8.js +0 -1
- package/docs/docs/.vitepress/dist/assets/other_regular_regular-check.md.fqxAGj-8.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/other_safety_safety.md.IFx1TY_H.js +0 -1
- package/docs/docs/.vitepress/dist/assets/other_safety_safety.md.IFx1TY_H.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/style.disEb6vb.css +0 -1
- package/docs/docs/.vitepress/dist/catalog.html +0 -24
- package/docs/docs/.vitepress/dist/frontend/css/css-question.html +0 -121
- package/docs/docs/.vitepress/dist/frontend/es6/es6-arr.html +0 -52
- package/docs/docs/.vitepress/dist/frontend/es6/es6.html +0 -76
- package/docs/docs/.vitepress/dist/frontend/js/js-method.html +0 -281
- package/docs/docs/.vitepress/dist/frontend/vue/vue-question.html +0 -79
- package/docs/docs/.vitepress/dist/frontend/vue/vue-study.html +0 -24
- package/docs/docs/.vitepress/dist/frontend/vue/vue3-question.html +0 -110
- package/docs/docs/.vitepress/dist/frontend/vue/vue3-study.html +0 -792
- package/docs/docs/.vitepress/dist/hashmap.json +0 -1
- package/docs/docs/.vitepress/dist/img/cssImg/button.png +0 -0
- package/docs/docs/.vitepress/dist/img/cssImg/color.png +0 -0
- package/docs/docs/.vitepress/dist/img/cssImg/dialog.png +0 -0
- package/docs/docs/.vitepress/dist/img/cssImg/focus.png +0 -0
- package/docs/docs/.vitepress/dist/img/cssImg/focusEdit.png +0 -0
- package/docs/docs/.vitepress/dist/img/cssImg/mesBox.png +0 -0
- package/docs/docs/.vitepress/dist/img/cssImg/search.png +0 -0
- package/docs/docs/.vitepress/dist/img/iosImg/healthlist.jpg +0 -0
- package/docs/docs/.vitepress/dist/img/vueImg/btnFocus.png +0 -0
- package/docs/docs/.vitepress/dist/img/vueImg/selectClose.png +0 -0
- package/docs/docs/.vitepress/dist/index.html +0 -24
- package/docs/docs/.vitepress/dist/logo.png +0 -0
- package/docs/docs/.vitepress/dist/other/regular/regular-check.html +0 -24
- package/docs/docs/.vitepress/dist/other/safety/safety.html +0 -24
- package/docs/docs/.vitepress/theme/index.js +0 -19
- package/docs/docs/.vitepress/theme/styles/index.scss +0 -3
- package/docs/docs/.vitepress/theme/styles/rainbow.scss +0 -679
- package/docs/docs/.vitepress/theme/styles/vars.scss +0 -103
- package/docs/docs/catalog.md +0 -1
- package/docs/docs/component/Basic/Button.md +0 -19
- package/docs/docs/component/Basic/Icon.md +0 -1
- package/docs/docs/component/Data/BatteryCharging.md +0 -107
- package/docs/docs/index.md +0 -41
- package/docs/docs/public/logo.png +0 -0
- package/docs/package.json +0 -23
- package/src/utils/common.js +0 -16
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import{o as h,c as l,k as s,m as i,a as k,R as n,f as a}from"./chunks/framework.4Tex8Uls.js";const t=s("h2",{id:"全局修改dialog对话框样式",tabindex:"-1"},[k("全局修改Dialog对话框样式 "),s("a",{class:"header-anchor",href:"#全局修改dialog对话框样式","aria-label":'Permalink to "全局修改Dialog对话框样式"'},"")],-1),p=["src"],e=n(`<div class="tip custom-block"><p class="custom-block-title">修改原因:</p><p>智慧班组项目ui统一将新增/修改弹框设计成了圆角,弹框标题居中展示,因此配套的激活中心样式需和智慧班组统一。</p></div><h4 id="vue3修改" tabindex="-1">vue3修改: <a class="header-anchor" href="#vue3修改" aria-label="Permalink to "vue3修改:""></a></h4><ol><li>在项目src > assets > styles > element-ui.scss 文件下写入以下代码</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-dialog__header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-dialog__footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">dialog-footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
7
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
8
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-button</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
14
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">36</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dialog-footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
21
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-button</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">36</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="全局修改button按钮样式" tabindex="-1">全局修改button按钮样式 <a class="header-anchor" href="#全局修改button按钮样式" aria-label="Permalink to "全局修改button按钮样式""></a></h2>`,5),E=["src"],r=n(`<div class="tip custom-block"><p class="custom-block-title">修改原因:</p><p>智慧班组项目ui统一将按钮设计成了圆角,因此配套的激活中心样式需和智慧班组统一。</p></div><h4 id="vue3修改-1" tabindex="-1">vue3修改: <a class="header-anchor" href="#vue3修改-1" aria-label="Permalink to "vue3修改:""></a></h4><ol><li>在项目src > assets > styles > element-ui.scss 文件下写入以下代码</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button.is-plain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="全局修改messagebox消息弹框样式" tabindex="-1">全局修改MessageBox消息弹框样式 <a class="header-anchor" href="#全局修改messagebox消息弹框样式" aria-label="Permalink to "全局修改MessageBox消息弹框样式""></a></h2>`,5),d=["src"],g=n(`<div class="tip custom-block"><p class="custom-block-title">修改原因:</p><p>智慧班组项目ui统一将MessageBox消息弹框的按钮设计成了圆角、确定在左、取消在右,因此配套的激活中心样式需和智慧班组统一。</p></div><h4 id="vue3修改-2" tabindex="-1">vue3修改: <a class="header-anchor" href="#vue3修改-2" aria-label="Permalink to "vue3修改:""></a></h4><ol><li>在项目src > assets > styles > element-ui.scss 文件下写入以下代码</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-message-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-message-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">__</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">btns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex-start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> flex-direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">row-reverse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
39
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
40
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="页面顶部高级搜索样式调整" tabindex="-1">页面顶部高级搜索样式调整 <a class="header-anchor" href="#页面顶部高级搜索样式调整" aria-label="Permalink to "页面顶部高级搜索样式调整""></a></h2>`,5),y=["src"],F=n(`<div class="tip custom-block"><p class="custom-block-title">修改原因:</p><p>智慧班组项目中为解决列表搜索条件过多问题统一设计了高级搜索的ui样式,因此配套的激活中心样式需和智慧班组统一。</p></div><h4 id="vue3修改-3" tabindex="-1">vue3修改: <a class="header-anchor" href="#vue3修改-3" aria-label="Permalink to "vue3修改:""></a></h4><ol><li>在项目src > assets > styles > element-ui.scss 文件下写入以下代码</li></ol><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.search-form-all</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
43
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">22</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">__</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
46
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-form-item__content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">215</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-form-item:last-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">146</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
54
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">68</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
57
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
58
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
59
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-button</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
60
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
61
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
62
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
63
|
-
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
64
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:last-child{</span></span>
|
|
65
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">285</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
66
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">13</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
67
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">__</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
68
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
69
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
70
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-form-item__content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
71
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">215</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
72
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
74
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
75
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ol start="2"><li>在页面顶部搜索的表单中添加class类名为'search-form-all'即可</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-form</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"search-form-all"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"queryParams"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
76
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-form-item</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"项目名称"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"projectName"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
77
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model.trim</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"queryParams.projectName"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"请输入项目名称"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"20"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearable</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @keyup.enter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleQuery"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
78
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
79
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
80
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"primary"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Search"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleQuery"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>搜索</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
81
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Refresh"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"resetQuery"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>重置</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
82
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-form-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
83
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="全局强改颜色样式" tabindex="-1">全局强改颜色样式 <a class="header-anchor" href="#全局强改颜色样式" aria-label="Permalink to "全局强改颜色样式""></a></h2>`,7),c=["src"],o=n(`<div class="tip custom-block"><p class="custom-block-title">修改原因:</p><p>智慧班组项目有时会出现颜色加载失败的问题,为解决此问题,决定强制修改element ui的颜色。</p></div><h4 id="vue2修改" tabindex="-1">vue2修改: <a class="header-anchor" href="#vue2修改" aria-label="Permalink to "vue2修改:""></a></h4><p>1.在项目src > assets > styles > element-ui.scss 文件下写入以下代码</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* */</span></span>
|
|
84
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button.btn_addAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
85
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff5500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
86
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
87
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-switch.is-checked</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-switch__core</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
88
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff5500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
89
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff5500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
90
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
91
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-pagination.is-background</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-pager</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:not</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
92
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff5500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
93
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
94
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .el-tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
95
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ffeee6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
96
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ffddcc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
97
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff5500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
98
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,4),b=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"frontend/css/css-question.md","filePath":"frontend/css/css-question.md"}'),C={name:"frontend/css/css-question.md"},f=Object.assign(C,{setup(u){return(B,m)=>(h(),l("div",null,[t,s("img",{src:i(a)("/img/cssImg/dialog.png"),alt:"图片描述"},null,8,p),e,s("img",{src:i(a)("/img/cssImg/button.png"),alt:"图片描述"},null,8,E),r,s("img",{src:i(a)("/img/cssImg/mesBox.png"),alt:"图片描述"},null,8,d),g,s("img",{src:i(a)("/img/cssImg/search.png"),alt:"图片描述"},null,8,y),F,s("img",{src:i(a)("/img/cssImg/color.png"),alt:"图片描述"},null,8,c),o]))}});export{b as __pageData,f as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{o as h,c as l,k as s,m as i,a as k,R as n,f as a}from"./chunks/framework.4Tex8Uls.js";const t=s("h2",{id:"全局修改dialog对话框样式",tabindex:"-1"},[k("全局修改Dialog对话框样式 "),s("a",{class:"header-anchor",href:"#全局修改dialog对话框样式","aria-label":'Permalink to "全局修改Dialog对话框样式"'},"")],-1),p=["src"],e=n("",5),E=["src"],r=n("",5),d=["src"],g=n("",5),y=["src"],F=n("",7),c=["src"],o=n("",4),b=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"frontend/css/css-question.md","filePath":"frontend/css/css-question.md"}'),C={name:"frontend/css/css-question.md"},f=Object.assign(C,{setup(u){return(B,m)=>(h(),l("div",null,[t,s("img",{src:i(a)("/img/cssImg/dialog.png"),alt:"图片描述"},null,8,p),e,s("img",{src:i(a)("/img/cssImg/button.png"),alt:"图片描述"},null,8,E),r,s("img",{src:i(a)("/img/cssImg/mesBox.png"),alt:"图片描述"},null,8,d),g,s("img",{src:i(a)("/img/cssImg/search.png"),alt:"图片描述"},null,8,y),F,s("img",{src:i(a)("/img/cssImg/color.png"),alt:"图片描述"},null,8,c),o]))}});export{b as __pageData,f as default};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import{_ as s,o as i,c as a,R as h}from"./chunks/framework.4Tex8Uls.js";const F=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"frontend/es6/es6-arr.md","filePath":"frontend/es6/es6-arr.md"}'),n={name:"frontend/es6/es6-arr.md"},k=h(`<h2 id="some" tabindex="-1">some <a class="header-anchor" href="#some" aria-label="Permalink to "some""></a></h2><p>定义:用于监测数组中的元素是否满足指定条件,方法会依次执行数组的每一个元素,如果有一个元素满足条件,表达式返回true,剩余的元素不会再执行监测,如果没有满足条件的元素,则返回false。</p><p>注:不会对空数组检测。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tag </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">some</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr2[index].id</span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="every" tabindex="-1">every <a class="header-anchor" href="#every" aria-label="Permalink to "every""></a></h2><p>定义:用于检测数组所有元素是否都符合指定条件,如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测;如果所有元素都满足条件,则返回 true。</p><p>注:对空数组检测返回true。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> arr</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> result</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">every</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 结果是false,因为存在比3小的数</span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="find" tabindex="-1">find <a class="header-anchor" href="#find" aria-label="Permalink to "find""></a></h2><p>定义:用于查找出当前数组中第一个符合筛选条件的元素(不是下标),若当前数组中有符合筛选条件的元素,则返回第一个符合筛选条件的元素,若没有符合条件的元素,则返回Undefined。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]; </span></span>
|
|
7
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//查找大于20的元素 返回30</span></span>
|
|
8
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> result </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">){</span></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}); </span></span>
|
|
11
|
-
<span class="line"></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//查找大于100的元素 返回undefined</span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> result </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">){</span></span>
|
|
14
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="findindex" tabindex="-1">findIndex <a class="header-anchor" href="#findindex" aria-label="Permalink to "findIndex""></a></h2><p>定义:返回数组中符合筛选条件的第一个元素的索引,若当前数组中有符合筛选条件的元素,则返回第一个符合筛选条件的元素的索引,若没有符合条件的元素,则返回-1。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取数组中第一个值等于或大于 18 的元素的索引:</span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ages </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 输出2</span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> result </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">){</span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">>=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="filter" tabindex="-1">filter <a class="header-anchor" href="#filter" aria-label="Permalink to "filter""></a></h2><p>定义:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。用于把Array中的某些元素过滤掉,然后返回剩下的未被过滤掉的元素。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> array</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">17</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">33</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">40</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
|
|
21
|
-
<span class="line"></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> newArr</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> array.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">num</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> num </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(newArr);</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//打印 [17,18,32,33,16,40]</span></span></code></pre></div><h2 id="reduce" tabindex="-1">reduce <a class="header-anchor" href="#reduce" aria-label="Permalink to "reduce""></a></h2><p>定义: 让数组的前后两项进行某种计算。然后返回其值,并继续计算。不改变原数组,返回计算的最终结果,从数组的第二项开始遍历。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> arr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reduce</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">arr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(result) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1 3 6 result为上次一计算的结果</span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(item) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2 3 4</span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1 2 3</span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> result</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//最终结果为10</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div>`,20),t=[k];function l(p,e,E,r,d,g){return i(),a("div",null,t)}const c=s(n,[["render",l]]);export{F as __pageData,c as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as s,o as i,c as a,R as h}from"./chunks/framework.4Tex8Uls.js";const F=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"frontend/es6/es6-arr.md","filePath":"frontend/es6/es6-arr.md"}'),n={name:"frontend/es6/es6-arr.md"},k=h("",20),t=[k];function l(p,e,E,r,d,g){return i(),a("div",null,t)}const c=s(n,[["render",l]]);export{F as __pageData,c as default};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import{_ as s,o as i,c as a,R as l}from"./chunks/framework.4Tex8Uls.js";const y=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"frontend/es6/es6.md","filePath":"frontend/es6/es6.md"}'),n={name:"frontend/es6/es6.md"},h=l(`<h2 id="变量和常量关键词" tabindex="-1">变量和常量关键词 <a class="header-anchor" href="#变量和常量关键词" aria-label="Permalink to "变量和常量关键词""></a></h2><h3 id="let-关键词" tabindex="-1">let 关键词 <a class="header-anchor" href="#let-关键词" aria-label="Permalink to "let 关键词""></a></h3><ul><li>let 用来声明变量</li><li>没有变量提升</li><li>有块级作用域(一对大括号就是一个程序块,在大括号之中声明的变量,出了大括号就不能用了)</li><li>不能重复声明变量</li></ul><h3 id="const-常量" tabindex="-1">const 常量 <a class="header-anchor" href="#const-常量" aria-label="Permalink to "const 常量""></a></h3><ul><li><p>一旦赋值就不能改变的量就是常量</p></li><li><p>特点:</p><ul><li>没有常量提升</li><li>也有块级作用域</li><li>必须要初始化值</li></ul></li></ul><h3 id="var、let-和-const-的区别" tabindex="-1">var、let 和 const 的区别 <a class="header-anchor" href="#var、let-和-const-的区别" aria-label="Permalink to "var、let 和 const 的区别""></a></h3><ul><li>var 和 let 都能声明变量,但是 let 更严谨一些,在 es6 之后都推荐使用 let 来声明变量。</li><li>let 的特殊点: 不能提升变量(保证程序的逻辑通畅)、 有块级作用域(避免变量交叉污染)、不能重复声明保证变量的唯一性</li><li>const 用来声明常量,常量是不能改变的量,常量也有块级作用域,不能提升,初始化常量时必须赋值</li><li>能用 const 就用 const</li></ul><h2 id="解构赋值" tabindex="-1">解构赋值 <a class="header-anchor" href="#解构赋值" aria-label="Permalink to "解构赋值""></a></h2><ul><li>解构赋值就是将对象或者数组中的数据拆解出来分别赋值给某几个变量/常量</li></ul><h3 id="对象解构" tabindex="-1">对象解构 <a class="header-anchor" href="#对象解构" aria-label="Permalink to "对象解构""></a></h3><ul><li>注意: 解构的变量名必须是对象的 key</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">注意</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: 解构的变量名必须是对象的key;</span></span></code></pre></div><h3 id="数组解构" tabindex="-1">数组解构 <a class="header-anchor" href="#数组解构" aria-label="Permalink to "数组解构""></a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"张飞"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"李逵"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"李鬼"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><h3 id="别名" tabindex="-1">别名 <a class="header-anchor" href="#别名" aria-label="Permalink to "别名""></a></h3><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">username</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">age</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"zs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
2
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(username);</span></span>
|
|
3
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//一旦使用了别名,原名就无法使用了</span></span></code></pre></div><h3 id="变量数量和单元值数量不对等" tabindex="-1">变量数量和单元值数量不对等 <a class="header-anchor" href="#变量数量和单元值数量不对等" aria-label="Permalink to "变量数量和单元值数量不对等""></a></h3><ul><li>当变量数少于单元值数量时,按顺序赋值</li><li>当变量数多于单元值数量时,没有对应的变量为 undefined</li></ul><h2 id="扩展运算符" tabindex="-1">扩展运算符 <a class="header-anchor" href="#扩展运算符" aria-label="Permalink to "扩展运算符""></a></h2><ul><li>如果使用 ... 则多余出来的值会以数组形式保存在最后一个变量中</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [a, b, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">c] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"aaa"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"bbb"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ccc"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ddd"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"eee"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre></div><ul><li>'ccc', 'ddd', 'eee' 会以数组形式保存在变量 c 中</li></ul><h2 id="模板字符串" tabindex="-1">模板字符串 <a class="header-anchor" href="#模板字符串" aria-label="Permalink to "模板字符串""></a></h2><ul><li>使用反引号来声明的字符串就是模板字符串 (Esc 下面的键)</li><li>使用反引号定义字符串时,字符串中可以忽略单双引号的嵌套问题</li><li>在模板字符串中要输出变量可以使用 \${变量名} 的形式</li><li>也不用担心换行问题</li></ul><h2 id="字符串扩展函数" tabindex="-1">字符串扩展函数 <a class="header-anchor" href="#字符串扩展函数" aria-label="Permalink to "字符串扩展函数""></a></h2><ul><li>includes()</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() 判断一个字符串是否包含另一个字符串</span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(char): 判断char是否在str中,存在则返回true,不存在则返回false</span></span></code></pre></div><ul><li><p>startsWith() 和 endsWith()</p><ul><li>startsWith(): 判断一个字符串是否以另一个字符串开始</li><li>endsWith(): 判断一个字符串是否以另一个字符串结束</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">startsWith</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(char): 判断str是否以char开头,是则返回true,否返回false</span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">endsWith</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(char): 判断str是否以char结尾,是则返回true,否返回false</span></span></code></pre></div><ul><li><p>padStart() 和 padEnd()</p><ul><li>padStart(): 设置字符串总长度,如果长度不够则使用某个字符填充到字符串的开头</li><li>padEnd(): 设置字符串总长度,如果长度不够则使用某个字符填充到字符串的结尾</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> str </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "ab"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
6
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//使用 - 将字符串str填充成7位,从字符串开头进行填充</span></span>
|
|
7
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">padStart</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"-"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//-----ab</span></span>
|
|
8
|
-
<span class="line"></span>
|
|
9
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//使用 - 将字符串str填充成7位,从字符串结尾进行填充</span></span>
|
|
10
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(str.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">padEnd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"-"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//-----ab</span></span></code></pre></div><h2 id="数组扩展函数" tabindex="-1">数组扩展函数 <a class="header-anchor" href="#数组扩展函数" aria-label="Permalink to "数组扩展函数""></a></h2><ul><li>includes:判断一个数组中是否包含另一个值 <ul><li>arr.inclcudes(val): 判断 arr 数组中是否包含 val 值,如果包含返回 true,否则返回 false</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> arr</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"aaa"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">123</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3.1415</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">666</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">666</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//true</span></span>
|
|
12
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(arr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"666"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//false</span></span></code></pre></div><h2 id="箭头函数" tabindex="-1">箭头函数 <a class="header-anchor" href="#箭头函数" aria-label="Permalink to "箭头函数""></a></h2><ul><li>箭头函数的用法和普通函数用法几乎一致</li><li>去掉 function 关键词</li><li>() 和 {} 之间增加 =></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {} </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//声明一个匿名函数</span></span>
|
|
13
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {} </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//箭头函数</span></span>
|
|
14
|
-
<span class="line"></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {}</span></span>
|
|
16
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span></code></pre></div><p>箭头函数的特殊点</p><ul><li>箭头函数不能作为构造函数</li><li>箭头函数没有 arguments,要使用可变参数可以使用 rest 方式</li><li>箭头函数没有 this 对象,在箭头函数中的 this 指的函数外层的对象</li><li>如果函数体只有一句并且设置了返回值,则不需要使用大括号,不需要 return</li><li>如果函数中只有一个参数,则不需要写小括号</li></ul><h2 id="定义对象的简洁方式" tabindex="-1">定义对象的简洁方式 <a class="header-anchor" href="#定义对象的简洁方式" aria-label="Permalink to "定义对象的简洁方式""></a></h2><ul><li>在声明对象时,值的变量名和属性名相同时, 可以只写属性而不写值</li></ul><h2 id="null-判断运算符-空值合并运算符" tabindex="-1">Null 判断运算符(空值合并运算符)?? <a class="header-anchor" href="#null-判断运算符-空值合并运算符" aria-label="Permalink to "Null 判断运算符(空值合并运算符)??""></a></h2><p><a href="https://juejin.cn/post/7064462293655879693" target="_blank" rel="noreferrer">参考链接</a></p><ul><li>当左侧的操作数为 null 或者 undefined 时, 返回右侧操作数, 否则返回左侧操作数。</li><li><strong>只有在??前面的数字为 null、undefined 的时候才会返回后面的数字; ||或运算符,不仅包含 null、undefined,还包含 0、''、false</strong></li><li><strong>左侧操作符是 null</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> str</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "我是一个空值"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
18
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(str); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//我是一个空值</span></span></code></pre></div><ul><li><strong>左侧操作符是 undefined</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
19
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> str</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "我是一个空值"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(str); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//我是一个空值</span></span></code></pre></div><ul><li><strong>左侧操作符是其他</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "哈哈"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
21
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> str</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "我是一个空值"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
22
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(str); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//哈哈</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'哈哈'</span></span>
|
|
23
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">、</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">、</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">、</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">、false都会返回 哈哈</span></span></code></pre></div><h2 id="逻辑赋值运算符" tabindex="-1">逻辑赋值运算符 ??= <a class="header-anchor" href="#逻辑赋值运算符" aria-label="Permalink to "逻辑赋值运算符 ??=""></a></h2><ul><li>x??=y 仅在 x 是 null 或者 undefined 时对其赋值。</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> p</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Iric"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">p.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "张三"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(p.name); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//Iric</span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">p.age </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">??=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 23</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(p.age); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//23</span></span></code></pre></div><ul><li>逻辑空赋值的语法短路也意味着 x ??= y 等价于:x ?? (x = y);</li></ul><h2 id="链判断运算符" tabindex="-1">链判断运算符 ?. <a class="header-anchor" href="#链判断运算符" aria-label="Permalink to "链判断运算符 ?.""></a></h2><ul><li>表达式中的所有引用不存在也不会报错,只返回 undefined</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> p</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Iric"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> friends: {</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Lisa"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> p.friends?.name;</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//Lisa</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> age</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> p.friends?.age;</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(age) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h4 id="链判断运算符-有三种写法。" tabindex="-1">链判断运算符?.有三种写法。 <a class="header-anchor" href="#链判断运算符-有三种写法。" aria-label="Permalink to "链判断运算符?.有三种写法。""></a></h4><ul><li>obj?.prop // 对象属性是否存在</li><li>obj?.[expr] // 同上</li><li>func?.(...args) // 函数或对象方法是否存在</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a?.b; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 等同于</span></span>
|
|
39
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a.b;</span></span>
|
|
40
|
-
<span class="line"></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a?.[x]; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 等同于</span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a[x];</span></span>
|
|
43
|
-
<span class="line"></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 等同于</span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
46
|
-
<span class="line"></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">?.(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 等同于</span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><ul><li>(1)短路机制 <ul><li>本质上,?.运算符相当于一种短路机制,只要不满足条件,就不再往下执行。</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a?.[</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x];</span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 等同于</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a[</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x];</span></span></code></pre></div><ul><li>上面的代码, 如果 a 是 undefined 或者 null, 那么 x 就不会递增运算, 也就是说, 链判断运算符一旦为真, 右侧的表达式就不会在求值。</li><li>(2)括号的影响 <ul><li>如果属性链有圆括号, 连判断运算符对圆括号外部没有影响, 只对圆括号内部有影响。</li></ul></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a?.b).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //等价于</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a.b</span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).c;</span></span></code></pre></div><ul><li>上面代码中, ?.对圆括号外部没有影响, 不管 a 对象是否存在, 圆括号后面的.c 总是会执行。一般来说, 使用?.运算符的场合, 不应该使用圆括号</li></ul><h2 id="对象的新增方法" tabindex="-1">对象的新增方法 <a class="header-anchor" href="#对象的新增方法" aria-label="Permalink to "对象的新增方法""></a></h2><h3 id="object-is" tabindex="-1">Object.is() <a class="header-anchor" href="#object-is" aria-label="Permalink to "Object.is()""></a></h3><ul><li>用于确定两个值是否相同</li></ul>`,68),t=[h];function k(p,e,d,r,E,g){return i(),a("div",null,t)}const c=s(n,[["render",k]]);export{y as __pageData,c as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as s,o as i,c as a,R as l}from"./chunks/framework.4Tex8Uls.js";const y=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"frontend/es6/es6.md","filePath":"frontend/es6/es6.md"}'),n={name:"frontend/es6/es6.md"},h=l("",68),t=[h];function k(p,e,d,r,E,g){return i(),a("div",null,t)}const c=s(n,[["render",k]]);export{y as __pageData,c as default};
|