脚本宝典收集整理的这篇文章主要介绍了

前端笔记(四) ES6常用语法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0"><a href="http://www.js-code.com/tag/%e8%a7%a3%e6%9e%84%e8%b5%8b%e5%80%bc" title="解构赋值" target="_blank">解构赋值</a></h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//数组的解构赋值 let [a, b, c] = [1, 2, 3]; a // 1 b // 2 c // 3 let [a, [[b], c]] = [1, [[2], 3]]; a // 1 b // 2 c // 3 let [a, , c] = [1, 2, 3]; a // 1 c // 3 let [a, ...b] = [1, 2, 3]; a // 1 b // [2, 3] //默认值引用其他变量 let [x = 1, y = x] = []; // x = 1, y = 1 let [x = 1, y = x] = [2]; // x = 2, y = 2 let [x = 1, y = x] = [1, 2]; // x = 1, y = 2 let [x = y, y = 1] = []; // Error x用到默认值y时, y还没被声明。 //对象的解构赋值 let { foo: one, bar: two } = { foo: 'aaa', bar: 'bbb' }; one // 'aaa' two // 'bbb' foo // foo is not defined 对象的解构赋值是先找到同名属性, 然后再赋值给对应的变量 let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; //简写 foo // 'aaa' bar // 'bbb' //指定默认值 let { x, y = 5 } = { x: 1 }; x // 1 y // 5 let { x: y = 3 } = { x: 5 }; y // 5 //字符串的解构赋值 const [a, b, c, d, e] = 'hello'; a // 'h' b // 'e' c // 'l' d // 'l' e // 'o' let { length: len } = 'hello'; len // 5 //函数参数的解构赋值 [[1, 2], [3, 4]].map(([a, b]) => a + b );<br /> // [3, 7]</p> <p>//函数参数指定默认值<br /> function desc({ x = 0, y = 0} = {}) {<br /> return [x, y];<br /> }<br /> desc({ x: 3, y: 8 }) // [3, 8]<br /> desc({ x: 3 }) // [3, 0]<br /> desc({}) // [0, 0]<br /> desc() // [0, 0]</p> <p>//undefined触发函数参数的默认值<br /> [1, undefined, 3].map((x = '2') => x);<br /> // [1, 2, 3]</p> <p>/*--常见用途--*/</p> <p>//交换变量<br /> let x = 1, y = 2;<br /> [x, y] = [y, x];</p> <p>//函数返回多个值<br /> function example() {<br /> var obj = {<br /> foo: [1, 2, 3],<br /> bar: { d: 4, e: 5 }<br /> }<br /> return obj;<br /> }<br /> let { foo: [a, b, c], bar : { d, e } } = example();</p> <p>//提取JSON数据<br /> var json = {<br /> result: 'success',<br /> info: {<br /> id: 22,<br /> name: 'RetroAstro',<br /> avatar: 'cream.png',<br /> detail: ['111', '222', '333']<br /> }<br /> }<br /> let { result, info: { id , name, avatar, detail: [a, b, c] } } = json;</p> <p>//遍历Map接口<br /> var map = new Map([<br /> ['first', 'one'],<br /> ['second', 'two']<br /> ]);<br /> for ( let [key, value] of map.entries() ) {<br /> console.log(key, value);<br /> }</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>的<a href="http://www.js-code.com/tag/%e8%a7%a3%e6%9e%84%e8%b5%8b%e5%80%bc" title="浏览关于“解构赋值”的文章" target="_blank" class="tag_link">解构赋值</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> [a, b, c] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]; a <span class="hljs-comment">// 1</span> b <span class="hljs-comment">// 2</span> c <span class="hljs-comment">// 3</span> <span class="hljs-keyword">let</span> [a, [[b], c]] = [<span class="hljs-number">1</span>, [[<span class="hljs-number">2</span>], <span class="hljs-number">3</span>]]; a <span class="hljs-comment">// 1</span> b <span class="hljs-comment">// 2</span> c <span class="hljs-comment">// 3</span> <span class="hljs-keyword">let</span> [a, , c] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]; a <span class="hljs-comment">// 1</span> c <span class="hljs-comment">// 3</span> <span class="hljs-keyword">let</span> [a, ...b] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]; a <span class="hljs-comment">// 1</span> b <span class="hljs-comment">// [2, 3]</span> <span class="hljs-comment">//默认值引用其他变量</span> <span class="hljs-keyword">let</span> [x = <span class="hljs-number">1</span>, y = x] = []; <span class="hljs-comment">// x = 1, y = 1</span> <span class="hljs-keyword">let</span> [x = <span class="hljs-number">1</span>, y = x] = [<span class="hljs-number">2</span>]; <span class="hljs-comment">// x = 2, y = 2</span> <span class="hljs-keyword">let</span> [x = <span class="hljs-number">1</span>, y = x] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>]; <span class="hljs-comment">// x = 1, y = 2</span> <span class="hljs-keyword">let</span> [x = y, y = <span class="hljs-number">1</span>] = []; <span class="hljs-comment">// Error x用到默认值y时, y还没被声明。</span> <span class="hljs-comment">//对象的解构赋值</span> <span class="hljs-keyword">let</span> { <span class="hljs-attr">foo</span>: one, <span class="hljs-attr">bar</span>: two } = { <span class="hljs-attr">foo</span>: <span class="hljs-string">'aaa'</span>, <span class="hljs-attr">bar</span>: <span class="hljs-string">'bbb'</span> }; one <span class="hljs-comment">// 'aaa'</span> two <span class="hljs-comment">// 'bbb'</span> foo <span class="hljs-comment">// foo is not def<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>ed 对象的解构赋值是先找到同名属性, 然后再赋值给对应的变量</span> <span class="hljs-keyword">let</span> { foo, bar } = { <span class="hljs-attr">foo</span>: <span class="hljs-string">'aaa'</span>, <span class="hljs-attr">bar</span>: <span class="hljs-string">'bbb'</span> }; <span class="hljs-comment">//简写</span> foo <span class="hljs-comment">// 'aaa'</span> bar <span class="hljs-comment">// 'bbb'</span> <span class="hljs-comment">//指定默认值</span> <span class="hljs-keyword">let</span> { x, y = <span class="hljs-number">5</span> } = { <span class="hljs-attr">x</span>: <span class="hljs-number">1</span> }; x <span class="hljs-comment">// 1</span> y <span class="hljs-comment">// 5</span> <span class="hljs-keyword">let</span> { <span class="hljs-attr">x</span>: y = <span class="hljs-number">3</span> } = { <span class="hljs-attr">x</span>: <span class="hljs-number">5</span> }; y <span class="hljs-comment">// 5</span> <span class="hljs-comment">//字符串的解构赋值</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> [a, b, c, d, e] = <span class="hljs-string">'hello'</span>; a <span class="hljs-comment">// 'h'</span> b <span class="hljs-comment">// 'e'</span> c <span class="hljs-comment">// 'l'</span> d <span class="hljs-comment">// 'l'</span> e <span class="hljs-comment">// 'o'</span> <span class="hljs-keyword">let</span> { <span class="hljs-attr"><a href="http://www.js-code.com/tag/length" title="浏览关于“length”的文章" target="_blank" class="tag_link">length</a></span>: len } = <span class="hljs-string">'hello'</span>; len <span class="hljs-comment">// 5</span> <span class="hljs-comment">//函数参数的解构赋值</span> [[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>]].map(<span class="hljs-function">(<span class="hljs-params">[a, b]</span>) =&gt;</span> a + b ); <span class="hljs-comment">// [3, 7]</span> <span class="hljs-comment">//函数参数指定默认值</span> <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-title">desc</span>(<span class="hljs-params">{ x = <span class="hljs-number">0</span>, y = <span class="hljs-number">0</span>} = {}</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> [x, y]; } desc({ <span class="hljs-attr">x</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">8</span> }) <span class="hljs-comment">// [3, 8]</span> desc({ <span class="hljs-attr">x</span>: <span class="hljs-number">3</span> }) <span class="hljs-comment">// [3, 0]</span> desc({}) <span class="hljs-comment">// [0, 0]</span> desc() <span class="hljs-comment">// [0, 0]</span> <span class="hljs-comment">//<a href="http://www.js-code.com/tag/undefined" title="浏览关于“undefined”的文章" target="_blank" class="tag_link">undefined</a>触发函数参数的默认值</span> [<span class="hljs-number">1</span>, <span class="hljs-literal">undefined</span>, <span class="hljs-number">3</span>].map(<span class="hljs-function">(<span class="hljs-params">x = <span class="hljs-string">'2'</span></span>) =&gt;</span> x); <span class="hljs-comment">// [1, 2, 3]</span> <span class="hljs-comment">/*--常见用途--*/</span> <span class="hljs-comment">//交换变量</span> <span class="hljs-keyword">let</span> x = <span class="hljs-number">1</span>, y = <span class="hljs-number">2</span>; [x, y] = [y, x]; <span class="hljs-comment">//函数返回多个值</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">example</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> obj = { <span class="hljs-attr">foo</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>], <span class="hljs-attr">bar</span>: { <span class="hljs-attr">d</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">5</span> } } <span class="hljs-keyword">return</span> obj; } <span class="hljs-keyword">let</span> { <span class="hljs-attr">foo</span>: [a, b, c], <span class="hljs-attr">bar</span> : { d, e } } = example(); <span class="hljs-comment">//提取JSON数据</span> <span class="hljs-keyword">var</span> json = { <span class="hljs-attr">result</span>: <span class="hljs-string">'success'</span>, <span class="hljs-attr">info</span>: { <span class="hljs-attr">id</span>: <span class="hljs-number">22</span>, <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>: <span class="hljs-string">'RetroAstro'</span>, <span class="hljs-attr">avatar</span>: <span class="hljs-string">'cream.png'</span>, <span class="hljs-attr">detail</span>: [<span class="hljs-string">'111'</span>, <span class="hljs-string">'222'</span>, <span class="hljs-string">'333'</span>] } } <span class="hljs-keyword">let</span> { result, <span class="hljs-attr">info</span>: { id , name, avatar, <span class="hljs-attr">detail</span>: [a, b, c] } } = json; <span class="hljs-comment">//遍历<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>接口</span> <span class="hljs-keyword">var</span> map = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <span class="hljs-built_in">Map</span>([ [<span class="hljs-string">'first'</span>, <span class="hljs-string">'one'</span>], [<span class="hljs-string">'second'</span>, <span class="hljs-string">'two'</span>] ]); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span> ( <span class="hljs-keyword">let</span> [key, value] <span class="hljs-keyword">of</span> map.entries() ) { <span class="hljs-built_in">console</span>.log(key, value); } </code></pre> <h3 id="articleHeader1"><a href="http://www.js-code.com/tag/%e6%a8%a1%e6%9d%bf%e5%ad%97%e7%ac%a6%e4%b8%b2" title="模板字符串" target="_blank">模板字符串</a></h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="//常用实例<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> obj = {<br /> user<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: 'RetroAstro',<br /> avatar: 'user.png',<br /> <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>fo() {<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> x = 1, y = 2;<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> x + y;<br /> }<br /> }<br /> var str =<br /> `</p> <div class=&quot;info&quot;> <span class=&quot;username&quot;>${obj.user<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>}</span><br /> <img class=&quot;avatar&quot; src=&quot;${obj.avatar}&quot;><br /> <span class=&quot;coin-num&quot;>${obj.<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>fo()}</span> </div> <p>`<br /> wrapper.insertAdjancent<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>('afterEnd', <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m);</p> <p>//标签模板<br /> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> passthru(literals, ...values) {<br /> var output = '';<br /> <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> ( var index = 0; index < values.<a href="http://www.js-code.com/tag/length" title="length" target="_blank">length</a>; index++ ) {<br /> output += literals[index] + values[index];<br /> }<br /> output += literals[index];<br /> console.log(literals);<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> output;<br /> }</p> <p>var total = 30;<br /> passthru`The total is ${total} (${total * 1.05} with tax)`;<br /> // The total is 30 (31.5 with tax)</p> <p>/*<br /> @ ...values为rest参数写法, 即在参数个数不确定时这么写, 此时的values相当于一个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>。<br /> @ passthru`The total is ${total} (${total * 1.05} with tax)` 等价于下面的写法。<br /> @ passthru([&quot;The total is &quot;, &quot; (&quot;, &quot; with tax)&quot;], 30, 31.5)<br /> */</p> <p>//用途——过滤<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>敏感字符串<br /> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> safe<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>(template) {<br /> var str = template[0];<br /> <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> ( var i = 1; i < <a href="http://www.js-code.com/tag/arguments" title="arguments" target="_blank">arguments</a>.<a href="http://www.js-code.com/tag/length" title="length" target="_blank">length</a>; i++ ) {<br /> var arg = '' + <a href="http://www.js-code.com/tag/arguments" title="arguments" target="_blank">arguments</a>[i];<br /> str += arg<br /> .replace(/&amp;/g, '&amp;amp;')<br /> .replace(/</g, '&amp;lt;') .replace(/>/g, '&amp;gt;');<br /> str += template[i];<br /> }<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> str;<br /> }<br /> var user = '<script><a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>(123)</script>';<br /> safeHTML`</p> <p>${user} has sent you a message.</p> <p>`;<br /> // &quot;</p> <p>&amp;lt;script&amp;gt;<a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>(123)&amp;lt;/script&amp;gt; has sent you a message.</p> <p>&quot;</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//常用实例</span> <span class="hljs-keyword">var</span> obj = { <span class="hljs-attr">username</span>: <span class="hljs-string">'RetroAstro'</span>, <span class="hljs-attr">avatar</span>: <span class="hljs-string">'user.png'</span>, info() { <span class="hljs-keyword">var</span> x = <span class="hljs-number">1</span>, y = <span class="hljs-number">2</span>; <span class="hljs-keyword">return</span> x + y; } } <span class="hljs-keyword">var</span> str = <span class="hljs-string">`&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> class="info"&gt; &lt;span class="username"&gt;<span class="hljs-subst">${obj.username}</span>&lt;/span&gt; &lt;img class="avatar" src="<span class="hljs-subst">${obj.avatar}</span>"&gt; &lt;span class="coin-num"&gt;<span class="hljs-subst">${obj.info()}</span>&lt;/span&gt; &lt;/div&gt; `</span> wrapper.insertAdjancentHTML(<span class="hljs-string">'afterEnd'</span>, <a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m); <span class="hljs-comment">//标签模板</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">passthru</span>(<span class="hljs-params">literals, ...values</span>) </span>{ <span class="hljs-keyword">var</span> output = <span class="hljs-string">''</span>; <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>; index &lt; values.length; index++ ) { output += literals[index] + values[index]; } output += literals[index]; <span class="hljs-built_in">console</span>.log(literals); <span class="hljs-keyword">return</span> output; } <span class="hljs-keyword">var</span> total = <span class="hljs-number">30</span>; passthru<span class="hljs-string">`The total is <span class="hljs-subst">${total}</span> (<span class="hljs-subst">${total * <span class="hljs-number">1.05</span>}</span> with tax)`</span>; <span class="hljs-comment">// The total is 30 (31.5 with tax)</span> <span class="hljs-comment">/* @ ...values为rest参数写法, 即在参数个数不确定时这么写, 此时的values相当于一个数组。 @ passthru`The total is ${total} (${total * 1.05} with tax)` 等价于下面的写法。 @ passthru(["The total is ", " (", " with tax)"], 30, 31.5) */</span> <span class="hljs-comment">//用途——过滤HTML敏感字符串</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">safeHTML</span>(<span class="hljs-params">template</span>) </span>{ <span class="hljs-keyword">var</span> str = template[<span class="hljs-number">0</span>]; <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; <span class="hljs-built_in"><a href="http://www.js-code.com/tag/arguments" title="浏览关于“arguments”的文章" target="_blank" class="tag_link">arguments</a></span>.length; i++ ) { <span class="hljs-keyword">var</span> arg = <span class="hljs-string">''</span> + <span class="hljs-built_in">arguments</span>[i]; str += arg .replace(<span class="hljs-regexp">/&amp;/g</span>, <span class="hljs-string">'&amp;amp;'</span>) .replace(<span class="hljs-regexp">/&lt;/g</span>, <span class="hljs-string">'&amp;lt;'</span>) .replace(<span class="hljs-regexp">/&gt;/g</span>, <span class="hljs-string">'&amp;gt;'</span>); str += template[i]; } <span class="hljs-keyword">return</span> str; } <span class="hljs-keyword">var</span> user = <span class="hljs-string">'&lt;script&gt;<a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(123)&lt;/script&gt;'</span>; safeHTML<span class="hljs-string">`&lt;p&gt;<span class="hljs-subst">${user}</span> has sent you a message.&lt;/p&gt;`</span>; <span class="hljs-comment">// "&lt;p&gt;&amp;lt;script&amp;gt;alert(123)&amp;lt;/script&amp;gt; has sent you a message.&lt;/p&gt;"</span> </code></pre> <h3 id="articleHeader2">函数的扩展</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//函数参数默认值 var $ = { ajax({ method = 'GET', url = '', async = true, headers = {}, encType = '', data = '', dataType = 'json', success = function() {}, error = function() {} }) { // start xhr ... } } //箭头函数 var x = 5, y = 6; var f = () => { return x + y };<br /> //等价于<br /> var f = () => x + y;<br /> //等价于<br /> var f = function() {<br /> return x + y;<br /> }</p> <p>//rest参数和变量解构<br /> var f = ({first, last}, ...values) => [first, values, last];<br /> f({ first: 'Retro', last: 'Astro' }, 2, 3, 4, 5);<br /> // [&quot;Retro&quot;, [2, 3, 4, 5], &quot;Astro&quot;]</p> <p>//箭头函数中的this指向<br /> function foo() {<br /> setTimeout(() => {<br /> console.log(this.id);<br /> }, 1000)<br /> }<br /> // 等价于<br /> function foo() {<br /> var that = this;<br /> setTimeout(function() {<br /> console.log(that.id);<br /> }, 1000)<br /> }<br /> foo.call({id: '233'}); // 233</p> <p>/*<br /> @ 箭头函数里面根本没有自己的this, 而是引用外层的this。<br /> @ 箭头函数里没有arguments, super, new.target 三个变量, 而指向外层函数对应的值。<br /> */</p> <p>//尾调用优化<br /> function fatorial(n) {<br /> if ( n === 1 ) { return 1; }<br /> return n * factorial(n-1); // 一般的递归, 保存多个调用记录, 非常消耗内存。<br /> }</p> <p>function factorial(n, total) {<br /> if ( n === 1 ) { return total; }<br /> return factorial(n-1, n * total); // 尾递归优化<br /> }</p> <p>//蹦床函数, 将递归执行转为循环执行。<br /> function trampoline(f) {<br /> while ( f &amp;&amp; f instanceof Function ) {<br /> f = f();<br /> }<br /> return f;<br /> }</p> <p>function sum(x, y) {<br /> if (y > 0) {<br /> return sum.bind(null, x+1, y-1);<br /> } else {<br /> return x;<br /> }<br /> }<br /> trampoline(sum(1, 100000)); // 100001</p> <p>//tco函数 —— 更好的尾递归优化实现<br /> function tco(f) {</p> <p> var value;<br /> var active = false;<br /> var accumulated = [];</p> <p> return function accumulator() {<br /> accumulated.push(arguments); // 传入类数组对象[x, y]且每次的值在改变。<br /> if ( !active ) {<br /> active = true;<br /> while ( accumulated.length ) {<br /> value = f.apply(this, accumulated.shift());<br /> /*<br /> 调用外部函数, 此时while循环继续。<br /> active为true, 但accumulated中参数变化。<br /> 当accumulated中的值为空时, x值value接收并返回。<br /> */<br /> }<br /> active = false;<br /> return value;<br /> }<br /> }</p> <p>}</p> <p>var sum = tco(function(x, y) {<br /> if ( y > 0 ) {<br /> return sum(x+1, y-1); // 相当于再次执行accumulator函数, 且传入新的参数值。<br /> } else {<br /> return x;<br /> }<br /> })<br /> sum(1, 100000) // 100001</p> <p>/*<br /> @ 尾递归实现 —— 改写一般的递归函数, 确保最后一步只调用自身。<br /> --- 尾递归优化 ---<br /> @ 实现意义 —— 防止栈溢出, 相对节省内存。(函数里面调用函数才叫递归执行, 产生前面的副作用)<br /> @ 实现要点 —— 减少调用栈, 采用循环从而替换掉递归。<br /> */</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//函数参数默认值</span> <span class="hljs-keyword">var</span> $ = { ajax({ method = <span class="hljs-string">'GET'</span>, url = <span class="hljs-string">''</span>, <span class="hljs-keyword">async</span> = <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, headers = {}, encType = <span class="hljs-string">''</span>, data = <span class="hljs-string">''</span>, dataType = <span class="hljs-string">'json'</span>, success = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{}, error = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{} }) { <span class="hljs-comment">// start xhr ...</span> } } <span class="hljs-comment">//<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="浏览关于“箭头函数”的文章" target="_blank" class="tag_link">箭头函数</a></span> <span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>, y = <span class="hljs-number">6</span>; <span class="hljs-keyword">var</span> f = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">return</span> x + y }; <span class="hljs-comment">//等价于</span> <span class="hljs-keyword">var</span> f = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> x + y; <span class="hljs-comment">//等价于</span> <span class="hljs-keyword">var</span> f = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> x + y; } <span class="hljs-comment">//rest参数和变量解构</span> <span class="hljs-keyword">var</span> f = <span class="hljs-function">(<span class="hljs-params">{first, last}, ...values</span>) =&gt;</span> [first, values, last]; f({ <span class="hljs-attr">first</span>: <span class="hljs-string">'Retro'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Astro'</span> }, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>); <span class="hljs-comment">// ["Retro", [2, 3, 4, 5], "Astro"]</span> <span class="hljs-comment">//箭头函数中的<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>指向</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{ <a href="http://www.js-code.com/tag/setTimeout" title="浏览关于“setTimeout”的文章" target="_blank" class="tag_link">setTimeout</a>(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.id); }, <span class="hljs-number">1000</span>) } <span class="hljs-comment">// 等价于</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> that = <span class="hljs-keyword">this</span>; setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(that.id); }, <span class="hljs-number">1000</span>) } foo.c<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>({<span class="hljs-attr">id</span>: <span class="hljs-string">'233'</span>}); <span class="hljs-comment">// 233</span> <span class="hljs-comment">/* @ 箭头函数里面根本没有自己的this, 而是引用外层的this。 @ 箭头函数里没有arguments, <a href="http://www.js-code.com/tag/super" title="浏览关于“super”的文章" target="_blank" class="tag_link">super</a>, new.target 三个变量, 而指向外层函数对应的值。 */</span> <span class="hljs-comment">//尾调用优化</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fatorial</span>(<span class="hljs-params">n</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> ( n === <span class="hljs-number">1</span> ) { <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>; } <span class="hljs-keyword">return</span> n * factorial(n<span class="hljs-number">-1</span>); <span class="hljs-comment">// 一般的递归, 保存多个调用记录, 非常消耗内存。</span> } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">factorial</span>(<span class="hljs-params">n, total</span>) </span>{ <span class="hljs-keyword">if</span> ( n === <span class="hljs-number">1</span> ) { <span class="hljs-keyword">return</span> total; } <span class="hljs-keyword">return</span> factorial(n<span class="hljs-number">-1</span>, n * total); <span class="hljs-comment">// 尾递归优化</span> } <span class="hljs-comment">//蹦床函数, 将递归执行转为循环执行。</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">trampoline</span>(<span class="hljs-params">f</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/while" title="浏览关于“while”的文章" target="_blank" class="tag_link">while</a></span> ( f &amp;&amp; f <span class="hljs-keyword"><a href="http://www.js-code.com/tag/instanceof" title="浏览关于“instanceof”的文章" target="_blank" class="tag_link">instanceof</a></span> <span class="hljs-built_in">Function</span> ) { f = f(); } <span class="hljs-keyword">return</span> f; } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">x, y</span>) </span>{ <span class="hljs-keyword">if</span> (y &gt; <span class="hljs-number">0</span>) { <span class="hljs-keyword">return</span> sum.bind(<span class="hljs-literal"><a href="http://www.js-code.com/tag/null" title="浏览关于“null”的文章" target="_blank" class="tag_link">null</a></span>, x+<span class="hljs-number">1</span>, y<span class="hljs-number">-1</span>); } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { <span class="hljs-keyword">return</span> x; } } trampoline(sum(<span class="hljs-number">1</span>, <span class="hljs-number">100000</span>)); <span class="hljs-comment">// 100001</span> <span class="hljs-comment">//tco函数 —— 更好的尾递归优化实现</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">tco</span>(<span class="hljs-params">f</span>) </span>{ <span class="hljs-keyword">var</span> value; <span class="hljs-keyword">var</span> active = <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>; <span class="hljs-keyword">var</span> accumulated = []; <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">accumulator</span>(<span class="hljs-params"></span>) </span>{ accumulated.push(<span class="hljs-built_in">arguments</span>); <span class="hljs-comment">// 传入类数组对象[x, y]且每次的值在改变。</span> <span class="hljs-keyword">if</span> ( !active ) { active = <span class="hljs-literal">true</span>; <span class="hljs-keyword">while</span> ( accumulated.length ) { value = f.apply(<span class="hljs-keyword">this</span>, accumulated.shift()); <span class="hljs-comment">/* 调用外部函数, 此时while循环继续。 active为true, 但accumulated中参数变化。 当accumulated中的值为空时, x值value接收并返回。 */</span> } active = <span class="hljs-literal">false</span>; <span class="hljs-keyword">return</span> value; } } } <span class="hljs-keyword">var</span> sum = tco(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x, y</span>) </span>{ <span class="hljs-keyword">if</span> ( y &gt; <span class="hljs-number">0</span> ) { <span class="hljs-keyword">return</span> sum(x+<span class="hljs-number">1</span>, y<span class="hljs-number">-1</span>); <span class="hljs-comment">// 相当于再次执行accumulator函数, 且传入新的参数值。 </span> } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> x; } }) sum(<span class="hljs-number">1</span>, <span class="hljs-number">100000</span>) <span class="hljs-comment">// 100001</span> <span class="hljs-comment">/* @ 尾递归实现 —— 改写一般的递归函数, 确保最后一步只调用自身。 --- 尾递归优化 --- @ 实现意义 —— 防止栈溢出, 相对节省内存。(函数里面调用函数才叫递归执行, 产生前面的副作用) @ 实现要点 —— 减少调用栈, 采用循环从而替换掉递归。 */</span> </code></pre> <h3 id="articleHeader3"><a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>的扩展</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="//扩展运算符<br /> ...[1, 2, 3, 4, 5]<br /> // 1 2 3 4 5</p> <p>var <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>List = <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.querySelectorAll('<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>');<br /> [...<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>List];<br /> // [</p> <div>, </p> <div>, </p> <div>]</p> <p>var arr1 = [1, 2, 3];<br /> var arr2 = [4, 5, 6];<br /> arr1.push(...arr2)<br /> console.log(arr1) // [1, 2, 3, 4, 5, 6]</p> <p>let map = new Map([<br /> [1, 'one'],<br /> [2, 'two'],<br /> [3, 'three']<br /> ])</p> <p>let arr = [...map.keys()]; // [1, 2, 3]</p> <p>/*<br /> --- 用途 ---<br /> @ 将数组转为用逗号分隔的参数序列<br /> @ 可以展开任何含有Iterator接口的对象, 从而将其转变为数组。<br /> */</p> <p>// Array.from()<br /> function foo() {<br /> var args = Array.from(arguments);<br /> // ...<br /> }</p> <p>let spans = document.querySelectorAll('span');<br /> // ES5<br /> let names1 = Array.prototype.map.call(spans, s => s.textContent);<br /> // ES6<br /> let names2 = Array.from(spans, s => s.textContent);</p> <p>/*<br /> --- 用途 ---<br /> @ 将两类对象转为真正的数组。<br /> @ 类似数组的对象 (array-like object)<br /> @ 可遍历对象 (iterable)<br /> */</p> <p>// Array.of() --- 将一组值转换为数组<br /> Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]</p> <p>// find() --- 找出数组中符合条件的第一个成员并返回该成员。<br /> [1, 3, -8, 10].find( n => n < 0 ); // -8 // findIndex() --- 找出数组中符合条件的第一个成员并返回该成员的位置。 [1, 3, -8, 10].findIndex( n => n < 0 ); // 2 // keys() values() entries() --- 返回一个遍历器对象, 用for...of循环遍历。 var arr = ['a', 'b']; for ( let key of arr.keys() ) { console.log(key); } // 0 1 for ( let value of arr[Symbol.iterator]() ) { console.log(value); // Chrome, Firefox 未实现 arr.values() } // a b for ( let [key, value] of arr.entries() ) { console.log(key, value); } // 0 &quot;a&quot; // 1 &quot;b&quot; // includes() --- 表示某个数组是否包含特定的值, 返回一个布尔值。(第二个参数表示搜索的索引位置) [1, 2, 3].includes(2, 1) // true [1, 2, 3].includes(2, 2) // false " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//扩展运算符</span> ...[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>] <span class="hljs-comment">// 1 2 3 4 5</span> <span class="hljs-keyword">var</span> <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>List = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.querySelectorAll(<span class="hljs-string">'div'</span>); [...nodeList]; <span class="hljs-comment">// [&lt;div&gt;, &lt;div&gt;, &lt;div&gt;]</span> <span class="hljs-keyword">var</span> arr1 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]; <span class="hljs-keyword">var</span> arr2 = [<span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>]; arr1.push(...arr2) <span class="hljs-built_in">console</span>.log(arr1) <span class="hljs-comment">// [1, 2, 3, 4, 5, 6]</span> <span class="hljs-keyword">let</span> map = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>([ [<span class="hljs-number">1</span>, <span class="hljs-string">'one'</span>], [<span class="hljs-number">2</span>, <span class="hljs-string">'two'</span>], [<span class="hljs-number">3</span>, <span class="hljs-string">'three'</span>] ]) <span class="hljs-keyword">let</span> arr = [...map.keys()]; <span class="hljs-comment">// [1, 2, 3]</span> <span class="hljs-comment">/* --- 用途 --- @ 将数组转为用逗号分隔的参数序列 @ 可以展开任何含有Iterator接口的对象, 从而将其转变为数组。 */</span> <span class="hljs-comment">// <a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a>.from()</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> args = <span class="hljs-built_in">Array</span>.from(<span class="hljs-built_in">arguments</span>); <span class="hljs-comment">// ...</span> } <span class="hljs-keyword">let</span> spans = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'span'</span>); <span class="hljs-comment">// ES5</span> <span class="hljs-keyword">let</span> names1 = <span class="hljs-built_in">Array</span>.<a href="http://www.js-code.com/tag/prototype" title="浏览关于“prototype”的文章" target="_blank" class="tag_link">prototype</a>.map.call(spans, s =&gt; s.<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>Content); <span class="hljs-comment">// ES6</span> <span class="hljs-keyword">let</span> names2 = <span class="hljs-built_in">Array</span>.from(spans, s =&gt; s.textContent); <span class="hljs-comment">/* --- 用途 --- @ 将两类对象转为真正的数组。 @ 类似数组的对象 (array-like object) @ 可遍历对象 (iterable) */</span> <span class="hljs-comment">// Array.of() --- 将一组值转换为数组</span> <span class="hljs-built_in">Array</span>.of(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>) <span class="hljs-comment">// [1, 2, 3, 4, 5]</span> <span class="hljs-comment">// find() --- 找出数组中符合条件的第一个成员并返回该成员。</span> [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">-8</span>, <span class="hljs-number">10</span>].find( <span class="hljs-function"><span class="hljs-params">n</span> =&gt;</span> n &lt; <span class="hljs-number">0</span> ); <span class="hljs-comment">// -8</span> <span class="hljs-comment">// findIndex() --- 找出数组中符合条件的第一个成员并返回该成员的位置。</span> [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">-8</span>, <span class="hljs-number">10</span>].findIndex( <span class="hljs-function"><span class="hljs-params">n</span> =&gt;</span> n &lt; <span class="hljs-number">0</span> ); <span class="hljs-comment">// 2</span> <span class="hljs-comment">// keys() values() entries() --- 返回一个遍历器对象, 用for...of循环遍历。</span> <span class="hljs-keyword">var</span> arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>]; <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">let</span> key <span class="hljs-keyword">of</span> arr.keys() ) { <span class="hljs-built_in">console</span>.log(key); } <span class="hljs-comment">// 0 1</span> <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">let</span> value <span class="hljs-keyword">of</span> arr[<span class="hljs-built_in">Symbol</span>.iterator]() ) { <span class="hljs-built_in">console</span>.log(value); <span class="hljs-comment">// Chrome, Firefox 未实现 arr.values()</span> } <span class="hljs-comment">// a b</span> <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">let</span> [key, value] <span class="hljs-keyword">of</span> arr.entries() ) { <span class="hljs-built_in">console</span>.log(key, value); } <span class="hljs-comment">// 0 "a"</span> <span class="hljs-comment">// 1 "b"</span> <span class="hljs-comment">// includes() --- 表示某个数组是否包含特定的值, 返回一个布尔值。(第二个参数表示搜索的索引位置)</span> [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].includes(<span class="hljs-number">2</span>, <span class="hljs-number">1</span>) <span class="hljs-comment">// true</span> [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].includes(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>) <span class="hljs-comment">// false</span> </code></pre> <h3 id="articleHeader4">对象的扩展</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// Object.is() --- 比较两个数是否严格相等, 比 === 符号更好。 +0 === -0 // true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true // Object.assign() --- 将源对象所有可枚举的属性复制到目标对象。 // 属于浅复制, 对于嵌套的对象只是复制对象的引用。 /* --- 常见用途 ---*/ // 为对象添加属性。 class Point { constructor(x, y) { Object.assign(this, {x, y}); } } //为对象添加方法 var foo = {}; Object.assign(foo.prototype, { method1() { //... }, method2() { //... }, method3() { //... } }) // 克隆对象, 保持继承链。(浅复制) function clone(obj) { var proto = Object.getPrototypeOf(obj); return Object.assign(Object.create(proto), obj); } // Object.setPrototypeOf() Object.getPrototypeOf() // 设置或获取原型对象。 let proto = {}; let obj = { x: 10 }; Object.setPrototypeOf(obj, proto); proto.y = 20; obj.y; // 20; Object.getPrototypeOf(obj) === proto // true // Object.keys() Object.values() Object.entries() // 对可遍历的属性起作用, 且可以用for...of循环遍历。 let { keys, values, entries } = Object; let obj = { a: 1, b: 2, c: 3 }; for ( let key of keys(obj) ) { console.log(key); // a b c } for ( let value of values(obj) ) { console.log(value); // 1 2 3 } for ( let [key, value] of entries(obj) ) { console.log([key, value]); // [&quot;a&quot;, 1] [&quot;b&quot;, 2] [&quot;c&quot;, 3] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// <a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>.is() --- 比较两个数是否严格相等, 比 === 符号更好。</span> +<span class="hljs-number">0</span> === <span class="hljs-number">-0</span> <span class="hljs-comment">// true</span> <span class="hljs-literal"><a href="http://www.js-code.com/tag/NaN" title="浏览关于“NaN”的文章" target="_blank" class="tag_link">NaN</a></span> === <span class="hljs-literal">NaN</span> <span class="hljs-comment">// false</span> <span class="hljs-built_in">Object</span>.is(+<span class="hljs-number">0</span>, <span class="hljs-number">-0</span>) <span class="hljs-comment">// false</span> <span class="hljs-built_in">Object</span>.is(<span class="hljs-literal">NaN</span>, <span class="hljs-literal">NaN</span>) <span class="hljs-comment">// true</span> <span class="hljs-comment">// Object.<a href="http://www.js-code.com/tag/assign" title="浏览关于“assign”的文章" target="_blank" class="tag_link">assign</a>() --- 将源对象所有可枚举的属性复制到目标对象。</span> <span class="hljs-comment">// 属于浅复制, 对于嵌套的对象只是复制对象的引用。</span> <span class="hljs-comment">/* --- 常见用途 ---*/</span> <span class="hljs-comment">// 为对象添加属性。</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Po<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a></span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a></span>(x, y) { <span class="hljs-built_in">Object</span>.assign(<span class="hljs-keyword">this</span>, {x, y}); } } <span class="hljs-comment">//为对象添加方法</span> <span class="hljs-keyword">var</span> foo = {}; <span class="hljs-built_in">Object</span>.assign(foo.prototype, { method1() { <span class="hljs-comment">//...</span> }, method2() { <span class="hljs-comment">//...</span> }, method3() { <span class="hljs-comment">//...</span> } }) <span class="hljs-comment">// 克隆对象, 保持继承链。(浅复制) </span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clone</span>(<span class="hljs-params">obj</span>) </span>{ <span class="hljs-keyword">var</span> proto = <span class="hljs-built_in">Object</span>.getPrototypeOf(obj); <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign(<span class="hljs-built_in">Object</span>.create(proto), obj); } <span class="hljs-comment">// Object.setPrototypeOf() Object.getPrototypeOf()</span> <span class="hljs-comment">// 设置或获取原型对象。</span> <span class="hljs-keyword">let</span> proto = {}; <span class="hljs-keyword">let</span> obj = { <span class="hljs-attr">x</span>: <span class="hljs-number">10</span> }; <span class="hljs-built_in">Object</span>.setPrototypeOf(obj, proto); proto.y = <span class="hljs-number">20</span>; obj.y; <span class="hljs-comment">// 20;</span> <span class="hljs-built_in">Object</span>.getPrototypeOf(obj) === proto <span class="hljs-comment">// true</span> <span class="hljs-comment">// Object.keys() Object.values() Object.entries()</span> <span class="hljs-comment">// 对可遍历的属性起作用, 且可以用for...of循环遍历。</span> <span class="hljs-keyword">let</span> { keys, values, entries } = <span class="hljs-built_in">Object</span>; <span class="hljs-keyword">let</span> obj = { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">3</span> }; <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">let</span> key <span class="hljs-keyword">of</span> keys(obj) ) { <span class="hljs-built_in">console</span>.log(key); <span class="hljs-comment">// a b c</span> } <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">let</span> value <span class="hljs-keyword">of</span> values(obj) ) { <span class="hljs-built_in">console</span>.log(value); <span class="hljs-comment">// 1 2 3</span> } <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">let</span> [key, value] <span class="hljs-keyword">of</span> entries(obj) ) { <span class="hljs-built_in">console</span>.log([key, value]); <span class="hljs-comment">// ["a", 1] ["b", 2] ["c", 3]</span> } </code></pre> <h3 id="articleHeader5">Set, <a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>数据结构</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// Set --- 成员值唯一的数据结构 // 数组去重 var arr = [1, 2, 3, 3, 4, 5, 5]; // 方法一 [...new Set(arr)]; // [1, 2, 3, 4, 5] // 方法二 Array.from(new Set(arr)); // [1, 2, 3, 4, 5] /* @ 具有 add(), delete(), has(), clear() 方法。 @ 包含 keys(), values(), entries(), forEach() 遍历操作方法。 */ // Map --- 属于键值对的数结构, 且与对象不同。各种类型的值都可以当作键。 // Map转数组 var arr = ['a', 'b', 'c']; let map = new Map( arr.map((p, i) => [i, p]) );<br /> [...map] // [[0, &quot;a&quot;], [1, &quot;b&quot;], [2, &quot;c&quot;]]</p> <p>// Map转对象<br /> function mapToObj(map) {<br /> let obj = {};<br /> for ( var [k, v] of map ) {<br /> obj[k] = v;<br /> }<br /> return obj;<br /> }</p> <p>// 对象转Map<br /> function objToMap(obj) {<br /> let map = new Map();<br /> for ( var k of Object.keys(obj) ) {<br /> map.set(k, obj[k]);<br /> }<br /> return map;<br /> }</p> <p>/*<br /> @ 具有 set(key, value), get(key), has(key), delete(key), clear() 方法。<br /> @ 包含 keys(), values(), entries(), forEach() 等遍历方法。<br /> */</p> <p>// WeakSet, WeakMap</p> <p>// WeakSet 实例<br /> class Foo {<br /> constructor() {<br /> foo.add(this);<br /> }<br /> method() {<br /> if ( !foo.has(this) ) {<br /> throw new TypeError('只能在Foo的实例上使用!');<br /> }<br /> }<br /> }</p> <p>// WeakMap 实例<br /> let Element = document.querySelector('.logo');<br /> let wm = new WeakMap();<br /> wm.set(Element, { timesClicked: 0 });</p> <p>Element.addEventListener('click', () => {<br /> var logo = wm.get('Element');<br /> logo.timesClicked++;<br /> });<br /> // 一旦DOM节点被删除, 点击一次更新的状态就会消失。</p> <p>const listener = new WeakMap();<br /> listener.set(element, handler);<br /> element.addEventListener('click', listener.get(element), false);<br /> // 一旦DOM对象消失, 其绑定的监听函数也会消失。</p> <p>/*<br /> --- 特点 ---<br /> @ 其成员都只能是对象而且为弱引用, 即垃圾回收机制不考虑对该对象的引用。<br /> @ 所引用的对象在外部被清除, 里面的键名对象和对应的键值对自动消失从而防止了内存泄漏。<br /> */</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// Set --- 成员值唯一的数据结构</span> <span class="hljs-comment">// 数组去重</span> <span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">5</span>]; <span class="hljs-comment">// 方法一</span> [...new <span class="hljs-built_in">Set</span>(arr)]; <span class="hljs-comment">// [1, 2, 3, 4, 5]</span> <span class="hljs-comment">// 方法二</span> <span class="hljs-built_in">Array</span>.from(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>(arr)); <span class="hljs-comment">// [1, 2, 3, 4, 5]</span> <span class="hljs-comment">/* @ 具有 add(), <a href="http://www.js-code.com/tag/delete" title="浏览关于“delete”的文章" target="_blank" class="tag_link">delete</a>(), has(), clear() 方法。 @ 包含 keys(), values(), entries(), forEach() 遍历操作方法。 */</span> <span class="hljs-comment">// Map --- 属于键值对的数结构, 且与对象不同。各种类型的值都可以当作键。</span> <span class="hljs-comment">// Map转数组</span> <span class="hljs-keyword">var</span> arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>]; <span class="hljs-keyword">let</span> map = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>( arr.map(<span class="hljs-function">(<span class="hljs-params">p, i</span>) =&gt;</span> [i, p]) ); [...map] <span class="hljs-comment">// [[0, "a"], [1, "b"], [2, "c"]]</span> <span class="hljs-comment">// Map转对象</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mapToObj</span>(<span class="hljs-params">map</span>) </span>{ <span class="hljs-keyword">let</span> obj = {}; <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">var</span> [k, v] <span class="hljs-keyword">of</span> map ) { obj[k] = v; } <span class="hljs-keyword">return</span> obj; } <span class="hljs-comment">// 对象转Map</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">objToMap</span>(<span class="hljs-params">obj</span>) </span>{ <span class="hljs-keyword">let</span> map = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(); <span class="hljs-keyword">for</span> ( <span class="hljs-keyword">var</span> k <span class="hljs-keyword">of</span> <span class="hljs-built_in">Object</span>.keys(obj) ) { map.set(k, obj[k]); } <span class="hljs-keyword">return</span> map; } <span class="hljs-comment">/* @ 具有 set(key, value), get(key), has(key), delete(key), clear() 方法。 @ 包含 keys(), values(), entries(), forEach() 等遍历方法。 */</span> <span class="hljs-comment">// WeakSet, WeakMap</span> <span class="hljs-comment">// WeakSet 实例</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span> </span>{ <span class="hljs-keyword">constructor</span>() { foo.add(<span class="hljs-keyword">this</span>); } method() { <span class="hljs-keyword">if</span> ( !foo.has(<span class="hljs-keyword">this</span>) ) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/throw" title="浏览关于“throw”的文章" target="_blank" class="tag_link">throw</a></span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>(<span class="hljs-string">'只能在Foo的实例上使用!'</span>); } } } <span class="hljs-comment">// WeakMap 实例</span> <span class="hljs-keyword">let</span> Element = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.logo'</span>); <span class="hljs-keyword">let</span> wm = <span class="hljs-keyword">new</span> <span class="hljs-built_in">WeakMap</span>(); wm.set(Element, { <span class="hljs-attr">timesClicked</span>: <span class="hljs-number">0</span> }); Element.addEventListener(<span class="hljs-string">'click'</span>, () =&gt; { <span class="hljs-keyword">var</span> logo = wm.get(<span class="hljs-string">'Element'</span>); logo.timesClicked++; }); <span class="hljs-comment">// 一旦<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>节点被删除, 点击一次更新的状态就会消失。</span> <span class="hljs-keyword">const</span> listener = <span class="hljs-keyword">new</span> <span class="hljs-built_in">WeakMap</span>(); listener.set(<a href="http://www.js-code.com/tag/element" title="浏览关于“element”的文章" target="_blank" class="tag_link">element</a>, handler); element.addEventListener(<span class="hljs-string">'click'</span>, listener.get(element), <span class="hljs-literal">false</span>); <span class="hljs-comment">// 一旦DOM对象消失, 其绑定的监听函数也会消失。</span> <span class="hljs-comment">/* --- 特点 --- @ 其成员都只能是对象而且为弱引用, 即垃圾回收机制不考虑对该对象的引用。 @ 所引用的对象在外部被清除, 里面的键名对象和对应的键值对自动消失从而防止了内存泄漏。 */</span> </code></pre> <h3 id="articleHeader6">Iterator 和 for...of 循环</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="/*<br /> --- Iterator ---<br /> @ 它是一种遍历器接口, 为各种不同的数据结构提供统一的访问机制。<br /> --- 作用 ---<br /> @ 使数据结构的成员能够按某种次序排序。<br /> @ 部署了Iterator接口的数据结构可供for...of循环遍历。<br /> */</p> <p>/*<br /> --- 原生具备Iterator接口的数据结构 ---<br /> @ <a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a><br /> @ <a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a><br /> @ Set<br /> @ <a href="http://www.js-code.com/tag/String" title="String" target="_blank">String</a><br /> @ Typed<a href="http://www.js-code.com/tag/Array" title="Array" target="_blank">Array</a><br /> @ 函数的arguments对象<br /> @ NodeList对象<br /> */</p> <p>// 为对象添加Iterator接口<br /> var obj = {<br /> data: ['hello', 'world'],<br /> [Symbol.iterator]() {<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> <a href="http://www.js-code.com/tag/self" title="self" target="_blank">self</a> = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>;<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> index = 0;<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {<br /> next() {<br /> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> ( index < self.data.length ) { return { value: self.data[index++], done: false } } else { return { value: undefined, done: true } } } } } } for ( var x of obj ) { console.log(x); } // hello world var itrable = obj[Symbol.iterator](); iterable.next(); // {value: &quot;hello&quot;, done: false} iterable.next(); // {value: &quot;world&quot;, done: false} iterable.next(); // {value: &quot;undefined&quot;, done: true} /* --- for...of --- @ 用于遍历键值, 遍历数组时只返回具有数字索引的属性比for...in更加可靠。 @ 用于循环遍历部署了Symbol.iterator接口属性的数据结构。 */ let arr = [3, 5, 7]; arr.foo = 'hello'; for (let i in arr) { console.log(i) // &quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;foo&quot; } for (let i of arr) { console.log(i) // &quot;3&quot;, &quot;5&quot;, &quot;7&quot; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>/* <span class="hljs-comment">--- Iterator ---</span> @ 它是一种遍历器接口, 为各种不同的数据结构提供统一的访问机制。 <span class="hljs-comment">--- 作用 --- </span> @ 使数据结构的成员能够按某种次序排序。 @ 部署了Iterator接口的数据结构可供<span class="hljs-keyword">for</span>...of循环遍历。 */ /* <span class="hljs-comment">--- 原生具备Iterator接口的数据结构 ---</span> @ Array @ Map @ Set @ <a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a> @ TypedArray @ 函数的arguments对象 @ NodeList对象 */ // 为对象添加Iterator接口 var obj = { data: [<span class="hljs-string">'hello'</span>, <span class="hljs-string">'world'</span>], [Symbol.iterator]() { const <a href="http://www.js-code.com/tag/self" title="浏览关于“self”的文章" target="_blank" class="tag_link">self</a> = this; let index = <span class="hljs-number">0</span>; <span class="hljs-keyword">return</span> { <span class="hljs-built_in">next</span>() { <span class="hljs-keyword">if</span> ( index &lt; self.data.length ) { <span class="hljs-keyword">return</span> { value: self.data[index++], done: <span class="hljs-literal">false</span> } } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> { value: undefined, done: <span class="hljs-literal">true</span> } } } } } } <span class="hljs-keyword">for</span> ( var x of obj ) { console.<span class="hljs-built_in">log</span>(x); } // hello world var itrable = obj[Symbol.iterator](); iterable.<span class="hljs-built_in">next</span>(); // {value: <span class="hljs-string">"hello"</span>, done: <span class="hljs-literal">false</span>} iterable.<span class="hljs-built_in">next</span>(); // {value: <span class="hljs-string">"world"</span>, done: <span class="hljs-literal">false</span>} iterable.<span class="hljs-built_in">next</span>(); // {value: <span class="hljs-string">"undefined"</span>, done: <span class="hljs-literal">true</span>} /* <span class="hljs-comment">--- for...of ---</span> @ 用于遍历键值, 遍历数组时只返回具有数字索引的属性比<span class="hljs-keyword">for</span>...<span class="hljs-keyword">in</span>更加可靠。 @ 用于循环遍历部署了Symbol.iterator接口属性的数据结构。 */ let arr = [<span class="hljs-number">3</span>, <span class="hljs-number">5</span>, <span class="hljs-number">7</span>]; arr.foo = <span class="hljs-string">'hello'</span>; <span class="hljs-keyword">for</span> (let i <span class="hljs-keyword">in</span> arr) { console.<span class="hljs-built_in">log</span>(i) // <span class="hljs-string">"0"</span>, <span class="hljs-string">"1"</span>, <span class="hljs-string">"2"</span>, <span class="hljs-string">"foo"</span> } <span class="hljs-keyword">for</span> (let i of arr) { console.<span class="hljs-built_in">log</span>(i) // <span class="hljs-string">"3"</span>, <span class="hljs-string">"5"</span>, <span class="hljs-string">"7"</span> } </code></pre> <p>参考书籍 : 《 ES6标准入门 》( 阮一峰 )</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

前端笔记(四) ES6常用语法

全部内容,希望文章能够帮你解决

前端笔记(四) ES6常用语法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过