停止犯下这5个JavaScript风格错误

时间: 2020-07-28阅读: 89标签: 错误

使你的代码可读和可维护的快速提示。

有多少次,你打开一个旧的项目,发现混乱的代码,当你添加一些新的东西时,很容易崩溃?我们都有过这样的经历。

为了减少难以读懂的JavaScript的数量,我提供了以下示例。这些都是我过去所犯过的错误。


对具有多个返回值的函数使用数组解构

假设我们有一个返回多个值的函数。一种可能的实现是使用数组解构,如下所示:

const func = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  const d = 4; 
  return [a,b,c,d];
}
const [a,b,c,d] = func();
console.log(a,b,c,d); // 1,2,3,4

尽管上面的方法很好用,但确实引入了一些复杂性。

当我们调用函数并将值分配给 a,b,c,d 时,我们需要注意返回数据的顺序。这里的一个小错误可能会成为调试的噩梦。

此外,无法确切指定我们要从函数中获取哪些值,如果我们只需要 c 和 d 怎么办?

相反,我们可以使用对象解构。

const func = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  const d = 4;
  return {a,b,c,d};
}
const {c,d} = func();

现在,我们可以轻松地从函数中选择所需的数据,这也为我们的代码提供了未来的保障,允许我们在不破坏东西的情况下增加额外的返回变量。


不对函数参数使用对象分解

假设我们有一个函数,该函数将一个对象作为参数并对该对象的属性执行一些操作。一种幼稚的方法可能看起来像这样:

// 不推荐
function getDaysRemaining(subscription) {
  const startDate = subscription.startDate;
  const endDate = subscription.endDate;
  return endDate - startDate;
}

上面的方法按预期工作,但是,我们创建了两个不必要的临时引用 startDate 和 endDate。

一种更好的实现是对 subscription 对象使用对象解构来在一行中获取 startDate 和 endDate。

// 推荐
function getDaysRemaining(subscription) {
  const { startDate, endDate } = subscription;
  return startDate - endDate;
}

我们可以更进一步,直接对参数执行对象析构。

// 更好
function getDaysRemaining({ startDate, endDate }) {
  return startDate - endDate;
}

更优雅,不是吗?


在不使用扩展运算符的情况下复制数组

使用 for循环遍历数组并将其元素复制到新数组是冗长且相当丑陋的。

可以以简洁明了的方式使用扩展运算符来达到相同的效果。

const stuff = [1,2,3];

// 不推荐
const stuffCopyBad = []
for(let i = 0; i < stuff.length; i++){
  stuffCopyBad[i] = stuff[i];
}

// 推荐
const stuffCopyGood = [...stuff];


使用var

使用 const 保证不能重新分配变量。这样可以减少我们代码中的错误,并使其更易于理解。

// 不推荐
var x = "badX";
var y = "baxY";

// 推荐
const x = "goodX";
const y = "goodX";

果你确实需要重新分配变量,请始终选择 let 而不是 var

这是因为 let 是块作用域的,而 var函数作用域的。

块作用域告诉我们,只能在定义它的代码块内部访问变量,尝试访问块外部的变量会给我们提供ReferenceError。

for(let i = 0; i < 10; i++){
  //something
}
print(i) // ReferenceError: i is not defined

函数作用域告诉我们,只能在定义其的函数内部访问变量。

for(var i = 0; i < 10; i++){
  //something
}
console.log(i) // 10

let 和 const 都是块范围的。


不使用模板字面值

手动将字符串连接在一起相当麻烦,而且输入时可能会造成混淆。这是一个例子:

// 不推荐
function printStartAndEndDate({ startDate, endDate }) {
  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}

模板文字为我们提供了一种可读且简洁的语法,该语法支持字符串插值。

// 推荐
function printStartAndEndDate({ startDate, endDate }) {
  console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}

模板文字也提供了嵌入新行的简便方法,你所需要做的就是照常按键盘上的Enter键。

// 两行打印
function printStartAndEndDate({ startDate, endDate }) {
  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}
来源:https://medium.com,作者:Giuseppe Picciano,翻译:公众号《前端全栈开发者》


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9534

关闭

javascript如何抛出错误?

throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块,程序将会终止。

javascript如何屏蔽错误?

javascript屏蔽错误的方法:在网页head区域添加window.onerror属性,并将其对应函数返回值设为true即可屏蔽错误。

Js初学者容易犯的几个错误

JavaScript 是对初学者比较友好的一门编程语言,基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言,对数据类型没有太多的限制,写起来非常灵活

JavaScript各种错误类型

javascript错误类型有以下几种:SyntaxError: 语法错误、ReferenceError: 引用错误 要用的东西没找到、RangeError: 范围错误 专指参数超范围、TypeError: 类型错误 错误的调用了对象的方法

Js中最常见的错误

最近查看了一些项目后,发现了几个最常见的JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。

node端如何处理错误?

JavaScript的任何throw机制的使用都会引起异常,异常处理必须用try/catch来进行处理,否则nodejs进程会立即退出。同步的API会使用throw来报告错误。但是异步的API可能使用多种方法来报告错误---大多数异步API发生错误,采用callback方式来处理异常

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

css怎么错误检测?

在写css样式的时候难免会遇到调试后没有效果的情况,原因是你的演示书写有问题,或者是其他的一些因素,下面我们来看一下如何检测css错误。

前端开发中Js常见错误

错误分为两种: (1)代码错误:这种错误浏览器会报错,可以根据错误类型去排错 (2)逻辑错误:这种错误浏览器不会报错,但是可以使用断点进行调试排错

web前端新手最容易出现的4个错误

错误:无论是JavaScript,还是在服务器上运行的代码,开发人员都需要测试并确认它是否可以正常工作,而不是在部署了之后,就认为它应该就能从一而终地运行。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广