原文地址
數組展開就是將嵌套的數組扁平化(轉換為一維的)eg:
const arr=[[[1, 2], [1, 2, 3]], [1, 2]] => [1, 2, 1, 2, 3, 1, 2]
console.log(flatten(arr)) //[1,2,1,2,3,1,2]
1、判斷每一項是否是數組,然後遞歸
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"a"]]
function flatten(arr){
let result=[]
for(let i=0,l=arr.length;i<l;i++){
if(Array.isArray(arr[i])){
//遞歸調用
result=result.concat(flatten(arr[i]))
}else{
result.push(arr[i])
}
}
return result
}
console.log(flatten(arr),arr)
2、toString
數組在調用toString()會將數組轉換成"1,2,1,2,3,1,2",再執行split(",")方法會變成["1", "2", "1", "2", "3", "1", "2"]
還需要將所有的參數轉換為數字,所以這種方式的不足就是如果數組裏面是[1,2,3,"4","5"]既有數字又有字符串,會全部展開為數字
const arr=[[[1, 2], [1, 2, 3]], [1, 2]]
function flatten(arr){
return arr.toString().split(",").map(item => {
//轉為數字
return +item
})
}
console.log(flatten(arr),arr)
3、reduce方法
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
return arr.reduce((pre,next) => {
return pre.concat(Array.isArray(next) ? flatten(next) : next) //如果是數組同樣的遞歸調用
},[])
}
console.log(flatten(arr),arr)
4、解構的方式
利用es6新增結構方法可以提取一層的方法,來一層層提取出來
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
while(arr.some(item => Array.isArray(item))){
//如果當前數組中還有數組,則展開
arr=[].concat(...arr)
}
return arr
}
console.log(flatten(arr),arr)
5、js原生方法flat
flat(depth) 方法會按照一個可指定的深度遞歸遍歷數組,並將所有元素與遍歷到的子數組中的元素合併為一個新數組返回。參數depth表示要提取嵌套數組的結構深度,默認為1
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
arr.flat(Infinity)
6、Underscore.js的flatten方法
先上代碼
/**
* param {Array} input 要操作的數組
* param {Boolean} shallow 淺展開,及為true時,只展開一層,為false是深度展開
* param {Boolean} strict 遍歷第一層時,是否放棄非數組對象
* param {Array} output 保存最後輸出的內容
*/
var flatten = function(input, shallow, strict, output = []) {
var idx = output.length;
for (var i = 0, length = getLength(input); i < length; i++) {
var value = input[i];
// 説明flatten方法對類數組對象也有支持
if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) {
if (shallow) {
// 只展開一層
var j = 0, len = value.length;
while (j < len) output[idx++] = value[j++];
} else {
// 深度迭代,遞歸展開
flatten(value, shallow, strict, output);
idx = output.length;
}
} else if (!strict) {
output[idx++] = value;
}
}
return output;
};
output將返回數組當作參數傳遞,可以省去在遞歸的時候將數據一層層的return到上一層,在性能上會有所提升
::: tip 注意
當shallow為false時,strict為true是,返回的永遠時[] ,這是因為,當shallow為false時是深度迭代,,當最後迭代到不是數組的時候,就會進入到else if中,如果此時strict為true則就不會進入到這個分支中,那麼output就永遠不會被操作,
:::