数组扁平化的概念
- 数组扁平化是指将一个多维数组变为一维数组
- [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的值发生了改变
- 值得注意的是扩展运算符的拷贝是浅拷贝，意味着拷贝的是对象的引用，当源对象变化的时候，拷贝对象也跟着变化，如果是基本数据类型则不受影响
