首先要知道什么是数组扁平化。
数组扁平化就是指将一个多维数组变为一个一维数组如下例
// 转化成[1,2,3,4,5,6,7,8]
方法1:函数递归
const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
const newArr = []
const fn = arr => {
for (let i = 0; i < arr.length; i++) {
// 用Array.isArray() 判断传递的值是否是一个Array
if (Array.isArray(arr[i])) {
// 若是Array递归,再判断arr[i]
fn(arr[i]);
} else {
// 否就添加到新数组
newArr.push(arr[i]);
}
}
}
// 调用函数
fn(arr)
console.log(newArr)//[1,2,3,4,5,6,7,8]
</script>
方法2:reduce
const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
// 原理还是利用Array.isArray判断,进行函数递归
// 代码用的箭头函数省略了2个{}和return
// concat是合并多个数组 三元通过Array.isArray判断item是否为Array,是就递归,反之合并
const fn = arr => arr.reduce((sum, item) => sum.concat(Array.isArray(item) ? fn(item) : item)
, [])
// []为reduce的第二个参数(第一次执行因为没有上一次的计算结果所以需要一个空数组左初始值)
console.log(fn(arr))// [1,2,3,4,5,6,7,8]
</script>
方法3:正则表达式
const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
// JSON.stringify将数组转为JSON字符串
// replace() 方法返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串
// split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组
console.log(JSON.stringify(arr).replace(/\[|\]/g, '').split(','))//[1,2,3,4,5,6,7,8]
</script>
方法4:flat()
const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
// flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
// 全局属性 Infinity 是一个数值,表示无穷大。
console.log(arr.flat(Infinity))//[1,2,3,4,5,6,7,8]
</script>