七个很有用的 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))

这真的非常方便和直观。

相关内容

热门资讯

PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候,笔者扑哧笑了,不是笑这款笔记本,而是笑这款产品的颜色...
什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力,更是有效的利用了资源,提高了效率。那么我们现在来说一下网络负载...
如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
30分钟搞定iOS自定义相机 最近公司的项目中用到了相机,由于不用系统的相机,UI给的相机切图,必须自定义才可以。就花时间简单研究...
Intel将Moblin社区控... 本周二,非营利机构Linux基金会宣布,他们将担负起Moblin社区的管理工作,而这之前,Mobli...