【es6经典语法】数组的用法

在这个Typescript流行的年代，我们为什么还要学习es6语法？es全名叫做ECMAScript，拥有浏览器最正统的血统，预示着未来浏览器语言的发展方向。

ECMAScript的语法，每年都有新的提案，每年都在更新，代码的转义离不开babel。这篇博客不讲高深的语法，只会讲一下有趣的用法，请先查考阮一峰ECMAScript 6 入门。

解构1

function joinString(...str){
  return str.join(',')
}
joinString('1','2','3')
// "1,2,3"

...大家都熟悉的解构用法，但是在函数的入参时候使用很少。对于数组类型的参数有着非常有趣的效果。

解构2

我们经常会遇到一个问题，就是这个对象（或数组），有几个属性不要，构造成为一个新对象。

const arr = [1,2,3,4,5,6]
const [one, two, ...rest] = arr

map，reduce，filter，some

这几个函数在数据处理上是非常常见的。在不考虑引入lodash的情况下，js的数据处理应该都是由这些数组函数完成。但是很多同学都只会使用forEach。

举个栗子，把一串小写字符数组改写大写字符数组，很多同学上来就是一个循环。

const lowerStr = ['a', 'b', 'c']
const upperStr = []
lowerStr.forEach((i) => {
   upperStr.push(i.toUpperCase())
})
//["A", "B", "C"]

map可以看作一个映射关系，但是“生成数组”与“原数组”没有太多联系，结果是新创建的数组地址，js中对象和数组的修改会带来非常多潜在的问题。

const lowerStr = ['a', 'b', 'c']
const upperStr = lowerStr.map((i) => i.toUpperCase())

reduce是递归的数据处理。现在给你个问题，写个函数“把多个数组合并成为一个数组”。如果不用reduce，这个循环可能会写得很繁琐。

const arrays = [['1', '2','3'], ['4', '5'], ['6', '7', '8']]
const array = arrays.reduce((a, b) => a.concat(b))

当然这种情况，你也可以使用flat。

const arrays = [['1', '2','3'], ['4', '5'], ['6', '7', '8']]
const array = arrays.flat()

filter非常常见，应该和find, findIndex都是数组处理的必备。例如，我想把"工资一千以上的男生"从数组中筛选出来。

const salary = [
  {sex: 'male', money: 1000},
  {sex: 'female', money: 2000},
  {sex: 'male', money: 1500},
]
const result = salary.filter(s=>s.sex === 'male')
                                .filter(s=>s.money > 1000)

some用在循环的性能优化有着立竿见影的效果。数据处理中的循环是要非常谨慎的。some能够帮助我们有效减少循环。如果我有六个数，我想输出1到3，剩下的不想循环。

const numbers = [1,2,3,4,5,6]
numbers.some(i => {
  if(i<4){
    console.log(i)
    return false
  }
  return true
})

Last but not the least

关注这个专题大前端从入门到跑路，欢迎你们投稿。