七個很有用的 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 // 1237. 使用“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))這真的非常方便和直觀。
責任編輯：華軒
來源：
web前端開發
