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

r囧r小猫 2022-08-29 10:11 209阅读 0赞

![d1da9fe96cc759fd567eeaef60d12cbf.png][]

原文 | 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 == 1) return 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")

这是它的实际外观：

![c230fdef295a2732e71a9b673400a307.png][]

**4、布尔变量的语言**

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

例如：

const isInvalidKey = apiKey === null
    if(isInvalidKey){}

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

if(!isInvalidKey){}

这是一个更好的写法：

const isValidKey = apiKey != null
    if(!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 大技巧。 这不是一切，而是一个好的起点，尤其是当你重构代码或致力于使代码更易于阅读和维护时。

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

#  #

**学习更多技能**

**请点击下方公众号**

![8eaadab917c2b5a5a30c5e4b6541a21b.gif][]

![dfd643b79fb526d22a56c650cc762cef.png][]

![956972bc1512b65a07b8e7eedfddc28b.png][]

[d1da9fe96cc759fd567eeaef60d12cbf.png]: /images/20220829/ac7af87d8fef4828846af671d9681b1c.png
[c230fdef295a2732e71a9b673400a307.png]: /images/20220829/ee46a19951a14c95974e80a1937bd143.png
[8eaadab917c2b5a5a30c5e4b6541a21b.gif]: /images/20220829/39a1a826d3b948159e4942e45ac34f12.png
[dfd643b79fb526d22a56c650cc762cef.png]: /images/20220829/035de68e7a1b42d09f5b111f8e53fbc3.png
[956972bc1512b65a07b8e7eedfddc28b.png]: /images/20220829/a1400e5393264d07a83e7c3d6d244edb.png