七个很有用的 JavaScript 技巧

今天我们一起来了解一下日常中七个很有用的 JavaScript 技巧都有哪些吧。

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))

这真的非常方便和直观。