5 个简洁的 JavaScript 技巧

2025-05-24

5 个简洁的 JavaScript 技巧

在这篇文章中,我将向你展示 5 个简洁的 JavaScript 技巧,帮助你成为更优秀的开发者。虽然这篇文章需要一些 JavaScript 知识,但我鼓励每个人都仔细阅读。

简洁提示列表:

  1. 解构
  2. 控制台提示
  3. 动态键名称
  4. 设置为数据结构
  5. 基于回调的 API -> Promises

解构

还有什么比举例更好的解释方式呢?假设我们有一个包含老虎数据的对象,我们需要一个函数来判断老虎是否濒临灭绝。

const tiger = {
  specific: 'Bengal',
  latin: 'Panthera tigris tigris',
  endangered: true,
  weight: 325,
  diet: 'fox',
  legs: 4
}

// Bad code 💩
function isEndangered(tiger){
  if (tiger.endangered) {
    return `${tiger.specific} tiger (${tiger.latin}) is endangered!`
  } else {
    return `${tiger.specific} tiger (${tiger.latin}) is not 
      endangered.`
  }  
}

// Good code 👍
function isEndangered({endangered, specific, latin}){
  if (endangered) {
    return `${specific} tiger (${latin}) is endangered!`;
  } else {
    return `${specific} tiger (${latin}) is not 
      endangered.`;
  }  
}
// or 
function isEndangered(tiger) {
  const {endangered, specific, latin} = tiger;
  // the rest is the same
Enter fullscreen mode Exit fullscreen mode

控制台提示

代码执行时间⏲️

使用console.timeconsole.timeEnd来确定您的代码有多快(或多慢)?

以下是一个例子:

console.time('TEST')

//some random code to be tested

console.timeEnd('TEST')
Enter fullscreen mode Exit fullscreen mode

以时尚的方式登录😎

为了获得自定义输出,我们将添加%c如下所示的内容,然后将实际的CSS作为第二个参数。

console.log('%c AWESOME', 'color: indigo; font-size:100px')
Enter fullscreen mode Exit fullscreen mode

表格

当你想要记录日志时对象数组console.table就会派上用场。

// x,y,z are objects
console.table([x, y, z])
Enter fullscreen mode Exit fullscreen mode

堆栈跟踪日志

如果你想获取函数调用位置的堆栈跟踪,你可以使用console.trace

function foo(){
  function bar(){
    console.trace('test')
  }
  bar();
}

foo();
Enter fullscreen mode Exit fullscreen mode

动态键名称

超级有用的提示!

const key = 'dynamic'

const obj = {
  dynamic: 'hey',
  [key]: 'howdy'
}

obj.dynamic // hey
obj[key] // howdy
obj['dynamic'] //hey
obj.key // howdy
Enter fullscreen mode Exit fullscreen mode

要了解动态键概念的最常见用例,请查看我之前的帖子。


设置为数据结构

如果我要求你从数字数组中删除重复项,你会怎么做?

使用 Set 作为数据结构来提升应用的功能和性能。以下示例将使用 Set 对象从数字数组中删除重复项。

const arr = [1, 2, 2, 3]
const newArr = new Set(arr)
const unique = [...newArr]

// unique - [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

基于回调的 API -> Promises

为了使事情变得更清晰、更高效,您可以将回调(ourCallbackFn)转换为一个函数的承诺。

// we start with this 
async function foo() {
  const x = await something1()
  const y = await something2()

  ourCallbackFn(){
    // ...
  }
}

// the transformation
async function foo() {
  const x = await something1()
  const y = await something2()

  await promiseCallbackFn() //👀
}

function promiseCallbackFn() {
  return new Promise((resolve, reject) => {
    ourCallbackFn((err, data) => { //👀
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}
Enter fullscreen mode Exit fullscreen mode

以上就是 5 个 JavaScript 技巧的列表。是不是很棒?
希望我的第一篇文章对你有所帮助!任何反馈都非常感谢!

谢谢你!

达利博尔

文章来源:https://dev.to/daliboru/5-neat-javascript-tips-284o
PREV
Aura 主题 v2.0.0 现已发布!🥳 🎉
NEXT
创建杀手级 GitHub 个人资料自述文件(第一部分)