现代JavaScript — ES6+中的Imports，Exports，Let，Const和Promise

以你之姓@ 2022-12-30 12:54 208阅读 0赞

> 转载请注明出处：[葡萄城官网][Link 1]，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。  
> 原文出处：https://www.freecodecamp.org/news/learn-modern-javascript/

在过去几年里，JavaScript有很多的更新。如果你想提升写代码的能力，这些更新将会对你有非常大的帮助。

对于程序员来说，了解这门语言的最新发展是非常重要的。它能使你跟上最新趋势，提高代码质量，在工作中出类拔萃，从而进一步提升你的薪资待遇。

特别地，如果你想学习像React、 Angular或Vue这样的框架，你必须掌握这些最新的特性。

最近，JavaScript增加了许多有用的功能，比如**Nullish coalescing operator, optional chaining, Promises, async/await, ES6 destructuring**,等等。

那么现在，我们将探讨每个JavaScript开发者都应该知道的概念。

** **

**JavaScript****中的****Let****和****const**

** **

在ES6之前，JavaScript使用var关键字来声明变量，var只有全局作用域和函数作用域，所谓全局作用域就是在代码的任何位置都能访问var声明的变量，而函数作用域在变量声明的当前函数内部访问变量。此时是没有块级作用域的。

随着let和const这两个关键字的添加，JS增加了块级作用域的概念。

**如何在JavaScript中使用let**

当我们在用let声明变量时，用于声明一次之后就不能再以相同的名称重新声明它。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>// ES5 Code</code> <code>var</code>&nbsp;<code>value = 10;</code> <code>console.log(value);&nbsp;</code><code>// 10</code> &nbsp; <code>var</code>&nbsp;<code>value =&nbsp;</code><code>"hello"</code><code>;</code> <code>console.log(value);&nbsp;</code><code>// hello</code> &nbsp; <code>var</code>&nbsp;<code>value = 30;</code> <code>console.log(value);&nbsp;</code><code>// 30</code> </td> 
 </tr> 
 </tbody> 
</table>

如上所示，我们多次使用var关键字重新声明了变量值。

在ES6之前，我们可以使用var重新声明之前已经声明过的变量，这就会导致了一个问题：如果我们在不知情的情况下，在其他地方重新声明了该变量，很有可能会覆盖原先变量的值，造成一些难以调试的问题。

所以，Let解决很好地解决此问题。当你使用let重新声明变量值时，将会报错。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>// ES6 Code</code> <code>let</code>&nbsp;<code>value = 10;</code> <code>console.log(value);&nbsp;</code><code>// 10</code> &nbsp; <code>let</code>&nbsp;<code>value =&nbsp;</code><code>"hello"</code><code>;&nbsp;</code><code>// Uncaught SyntaxError: Identifier 'value' has already been declared</code> &nbsp; <code>但是，以下代码是合法的:</code> <code>// ES6 Code</code> <code>let</code>&nbsp;<code>value = 10;</code> <code>console.log(value);&nbsp;</code><code>// 10</code> &nbsp; <code>value =&nbsp;</code><code>"hello"</code><code>;</code> <code>console.log(value);&nbsp;</code><code>// hello</code> </td> 
 </tr> 
 </tbody> 
</table>

我们发现上面的代码看起来没什么问题，是因为我们重新给value变量赋了一个新值，但是并没有重新声明。

我们来看下下面的代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>// ES5 Code</code> <code>var</code>&nbsp;<code>isValid =&nbsp;</code><code>true</code><code>;</code> <code>if</code><code>(isValid) { </code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>number = 10;</code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'inside:'</code><code>, number);&nbsp;</code><code>// inside: 10</code> <code>}</code> <code>console.log(</code><code>'outside:'</code><code>, number);&nbsp;</code><code>// outside: 10</code> </td> 
 </tr> 
 </tbody> 
</table>

如上所示，在使用var声明变量时，可以在if块之外访问该变量。

而使用let声明的number变量只能在if块内访问，如果在if块外访问将会报错。

我们来看下接下来的代码

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>// ES6 Code</code> <code>let</code>&nbsp;<code>isValid =&nbsp;</code><code>true</code><code>;</code> <code>if</code><code>(isValid) { </code> <code>&nbsp;&nbsp;</code><code>let</code>&nbsp;<code>number = 10;</code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'inside:'</code><code>, number);&nbsp;</code><code>// inside: 10</code> <code>}</code> <code>console.log(</code><code>'outside:'</code><code>, number);&nbsp;</code><code>// Uncaught ReferenceError: number is not defined</code> </td> 
 </tr> 
 </tbody> 
</table>

如上述代码所示，使用let分别在if块内、if块外声明了number变量。在if块外，number无法被访问，因此会出现引用错误。

