ES6 javascript 实用开发技巧

你的名字 2022-10-12 04:28 135阅读 0赞

# ES6 实用开发技巧 #

## 定义变量/常量 ##

ES6 中新增加了 `let` 和 `const` 两个命令，`let` 用于定义变量，`const` 用于定义常量 两个命令与原有的 `var` 命令所不同的地方在于，`let, const` 都是块级作用域，其有效范围仅在代码块中，实例如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//es5</code></p> <p><code>if</code><code>(1==1){ </code></p> <p><code>&nbsp;&nbsp;</code><code>var b = </code><code>'foo'</code><code>;</code></p> <p><code>}</code></p> <p><code>console.log(b);</code><code>//foo</code></p> <p></p> <p><code>//es6</code></p> <p><code>if</code><code>(1==1){ </code></p> <p><code>&nbsp;&nbsp;</code><code>let</code> <code>b = </code><code>'foo'</code><code>;</code></p> <p><code>}</code></p> <p><code>console.log(b);</code><code>//undefined</code> <code>(b is not defined)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**定义常量对象**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>const a = {a:1,b:2};</code></p> <p><code>a.b = 3;</code></p> <p><code>console.log(a);</code><code>//</code><code>{a:1,b:3}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上例中，常量 a 中的内容在定义后，再进行修改依然有效，原因是对于对象类型的使用是指针式引用，常量只是指向了对象的指针，对象本身的内容却依然可以被修改，注意，数组(`Array`) 也是对象； 那么如果在定义常量时使用基础数据类型：`string`, `number`, `boolean` 等

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>const a = 1;</code></p> <p><code>a = 2;</code><code>//</code> <code>Uncaught TypeError: Assignment to constant variable.</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在使用中，建议使用 `let` 与 `const` 完全代替 `var` 命令

## 数值扩展 ##

**转换** `Number.parseInt` – 将字符串或数字转换为整数 `Number.parseFloat` – 将字符串或数字转换为浮点数

`Number.parseInt`, `Number.parseFloat` 与 `parseInt`, `parseFloat` 功能一致，在ES6中，推荐使用 `Number.` 的方式进行调用，这么做的目的是为了让代码的使用方式尽可能减少全局性方法，使用得语言逐步模块化

**测试函数**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>测试是否整数</code></p> <p><code>Number.isInteger(21)</code><code>//true</code></p> <p><code>Number.isInteger(1.11)</code><code>//false</code></p> <p></p> <p><code>//</code><code>测试是否NaN</code></p> <p><code>Number.isNaN(Nan)</code><code>//true</code></p> <p><code>Number.isNaN(1)</code><code>//false</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 字符串扩展 ##

