七個(gè)我在工作中經(jīng)常使用的JavaScript技巧
前言
ES6 給我們編程帶來(lái)了很多便利，以前用大量代碼實(shí)現(xiàn)的功能現(xiàn)在變得非常簡(jiǎn)潔。
本文總結(jié)了我在工作中經(jīng)常使用的 7 個(gè) JavaScript 技巧，希望對(duì)你也有幫助。
一. 找出數(shù)組中的最大值或最小值
有時(shí)，我們需要找到數(shù)組中的最大值，你通常是怎么做的？
解決方案 1
我們可以先對(duì)數(shù)組進(jìn)行排序，然后，數(shù)組的最后一項(xiàng)就是最大值。
const array = [ 1, 10, -19, 2, 7, 100 ]
array.sort((a, b) => a - b)
console.log('max value', array[ array.length - 1 ]) // 100
console.log('min value', array[ 0 ]) // -19
解決方案 2
還有其他解決方案嗎？是的，我們可以使用“Math.max”輕松處理它。
const array = [ 1, 10, -19, 2, 7, 100 ]
console.log('max value', Math.max(array)) // 100
console.log('min value', Math.min(array)) // -19
二. 計(jì)算數(shù)組的總和
如果有一個(gè)數(shù)字?jǐn)?shù)組，得到它們總和的最快方法是什么？
const array = [ 1, 10, -19, 2, 7, 100 ]
const sum = array.reduce((sum, num) => sum + num) // 101
三. 從數(shù)組中獲取隨機(jī)值
給你一個(gè)數(shù)組，現(xiàn)在你想從中獲取一個(gè)隨機(jī)值，你怎么做呢？
const array = [ 'fatfish', 'fish', 24, 'hello', 'world' ]
const getRandomValue = (array) => {
return array[ Math.floor(Math.random() * array.length) ]
}
console.log(getRandomValue()) // world
console.log(getRandomValue()) // world
console.log(getRandomValue()) // 24
四. 隨機(jī)打亂數(shù)組的值
我們?cè)诔楠?jiǎng)的時(shí)候，需要打亂抽獎(jiǎng)順序。
const prizes = [ '??', '??', '??', '??' ]
prizes.sort(() => 0.5 - Math.random())
console.log(prizes) // ['??', '??', '??', '??']
prizes.sort(() => 0.5 - Math.random())
console.log(prizes) // ['??', '??', '??', '??']
五. 展平多層陣列
現(xiàn)在我們有了一個(gè)多維嵌套數(shù)組，如何將其鋪成一維數(shù)組？
解決方案 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)) // [1, 2, 3, 4, 5]
解決方案 2
事實(shí)上，我們有一個(gè)更簡(jiǎn)單的方法來(lái)解決它。關(guān)于flat，我們來(lái)看看MDN的解釋?zhuān)?
flat() 方法創(chuàng)建一個(gè)新數(shù)組，其中所有子數(shù)組元素遞歸連接到指定深度。
const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
console.log(array.flat(Infinity)) // [1, 2, 3, 4, 5]
六. 檢查數(shù)組是否包含值
過(guò)去，我們總是使用“indexOf”方法來(lái)檢查數(shù)組是否包含值。如果“indexOf”返回的值大于-1，則表示有一個(gè)。
const array = [ 'fatfish', 'hello', 'world', 24 ]
console.log(array.indexOf('fatfish')) // 0
console.log(array.indexOf('medium')) // -1
但是，現(xiàn)在數(shù)據(jù)比較復(fù)雜，我們將無(wú)法通過(guò) indexOf 方法直接確認(rèn)數(shù)組中是否存在“fatfish”。幸運(yùn)的是，ES6 中提供了 findIndex 方法。
const array = [
{
name: 'fatfish
},
{
name: 'hello'
},
{
name: 'world'
},
]
const index = array.findIndex((it) => it.name === 'fatfish') // 0
七. 使用“includes”方法進(jìn)行判斷
你一定見(jiàn)過(guò)這樣的判斷方法，雖然，可以達(dá)到條件判斷的目的，但是，看起來(lái)很繁瑣。
const value = 'fatfish'
if (value === 'fatfish' || value === 'medium' || value === 'fe') {
console.log('hello world') // hello world
}
我們可以使用includes方法讓代碼更簡(jiǎn)單甚至更可擴(kuò)展。
const conditions = [ 'fatfish', 'medium', 'fe' ]
const value = 'fatfish'
if (conditions.includes(value)) {
console.log('hello world') // hello world
}
