七个很有用的 JavaScript 技巧
创始人
2025-07-01 00:00:13
0

1.用“fill”初始化数组

初始化一个固定长度的数组,每一项都是“fatfish”。

// ❌
let array = []
const len = 100
for(let i = 0; i < len; i++){
  array[i] = 'fatfish'
}

其实,使用 fill 就很简单了。

// ✅
let array = Array(100).fill('fatfish')

2. 使用对象代替“switch”

我们经常使用 switch 来处理不同的事情,但是你有没有想过使用对象来大大简化你的代码?(它适用于一些简单的场景)

// ❌
const n = 1
let result
switch (n) {
  case 1:
    result = 'res-1'
    break
  case 2:
    result = 'res-2'
    break
  case 3:
    result = 'res-3'
    break  
  // ...There are a lot more
}

你只需要使用一个对象来实现你的目标。

// ✅
const n = 1
const nMap = {
  1: 'res-1',
  2: 'res-2',
  3: 'res-3'
}
const result = nMap[ n ]

3. 使用“? ……:……”而不是“if… else…”

很多时候简单的条件判断并不需要使用“if”。

// ❌
const n = 18
let result
if (n % 2 === 0) {
  result = 'even number'
} else {
  result = 'odd number'
}

只需使用三元表达式即可简化代码。

// ✅
const n = 18
let result = n % 2 === 0 ? 'even number' : 'odd number'

4.使用“includes”方法而不是多个“if”

你经常写这样的代码吗?多个条件可以触发一个逻辑。随着你的业务增长,你可能需要写更多的“||”,这很糟糕。

// ❌
const n = 1
if (n === 1 || n === 2 || n === 3 || n === 4 || n === 5) {
  // ...
}

使用包含使您的代码更加易于维护。

// ✅
const n = 1
const conditions = [ 1, 2, 3, 4, 5 ] // You just need to add new numbers here
if (conditions.includes(n)) {
  // ...
}

5.使用ES6函数的默认参数

为什么不使用默认参数呢?

// ❌
const func = (name) => {
  name = name || 'fatfish'
  console.log(name)
}
// ✅
const func = (name = 'fatfish') => {
  console.log(name)
}

6. 使用“+”将字符串转换为数字

您可能正在使用 Number() 和 parseInt() 将字符串转换为数字。

// ❌
let str = '123'
let num = Number(str) // 123
let num2 = parseInt(str) // 123

实际上使用“+”更容易。

// ✅
let str = '123'
let num = +str // 123

7. 使用“JSON.stringify”输出更漂亮的信息

这是一个深度嵌套的对象,您可以使用 console.log 来打印它。

// ❌
const bigObj = {
  name: 'fatfish',
  obj: {
    name: 'fatfish',
    obj: {
      name: 'fatfish',
      obj: {
        name: 'fatfish',
        obj: {
          name: 'fatfish',
          // ...
        }
      }
    }
  }
}
console.log(bigObj)

但这样不方便查看具体属性,我们需要手动展开各个级别才能看到数据。

// ✅
const bigObj = {
  name: 'fatfish',
  obj: {
    name: 'fatfish',
    obj: {
      name: 'fatfish',
      obj: {
        name: 'fatfish',
        obj: {
          name: 'fatfish',
          // ...
        }
      }
    }
  }
}
console.log(JSON.stringify(bigObj, null, 2))

这真的非常方便和直观。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...