**字符串内容测试**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>'abcdef'</code><code>.includes(</code><code>'c'</code><code>);</code><code>//true</code></p> <p><code>'abcdef'</code><code>.includes(</code><code>'ye'</code><code>);</code><code>//false</code></p> <p><code>'abcdef'</code><code>.startsWith(</code><code>'a'</code><code>);</code><code>//true</code></p> <p><code>'abcdef'</code><code>.endsWitch(</code><code>'f'</code><code>);</code><code>//true</code></p> <p></p> <p><code>//includes</code><code>(), startsWith(), endsWith() 都支持第二个参数，</code></p> <p><code>//</code><code>类型为数字类型，意为从第 n 个字符开始，endsWith()的第二个参数有点不一样</code></p> <p><code>'abcdef'</code><code>.includes(</code><code>'c'</code><code>, 4);</code><code>//false</code> <code>从第5个字符开始查找是否有 </code><code>'c'</code> <code>这个字符</code></p> <p><code>'abcdef'</code><code>.startsWith(</code><code>'d'</code><code>, 3);</code><code>//true</code> <code>从第4个字符开始查找是否是以 </code><code>'d'</code> <code>字符为开头</code></p> <p><code>'abcdef'</code><code>.endsWith(</code><code>'d'</code><code>, 4);</code><code>//true</code> <code>前面的4个字符里，是否以 </code><code>'d'</code> <code>字符为结尾</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**字符串内容重复输出**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>'a'</code><code>.repeat(5);</code><code>//aaaaa</code> <code>重复输出5遍</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**原生支持模板语言**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//es5</code></p> <p><code>$(</code><code>'#result'</code><code>).append(</code></p> <p><code>&nbsp;&nbsp;</code><code>'There are &lt;b&gt;'</code> <code>+ basket.count + </code><code>'&lt;/b&gt; '</code> <code>+</code></p> <p><code>&nbsp;&nbsp;</code><code>'items in your basket, '</code> <code>+</code></p> <p><code>&nbsp;&nbsp;</code><code>'&lt;em&gt;'</code> <code>+ basket.onSale +</code></p> <p><code>&nbsp;&nbsp;</code><code>'&lt;/em&gt; are on sale!'</code></p> <p><code>);</code></p> <p><code>//es6</code></p> <p><code>//</code><code>在es6中，内容模板，可以定义在 `` 包起来的字符串中，其中的内容会保持原有格式</code></p> <p><code>//</code><code>另外可以在字符串中直接使用模板语言进行变量填充，优雅而简洁</code></p> <p><code>$(</code><code>'#result'</code><code>).append(`</code></p> <p><code>&nbsp;&nbsp;</code><code>There are &lt;b&gt;${basket.count}&lt;</code><code>/b</code><code>&gt; items</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>in</code> <code>your basket, &lt;em&gt;${basket.onSale}&lt;</code><code>/em</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>are on sale!</code></p> <p><code>`);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**字符串遍历输出**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//for</code> <code>...of 格式为 es6 中的 Iterator 迭代器的输出方式</code></p> <p><code>for</code><code>(</code><code>let</code> <code>c of </code><code>'abc'</code><code>){ </code></p> <p><code>&nbsp;&nbsp;</code><code>console.log(c);</code></p> <p><code>}</code></p> <p><code>//a</code></p> <p><code>//b</code></p> <p><code>//c</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**字符串补全**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>参数1：[number] 目标字符串长度</code></p> <p><code>//</code><code>参数2：[string] 进行补全的字符串</code></p> <p><code>'12345'</code><code>.padStart(7, </code><code>'0'</code><code>)</code><code>//0012345</code> <code>- 字符串不足7位，在头部补充不足长度的目标字符串</code></p> <p><code>'12345'</code><code>.padEnd(7, </code><code>'0'</code><code>)</code><code>//1234500</code> <code>- 在尾部进行字符串补全</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 数组扩展 ##

**合并数组**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>a = [1, 2];</code></p> <p><code>let</code> <code>b = [3];</code></p> <p><code>let</code> <code>c = [2, 4];</code></p> <p><code>let</code> <code>d = [...a, ...b, ...c];</code><code>//</code><code>[1, 2, 3, 2, 4] 所有内容合并，但并不会去除重复</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**快速转换为数组**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>Array.of(3,4,5)</code><code>//</code><code>[3,4,5]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**数组内容测试**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>判断对象是否为数组</code></p> <p><code>if</code><code>(Array.isArray(obj)){...}</code></p> <p></p> <p><code>[1,2,3].includes(5);</code><code>//false</code><code>，检索数据中是否有5</code></p> <p></p> <p><code>//</code><code>找出第一个匹配表达式的结果，注意是只要匹配到一项，函数即会返回</code></p> <p><code>let</code> <code>a = [1, 3, -4, 10].</code><code>find</code><code>(</code><code>function</code><code>(value, index, arr){ </code></p> <p><code>&nbsp;&nbsp;</code><code>return</code> <code>value &lt; 0;</code></p> <p><code>});</code></p> <p><code>console.log(a);</code><code>//-4</code></p> <p></p> <p><code>//</code><code>找出第一个匹配表达式的结果下标</code></p> <p><code>let</code> <code>a = [1, 3, -4, 10].findIndex(</code><code>function</code><code>(value, index, arr){ </code></p> <p><code>&nbsp;&nbsp;</code><code>return</code> <code>value &lt; 0;</code></p> <p><code>});</code></p> <p><code>console.log(a);</code><code>//2</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**内容过滤**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>排除负数内容</code></p> <p><code>let</code> <code>a = [1, 3, -4, 10].filter(</code><code>function</code><code>(item){ </code></p> <p><code>&nbsp;&nbsp;</code><code>return</code> <code>item &gt; 0;</code></p> <p><code>});</code></p> <p><code>console.log(a);</code><code>//</code><code>[1, 3, 10]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**内容实例**

`.keys()` – 获得数组中所有元素的键名（实际上就是下标索引号）

`.values()` – 获得数组中所有元素的数据

