5个鲜为人知的JavaScript功能将改善你的代码

WEB前端开发社区 今天

今天，我想分享一些JavaScript功能的内容，你应该在日常代码中使用这些功能，希望今天的内容对你有所帮助。

1、JavaScript字符串填充

如果你在2016年就使用JavaScript进行工作的话，我想，你可能会记得这一left-pad事件。

总而言之，NPM上有一个JavaScript软件包，可用于在字符串上，对于那些多加上的字符，可以将其从NPM中删除，由于它受到软件包的依赖，因此，在世界范围内引起了多米诺骨牌效应，破坏了软件的构建。

虽然，NPM解决了该问题，它在TC39的民间变得十分明显，随着ES2017的出现，它们推出了.padStart()和.padEnd()。

要将0添加到字符串的开头，我们将使用.padStart()，传递字符串的目标长度，用于填充当前字符串的字符串。在下面的示例中，我将字符串“ 1”填充为长度为“ 5”。

let str = "1";str = str.padStart(5,0);console.log(str) // output is 00001

另外，我们可能想填充字符串的末尾，为此我们使用.padEnd()。类似地，我们传递字符串的目标长度，并传递字符串作为当前字符串的填充。

在下面的示例中，我将字符串“ 1”填充长度为“ 5”。但是，这一次会将填充添加到末尾。

let str = "1";str = str.padEnd(5,0);console.log(str) // result is 10000

2、Spread运算符

Spread运算符并不是最新最闪亮的JavaScript功能，早在2015年作为ES2015规范的一部分问世，但是它的一些用例经常被忽略。

Spread运算符的第一个用例是将项目从一个数组添加到另一个数组。在下面的示例中，我有一个包含3种水果的数组，但是我想要第二个数组包含第四种水果，因此我使用了传播运算符来复制原始水果，并添加第四种水果。

const arr1 = ["Apple", "Orange", "Pear"]const arr2 = [...arr1, "Banana"]console.log(arr2) // ["Apple", "Orange", "Pear", "Banana"]

我们可以对对象执行类似的操作，但是，具有额外的好处，即可以覆盖原始对象中的值。

const personA = {name: "Jonathan",age: 21,}const personB = {  ...personA,name: 'Charlie'}console.log(personB) // {name: "Charlie", age: 21}

3、Rest参数

从Spread运算符开始，我们有了Rest参数，这有点像相反。该rest语法收集多个元素，并将它们“压缩”为单个元素。

该rest参数的一个好用例是在对数组进行分解时将其剩余元素分组。在下面的示例中，我们对一些水果进行了解构，因此苹果是独立存在的，其余的水果则排列在一个水果阵列中。

const [apple, ...fruits] = ["apple", "orange", "pear"];console.log(apple); // output is "apple"console.log(fruits); // output is ["orange", "pear"]

4、Array.prototype.includes

我要谈的下一个功能是Array.prototype.includes，此功能使你可以查找数组是否包含项。

在之前Array.prototype.includes，可以通过遍历数组并将找到的项设置为true来实现此目的，请参见下文：

const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];let found = false;fruits.forEach(function(fruit) {if (fruit === 'Kiwi') {    found = true;  }});console.log(found); // Outputs `true`

现在，有了Array.prototype.includes，我们可以将其显着减少到以下：

const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];const found = fruits.includes("Kiwi");console.log(found); // Outputs `true`

注意：作为开发人员，我们不必担心现在如何实现此搜索，因此浏览器可以自己优化此行为。

5、可选链接

我要谈的第五功能，也是最后一个功能，“可选链接”。

可选的链接允许我们尝试检索嵌套在对象中的深层数据，而不必处理数据可能不存在的情况。

让我们看一下下面的示例，在此示例中，我们正在定义Jonathan一些元数据。

const jonathan = {name: "Jonathan",meta: {age: 21  }}const age = jonathan.meta.age;const gender = jonathan.other.gender; // Will throw errorconsole.log(age);console.log(gender);

如果我们运行此代码，则会导致错误，因为other该对象的部分不存在。

通过可选的链接，我们可以这样来防止出现此错误：如果属性不存在，请不要在对象树中走得更远。我使用可选链接更新了以下代码。

const jonathan = {name: "Jonathan",meta: {age: 21  }}const age = jonathan?.meta?.age;const gender = Jonathan?.other?.gender;console.log(age); // outputs 21console.log(gender); // outputs "undefined"

如果我们现在运行此命令，将不再有错误，并且性别是未定义的，我们可以单独处理。

总结

JavaScript的发展速度比以往任何时候都快，它每年更新一次，使它保持新鲜，因此，我们需要不断的学习它的相关知识。