使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。

简介: 这段内容介绍了JavaScript编程时的一系列最佳实践,包括使用`===`而非`==`进行比较、以`let`和`const`取代`var`定义变量、始终使用分号、采用合适的命名规范、利用模板字符串拼接、偏好ES6箭头函数、在控制结构中使用大括号、减少代码嵌套、应用默认参数、正确使用`switch`语句中的`break`与`default`分支、避免通配符导入以及简化布尔判断和避免不必要的三元运算符。遵循这些规则有助于提升代码的清晰度和可维护性。

下面的编码标准是我对上述几点有帮助的看法。

比较时使用 === 代替 ==
这很重要,因为JavaScript是一种动态语言,因此使用==可能会给您带来意想不到的结果,因为它允许类型不同。
Fail:

if (val == 2)
Pass:

if (val === 2)

永远不要使用 var,使用 let 来代替
使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。
Fail:

var myVar = 10;
Pass:

let myVar = 10;

使用 const 代替 let
这阻止了开发人员尝试更改不应该做的事情,并且确实有助于提高可读性。
Fail:

let VAT_PERCENT = 20;
Pass:

const VAT_PERCENT = 20;

始终使用分号(;)
尽管这在 JavaScript 中是可选的,并不像其它语言一样需要分号作为语句终止符。但是使用 ; 有助于使代码保持一致。
Fail:

const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)
Pass:

const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);

JavaScript中的命名约定
let 应该使用驼峰命名。
const 如果在文件的顶部使用大写的蛇形命名法。如果不在文件顶部,请使用驼峰命名。
class 应该是帕斯卡命名法:MyClass
functions 函数应该是驼峰命名法:myFunction
拼接字符串时使用模板字符串
模板字符串中允许嵌入表达式。
Fail:

let fullName = firstName + " " + lastName;
Pass:https://guangzhou.92demo.com/sitemap

let fullName = ${firstName} ${lastName};

尽可能使用ES6箭头函数
箭头函数是编写函数表达式的更简洁的语法。
Fail:

var multiply = function(a, b) {
return a* b;
};
Pass:

const multiply = (a, b) => { return a * b};

始终在控制结构周围使用大括号
所有控制结构都必须使用花括号(例如,if,else,for,do,while等),这样后期维护时,不容易出错。
Fail:

if (valid)
doSomething();
if (amount > 100)
doSomething();
else if(amount > 200)
doSomethingElse();
Pass:

if (valid) {
doSomething();
}
if (amount > 100) {
doSomething();
}
else if(amount > 200) {
doSomethingElse();
}

确保大括号从同一行开始,中间有空格
Fail:
if (myNumber === 0)
{
doSomething();
}
Pass:

if (myNumber === 0) {
doSomething();
}

尝试减少嵌套
if 中嵌套if 会变得混乱并且很难阅读。有时你可能无法解决问题,但是可以好好查看代码,看看是否可以改进。
Fail:https://xian.92demo.com/sitemap

if (myNumber > 0) {
if (myNumber > 100) {
if (!hasDiscountAlready) {
return addDiscountPercent(0);
} else {
return addDiscountPercent(10);
}
} else if (myNumber > 50) {
if (hasDiscountAlready) {
return addDiscountPercent(5);
}
} else {
if (!hasDiscountAlready) {
return addDiscountPercent(0);
} else {
return addDiscountPercent(1);
}
}
} else {
error();
}
Pass:

if (myNumber <= 0) {
return error;
}
if (!hasDiscountAlready) {
return addDiscountPercent(0);
}
if (myNumber > 100) {
return addDiscountPercent(10);
}
if (myNumber > 50) {
return addDiscountPercent(5);
}
return addDiscountPercent(1);
//代码效果参考:
通过上面的示例可以看出,减少嵌套之后,会变得容易阅读。

尽可能使用默认参数
在 JavaScript 中,如果你在调用函数时没有传递参数,则它的值就是 undefined
Fail:

myFunction(a, b) {
return a + b;
}
Pass:

myFunction(a = 0, b = 0) {
return a + b;
}

Switch 语句应使用 break 并具有 default
我通常会尝试不使用 switch 语句,但是你确实想使用它,请确保每个条件都break ,并写了 defalut。
Fail:https://nanning.92demo.com/sitemap

switch (myNumber)
{
case 10:
addDiscountPercent(0);
case 20:
addDiscountPercent(2);
case 30:
addDiscountPercent(3);
}
Pass:

switch (myNumber)
{
case 10:
addDiscountPercent(0);
break;
case 20:
addDiscountPercent(2);
break;
case 30:
addDiscountPercent(3);
break;
default:
addDiscountPercent(0);
break;
}

不要使用通配符导入
Fail:
import * as Foo from './Foo';
Pass:

import Foo from './Foo';

使用布尔值的快捷方式
Fail:
if (isValid === true)
if (isValid === false)
Pass:

if (isValid)
if (!isValid)

尝试避免不必要的三元语句
Fail:
const boo = a ? a : b;
Pass:https://hefei.92demo.com/sitemap

const boo = a || b;
总结
任何语言的编码标准都可以真正帮助提高应用程序的可读性和可维护性。如果你在团队中工作

相关文章
|
11天前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
10天前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
21 2
[JS]作用域的“生产者”——词法作用域
|
12天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
11天前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
19天前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
24天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
|
1月前
|
JavaScript 前端开发
js作用域
js作用域
16 1
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
30 3
|
2月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
2月前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化