`.entries()` – 获得数组中所有数据的键名和数据

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>for</code> <code>(</code><code>let</code> <code>index of [</code><code>'a'</code><code>, </code><code>'b'</code><code>].keys()) { </code></p> <p><code>&nbsp;&nbsp;</code><code>console.log(index);</code></p> <p><code>}</code></p> <p><code>//</code> <code>0</code></p> <p><code>//</code> <code>1</code></p> <p></p> <p><code>for</code> <code>(</code><code>let</code> <code>elem of [</code><code>'a'</code><code>, </code><code>'b'</code><code>].values()) { </code></p> <p><code>&nbsp;&nbsp;</code><code>console.log(elem);</code></p> <p><code>}</code></p> <p><code>//</code> <code>'a'</code></p> <p><code>//</code> <code>'b'</code></p> <p></p> <p><code>for</code> <code>(</code><code>let</code> <code>[index, elem] of [</code><code>'a'</code><code>, </code><code>'b'</code><code>].entries()) { </code></p> <p><code>&nbsp;&nbsp;</code><code>console.log(index, elem);</code></p> <p><code>}</code></p> <p><code>//</code> <code>0 </code><code>"a"</code></p> <p><code>//</code> <code>1 </code><code>"b"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`.entries()`, `.keys()`, `.values()` 功能与 `Object` 中的几个同名函数功能类似，实际使用中实用性不高，对于数组的操作，直接进行遍历即可

## 对象扩展 ##

**属性的简洁表示**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>直接使用变量/常量的名称个为对象属性的名称</code></p> <p><code>let</code> <code>a = </code><code>'abc'</code><code>;</code></p> <p><code>let</code> <code>b = {a};</code><code>//</code><code>{a: </code><code>'abc'</code><code>}</code></p> <p></p> <p><code>function</code> <code>f(x, y){ </code><code>return</code> <code>{x, y};}</code></p> <p><code>//</code><code>等效于</code></p> <p><code>function</code> <code>f(x, y){ </code><code>return</code> <code>{x: x, y: y}}</code></p> <p></p> <p><code>let</code> <code>o = { </code></p> <p><code>&nbsp;&nbsp;</code><code>f(){ </code><code>return</code> <code>1; }</code></p> <p><code>}</code></p> <p><code>//</code><code>等效于</code></p> <p><code>let</code> <code>o = { </code></p> <p><code>&nbsp;&nbsp;</code><code>f: </code><code>function</code><code>(){ </code><code>return</code> <code>1; }</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**对象内容合并**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};</code></p> <p><code>let</code> <code>d = Object.assign(a, b, c);</code></p> <p><code>console.log(d);</code><code>//</code><code>{a:1,b:4,c:5}</code></p> <p><code>console.log(a);</code><code>//</code><code>{a:1,b:4,c:5}</code></p> <p><code>//</code><code>上面的合并方式会同时更新 a 对象的内容，a 的属性如果有多次合并会被更新数据，</code></p> <p><code>//</code><code>参数列中的对象只会影响第一个，后面的参数对象不会被修改数据</code></p> <p></p> <p><code>//</code><code>推荐使用这种方式进行对象数据合并</code></p> <p><code>let</code> <code>a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};</code></p> <p><code>let</code> <code>d = Object.assign({}, a, b, c);</code><code>//</code><code>第一个参数增加一个空对象，在合并时让它被更新，不影响实际的对象变量内容</code></p> <p><code>console.log(d);</code><code>//</code><code>{a:1,b:4,c:5}</code><code>//</code><code>与上面的方式合并结果一致，使用这种方式, a 对象的内容就不会被影响了</code></p> </td> 
  </tr> 
 </tbody> 
</table>

对象内容合并的方向是从参数顺序的后向前合并

**对象内容集合**

`Object.keys()` – 获得对象中所有的键名，以数组的形式返回

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var obj = { a:1,b:2 };</code></p> <p><code>var names = Object.keys(obj);</code><code>//</code><code>[</code><code>'a'</code><code>, </code><code>'b'</code><code>]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`Object.values()` – 获得对象中所有的值内容，以数组的形式返回

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var obj = { a:1,b:2 };</code></p> <p><code>var values = Object.values(obj);</code><code>//</code><code>[1, 2]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`Object.entries()` – 获得对象中所有的成员数据，以数组的形式返回，成员的内容也是数组形式

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var obj = { a:1,b:2 };</code></p> <p><code>var values = Object.entries(obj);</code><code>//</code><code>[[</code><code>'a'</code><code>,1], [</code><code>'b'</code><code>,2]]</code></p> </td> 
  </tr> 
 </tbody> 
</table>

其实观察可发现，`Object.keys()`, `Object.values()`, `Object.entries()`，与 `Java` 的 `MAP` 中的方法是一致的，不论是方法名还是具体的用法，这也可以帮忙理解这些功能 API

