JavaScript 使用技巧和最佳实践
在本文中，我将分享 10 个我遵循并认为有用的 JavaScript 技巧、窍门和最佳实践。
1. 使用数字分隔符
这是我处理大数字时最常用的运算符之一。在数字中使用分隔符（例如下划线“_”）比不加分隔符的数字看起来更美观。
例如：
let number = 98234567
到 ⬇
let number = 98_234_567
它也适用于任何其他进制：
const binary = 0b1000_0101;
const hex = 0x12_34_56_78;
需要注意的几点：
- 不能在前面加 0 之后使用。
let num= 0_12
- 不允许出现在数字字面量的末尾。
let num= 500_
2. 始终使用分号
使用分号作为行尾符是一种良好的编程习惯。如果您忘记添加分号，系统不会发出警告，因为大多数情况下 JavaScript 解析器会自动插入分号，但我们并不鼓励依赖自动分号插入 (ASI) 功能。
这甚至被纳入了谷歌、Airbnb和jQuery 的Javascript 风格指南中。
想了解过度依赖人工智能可能带来的后果，请查看我几个月前分享的第四期简报。最后一节我用一个例子进行了解释。
3. 别忘了“var”
第一次给变量赋值时，务必确保不要给未声明的变量赋值。
给未声明的变量赋值会自动创建一个全局变量。避免使用全局变量❌
全局变量很容易被其他脚本覆盖。例如，如果应用程序的两个不同部分定义了同名但用途不同的全局变量，则可能导致无法预料的错误，而且调试这类问题会非常棘手。
一般来说，你应该尽量限制代码的作用域，减少全局作用域的使用。脚本中使用的全局变量越多，与其他脚本一起使用的可能性就越小。
通常情况下，函数中的变量应该是局部变量，这样在函数退出时它们就会消失。
“通过将您的全球标识简化为一个名称，您可以显著降低与其他应用程序、组件或库发生不良交互的可能性。”——道格拉斯·克罗克福德
4. 删除与拼接
请使用 `splice` 而不是 `delete` 来从数组中删除元素。使用 `delete` 会删除对象属性，但不会重新索引数组或更新其长度。这会导致数组看起来像是未定义。
删除
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> delete myArray[0]
true
> myArray[0]
undefined
请注意，它实际上并没有被设置为 undefined，而是从数组中移除了该属性，使其看起来像 undefined。Chrome 开发者工具在记录数组时会打印“empty”，从而清晰地表明了这一点。
拼接
Splice()实际上，它会删除该元素，重新索引数组，并改变数组的长度。
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> myArray.splice(0, 2)
["a", "b"]
> myArray
["c", "d"]
应该使用 delete 方法删除对象属性。
5. map 循环与 for 循环
使用 map() 函数方法遍历数组元素。
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// squares will be equal to [1, 4, 9, 16]
**不可变性** — 原始数组不会受到影响。这在其他地方仍然需要原始数组的情况下具有潜在优势。虽然也可以编写不更新原始数组的 for 循环，但这需要更多代码，并且需要在循环操作中更新新数组。另一方面，map() 函数使代码更简洁，因为只需在一个作用域内操作即可保持不可变性。
更简洁的代码——在执行相同操作时，map 几乎总是比 for 语句的代码量更少。有时 map 甚至可以清晰地写在一行，而 for 语句至少需要两行，通常需要三行（包括大括号）。此外，作用域隔离、所需变量数量的减少以及代码体积的减小，都使得代码在客观上更加简洁。
6. 数字的四舍五入
toFixed() 方法将数字四舍五入为指定位数的小数。
var pi =3.1415;
pi = pi.toFixed(2); // pi will be equal to 3.14
注意：
toFixed()返回的是字符串，而不是数字。
7. 使用 console.table
您可以使用console.table它以表格格式显示对象：
table=[{state: "Texas"},{state: "New York"},{state: "Chicago"}]
console.table(table)
8. 避免在循环中使用 try-catch 语句
try-catch 结构会在运行时在当前作用域中创建一个新变量，每次执行 catch 子句时，都会将捕获的异常对象赋值给一个变量。
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
// do something that throws an exception
}
catch (e) {
// handle exception
}
}
到 ⬇
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
// do something that throws an exception
}
}
catch (e) {
// handle exception
}
当发生错误时，第一种方法允许循环继续执行，而第二种方法则会退出循环。如果代码抛出的异常不足以严重到导致整个程序停止运行，则第一种方法更为适用。
9. 多重条件检查
对于多值匹配，我们可以将所有值放入数组中使用indexOf()orincludes()方法。
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
}
到 ⬇
indexOf():
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
}
包含():
if ([1, 'one', 2, 'two'].includes(value)) {
}
10. 双非按位运算符 (~~)
双非按位运算符是 Math.floor() 方法的替代方法。
const floor = Math.floor(6.8); // 6
到 ⬇
const floor = ~~6.8; // 6
双 NOT 按位运算符方法仅适用于 32 位整数。因此，对于任何大于 32 位的数字，建议使用 Math.floor() 函数。
结论
我知道还有很多其他的技巧、窍门和最佳实践，所以如果您有任何补充，或者对我分享的内容有任何反馈或更正，请随时在下面的评论中添加。
此外，你永远不可能只通过一篇文章就学会所有东西。尝试搜索相关概念，阅读多篇文章，通过编写项目来实践代码，这才是学习的唯一途径。
最后一点建议——不要使用随意的编码风格。要强制执行标准编码。
阅读风格杂乱无章的代码时，你永远无法预料会看到什么。因此，整个团队和应用程序代码库必须采用统一的编码风格，这能显著提高代码的可读性。
参考
-
https://stackoverflow.com/questions/2485423/is-using-var-to-declare-variables-optional
-
封面照片由Juanjo Jaramillo拍摄，来自 Unsplash
刚开始学习网页开发？💻
结账 ▶ HTML 到 React：终极指南
这本电子书是一本全面的指南，它通过大量易于理解的示例和行之有效的路线图，教会你成为一名网页开发人员所需的一切知识。
它包含👇
✅ 直奔主题的解释
✅ 简单的代码示例
✅ 50 多个有趣的项目创意
✅ 3份秘密资源清单
✅ 额外面试准备
你甚至可以查看本书的免费样章。
这里是全套书籍的链接，可享原价六折优惠⬇
