@shixinde/vuepress-theme-init/docs/assets/ES6.html-wEFap9Uq.js

### 其他开源项目

import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const e={},t=p(`<h2 id="es6中-展开运算符" tabindex="-1"><a class="header-anchor" href="#es6中-展开运算符"><span>es6中 [...] 展开运算符</span></a></h2><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" target="_blank" rel="noopener noreferrer">展开运算符(spread operator)</a>，作用是和字面意思一样，就是把东西展开。可以用在<code>array</code>和<code>object</code>上都行。 比如:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">let a = [1,2,3];</span>
<span class="line">let b = [0, ...a, 4]; // [0,1,2,3,4]</span>
<span class="line"></span>
<span class="line">let obj = { a: 1, b: 2 };</span>
<span class="line">let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }</span>
<span class="line">let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" target="_blank" rel="noopener noreferrer">剩余操作符(rest operator)</a>，是解构的一种，意思就是把剩余的东西放到一个<code>array</code>里面赋值给它。一般只针对<code>array</code>的解构，其他的没见过。。。 比如：</p><div class="language-csharp line-numbers-mode" data-highlighter="prismjs" data-ext="cs" data-title="cs"><pre class="language-csharp"><code><span class="line"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">let</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> <span class="token range operator">..</span><span class="token punctuation">.</span>c<span class="token punctuation">]</span> <span class="token operator">=</span> a<span class="token punctuation">;</span></span>
<span class="line">b<span class="token punctuation">;</span> <span class="token comment">// 1</span></span>
<span class="line">c<span class="token punctuation">;</span> <span class="token comment">// [2,3]</span></span>
<span class="line"><span class="token comment">// 也可以</span></span>
<span class="line"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">let</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> <span class="token range operator">..</span><span class="token punctuation">.</span><span class="token punctuation">[</span><span class="token attribute"><span class="token class-name">c</span><span class="token punctuation">,</span><span class="token class-name">d</span><span class="token punctuation">,</span><span class="token class-name">e</span></span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> a<span class="token punctuation">;</span></span>
<span class="line">b<span class="token punctuation">;</span> <span class="token comment">// 1</span></span>
<span class="line">c<span class="token punctuation">;</span> <span class="token comment">// 2</span></span>
<span class="line">d<span class="token punctuation">;</span> <span class="token comment">// 3</span></span>
<span class="line">e<span class="token punctuation">;</span> <span class="token comment">// undefined</span></span>
<span class="line"><span class="token comment">// 也可以</span></span>
<span class="line"><span class="token return-type class-name">function</span> <span class="token function">test</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token range operator">..</span><span class="token punctuation">.</span>rest<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line">	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span></span>
<span class="line">    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rest<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [2,3]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">test</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span></span>
<span class="line">参考网址：https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>segmentfault<span class="token punctuation">.</span>com<span class="token operator">/</span>q<span class="token operator">/</span><span class="token number">1010000008303593</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="默认全部导入方法" tabindex="-1"><a class="header-anchor" href="#默认全部导入方法"><span>默认全部导入方法</span></a></h2><p><strong>全部导入</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> directives <span class="token keyword">from</span> <span class="token string">&#39;./directives&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="对象转数组-object-keys" tabindex="-1"><a class="header-anchor" href="#对象转数组-object-keys"><span>对象转数组 Object.keys</span></a></h2><p><strong>示例代码</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// simple array</span></span>
<span class="line"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&#39;a&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;b&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;c&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console: [&#39;0&#39;, &#39;1&#39;, &#39;2&#39;]</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// array like object</span></span>
<span class="line"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token string">&#39;a&#39;</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token string">&#39;b&#39;</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token string">&#39;c&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console: [&#39;0&#39;, &#39;1&#39;, &#39;2&#39;]</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// array like object with random key ordering</span></span>
<span class="line"><span class="token keyword">var</span> anObj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">100</span><span class="token operator">:</span> <span class="token string">&#39;a&#39;</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token string">&#39;b&#39;</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token operator">:</span> <span class="token string">&#39;c&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>anObj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console: [&#39;2&#39;, &#39;7&#39;, &#39;100&#39;]</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// getFoo is a property which isn&#39;t enumerable</span></span>
<span class="line"><span class="token keyword">var</span> myObj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">  <span class="token literal-property property">getFoo</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token function-variable function">value</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>foo<span class="token punctuation">;</span> <span class="token punctuation">}</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">myObj<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span></span>
<span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>myObj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console: [&#39;foo&#39;]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="解构赋值-重命名" tabindex="-1"><a class="header-anchor" href="#解构赋值-重命名"><span>解构赋值+重命名</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token constant">ES6</span>小知识点：解构赋值<span class="token operator">+</span>重命名</span>
<span class="line"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span>a<span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span> <span class="token comment">//传统解构赋值</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token punctuation">{</span>b<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span> <span class="token comment">//连续解构赋值</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">b</span><span class="token operator">:</span>value<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span> <span class="token comment">//连续解构赋值+重命名</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,13),o=[t];function c(l,i){return a(),s("div",null,o)}const u=n(e,[["render",c],["__file","ES6.html.vue"]]),k=JSON.parse('{"path":"/%E9%A3%9E%E7%A0%81%E7%AF%87/ES6.html","title":"ES6笔记","lang":"zh-CN","frontmatter":{"title":"ES6笔记","date":"2022-08-04T00:00:00.000Z","tags":["ES6"],"categories":["飞码篇"]},"headers":[{"level":2,"title":"es6中 [...] 展开运算符","slug":"es6中-展开运算符","link":"#es6中-展开运算符","children":[]},{"level":2,"title":"默认全部导入方法","slug":"默认全部导入方法","link":"#默认全部导入方法","children":[]},{"level":2,"title":"对象转数组 Object.keys","slug":"对象转数组-object-keys","link":"#对象转数组-object-keys","children":[]},{"level":2,"title":"解构赋值+重命名","slug":"解构赋值-重命名","link":"#解构赋值-重命名","children":[]}],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"飞码篇/ES6.md","excerpt":"<h2>es6中 [...] 展开运算符</h2>\\n<p><a href=\\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">展开运算符(spread operator)</a>，作用是和字面意思一样，就是把东西展开。可以用在<code>array</code>和<code>object</code>上都行。\\n比如:</p>\\n<div class=\\"language-text\\" data-highlighter=\\"prismjs\\" data-ext=\\"text\\" data-title=\\"text\\"><pre class=\\"language-text\\"><code><span class=\\"line\\">let a = [1,2,3];</span>\\n<span class=\\"line\\">let b = [0, ...a, 4]; // [0,1,2,3,4]</span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">let obj = { a: 1, b: 2 };</span>\\n<span class=\\"line\\">let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }</span>\\n<span class=\\"line\\">let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }</span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{u as comp,k as data};