7个 JavaScript 小技巧,让你的代码更出色!

08/31 14:43
阅读数 20

原文 | https://medium.com/madhash/7-little-big-javascript-techniques-that-makes-your-code-better-7894d3f984c5

翻译 | 小爱

学习如何编码很容易——尤其是在 JavaScript 中。一旦你让事情运转起来,我们往往不会回头看看我们如何让事情变得更好。
我们一路向前、向前,直到下一个项目开始和功能发布。我们不知疲倦地写代码,我们将所有知道的知识来完成我们需要工作的内容,好吧,开始工作。
多年来,我从各个地方学习到了一些东西。以下是我让代码看起来更好,阅读更好的 7 大 JavaScript 技巧。
1、… 点差运算符
事实证明,spread ... 运算符仍在 JavaScript 新手圈子中大放光彩。
什么是点差运算符?它是如何工作的?这是一个快速演练。
你有一个需要放置在数组中的可迭代对象。然而,你不知道这个可迭代对象的最终长度——或者你只是懒得手动把它全部写出来。
这就是 spread ... 操作符的用武之地。
它会自动将可迭代对象放入数组中。
这里有一些代码可以帮助你理解它:
let abc = ['apple', 'bananas', 'cherries', 'dragon fruit'];let abc_spread = [...abc]console.log(abc_spread);// this will return:// ['apple', 'bananas', 'cherries', 'dragon fruit'];

让我们再看一个例子:

const PREFIX = '$';let message = '$kick ivan89234 bot0298 fake122  ';function kick(){
const [CMD_NAME, ...args] = message .trim() .substring(PREFIX.length) .split(/\s+/);
console.log(CMD_NAME); console.log(args);

}kick();// console.log() will return// "kick"// ["ivan89234", "bot0298", "fake122"]

与尝试遍历所有内容然后手动将其放入数组中相比,使用展开运算符更容易、更高效且更不麻烦。

2、递归

递归基本上就像循环中的循环,但没有嵌套。它无限期地调用自己,直到调用“escape”子句。

下面是一个例子:

function weight(x, n)   if(n == 1return x; //the escape clause   return x * weight(x, n -1); //the recursion}console.log('Tibbers weighs '             + weight(2, 5)             + ' pounds after eating 5 pieces of cheese' );

递归和循环之间的区别在于递归是自包含的,并根据输入产生特定的输出。循环线性运行并要求执行每个连续以产生结果。

3、使用日志级别

console.log 不仅仅是 console.log。日志级别使日志记录更加容易,并提醒你注意重要的事情。它还会在控制台中直观地分解你的日志,从而更轻松地扫描你需要的信息。

以下是完整列表:

console.log("hello world")console.warn("this is a warning")console.error("this is an error")console.info("this is info")console.debug("this is debug")console.trace("show trace")

这是它的实际外观:

4、布尔变量的语言

双重否定可能令人困惑。通过始终将你的布尔语言假设设为真,让事情变得简单。

例如:

const isInvalidKey = apiKey === nullif(isInvalidKey){}

上面是一个糟糕的代码语言模式,因为虽然看起来很简单,但当你想用 ! 反转它时会让人困惑。

if(!isInvalidKey){}

这是一个更好的写法:

const isValidKey = apiKey != nullif(!isValidKey){}

一般来说,没有人喜欢阅读双重否定,因为你被迫计算预期的结果是什么。一旦你开始使用否定词来描述布尔值,就不再是简单的“是”或“否”答案。

5、对象而不是参数列表

参数列表的问题是它们必须按特定顺序排列。但是,如果你使用对象,则更容易传入可选参数,并且顺序不再重要。

与参数变量列表相比,通过对象传递的内容也更容易阅读和理解。

下面是一个例子:

function getItem(price, quantity, name, description) {}
getItem(15, undefined, ‘bananas’, ‘fruit’)

这是重构的版本:

function getItem(args) {    const {price, quantity, name, description} = args}
getItem({ name: 'bananas', price: 10, quantity: 1, description: 'fruit})

6、if/else 

if/else 语句很棒。

在大多数情况下,如果 return 执行完全相同的工作,则不需要 if/else 语句。

这就是我的意思。看看下面的例子:

function someCode(){       if(someBoolean){       return something;   }else{       return anotherthing;   }  }

实际上,这也会产生同样的影响:

function someCode(){       if(someBoolean){       return something;   }   return anotherthing; }

返回的目的是结束程序。如果无论如何都没有满足 if 条件,那么编写 else 语句就变得多余了。

7、捕捉错误

看看下面的例子:

'use strict';...const fakeAPI = function(callback){    request(`https://someapi.com/api`,             {json: true},             (err, res, body) => {          if(res){                    //do something                }else{                    callback(err)                }    })}

假设你的 API 将始终有效。它可能会抛出一个错误并返回一个 res 并且我们永远不会知道这个错误。

下面是查看相同代码的不同方式:

'use strict';...const fakeAPI = function(callback){    request(`https://somesite.com/api`,             {json: true},             (err, res, body) => {          if(err) return callback(err)          //rest of your code to deal with res    })}

你总是假设最坏的情况,所以你把你的错误放在第一位,这样它就不会在沉默中失败。

总结

这些是我最喜欢的,也是我经常向开发人员提倡和谈论JavaScript 的 7 大技巧。这不是一切,而是一个好的起点,尤其是当你重构代码或致力于使代码更易于阅读和维护时。

感谢您的阅读,我希望您发现这篇文章很有用。 


往期干货

 26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载(免费)

 干货~~~2021最新前端学习视频~~速度领取

 前端书籍-前端290本高清pdf电子书打包下载


点赞和在看就是最大的支持❤️

本文分享自微信公众号 - 编程微刊(wangxiaoting678)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部