现代JavaScript – ES6 +中的导入,导出,让,约束和承诺

2020年12月30日10:51:41 发表评论 38 次浏览

本文概述

在过去的几年中, 对JavaScript语言进行了许多更新。如果你想改善编码, 这些更新非常有用。

与语言的最新发展保持同步非常重要。它可以帮助你获得更高薪水的工作, 紧跟最新趋势, 提高代码质量并在当前工作中表现出色。

如果你想学习像React这样的JavaScript库或像Angular或Vue这样的框架, 那么你肯定需要了解最新功能。

最近, JavaScript有许多有用的补充, 例如空位合并运算符, 可选链接, 承诺, 异步/等待, ES6解构, 和更多。

因此, 今天, 我们将探讨每个JavaScript开发人员都应意识到的一些概念。

让我们开始学习有关JS的知识。

Let和const在JavaScript中

在ES6之前, JavaScript使用变种仅使用功能和全局范围的关键字。没有块级范围。

除了让和constJavaScript添加了块作用域。

如何在JavaScript中使用let

当我们使用让关键字, 我们可以分配稍后为该变量添加新值, 但我们无法重新声明同名。

// ES5 Code
var value = 10;
console.log(value); // 10

var value = "hello";
console.log(value); // hello

var value = 30;
console.log(value); // 30

如你在上面看到的, 我们已经重新声明了变量值使用变种关键字多次。

在ES6之前, 我们可以重新声明一个之前已经声明过的变量, 如果它没有被有意义地使用, 而是引起混乱的话。

但是, 如果我们已经在其他地方已经声明了一个具有相同名称的变量, 而又在没有意识到的情况下重新声明了该怎么办?然后, 我们可能会覆盖变量值, 从而导致一些难以调试的问题。

因此, 当你使用让关键字, 当你尝试重新声明具有相同名称的变量时, 会出现错误-这是一件好事。

// ES6 Code
let value = 10;
console.log(value); // 10

let value = "hello"; // Uncaught SyntaxError: Identifier 'value' has already been declared

但是, 以下代码有效:

// ES6 Code
let value = 10;
console.log(value); // 10

value = "hello";
console.log(value); // hello

上面的代码没有错误, 因为重新分配一个新的价值值变量。但是我们不重新声明 值再次。

现在, 看下面的代码:

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

如你在这段代码中所见, 当我们使用变种关键字, 它在if挡也。

现在看下面的代码:

// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // Uncaught ReferenceError: number is not defined

如你所见, Number当使用让关键字只能在if块。在该块之外, 该块不可用, 因此当我们尝试在该块之外访问该块时, 出现参考错误if块。

但是如果有一个Number外的变量if块, 那么它将如下所示工作:

// ES6 Code
let isValid = true;
let number = 20;

if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // outside: 20

在这里, 我们有两个Number变量在单独的范围内。所以外面if块, 值Number将是20。

看下面的代码:

// ES5 Code
for(var i = 0; i < 10; i++){
 console.log(i);
}
console.log('outside:', i); // 10

使用时变种关键词, 一世即使在对于循环。

