学习现代 JavaScript (ES6+) 的基础知识

您应该在代码中开始使用的 10 个现代功能

您可能已经知道 JavaScript 是一种功能丰富的编程语言，每次更新都会不断增强。

有很多事情要跟上，你可能仍然会发现自己在用旧的方式做事。所以这里有 10 种方法可以让你的 JavaScript 代码现代化。

 1. 箭头函数 2. 默认参数 3.对象而不是开关 4. 可选链 5. 解构 6. 三元运算符 7. Nullish 合并操作符 8. 映射和设置 9. Object.hasOwnProperty() 10. 迭代一个对象

1. 箭头函数

传统函数表达式的紧凑替代方案。有一些 局限性 ，就像没有 这个 绑定，但它仍然可以满足您的平均需求。

与箭头函数相比，这是一个传统的匿名函数：

它已经更简洁了，但我们可以做得更好。当函数体由一行组成时，主体括号和 返回 关键字可以省略，所以这里我们隐式返回 一个 + 5 ：

 (a) => a + 5；

派对并不止于此。当只有一个参数时，我们也可以省略参数括号：

 a => a + 5;

如果我们需要它是一个命名函数怎么办？我们只是在一个变量中声明它：

 常量总和 = a => a + 5;

2. 默认参数

有时您希望可选参数具有默认值。这是在函数调用中省略参数时使用的值。

与使用默认参数相比，这是传统解决方案的样子：

现在简洁了很多。我们可以对箭头函数做同样的事情：

 const print = (a = 5) => console.log(`数字是${a}`);

3.对象而不是开关

这 转变 语句是软件开发的主要内容，因为它可以处理各种场景。但有时，它可能非常冗长，所以我们可能想要一个更简单的替代方案。

以下是我们如何用对象替换开关：

配对是通过对象完成的 地图 .然后，我们使用括号属性访问器来获取相应的值。

4. 可选链

可选的链接运算符 ? 当您想要安全地访问属性但仍然要紧凑的代码时非常有用。

让我们看一个没有和有可选链接的例子：

这同样适用于函数调用或数组项访问：

5. 解构

一个非常方便的表达式，它允许您从对象中提取属性或从数组中提取值：

我们使用了括号，然后在其中指定了要提取的属性。这是一个带有数组的示例：

在这里，我们使用方括号从数组中提取第一项和第二项。

我们可以将其提升到一个新的水平并访问嵌套属性，如下所示：

或者我们甚至可以混合使用数组和对象解构：

6. 三元运算符

一个接受三个操作数的运算符：一个条件，如果条件为真则执行的表达式，如果条件为假则执行的表达式。它是一个紧凑的替代品 如果别的 陈述。

您还可以通过嵌套条件来处理更复杂的用例：

我建议您谨慎使用此运算符，因为它在可读性方面会变得棘手。对于更复杂的用例，您可能应该避免使用它。

7. Nullish 合并操作符

通常你必须为你的变量提供一个默认值。前段时间，您唯一简洁的选择是使用逻辑 OR 运算符 || .不过，您必须小心一件事（而且您仍然会这样做）。如果左操作数是假的，而不是假的，则使用默认值。

有时这可能会产生很大的不同，从而导致意外行为。让我们看一个例子：

这两个功能适用于大多数用户。但是，对于 id 是 0 ，这两个函数的行为会有很大不同：在上面的一个中，输出会是错误的，因为 id 有值 0 是假的，因此默认为占位符。

然而，底部的将正常工作。由于我们使用了 ?? 运算符，它只考虑错误的左操作数，因此处理 0 作为一个有效值，在这种情况下，这就是我们想要的。

这两个操作数都非常有用，您应该使用其中一个，具体取决于您要查找的行为。

8. 映射和设置

大三学生经常犯的一个错误是对所有事情都使用数组。还有其他数据结构！

当您想要将键与值配对时，Map 类很方便。它类似于Objects，但也有一些 差异 这可以使 Map 更适合某些用例。例如，Map 的键可以不同于字符串。

这是一个例子：

Retrieving a value by key is very easy

另一方面，当您需要存储唯一值列表时，Set 类非常方便。这意味着，每个值在 Set 中只出现一次。

Checking for a value existence or deleting it is very easy

与数组相比，改变 Set 非常容易。当然，Set 类仅适用于某些用例。

9. Object.hasOwnProperty()

返回的方法 真的 如果调用它的对象具有指定的属性。它也相当可靠，因为它只考虑对象自己的属性，而不考虑任何继承的属性。

这是一个使用示例：

10. 迭代一个对象

有时您可能需要遍历对象的属性。现在你当然不能这样做，因为一个对象是不可迭代的。以下三种方法可以帮助您：

无论您需要迭代对象的键、值还是两者，每种方法都有不同的结果。

把它包起来

好了，今天就到这里了，希望对你有用！

谢谢阅读。敬请期待更多！

参考

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

封面图片

• 摄影者 穆罕默德·拉赫马尼 上 不飞溅

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/17518/38590600