数组扁平化

数组扁平化的概念

• 数组扁平化是指将一个多维数组变为一维数组
• [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

实现方法

1.reduce

function flatten(arr) {
  return arr.reduce((result,item) => {
    return result.concat(Array.isArray(item)? flatten(item) : item)
  },[])
}

• reduce简要解释：
  • 语法：arr.reduce(callback(previousValue,currentValue,index,array),[initialValue])
  • 第一个参数为上一个返回值，第二个参数为现在遍历到的数组元素 ，如果设置了initialValue，则第一个参数一开始就是initialValue的值
  • 如果不设置initialValue参数，则索引值从1开始,循环次数为arr.ength-1次，如果数组的长度为0会报错，所以推荐设置初始值

var arr = [1, 2, 3, 4]
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index)
    return prev + cur
})
console.log(arr,sum)
打印结果：
1 2 1
3 3 2
6 4 3
[1,2,3,4] 10

• 如果设置initialValue参数，则索引值从0开始,循环次数为arr.ength次

var  arr = [1, 2, 3, 4]
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index)
    return prev + cur
}，0) 
console.log(arr,sum)
打印结果：
0 1 0
1 2 1
3 3 2
6 4 3
[1,2,3,4] 10

2.toString & split

function flatten(arr) {
  return arr.toString().split(',').map(item => {
    return Number(item)
  })
}

3.join& split

function flatten(arr) {
  return arr.join(',').split(',').map(item => {
    return Number(item)
  })
}

• join() 方法用于把数组中的所有元素放入一个字符串

arr = ['Amy','Bob','Mick']
console.log(arr.join('-')) //Amy-Bob-Mick

• split() 方法用于把一个字符串分割成字符串数组

let str = 'h|e|l|l|o'
console.log(str.split('|')) //["h", "e", "l", "l", "o"]

4.递归

function flatten(arr) {
  let res = []
  arr.map(item => {
    if(Array.isArray(item)) {
      res = res.concat(flatten(item))
    } else {
      res.push(item)
    }
  })
  return res
}

5.扩展运算符

function flatten(arr) {
  while(arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
 
}

• 关于扩展运算符
  • 对象中的扩展运算符用于取出参数对象中的所有可遍历属性，浅拷贝到当前对象
  • 不太准确的理解就是：假如是数组就将数组两边的[]去掉，一个一个插入新数组中

//举例
//将数组转换成参数
function add(x,y) {
  return x + y
}
let arr = [1,2]
console.log(add(...arr)) //3
//复制数组
let arr1 = [1,2,3] 
let arr2 = [...arr1]

console.log(arr2) //[1, 2, 3]
//将字符串转换成数组
console.log([...'hello']) // ["h", "e", "l", "l", "o"]
//合并对象
obj1 = {a: 2,b: 3}
obj2 = {c: 6}
console.log({...obj1,...obj2,d: 10}) //{a: 2, b: 3, c: 6, d: 10}
console.log({obj1,obj2,d: 10}) //{{a: 2, b: 3},{a: 2, b: 3}, d: 10}

let obj1 = {a: 1,b: 2,c: {name: 'Joe'}}
let obj2 = {...obj1,d: 4}

obj2.a = 2
obj2.c.name = 'Amy'
console.log(obj1) //{a: 1, b: 2, c: {name: 'Amy'}}
console.log(obj2) //{a: 2, b: 2, c: {name: 'Amy'}}
//a的值不受影响，而name的值发生了改变

• 值得注意的是扩展运算符的拷贝是浅拷贝，意味着拷贝的是对象的引用，当源对象变化的时候，拷贝对象也跟着变化，如果是基本数据类型则不受影响