**对象内容测试**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>判断对象是否为数组对象</code></p> <p><code>if</code><code>(Object.isArray(someobj)){}</code></p> <p><code>//</code><code>判断目标对象是否为空对象</code></p> <p><code>if</code><code>(someobj &amp;&amp; Object.keys(someobj).length)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 解构赋值 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>[a, b, c] = [1, 2, 3];</code></p> <p><code>//</code><code>定义了三个变量，并对应赋了值；如果值的个数与变量名个数不匹配，没有对应上的变量值为 undefined</code></p> <p></p> <p><code>let</code> <code>[a, b, c=</code><code>'default'</code><code>] = [1, 2];</code></p> <p><code>//</code><code>指定默认值，在定义变量时就指定了默认值，如果赋值时，没有给定内容，则会取默认值</code></p> <p></p> <p><code>let</code> <code>[a, …b] = [1,2,3];</code></p> <p><code>//</code><code>这里 b 的值为[2，3]，这样可以快速使用剩余的数据赋值给变量，</code></p> <p><code>//</code><code>但实际使用中为了避免代码阅读的歧义，不推荐这么使用，仅作了解即可</code></p> <p></p> <p><code>let</code> <code>[a,b,c] = </code><code>'yes'</code><code>;</code></p> <p><code>console.log(a);</code><code>//y</code></p> <p><code>console.log(b);</code><code>//e</code></p> <p><code>console.log(c);</code><code>//s</code></p> <p><code>字符串的解构赋值会以单个字符的方式进行赋值</code></p> <p></p> <p><code>let</code> <code>{length}=</code><code>'yes'</code><code>;</code></p> <p><code>console.log(length);</code><code>//3</code></p> <p><code>以对象赋值的方式，如果名称是字符串的自带属性，则会获得属性值</code></p> <p></p> <p><code>let</code> <code>arr = [1,2];</code></p> <p><code>let</code> <code>obj = {a:1,b:2};</code></p> <p><code>function</code> <code>test</code> <code>({a = 10, b}){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'a:'</code><code>,a);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'b:'</code><code>,b);</code></p> <p><code>}</code></p> <p><code>test</code><code>(obj);</code></p> <p><code>解构赋值的使用实例，作为函数传参，并使用默认值</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**对象结构解构**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>obj = {a: 1, b: 2};</code></p> <p><code>let</code> <code>{a, b} = obj;</code><code>//a</code><code>=1,b=2</code></p> <p><code>使用变量的方式进行结构赋值，需要严格匹配名称，数组的模式是严格匹配下标</code></p> <p></p> <p><code>let</code> <code>obj = {a: 1, b: 2};</code></p> <p><code>let</code> <code>{a=0, b=5} = obj;</code></p> <p><code>赋值并给定默认值</code></p> <p></p> <p><code>let</code> <code>obj = {a: 1, b: 2};</code></p> <p><code>let</code> <code>{a:A, b} = obj;</code><code>//A</code><code>=1,b=2,a报错，变量未定义</code></p> <p><code>获得内容后，将变量进行改名</code></p> <p></p> <p><code>let</code> <code>obj = {a: 1, b: 2};</code></p> <p><code>let</code> <code>a = 0;</code></p> <p><code>({a, b} = obj);</code></p> <p><code>对已存在的 a 进行修改值，并生成新的变量 b</code></p> <p></p> <p><code>let</code> <code>obj = { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>arr: [</code><code>'aaa'</code><code>,{a:1}]</code></p> <p><code>};</code></p> <p><code>let</code> <code>{arr:[b, {a}]} = obj;</code><code>//</code><code>这里的arr互相映射</code></p> <p><code>console.log(b);</code></p> <p><code>console.log(a);</code></p> <p><code>获得对象的子数据，并映射到相应的变量，这里需要注意的是结构要对应</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 模块化 ##

**最简单实例的使用场景**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//a</code><code>.js</code></p> <p><code>let</code> <code>a = {a:1,b:2,c:3};</code></p> <p><code>export</code> <code>default a;</code></p> <p></p> <p><code>//b</code><code>.js</code></p> <p><code>import</code> <code>a from </code><code>'a.js'</code><code>;</code><code>//</code><code>假设 a.js 与 b.js 同在一个目录中</code></p> <p><code>console.log(a.a);</code><code>//1</code></p> </td> 
  </tr> 
 </tbody> 
</table>