但是，如果变量number在if块外已经声明，将会出现下面的结果。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>// ES6 Code</code> <code>let</code>&nbsp;<code>isValid =&nbsp;</code><code>true</code><code>;</code> <code>let</code>&nbsp;<code>number = 20;</code> &nbsp; <code>if</code><code>(isValid) { </code> <code>&nbsp;&nbsp;</code><code>let</code>&nbsp;<code>number = 10;</code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'inside:'</code><code>, number);&nbsp;</code><code>// inside: 10</code> <code>}</code> &nbsp; <code>console.log(</code><code>'outside:'</code><code>, number);&nbsp;</code><code>// outside: 20</code> </td> 
 </tr> 
 </tbody> 
</table>

现在在单独的范围内有两个number变量。在if块外，number的值为20。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>// ES5 Code</code> <code>for</code><code>(</code><code>var</code>&nbsp;<code>i = 0; i &lt; 10; i++){ </code> <code>&nbsp;</code><code>console.log(i);</code> <code>}</code> <code>console.log(</code><code>'outside:'</code><code>, i);&nbsp;</code><code>// 10</code> </td> 
 </tr> 
 </tbody> 
</table>

当使用var关键字时，i在 for循环之外也可以访问到。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>// ES6 Code</code> <code>for</code><code>(</code><code>let</code>&nbsp;<code>i = 0; i &lt; 10; i++){ </code> <code>&nbsp;</code><code>console.log(i);</code> <code>}</code> &nbsp; <code>console.log(</code><code>'outside:'</code><code>, i);&nbsp;</code><code>// Uncaught ReferenceError: i is not defined</code> </td> 
 </tr> 
 </tbody> 
</table>

而使用let关键字时，在for循环外部是不可访问的。

因此，正如上述示例代码所示，let声明的变量只能在块内部可用，而在块外部不可访问。

我们可以使用一对大括号创建一个块，如下:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>let</code>&nbsp;<code>i = 10;</code> <code>{ </code> <code>&nbsp;</code><code>let</code>&nbsp;<code>i = 20;</code> <code>&nbsp;</code><code>console.log(</code><code>'inside:'</code><code>, i);&nbsp;</code><code>// inside: 20</code> <code>&nbsp;</code><code>i = 30;</code> <code>&nbsp;</code><code>console.log(</code><code>'i again:'</code><code>, i);&nbsp;</code><code>// i again: 30</code> <code>}</code> &nbsp; <code>console.log(</code><code>'outside:'</code><code>, i);&nbsp;</code><code>// outside: 10</code> </td> 
 </tr> 
 </tbody> 
</table>

前面有提到，let在同一个块中不能重新声明变量，不过可以在另一个块中重新声明。如上代码所示，我们在块内重新声明了i，并赋值20，该变量仅可在该块中使用。

在块外，当我们打印变量时，我们得到的是10而不是之前分配的值，这是因为块外，内部变变量i是不存在的。

如果在块外未声明变量，那么将会报错:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>{ </code> <code>&nbsp;</code><code>let</code>&nbsp;<code>i = 20;</code> <code>&nbsp;</code><code>console.log(</code><code>'inside:'</code><code>, i);&nbsp;</code><code>// inside: 20</code> <code>&nbsp;</code><code>i = 30;</code> <code>&nbsp;</code><code>console.log(</code><code>'i again:'</code><code>, i);&nbsp;</code><code>// i again: 30</code> <code>}</code> &nbsp; <code>console.log(</code><code>'outside:'</code><code>, i);&nbsp;</code><code>// Uncaught ReferenceError: i is not defined</code> </td> 
 </tr> 
 </tbody> 
</table>

**如何在JavaScript使用const**

const关键字在块级作用域中的工作方式与let关键字完全相同。因此，我们来看下他们的区别。

const声明的变量为常量，其值是不能改变的。而let声明的变量，可以为其赋一个新值，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>let</code>&nbsp;<code>number = 10;</code> <code>number = 20;</code> <code>console.log(number);&nbsp;</code><code>// 20</code> </td> 
 </tr> 
 </tbody> 
</table>

但是以下情况，我们不能这样使用const。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>const number = 10;</code> <code>number = 20;&nbsp;</code><code>// Uncaught TypeError: Assignment to constant variable.</code> </td> 
 </tr> 
 </tbody> 
</table>

我们甚至不能使用const像下面一样重新声明。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>const number = 20;</code> <code>console.log(number);&nbsp;</code><code>// 20</code> &nbsp; <code>const number = 10;&nbsp;</code><code>// Uncaught SyntaxError: Identifier 'number' has already been declared</code> </td> 
 </tr> 
 </tbody> 
</table>

现在，看下面的代码:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>const arr = [1, 2, 3, 4];</code> <code>arr.push(5);</code> <code>console.log(arr);&nbsp;</code><code>// [1, 2, 3, 4, 5]</code> </td> 
 </tr> 
 </tbody> 
</table>

我们说过const声明的常量，它的值永远不会改变——但是我们改变了上面的常量数组并没有报错。这是为什么呢?

注意:数组是引用类型，而不是JavaScript的基本类型

实际存储在arr中的不是数组，而是数组存储的内存位置的引用(地址)。执行arr.push(5)，并没有改变arr指向的引用，而是改变了存储在那个引用上的值。

对象也是如此:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>const obj = { </code> <code>&nbsp;</code><code>name:&nbsp;</code><code>'David'</code><code>,</code> <code>&nbsp;</code><code>age: 30</code> <code>};</code> &nbsp; <code>obj.age = 40;</code> &nbsp; <code>console.log(obj);&nbsp;</code><code>// { name: 'David', age: 40 }</code> </td> 
 </tr> 
 </tbody> 
</table>

这里，我们也没有改变obj指向的引用，而是改变了存储在引用的值。

因此，上述的代码将会起作用，但下面的代码是无效的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>const obj = { name:&nbsp;</code><code>'David'</code><code>, age: 30 };</code> <code>const obj1 = { name:&nbsp;</code><code>'Mike'</code><code>, age: 40 };</code> <code>obj = obj1;&nbsp;</code><code>// Uncaught TypeError: Assignment to constant variable.</code> </td> 
 </tr> 
 </tbody> 
</table>

这样写会抛出异常，因为我们试图更改const变量指向的引用。

因此，在使用const时要记住一点：使用const声明常量时，不能重新声明，也不能重新赋值。如果声明的常量是引用类型，我们可以更改存储在引用的值。

同理，下面的代码也是无效的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>const arr = [1, 2, 3, 4];</code> <code>arr = [10, 20, 30];&nbsp;</code><code>// Uncaught TypeError: Assignment to constant variable.</code> </td> 
 </tr> 
 </tbody> 
</table>

**总结：**

*  关键字let和const在JavaScript中添加块级作用域。
 *  当我们将一个变量声明为let时，我们不能在同一作用域(函数或块级作用域)中重新定义或重新声明另一个具有相同名称的let变量，但是我们可以重新赋值。
 *  当我们将一个变量声明为const时，我们不能在同一作用域(函数或块级作用域)中重新定义或重新声明具有相同名称的另一个const变量。但是，如果变量是引用类型(如数组或对象)，我们可以更改存储在该变量中的值。

好了，我们继续下一个话题: promises。

** **

**JavaScript****中的promises**

** **

对于很多新开发者来说，promises是JavaScript中较难理解的部分。ES6中原生提供了Promise对象，那么Promise究竟是什么呢？

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

**如何创造一个promise**

使用promise构造函数创建一个promise，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>const promise =&nbsp;</code><code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;</code>&nbsp; <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

Promise的构造函数接收一个函数作为参数，并且在内部接收两个参数：resolve，reject。 resolve和reject参数实际上是我们可以调用的函数，具体取决于异步操作的结果。

Promise 有三种状态:

*  pending: 初始状态，不是成功或失败状态。
 *  fulfilled:表示操作成功完成。
 *  rejected: 表示操作失败。

当我们创建Promise时，它处于等待的状态。当我们调用resolve函数时，它将进入已完成状态。如果调用reject，他将进入被拒绝状态。

在下面的代码中，我们执行了一个异步操作，也就是setTimeout，2秒后，调用resolve方法。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>const promise =&nbsp;</code><code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;</code><code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>const sum = 4 + 5;</code> <code>&nbsp;&nbsp;</code><code>resolve(sum);</code> <code>&nbsp;</code><code>}, 2000);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