// ES6 Code
for(let i = 0; i < 10; i++){
 console.log(i);
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

但是当使用让关键字, 在循环外不可用。

因此, 从上面的代码示例中可以看到, 使用让使变量仅在该块内可用, 而在该块外不可访问。

我们还可以通过一对大括号创建一个块, 如下所示:

let i = 10;
{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // outside: 10

如果你还记得, 我说过我们不能重新声明让基于相同变量的变量, 但我们可以在另一个块中重新声明它。如你在上面的代码中看到的, 我们已经重新声明一世并为其分配了新值20在块内。声明后, 该变量值将仅在该块中可用。

在块外, 当我们打印该变量时, 我们得到10而不是之前分配的值30因为外面是方块, 里面是一世变量不存在。

如果我们没有变量一世在外部声明, 那么我们将得到一个错误, 如下面的代码所示:

{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

如何在JavaScript中使用const

的const关键字的工作原理与让关键字在其块范围界定功能中。因此, 让我们看一下它们之间的区别。

当我们声明一个变量为const, 它被视为常量变量, 其值将永远不变。

如果是让, 以后我们可以为该变量分配一个新值, 如下所示:

let number = 10;
number = 20;

console.log(number); // 20

但是, 如果const:

const number = 10;
number = 20; // Uncaught TypeError: Assignment to constant variable.

我们甚至不能重新声明一种const变量。

const number = 20;
console.log(number); // 20

const number = 10; // Uncaught SyntaxError: Identifier 'number' has already been declared

现在, 看下面的代码:

const arr = [1, 2, 3, 4];

arr.push(5);

console.log(arr); // [1, 2, 3, 4, 5]

我们说const变量是常量, 其值将永远不变-但我们已经更改了上面的常量数组。那么, 这有什么意义呢?

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

那么实际存储的是什么rr不是实际的数组, 而是仅存储实际数组的存储位置的引用(地址)。

所以这样做arr.push(5);我们实际上并没有更改参考rr指向, 但我们正在更改该引用处存储的值。

对象也是如此:

const obj = {
 name: 'David', age: 30
};

obj.age = 40;

console.log(obj); // { name: 'David', age: 40 }

在这里, 我们也不会更改对象指向, 但我们正在更改该引用处存储的值。

因此上面的代码将起作用, 但是下面的代码将不起作用。

const obj = { name: 'David', age: 30 };
const obj1 = { name: 'Mike', age: 40 };
obj = obj1; // Uncaught TypeError: Assignment to constant variable.

上面的代码无法正常工作, 因为我们正在尝试更改const变量指向。

因此, 使用const时要记住的关键点是, 当我们使用const将变量声明为常量时, 我​​们无法重新定义它。我们也不能重新分配该变量, 但是如果该变量是引用类型, 则可以更改存储在该位置的值。

因此以下代码无效, 因为我们正在为其重新分配一个新值。

const arr = [1, 2, 3, 4];
arr = [10, 20, 30]; // Uncaught TypeError: Assignment to constant variable.

但是请注意, 正如我们之前看到的, 我们可以更改数组内的值。

下面的代码重新定义了const变量也无效。

const name = "David";
const name = "Raj"; // Uncaught SyntaxError: Identifier 'name' has already been declared

让和const总结

  • 关键字让和const在JavaScript中添加块范围。
  • 当我们声明一个变量为让, 我们不可以重新定义or重新声明在同一个作用域(函数或块作用域)中, 另一个具有相同名称的let变量, 但是我们可以重新分配它的价值。
  • 当我们声明一个变量为const, 我们不可以重新定义or重新声明另一个const在相同作用域(功能或块作用域)中具有相同名称的变量。但是, 如果变量是引用类型(例如数组或对象), 则可以更改存储在该变量中的值。

好吧, 让我们继续下一个大话题:诺言。

JavaScript中的承诺

承诺是JavaScript中最重要但又令人困惑且难以理解的部分之一。大多数新开发人员以及经验丰富的开发人员都难以理解他们。

在ES6中添加了作为本地实现的承诺。

那么什么是诺言?许诺表示将来要完成的异步操作。

以前, 在ES6之前, 无法等待某些东西执行某些操作。

例如, 当我们想进行API调用时, 没有办法等到结果返回ES6之前。

为此, 我们曾经使用像Jquery或Ajax这样的外部库, 它们都有自己的promise实现。但是没有浏览器实现承诺的事情。

但是现在在ES6中使用Promises, 我们可以自己调用一个API, 然后等待完成后执行一些操作。

如何建立承诺

为了创造一个承诺, 我们需要使用诺言构造函数如下:

const promise = new Promise(function(resolve, reject) {
 
});

的诺言构造函数将一个函数作为参数, 并且该函数在内部接收解决和拒绝作为参数。

的解决和拒绝参数实际上是我们可以调用的函数, 具体取决于异步操作的结果。

一种诺言经历三种状态:

  • 待定
  • 已完成
  • 拒绝

当我们创建承诺时, 它处于待处理状态。当我们打电话给解决功能, 它会进入充实状态, 如果我们调用拒绝它将进入拒绝状态。

为了模拟长时间运行或异步操作, 我们将使用setTimeout功能。

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

在这里, 我们创建了一个承诺, 它将解决以下问题的总和:4和52000ms(2秒)超时结束后。

为了获得成功执行诺言的结果, 我们需要使用来注册一个回调。然后像这样:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

promise.then(function(result) {
 console.log(result); // 9
});

所以每当我们打电话解决, promise将返回传递给的值解决我们可以使用收集的功能。然后处理程序。

如果操作不成功, 则我们将拒绝像这样的功能:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
});

在这里, 如果和不是数字, 那么我们称拒绝与错误消息一起使用。否则我们称解决功能。

如果执行上面的代码, 你将看到以下输出:

错误无误

如你所见, 我们收到一条未捕获的错误消息以及我们指定的消息, 因为调用拒绝函数引发错误。但是我们尚未添加用于捕获该错误的错误处理程序。

要捕获该错误, 我们需要使用来注册另一个回调。抓住像这样:

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

你将看到以下输出:

捕获错误

如你所见, 我们已经添加了。抓住处理程序, 因此我们没有收到任何未捕获的错误, 但只是将错误记录到控制台。

这也避免了突然停止应用程序。

因此, 始终建议添加。抓住处理程序, 以确保每个应用程序都不会因错误而停止运行。

承诺链

我们可以添加多个。然后像这样的单个承诺的处理程序:

promise.then(function(result) {
 console.log('first .then handler');
 return result;
}).then(function(result) {
 console.log('second .then handler');
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

当我们有多个。然后添加了处理程序, 前一个的返回值。然后处理程序会自动传递到下一个。然后处理程序。

承诺链

如你所见, 添加4 + 5兑现诺言, 我们首先得到。然后处理程序。在那里, 我们正在打印一条日志语句, 并将该总和返回到下一个。然后处理程序。

然后在下一个。然后处理程序, 我们添加了一条日志语句, 然后打印了从上一个获得的结果。然后处理程序。

这种添加多个的方式。然后处理程序称为承诺链。

如何在JavaScript中延迟承诺的执行

很多时候, 我们不想立即创建promise, 而是想要在某些操作完成后创建promise。

为此, 我们可以将promise包装在一个函数中, 然后从该函数返回该promise, 如下所示:

function createPromise() {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = 4 + 5;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

这样, 我们可以在promise中使用函数参数, 从而使函数真正具有动态性。

function createPromise(a, b) {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = a + b;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

createPromise(1, 8)
 .then(function(output) {
  console.log(output); // 9
});

// OR

createPromise(10, 24)
 .then(function(output) {
  console.log(output); // 34
});
Output

注意:当我们创建一个承诺时, 它将被解决或拒绝, 但不会同时出现。所以我们不能加两个解决or拒绝函数以相同的承诺进行调用。

另外, 我们只能将单个值传递给解决or拒绝功能。

如果你要将多个值传递给解决函数, 将其作为这样的对象传递:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve({
   a: 4, b: 5, sum
  });
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});
解决对象

如何在JavaScript中使用箭头功能

在以上所有代码示例中, 我们在创建Promise时使用了常规的ES5函数语法。但是, 通常使用箭头函数语法代替ES5函数语法, 如下所示:

const promise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then((result) => {
 console.log(result);
});

你可以根据自己的喜好和需求使用ES5或ES6函数语法。

ES6导入和导出语法

在ES6出现之前, 我们使用了多个脚本标记在单个HTML文件中以导入不同的JavaScript文件, 如下所示:

<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="profile.js"></script>
<script type="text/javascript" src="user.js"></script>

因此, 如果我们在不同的JavaScript文件中有一个具有相同名称的变量, 它将产生命名冲突, 并且你期望的值将不是你获得的实际值。

ES6通过模块的概念解决了这个问题。

我们在ES6中编写的每个JavaScript文件都称为模块。我们在每个文件中声明的变量和函数对其他文件不可用, 除非我们专门从该文件导出并将它们导入另一个文件。

因此, 文件中定义的函数和变量是每个文件专用的, 除非我们导出它们, 否则无法在文件外部访问它们。

出口有两种类型:

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

用JavaScript命名导出

要将单个值导出为命名导出, 我们将其导出为:

export const temp = "This is some dummy text";

如果要导出多个内容, 则可以在单独的行上而不是在变量声明前编写一个export语句。我们在大括号中指定要导出的内容。

const temp1 = "This is some dummy text1";
const temp2 = "This is some dummy text2";

export { temp1, temp2 };

请注意, 导出语法不是对象文字语法。因此, 在ES6中, 要导出某些内容, 我们不能使用像这样的键值对:

// This is invalid syntax of export in ES6

export { key1: value1, key2: value2 }

要导入导出为命名导出的内容, 请使用以下语法:

import { temp1, temp2 } from './filename';

请注意, 从文件导入内容时, 我们不需要添加.js默认情况下考虑的文件名扩展名。

// import from functions.js file from current directory 
import { temp1, temp2 } from './functions';

// import from functions.js file from parent of current directory
import { temp1 } from '../functions';

这是一个代码沙箱演示:https://codesandbox.io/s/hardcore-pond-q4cjx

需要注意的一件事是, 导出时使用的名称必须与导入时使用的名称匹配。

因此, 如果要导出为:

// constants.js
export const PI = 3.14159;

那么在导入时, 你必须使用与导出时相同的名称:

import { PI } from './constants';

你不能使用其他任何这样的名称:

import { PiValue } from './constants'; // This will throw an error

但是, 如果你已经拥有与导出变量同名的变量, 则可以在导入时使用重命名语法, 如下所示:

import { PI as PIValue } from './constants';

在这里我们已重命名PIto价值所以我们不能使用PI现在是变量名。相反, 我们必须使用价值变量以获取的导出值PI.

我们还可以在导出时使用重命名语法:

// constants.js
const PI = 3.14159; 

export { PI as PIValue };

然后在导入时我们必须使用价值像这样:

import { PIValue } from './constants';

要将某些内容导出为命名的导出, 我们必须先声明它。

export 'hello'; // this will result in error
export const greeting = 'hello'; // this will work
export { name: 'David' }; // This will result in error
export const object = { name: 'David' }; // This will work

我们导入多个命名导出的顺序并不重要。

看下面validations.js文件:

// utils/validations.js

const isValidEmail = function(email) {
  if (/^[^@ ]+@[^@ ]+\.[^@ \.]{2, }$/.test(email)) {
    return "email is valid";
  } else {
    return "email is invalid";
  }
};

const isValidPhone = function(phone) {
  if (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(phone)) {
    return "phone number is valid";
  } else {
    return "phone number is invalid";
  }
};

function isEmpty(value) { 
  if (/^\s*$/.test(value)) {
    return "string is empty or contains only spaces";
  } else {
    return "string is not empty and does not contain spaces";
  } 
}

export { isValidEmail, isValidPhone, isEmpty };

和在index.js我们使用这些功能, 如下所示:

// index.js
import { isEmpty, isValidEmail } from "./utils/validations";

console.log("isEmpty:", isEmpty("abcd")); // isEmpty: string is not empty and does not contain spaces

console.log("isValidEmail:", isValidEmail("abc@11gmail.com")); // isValidEmail: email is valid

console.log("isValidEmail:", isValidEmail("ab@c@11gmail.com")); // isValidEmail: email is invalid

这是一个代码沙箱演示:https://codesandbox.io/s/youthful-flower-xesus

如你所见, 我们只能以任何顺序导入所需的导出内容, 因此我们无需检查在另一个文件中导出的顺序。这就是命名出口的美。

JavaScript中的默认导出

如前所述, 单个文件中最多可以有一个默认导出。

但是, 你可以在一个文件中组合多个命名的导出和一个默认的导出。

要声明默认导出, 我们在export关键字前面添加default关键字, 如下所示:

//constants.js
const name = 'David'; 
export default name;

要导入默认导出, 我们不像在命名导出中那样添加大括号, 如下所示:

import name from './constants';

如果我们有多个命名导出和一个默认导出, 如下所示:

// constants.js
export const PI = 3.14159; 
export const AGE = 30;

const NAME = "David";
export default NAME;

然后要在一行中导入所有内容, 我们只需在大括号之前使用默认的导出变量。

// NAME is default export and PI and AGE are named exports here

import NAME, { PI, AGE } from './constants';

默认导出的一项特殊功能是, 我们可以在导入时更改导出变量的名称:

// constants.js
const AGE = 30;
export default AGE;

在另一个文件中, 我们可以在导入时使用其他名称

import myAge from ‘./constants’; 

console.log(myAge); // 30

在这里, 我们将默认导出变量的名称从年龄to我的年龄.

之所以可行, 是因为只能存在一个默认导出, 因此你可以随意命名。

关于默认导出的另一件事要注意的是, export default关键字不能在这样的变量声明之前出现:

// constants.js
export default const AGE = 30; // This is an error and will not work

因此我们必须在单独的一行上使用export default关键字, 如下所示:

// constants.js 

const AGE = 30; 
export default AGE;

但是, 我们可以导出默认值而无需声明变量, 如下所示:

//constants.js
export default {
 name: "Billy", age: 40
};

并在另一个文件中使用它, 如下所示:

import user from './constants';
console.log(user.name); // Billy 
console.log(user.age); // 40

还有一种使用以下语法导入文件中导出的所有变量的方法:

import * as constants from './constants';

在这里, 我们将导入我们拥有的所有命名和默认导出constants.js并存储在常量变量。所以, 常量现在将成为对象。

// constants.js
export const USERNAME = "David";
export default {
 name: "Billy", age: 40
};

在另一个文件中, 我们按以下方式使用它:

// test.js

import * as constants from './constants';

console.log(constants.USERNAME); // David
console.log(constants.default); // { name: "Billy", age: 40 }
console.log(constants.default.age); // 40

这是一个代码沙箱演示:https://codesandbox.io/s/green-hill-dj43b

如果你不想在默认行和命名行上分别导出

导出, 可以将其组合如下所示:

// constants.js
const PI = 3.14159; const AGE = 30;
const USERNAME = "David";
const USER = {
 name: "Billy", age: 40 
};

export { PI, AGE, USERNAME, USER as default };

在这里, 我们正在出口用户作为默认导出, 其他作为命名导出。

在另一个文件中, 你可以像这样使用它:

import USER, { PI, AGE, USERNAME } from "./constants";

这是一个代码沙箱演示:https://codesandbox.io/s/eloquent-northcutt-7btp1

综上所述:

  1. 在ES6中, 一个文件中声明的数据无法从另一个文件访问, 直到从该文件中导出该数据并将其导入另一个文件中为止。
  2. 如果在文件中有一个要导出的东西(如类声明), 则使用默认导出, 否则我们使用命名导出。我们还可以将默认导出和命名导出合并到一个文件中。

JavaScript中的默认参数

ES6添加了一个非常有用的功能, 即在定义函数时提供默认参数。

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

function showMessage(firstName) {
  return "Welcome back, " + firstName;
}
console.log(showMessage('John')); // Welcome back, John

但是, 如果我们在数据库中没有用户名, 因为在注册时这是可选字段, 该怎么办?然后我们可以显示欢迎来客登录后向用户发送消息。

因此, 我们首先需要检查名字提供, 然后显示相应的消息。在ES6之前, 我们将不得不编写如下代码:

function showMessage(firstName) {
  if(firstName) {
    return "Welcome back, " + firstName;
  } else {
    return "Welcome back, Guest";
  }
}

console.log(showMessage('John')); // Welcome back, John 
console.log(showMessage()); // Welcome back, Guest

但是现在在ES6中使用默认函数参数, 我们可以编写上面的代码, 如下所示:

function showMessage(firstName = 'Guest') {
   return "Welcome back, " + firstName;
}

console.log(showMessage('John')); // Welcome back, John 
console.log(showMessage()); // Welcome back, Guest

我们可以将任何值作为默认值分配给function参数。

function display(a = 10, b = 20, c = b) { 
 console.log(a, b, c);
}

display(); // 10 20 20
display(40); // 40 20 20
display(1, 70); // 1 70 70
display(1, 30, 70); // 1 30 70

如你所见, 我们已经为a和b函数参数分配了唯一的值, 但是对于c, 我们为b分配了值。因此, 如果在调用函数时没有为c提供特定的值, 那么我们为b提供的任何值也将分配给c。

在上面的代码中, 我们没有为函数提供所有参数。因此, 上述函数调用将与以下相同:

display(); // is same as display(undefined, undefined, undefined)
display(40); // is same as display(40, undefined, undefined)
display(1, 70); // is same as display(1, 70, undefined)

所以如果传递的参数是未定义, 默认值将用于相应的参数。

我们还可以将复杂值或计算值指定为默认值。

const defaultUser = {
  name: 'Jane', location: 'NY', job: 'Software Developer'
};

const display = (user = defaultUser, age = 60 / 2 ) => { 
 console.log(user, age);
};
display();

/* output

{
  name: 'Jane', location: 'NY', job: 'Software Developer'
} 30 

*/

现在, 看下面的ES5代码:

// ES5 Code
function getUsers(page, results, gender, nationality) {
  var params = "";
  if(page === 0 || page) {
   params += `page=${page}&`; 
  }
  if(results) {
   params += `results=${results}&`;
  }
  if(gender) {
   params += `gender=${gender}&`;
  }
  if(nationality) {
   params += `nationality=${nationality}`;
  }

  fetch('https://randomuser.me/api/?' + params) 
   .then(function(response) {
     return response.json(); 
   })
   .then(function(result) { 
    console.log(result);
   }) 
   .catch(function(error) {
     console.log('error', error); 
   }); 
}

getUsers(0, 10, 'male', 'us');

在这段代码中, 我们将对随机用户通过在API中传递各种可选参数来实现APIgetUsers功能。

因此, 在进行API调用之前, 我们添加了各种if条件来检查是否添加了参数, 并以此为基础构造查询字符串, 如下所示:https://randomuser.me/api/? page = 0&results = 10&gender = male&nationality = us.

但是我们可以在定义函数参数的同时使用默认参数, 而不是添加太多的if条件, 如下所示:

function getUsers(page = 0, results = 10, gender = 'male', nationality = 'us') {
 fetch(`https://randomuser.me/api/?page=${page}&results=${results}&gender=${gender}&nationality=${nationality}`)
 .then(function(response) { 
  return response.json();
 }) 
 .then(function(result) {
   console.log(result); 
 })
 .catch(function(error) { 
  console.log('error', error);
  }); 
}

getUsers();

如你所见, 我们已经大大简化了代码。因此, 当我们不向getUsers函数, 它将采用默认值, 我们也可以提供自己的值, 如下所示:

getUsers(1, 20, 'female', 'gb');

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

null不等于未定义

但是你需要注意一件事:null和未定义定义默认参数是两件事。

看下面的代码:

function display(name = 'David', age = 35, location = 'NY'){
 console.log(name, age, location); 
}

display('David', 35); // David 35 NY
display('David', 35, undefined); // David 35 NY

由于我们在第一次调用display时没有提供location参数的第三个值, 因此它将是未定义默认情况下, 因此在两个函数调用中都将使用location的默认值。但是下面的函数调用是不相等的。

display('David', 35, undefined); // David 35 NY
display('David', 35, null); // David 35 null

当我们通过null作为论证, 我们特别是要分配一个null的价值位置与以下参数不同的参数未定义。因此它不会采用默认值NY.

Array.prototype.includes

ES7添加了一个新功能, 该功能可以检查数组中是否存在某个元素, 并返回布尔值trueorfalse.

// ES5 Code

const numbers = ["one", "two", "three", "four"];

console.log(numbers.indexOf("one") > -1); // true 
console.log(numbers.indexOf("five") > -1); // false

相同的代码使用数组包括方法可以写成如下图:

// ES7 Code

const numbers = ["one", "two", "three", "four"];

console.log(numbers.includes("one")); // true 
console.log(numbers.includes("five")); // false

所以使用数组包括方法使代码简短易懂。

的包括与不同的值进行比较时, 此方法也很方便。

看下面的代码:

const day = "monday";

if(day === "monday" || day === "tuesday" || day === "wednesday") {
  // do something
}

上面的代码使用包括方法可以简化如下图所示:

const day = "monday";

if(["monday", "tuesday", "wednesday"].includes(day)) {
  // do something
}

所以包括检查数组中的值时, 此方法非常方便。

结束点

从ES6开始, JavaScript中已包含许多更改。每个JavaScript, Angular, React或Vue开发人员都应该意识到它们。

了解他们可以使你成为更好的开发人员, 甚至可以帮助你获得更高的薪水。而且, 如果你只是在学习React之类的库以及Angular和Vue之类的框架, 那么你一定会熟悉这些新功能。

了解有关现代JavaScript功能的更多信息

你可以在我的网站上了解有关JavaScript中添加的最新功能的所有信息掌握现代JavaScript书。它是学习现代JavaScript概念所需的唯一指南。

现代JavaScript – ES6 +中的导入,导出,让,约束和承诺1

订阅我的每周通讯加入1000多个其他订阅者, 直接在你的收件箱中获得惊人的提示, 技巧和文章。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: