使用 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;
总结
任何语言的编码标准都可以真正帮助提高应用程序的可读性和可维护性。如果你在团队中工作

相关文章
|
22天前
|
JavaScript 前端开发
浅谈js作用域
浅谈js作用域
25 0
|
25天前
|
JavaScript 前端开发 开发者
|
11天前
|
JavaScript 前端开发
JavaScript基础知识-作用域(action scope)
关于JavaScript基础知识中作用域的介绍。
21 1
JavaScript基础知识-作用域(action scope)
|
9天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域
21 9
|
30天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
14天前
|
JavaScript 前端开发
|
16天前
|
自然语言处理 JavaScript 前端开发
JavaScript 中的作用域
【8月更文挑战第29天】
12 0
|
23天前
|
JavaScript 前端开发
揭秘JavaScript变量的三大守护神:从var到let,再到const,究竟隐藏了哪些秘密?
【8月更文挑战第22天】在JavaScript中,`var`、`let`和`const`用于声明变量,但各有特点。`var`有函数作用域并会被提升至作用域顶部。`let`提供块级作用域且存在暂时性死区,不允许提前访问。`const`同样拥有块级作用域,用于声明常量,一旦初始化便不可改变。现代开发倾向于使用`let`和`const`以获得更清晰的作用域控制和避免潜在错误。
25 0
|
23天前
|
JavaScript 前端开发
揭开JavaScript变量作用域与链的神秘面纱:你的代码为何出错?数据类型转换背后的惊人秘密!
【8月更文挑战第22天】JavaScript是Web开发的核心,了解其变量作用域、作用域链及数据类型转换至关重要。作用域定义变量的可见性与生命周期,分为全局与局部;作用域链确保变量按链式顺序查找;数据类型包括原始与对象类型,可通过显式或隐式方式进行转换。这些概念直接影响代码结构与程序运行效果。通过具体示例,如变量访问示例、闭包实现计数器功能、以及动态表单验证的应用,我们能更好地掌握这些关键概念及其实践意义。
21 0
|
4月前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
35 1