以上简单的实例就两个脚本文件举例说明了两个文件在实际使用，可以进行互相引用，并获得目标文件中的数据；我们可以认为一个脚本文件就是一个 `模块`，那么在实际开发过程中，可以将业务处理内容，或是数据处理过程 `抽象` 在一个文件中，在需要使用时，由其它模块引入并使用其中的数据

## 箭头函数 ##

**箭头函数的基本语法**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>(参数1, 参数2, …, 参数N) =&gt; { 函数声明 }</code></p> <p><code>(参数1, 参数2, …, 参数N) =&gt; 表达式（单一）</code></p> <p><code>//</code><code>相当于：(参数1, 参数2, …, 参数N) =&gt;{ </code><code>return</code> <code>表达式; }</code></p> <p></p> <p><code>//</code> <code>当只有一个参数时，圆括号是可选的：</code></p> <p><code>(单一参数) =&gt; {函数声明}</code></p> <p><code>单一参数 =&gt; {函数声明}</code></p> <p></p> <p><code>//</code> <code>没有参数的函数应该写成一对圆括号。</code></p> <p><code>() =&gt; {函数声明}</code></p> <p><code>//</code><code>箭头函数的内容不能用于构造函数，即声明的内容，不能通过 new 一个对象来使用</code></p> </td> 
  </tr> 
 </tbody> 
</table>

看一个简单的例子

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>count = </code><code>function</code><code>(num){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>num + 1;</code></p> <p><code>};</code></p> <p></p> <p><code>//</code><code>使用箭头函数重构</code></p> <p><code>let</code> <code>count = num =&gt; num + 1;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上面的例子在重构后，给人最直观的感受就是 `function` 关键字 `{}`、`()` 和 `return` 等关键字不再需要书写，对于简单的函数体，可简化不少代码

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>count = num =&gt; { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let</code> <code>base = 50;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let</code> <code>step = 10;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>base + step + 1;</code></p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在函数体一行代码不能完成时，就不能省略 `{}` 和 `return` 关键字

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>多个入参</code></p> <p><code>let</code> <code>count = (num, step) =&gt; num + step + 1;</code></p> <p><code>//</code><code>没有入参</code></p> <p><code>let</code> <code>count = () =&gt; 3.1415926;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

当入参不止一个或是没有入参时，需使用小括号包裹

**返回一个对象**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>//</code><code>错误，会报 SyntaxError</code></p> <p><code>let</code> <code>count = num =&gt; { base: 50, total: num + 100 };</code></p> <p><code>//</code><code>正常返回对象</code></p> <p><code>let</code> <code>count = num =&gt; ({ base: 50, total: num + 100 });</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**封闭上下文的 `this`**

通过上面的例子可以看得出，箭头函数很像匿名函数（`(function(args){...}(val))`），但又不完全一样，主要的区别在于 `this` 的使用结果

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>goods = { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>price: 5,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>total: </code><code>function</code><code>(quantity){ </code></p> <p><code>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</code><code>console.log(this.price);</code><code>//5</code> <code>- this 指向了 goods 对象</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let</code> <code>calc = </code><code>function</code><code>(){ </code></p> <p><code>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</code><code>return</code> <code>quantity * this.price;</code><code>//</code><code>这里的 this 指向了window</code></p> <p><code>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>calc();</code></p> <p><code>&nbsp;&nbsp; &nbsp;</code><code>}</code></p> <p><code>};</code></p> <p><code>console.log(goods.total(5));</code><code>//Nan</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上面的例子当然可以使用传参或在函数外定义一个变量 that 来接收外部的 this(即函数内第一句)，并在函数内部使用 that 来解决问题，但这不在当前话题的讨论范围内

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>let</code> <code>goods = { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>price: 5,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>total: </code><code>function</code><code>(quantity){ </code></p> <p><code>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</code><code>console.log(this.price);</code><code>//5</code> <code>- this 指向了 goods 对象</code></p> <p><code>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</code><code>let</code> <code>calc = () =&gt; quantity * this.price; </code><code>//</code><code>这里的 this 同样指向了goods对象</code></p> <p><code>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</code><code>return</code> <code>calc();</code></p> <p><code>&nbsp;&nbsp; &nbsp;</code><code>}</code></p> <p><code>};</code></p> <p><code>console.log(goods.total(5));</code><code>//25</code></p> </td> 
  </tr> 
 </tbody> 
</table>

总结箭头函数的特点就是 `更短的函数` 和 `封闭上下文的 this`，也许更短的函数才是我们使用最多的地方[点击进入暗号：csdn][csdn]

[csdn]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr