7个ES6 JavaScript技巧

https://mp.weixin.qq.com/s/9Z61X8y3nh6jnF_4_jKF6Q

1、在数组中找到max或min的值

如何在数组中找到最大值？

方案一
我们可以先对数组进行排序，然后数组的最后一项是最大值。

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

图片
方案二
当然，我们也可以用以下方式轻松处理

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

图片

2.计算数组的和

如何在一个数字数组中最快的求和？

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

图片

3.从数组中获取随机值

如何在一个数组中取一个随机值呢？

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

4.随机洗牌数组的值

通常当我们在抽奖时，首先也需要打乱顺序。例如：

const prizes = [ '📱', '🍫', '🍵', '🍔' ]
prizes.sort(() => 0.5 - Math.random())
console.log(prizes) //  ['📱', '🍔', '🍫', '🍵']
prizes.sort(() => 0.5 - Math.random())
console.log(prizes) // ['🍫', '🍔', '📱', '🍵']

5.扁平化多层数组

如何将一个多维嵌套数组铺成一维数组？

方案一

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]

方案二
事实上，有一个更简单的方法来解决这个问题。我们来看看MDN对于平面的解释：

平面（）方法创建一个新数组，其中所有子数组元素递归地级联到其中，直到指定的深度。

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

6.检查数组是否包含值

以往我们总是习惯使用“indexOf”方法来检查数组是否包含值。如果“indexOf”返回的值大于-1，则表示有一个值。

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

但现在数据更加复杂，我们无法通过indexOf方法直接确认数组中是否存在“胖鱼”。而ES6中提供了findIndex方法。

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

7、使用“包含”方法进行判断

也许你见过下面这种判断方法。虽然可以进行条件判断，但很繁琐。

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

因此我们可以使用include方法让代码更简洁，甚至更具扩展性。

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