我们需要使用以下方法注册一个回调.then获得1promise执行成功的结果，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>const promise =&nbsp;</code><code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;</code><code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>const sum = 4 + 5;</code> <code>&nbsp;&nbsp;</code><code>resolve(sum);</code> <code>&nbsp;</code><code>}, 2000);</code> <code>});</code> &nbsp; <code>promise.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;</code><code>console.log(result);&nbsp;</code><code>// 9</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

then接收一个参数，是函数，并且会拿到我们在promise中调用resolve时传的的参数。

如果操作不成功，则调用reject函数:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>const promise =&nbsp;</code><code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;</code><code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>const sum = 4 + 5 +&nbsp;</code><code>'a'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(isNaN(sum)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reject(</code><code>'Error while calculating sum.'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>resolve(sum);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}, 2000);</code> <code>});</code> &nbsp; <code>promise.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;</code><code>console.log(result);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

如果sum不是一个数字，那么我们调用带有错误信息的reject函数，否则我们调用resolve函数。

执行上述代码，输出如下:

![721a5525474c8f387e72c24ae1772fd7.png][]

调用reject函数会抛出一个错误，但是我们没有添加用于捕获错误的代码。

需要调用catch方法指定的回调函数来捕获并处理这个错误。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>promise.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;</code><code>console.log(result);</code> <code>}).</code><code>catch</code><code>(</code><code>function</code><code>(error) { </code> <code>&nbsp;</code><code>console.log(error);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

输出如下:

![7ecc8038e8f1d7d3d0308a6129a9b3ed.png][]

所以建议大家在使用promise时加上catch方法，以此来避免程序因错误而停止运行。

**链式操作**

我们可以向单个promise添加多个then方法，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>promise.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;</code><code>console.log(</code><code>'first .then handler'</code><code>);</code> <code>&nbsp;</code><code>return</code>&nbsp;<code>result;</code> <code>}).then(</code><code>function</code><code>(result) { </code> <code>&nbsp;</code><code>console.log(</code><code>'second .then handler'</code><code>);</code> <code>&nbsp;</code><code>console.log(result);</code> <code>}).</code><code>catch</code><code>(</code><code>function</code><code>(error) { </code> <code>&nbsp;</code><code>console.log(error);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

当添加多个then方法时，前一个then方法的返回值将自动传递给下一个then方法。

![bace9ab9487c204de61062b06910214c.png][]

如上图所示，我们在第一个then方法中输出字符串，并将接收的参数result（sum）返回给下一个result。

在下一个then方法中，输出字符串，并输出上一个then方法传递给它的result。

**如何在JavaScript中延迟promise的执行**

很多时候，我们不希望立即创建promise，而是希望在某个操作完成后再创建。

我们可以将promise封装在一个函数中，然后从函数中返回promise，如下所示：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>function</code>&nbsp;<code>createPromise() { </code> <code>&nbsp;</code><code>return</code>&nbsp;<code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;&nbsp;</code><code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>const sum = 4 + 5;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(isNaN(sum)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reject(</code><code>'Error while calculating sum.'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>resolve(sum);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}, 2000);</code> <code>&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这样，我们就可以通过函数将参数传递给promise，达到动态的目的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </td> 
 <td> <code>function</code>&nbsp;<code>createPromise(a, b) { </code> <code>&nbsp;</code><code>return</code>&nbsp;<code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;&nbsp;</code><code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>const sum = a + b;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(isNaN(sum)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reject(</code><code>'Error while calculating sum.'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>resolve(sum);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}, 2000);</code> <code>&nbsp;</code><code>});</code> <code>}</code> &nbsp; <code>createPromise(1,8)</code> <code>&nbsp;</code><code>.then(</code><code>function</code><code>(output) { </code> <code>&nbsp;&nbsp;</code><code>console.log(output);&nbsp;</code><code>// 9</code> <code>});</code> &nbsp; <code>// OR</code> &nbsp; <code>createPromise(10,24)</code> <code>&nbsp;</code><code>.then(</code><code>function</code><code>(output) { </code> <code>&nbsp;&nbsp;</code><code>console.log(output);&nbsp;</code><code>// 34</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

![4cd198ffb1b8b17f5e131102e8e9ff3d.png][]

此外，我们只能向resolve或reject函数传递一个值。如果你想传递多个值到resolve函数，可以将它作为一个对象传递，如下:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>const promise =&nbsp;</code><code>new</code>&nbsp;<code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>&nbsp;</code><code>setTimeout(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>const sum = 4 + 5;</code> <code>&nbsp;&nbsp;</code><code>resolve({ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>a: 4,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>b: 5,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>sum</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;</code><code>}, 2000);</code> <code>});</code> &nbsp; <code>promise.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;</code><code>console.log(result);</code> <code>}).</code><code>catch</code><code>(</code><code>function</code><code>(error) { </code> <code>&nbsp;</code><code>console.log(error);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

![0667ce4ccf09e93c4e4efa28d17b52b0.png][]

**如何在JavaScript中使用箭头函数**

上述示例代码中，我们使用常规的ES5语法创建了promise。但是，通常使用箭头函数代替ES5语法，如下:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>const promise =&nbsp;</code><code>new</code>&nbsp;<code>Promise((resolve, reject) =&gt; { </code> <code>&nbsp;</code><code>setTimeout(() =&gt; { </code> <code>&nbsp;&nbsp;</code><code>const sum = 4 + 5 +&nbsp;</code><code>'a'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(isNaN(sum)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reject(</code><code>'Error while calculating sum.'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>resolve(sum);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}, 2000);</code> <code>});</code> &nbsp; <code>promise.then((result) =&gt; { </code> <code>&nbsp;</code><code>console.log(result);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

你可以根据自己需要使用ES5或ES6语法。

**ES6 Import ****和Export 语法**

在ES6之前，我们在一个HTML文件中可以使用多个script标签来引用不同的JavaScript文件，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"home.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"profile.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"user.js"</code><code>&gt;&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

但是如果我们在不同的JavaScript文件中有一个同名的变量，将会出现命名冲突，你实际得到的可能并不是你期望的值。

ES6增加了模块的概念来解决这个问题。

在ES6中，我们编写的每一个JavaScript文件都被称为模块。我们在每个文件中声明的变量和函数不能用于其他文件，除非我们将它们从该文件中导出并、在另一个文件中得到引用。

因此，在文件中定义的函数和变量是每个文件私有的，在导出它们之前，不能在文件外部访问它们。

export有两种类型:

*  命名导出:在一个文件中可以有多个命名导出
 *  默认导出:单个文件中只能有一个默认导出

**JavaScript****中的命名导出**

如下所示，将单个变量命名导出:

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>export</code>&nbsp;<code>const temp =&nbsp;</code><code>"This is some dummy text"</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

如果想导出多个变量，可以使用大括号指定要输出的一组变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>const temp1 =&nbsp;</code><code>"This is some dummy text1"</code><code>;</code> <code>const temp2 =&nbsp;</code><code>"This is some dummy text2"</code><code>;</code> <code>export</code>&nbsp;<code>{ temp1, temp2 };</code> </td> 
 </tr> 
 </tbody> 
</table>

需要注意的是，导出语法不是对象语法。因此，在ES6中，不能使用键值对的形式导出。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>&nbsp;&nbsp;</code><code>// This is invalid syntax of export in ES6</code> <code>export</code>&nbsp;<code>{ key1: value1, key2: value2 }</code> </td> 
 </tr> 
 </tbody> 
</table>

import命令接受一对大括号，里面指定要从其他模块导入的变量名。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import</code>&nbsp;<code>{ temp1, temp2 } from&nbsp;</code><code>'./filename'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

注意，不需要在文件名中添加.js扩展名，因为默认情况下会考虑该拓展名。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>// import from functions.js file from current directory</code> <code>import</code>&nbsp;<code>{ temp1, temp2 } from&nbsp;</code><code>'./functions'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// import from functions.js file from parent of current directory</code> <code>import</code>&nbsp;<code>{ temp1 } from&nbsp;</code><code>'../functions'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

提示一点，导入的变量名必须与被导入模块对外接口的名称相同。

因此，导出应使用：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>// constants.js</code> <code>export</code>&nbsp;<code>const PI = 3.14159;</code> </td> 
 </tr> 
 </tbody> 
</table>

那么在导入的时候，必须使用与导出时相同的名称：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import</code>&nbsp;<code>{ PI } from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

// This will throw an error

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import</code>&nbsp;<code>{ PiValue } from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

如果想为输入的变量重新命名，可以使用as关键字，语法如下:

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import</code>&nbsp;<code>{ PI as PIValue } from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

我们以为PI重命名为PIValue，因此不能再使用PI变量名。

导出时也可使用下面的重命名语法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>// constants.js</code> <code>const PI = 3.14159;</code> <code>export</code>&nbsp;<code>{ PI as PIValue };</code> </td> 
 </tr> 
 </tbody> 
</table>

然后在导入是，必须使用PIValue。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import</code>&nbsp;<code>{ PIValue } from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

命名导出某些内容之前必须先声明它。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>export</code>&nbsp;<code>'hello'</code><code>;&nbsp;</code><code>// this will result in error</code> <code>export</code>&nbsp;<code>const greeting =&nbsp;</code><code>'hello'</code><code>;&nbsp;</code><code>// this will work</code> <code>export</code>&nbsp;<code>{ name:&nbsp;</code><code>'David'</code>&nbsp;<code>};&nbsp;</code><code>// This will result in error</code> <code>export</code>&nbsp;<code>const object = { name:&nbsp;</code><code>'David'</code>&nbsp;<code>};&nbsp;</code><code>// This will work</code> </td> 
 </tr> 
 </tbody> 
</table>

我们来看下面的validations.js 文件:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </td> 
 <td> <code>// utils/validations.js</code> &nbsp; <code>const isValidEmail =&nbsp;</code><code>function</code><code>(email) { </code> <code>&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(/^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$/.test(email)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"email is valid"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"email is invalid"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>};</code> &nbsp; <code>const isValidPhone =&nbsp;</code><code>function</code><code>(phone) { </code> <code>&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(/^[\$]\d{3}[\$]\s\d{3}-\d{4}$/.test(phone)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"phone number is valid"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"phone number is invalid"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>};</code> &nbsp; <code>function</code>&nbsp;<code>isEmpty(value) { </code> <code>&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(/^\s*$/.test(value)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"string is empty or contains only spaces"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"string is not empty and does not contain spaces"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>export</code>&nbsp;<code>{ isValidEmail, isValidPhone, isEmpty };</code> </td> 
 </tr> 
 </tbody> 
</table>

在index.js中，我们可以使用如下函数:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>// index.js</code> <code>import</code>&nbsp;<code>{ isEmpty, isValidEmail } from&nbsp;</code><code>"./utils/validations"</code><code>;</code> &nbsp; <code>console.log(</code><code>"isEmpty:"</code><code>, isEmpty(</code><code>"abcd"</code><code>));&nbsp;</code><code>// isEmpty: string is not empty and does not contain spaces</code> &nbsp; <code>console.log(</code><code>"isValidEmail:"</code><code>, isValidEmail(</code><code>"abc@11gmail.com"</code><code>));&nbsp;</code><code>// isValidEmail: email is valid</code> &nbsp; <code>console.log(</code><code>"isValidEmail:"</code><code>, isValidEmail(</code><code>"ab@c@11gmail.com"</code><code>));&nbsp;</code><code>// isValidEmail: email is invalid</code> </td> 
 </tr> 
 </tbody> 
</table>

**JavaScript****的默认导出**

如上所述，单个文件中最多只能有一个默认导出。但是，你可以在一个文件中使用多个命名导出和一个默认导出。

要声明一个默认导出，我们需要使用以下语法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>//constants.js</code> <code>const name =&nbsp;</code><code>'David'</code><code>;</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>name;</code> </td> 
 </tr> 
 </tbody> 
</table>

在导入时就不需要再使用花括号了。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>import</code>&nbsp;<code>name from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

如下，我们有多个命名导出和一个默认导出:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>// constants.js</code> <code>export</code>&nbsp;<code>const PI = 3.14159;</code> <code>export</code>&nbsp;<code>const AGE = 30;</code> &nbsp; <code>const NAME =&nbsp;</code><code>"David"</code><code>;</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>NAME;</code> </td> 
 </tr> 
 </tbody> 
</table>

此时我们使用import导入时，只需要在大括号之前指定默认导出的变量名。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>// NAME is default export and PI and AGE are named exports here</code> <code>import</code>&nbsp;<code>NAME, { PI, AGE } from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

使用 export default 导出的内容，在导入的时候，import后面的名称可以是任意的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>// constants.js</code> <code>const AGE = 30;</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>AGE;</code> &nbsp; <code>import</code>&nbsp;<code>myAge from ‘./constants’;</code> <code>console.log(myAge);&nbsp;</code><code>// 30</code> </td> 
 </tr> 
 </tbody> 
</table>

另外， export default的变量名称从Age到myAge之所以可行，是因为只能存在一个export default。因此你可以随意命名。还需注意的是，关键字不能在声明变量之前。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>// constants.js</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>const AGE = 30;&nbsp;</code><code>// This is an error and will not work</code> </td> 
 </tr> 
 </tbody> 
</table>

因此，我们需要在单独的一行使用关键字。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>// constants.js</code> <code>const AGE = 30;</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>AGE;</code> </td> 
 </tr> 
 </tbody> 
</table>

不过以下形式是允许的:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>//constants.js</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>{ </code> <code>&nbsp;</code><code>name:&nbsp;</code><code>"Billy"</code><code>,</code> <code>&nbsp;</code><code>age: 40</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

并且需要在另一个文件中使用它

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>import</code>&nbsp;<code>user from&nbsp;</code><code>'./constants'</code><code>;</code> <code>console.log(user.name);&nbsp;</code><code>// Billy</code> <code>console.log(user.age);&nbsp;</code><code>// 40</code> </td> 
 </tr> 
 </tbody> 
</table>

还有，可以使用以下语法来导入constants.js文件中导出的所有变量:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>// test.js</code> <code>import</code>&nbsp;<code>* as constants from&nbsp;</code><code>'./constants'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

下面，我们将导入所有我们constants.js存储在constants变量中的命名和export default。因此，constants现在将成为对象。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>// constants.js</code> <code>export</code>&nbsp;<code>const USERNAME =&nbsp;</code><code>"David"</code><code>;</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>{ </code> <code>&nbsp;</code><code>name:&nbsp;</code><code>"Billy"</code><code>,</code> <code>&nbsp;</code><code>age: 40</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

在另一个文件中，我们按一下方式使用。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>// test.js</code> &nbsp; <code>import</code>&nbsp;<code>* as constants from&nbsp;</code><code>'./constants'</code><code>;</code> &nbsp; <code>console.log(constants.USERNAME);&nbsp;</code><code>// David</code> <code>console.log(constants.</code><code>default</code><code>);&nbsp;</code><code>// { name: "Billy", age: 40 }</code> <code>console.log(constants.</code><code>default</code><code>.age);&nbsp;</code><code>// 40</code> </td> 
 </tr> 
 </tbody> 
</table>

也可以使用以下方式组合使用命名导出和默认导出:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>// constants.js</code> <code>const PI = 3.14159; const AGE = 30;</code> <code>const USERNAME =&nbsp;</code><code>"David"</code><code>;</code> <code>const USER = { </code> <code>&nbsp;</code><code>name:&nbsp;</code><code>"Billy"</code><code>,</code> <code>&nbsp;</code><code>age: 40</code> <code>};</code> <code>export</code>&nbsp;<code>{ PI, AGE, USERNAME, USER as&nbsp;</code><code>default</code>&nbsp;<code>};</code> &nbsp; <code>import</code>&nbsp;<code>USER, { PI, AGE, USERNAME } from&nbsp;</code><code>"./constants"</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

总而言之:

ES6中，一个模块就是一个独立的文件，该文件内部的所有变量，外部都无法获取。如果想从外部读取模块内的某个变量，必须使用export关键字导出该变量，使用import关键字导入该变量。

**JavaScript****中的默认参数**

ES6增加了一个非常有用的特性，即在定义函数时提供默认参数。

假设我们有一个应用程序，一旦用户登录系统，我们将向他们显示一条欢迎消息，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>function</code>&nbsp;<code>showMessage(firstName) { </code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"Welcome back, "</code>&nbsp;<code>+ firstName;</code> <code>}</code> <code>console.log(showMessage(</code><code>'John'</code><code>));&nbsp;</code><code>// Welcome back, John</code> </td> 
 </tr> 
 </tbody> 
</table>

但是，如果数据库中没有用户名，那该怎么办呢?所以，我们首先需要检查是否提供了firstName，然后再显示相应的信息。

在ES6之前，我们必须写这样的代码:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>function</code>&nbsp;<code>showMessage(firstName) { </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(firstName) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"Welcome back, "</code>&nbsp;<code>+ firstName;</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"Welcome back, Guest"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>console.log(showMessage(</code><code>'John'</code><code>));&nbsp;</code><code>// Welcome back, John</code> <code>console.log(showMessage());&nbsp;</code><code>// Welcome back, Guest</code> </td> 
 </tr> 
 </tbody> 
</table>

但现在使用ES6提供的默认参数，我们可以这样写:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>function</code>&nbsp;<code>showMessage(firstName =&nbsp;</code><code>'Guest'</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>"Welcome back, "</code>&nbsp;<code>+ firstName;</code> <code>}</code> &nbsp; <code>console.log(showMessage(</code><code>'John'</code><code>));&nbsp;</code><code>// Welcome back, John</code> <code>console.log(showMessage());&nbsp;</code><code>// Welcome back, Guest</code> </td> 
 </tr> 
 </tbody> 
</table>

函数的默认参数可以为任意值。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>function</code>&nbsp;<code>display(a = 10, b = 20, c = b) { </code> <code>&nbsp;</code><code>console.log(a, b, c);</code> <code>}</code> &nbsp; <code>display();&nbsp;</code><code>// 10 20 20</code> <code>display(40);&nbsp;</code><code>// 40 20 20</code> <code>display(1, 70);&nbsp;</code><code>// 1 70 70</code> <code>display(1, 30, 70);&nbsp;</code><code>// 1 30 70</code> </td> 
 </tr> 
 </tbody> 
</table>

在上面的代码中，我们没有提供函数的所有参数，实际代码等同于:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>display();&nbsp;</code><code>// 等同于display(undefined, undefined, undefined)</code> <code>display(40); 等同于display(40, undefined, undefined)</code> <code>display(1, 70); 等同于display(1, 70, undefined)</code> </td> 
 </tr> 
 </tbody> 
</table>

因此，如果传递的参数是undefined，则对应的参数将使用默认值。

我们还可以将对象或计算值指定为默认值，如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>const defaultUser = { </code> <code>&nbsp;&nbsp;</code><code>name:&nbsp;</code><code>'Jane'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>location:&nbsp;</code><code>'NY'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>job:&nbsp;</code><code>'Software Developer'</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

const display = (user = defaultUser, age = 60 / 2 ) => \{

console.log(user, age);

\};

display();

/\* output

name: 'Jane',

location: 'NY',

job: 'Software Developer'

\} 30

\*/

ES5代码如下:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </td> 
 <td> <code>// ES5 Code</code> <code>function</code>&nbsp;<code>getUsers(page, results, gender, nationality) { </code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>params =&nbsp;</code><code>""</code><code>;</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(page === 0 || page) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>params += `page=${page}&amp;`;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(results) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>params += `results=${results}&amp;`;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(gender) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>params += `gender=${gender}&amp;`;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(nationality) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>params += `nationality=${nationality}`;</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>fetch(</code><code>'https://randomuser.me/api/?'</code>&nbsp;<code>+ params)</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.then(</code><code>function</code><code>(response) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>response.json();</code> <code>&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(result);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.</code><code>catch</code><code>(</code><code>function</code><code>(error) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'error'</code><code>, error);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>}</code> &nbsp; <code>getUsers(0, 10,&nbsp;</code><code>'male'</code><code>,&nbsp;</code><code>'us'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

在这段代码中，我们通过在getUsers函数中传递各种可选参数来进行API调用。在进行API调用之前，我们添加了各种if条件来检查是否添加了参数，并基于此构造查询字符串，如下所示：

https://randomuser.me/api/? page=0&results=10&gender=male&nationality=us

使用ES6的默认参数则不必添这么多if条件，如下所示:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>function</code>&nbsp;<code>getUsers(page = 0, results = 10, gender =&nbsp;</code><code>'male'</code><code>,nationality =&nbsp;</code><code>'us'</code><code>) { </code> <code>&nbsp;</code><code>fetch(`https:</code><code>//randomuser.me/api/?page=${page}&amp;results=${results}&amp;gender=${gender}&amp;nationality=${nationality}`)</code> <code>&nbsp;</code><code>.then(</code><code>function</code><code>(response) { </code> <code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>response.json();</code> <code>&nbsp;</code><code>})</code> <code>&nbsp;</code><code>.then(</code><code>function</code><code>(result) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.log(result);</code> <code>&nbsp;</code><code>})</code> <code>&nbsp;</code><code>.</code><code>catch</code><code>(</code><code>function</code><code>(error) { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>'error'</code><code>, error);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> <code>getUsers();</code> </td> 
 </tr> 
 </tbody> 
</table>

这样一来，代码得到了大量的简化，即便我们不为getUsers函数提供任何参数时，它也能采用默认值。当然，我们也可以传递自己的参数：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>getUsers(1, 20,&nbsp;</code><code>'female'</code><code>,&nbsp;</code><code>'gb'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

它将覆盖函数的默认参数。

**null****不等于未定义**

注意: 定义默认参数时，null和undefined是不同的。

我们来看下面的代码:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>function</code>&nbsp;<code>display(name =&nbsp;</code><code>'David'</code><code>, age = 35, location =&nbsp;</code><code>'NY'</code><code>){ </code> <code>&nbsp;</code><code>console.log(name, age, location);</code> <code>}</code> <code>display(</code><code>'David'</code><code>, 35);&nbsp;</code><code>// David 35 NY</code> <code>display(</code><code>'David'</code><code>, 35, undefined);&nbsp;</code><code>// David 35 NY</code> <code>// OR</code> <code>display(</code><code>'David'</code><code>, 35, undefined);&nbsp;</code><code>// David 35 NY</code> <code>display(</code><code>'David'</code><code>, 35,&nbsp;</code><code>null</code><code>);&nbsp;</code><code>// David 35 null</code> </td> 
 </tr> 
 </tbody> 
</table>

当我们传递null作为参数时，它实际是给location参数赋一个空值，与undefined不一样。所以它不会取默认值“NY”。

### **Array.prototype.includes** ###

ES7增加了数组的includes方法，用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>// ES5 Code</code> <code>const numbers = [</code><code>"one"</code><code>,&nbsp;</code><code>"two"</code><code>,&nbsp;</code><code>"three"</code><code>,&nbsp;</code><code>"four"</code><code>];</code> <code>console.log(numbers.indexOf(</code><code>"one"</code><code>) &gt; -1);&nbsp;</code><code>// true</code> <code>console.log(numbers.indexOf(</code><code>"five"</code><code>) &gt; -1);&nbsp;</code><code>// false</code> </td> 
 </tr> 
 </tbody> 
</table>

数组可以使用includes方法:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>// ES7 Code</code> <code>const numbers = [</code><code>"one"</code><code>,&nbsp;</code><code>"two"</code><code>,&nbsp;</code><code>"three"</code><code>,&nbsp;</code><code>"four"</code><code>];</code> <code>console.log(numbers.includes(</code><code>"one"</code><code>));&nbsp;</code><code>// true</code> <code>console.log(numbers.includes(</code><code>"five"</code><code>));&nbsp;</code><code>// false</code> </td> 
 </tr> 
 </tbody> 
</table>

includes方法可以使代码简短且易于理解，它也可用于比较不同的值。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>const day =&nbsp;</code><code>"monday"</code><code>;</code> <code>if</code><code>(day ===&nbsp;</code><code>"monday"</code>&nbsp;<code>|| day ===&nbsp;</code><code>"tuesday"</code>&nbsp;<code>|| day ===&nbsp;</code><code>"wednesday"</code><code>) { </code> <code>&nbsp;&nbsp;</code><code>// do something</code> <code>}</code> &nbsp; <code>// 以上代码使用include方法可以简化如下:</code> <code>const day =&nbsp;</code><code>"monday"</code><code>;</code> <code>if</code><code>([</code><code>"monday"</code><code>,&nbsp;</code><code>"tuesday"</code><code>,&nbsp;</code><code>"wednesday"</code><code>].includes(day)) { </code> <code>&nbsp;&nbsp;</code><code>// do something</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

因此，在检查数组中的值时，使用includes方法将会非常的方便。

结语

从ES6开始，JavaScript中发生许多变更。对于JavaScript，Angular，React或Vue开发人员都应该知道它们

了解这些变更可以使你成为更棒的开发者，甚至可以帮助您获得更高的薪水。而且，如果你只是在学习React之类的库以及Angular和Vue之类的框架，那么您一定要掌握这些新特性。

[Link 1]: https://www.grapecity.com.cn/
[721a5525474c8f387e72c24ae1772fd7.png]: /images/20221120/6e86927254a8406e9d99823b60a31953.png
[7ecc8038e8f1d7d3d0308a6129a9b3ed.png]: /images/20221120/acc20279303441f99acd0fb8d3b54470.png
[bace9ab9487c204de61062b06910214c.png]: /images/20221120/1eebf1d128da433f83d32e1f4c96c9d4.png
[4cd198ffb1b8b17f5e131102e8e9ff3d.png]: /images/20221120/0aea37d228724fcea66a80281dcb287b.png
[0667ce4ccf09e93c4e4efa28d17b52b0.png]: /images/20221120/9dd067c902f9413693ea921d9eba9f7f.png