七個我在工作中經常使用的 JavaScript 技巧

前言

ES6 給我們程式設計帶來了很多便利，以前用大量程式碼實現的功能現在變得非常簡潔。

本文總結了我在工作中經常使用的 7 個 JavaScript 技巧，希望對你也有幫助。

1. 找出陣列中的最大值或最小值

有時，我們需要找到陣列中的最大值，你通常是怎麼做的？

解決方案 1​

我們可以先對陣列進行排序，然後，陣列的最後一項就是最大值。

const array = [ 1, 10, -19, 2, 7, 100 ]
array.sort((a, b) => a - b)
console.log('max value', array[ array.length - 1 ]) 
console.log('min value', array[ 0 ])

解決方案 2​

還有其他解決方案嗎？是的，我們可以使用“Math.max”輕鬆處理它。

const array = [ 1, 10, -19, 2, 7, 100 ]
console.log('max value', Math.max(...array)) 
console.log('min value', Math.min(...array))

2.計算陣列的總和

如果有一個數字陣列，得到它們總和的最快方法是什麼？

const array = [ 1, 10, -19, 2, 7, 100 ]
const sum = array.reduce((sum, num) => sum + num)

3. 從陣列中獲取隨機值

給你一個數組，現在你想從中獲取一個隨機值，你怎麼做呢？

const array = [ 'fatfish', 'fish', 24, 'hello', 'world' ]
const getRandomValue = (array) => {
  return array[ Math.floor(Math.random() * array.length) ]
}
console.log(getRandomValue()) 
console.log(getRandomValue()) 
console.log(getRandomValue())

4.隨機打亂陣列的值

我們在抽獎的時候，需要打亂抽獎順序。

const prizes = [ ':iphone:', ':chocolate_bar:', ':tea:', ':hamburger:' ]
prizes.sort(() => 0.5 - Math.random())
console.log(prizes) 
prizes.sort(() => 0.5 - Math.random())
console.log(prizes)

5. 展平多層陣列

現在我們有了一個多維巢狀陣列，如何將其鋪成一維陣列？

解決方案 1

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
const flattenArray = (array) => {
  return array.reduce((res, it) => {
    return res.concat(Array.isArray(it) ? flattenArray(it) : it)
  }, [])
}
console.log(flattenArray(array))

解決方案 2

事實上，我們有一個更簡單的方法來解決它。關於flat，我們來看看MDN的解釋：

flat() 方法建立一個新陣列，其中所有子陣列元素遞迴連線到指定深度。

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
console.log(array.flat(Infinity))

6.檢查陣列是否包含值

過去，我們總是使用“indexOf”方法來檢查陣列是否包含值。如果“indexOf”返回的值大於-1，則表示有一個。

const array = [ 'fatfish', 'hello', 'world', 24 ]
console.log(array.indexOf('fatfish')) 
console.log(array.indexOf('medium'))

但是，現在資料比較複雜，我們將無法通過 indexOf 方法直接確認陣列中是否存在“fatfish”。幸運的是，ES6 中提供了 findIndex 方法。

const array = [
  {
    name: 'fatfish'
  },
  {
    name: 'hello'
  },
  {
    name: 'world'
  },
]
const index = array.findIndex((it) => it.name === 'fatfish') // 0

7.使用“includes”方法進行判斷

你一定見過這樣的判斷方法，雖然，可以達到條件判斷的目的，但是，看起來很繁瑣。

const value = 'fatfish'
if (value === 'fatfish' || value === 'medium' || value === 'fe') {
  console.log('hello world') 
}

我們可以使用includes方法讓程式碼更簡單甚至更可擴充套件。

const conditions = [ 'fatfish', 'medium', 'fe' ]
const value = 'fatfish'
if (conditions.includes(value)) {
  console.log('hello world') 
}

最後

以上就是我今天跟你分享的7個我在工作中經常使用的ES6技巧，希望這些技巧也能夠幫助到你