展平javascript多维嵌套数组

Question

我试图压扁阵列，但我遇到了困难。

我的代码：

    var arr = [["2"],["3", "4"], "5", [["6"], ["7"]] ];
    
    var res = [].concat.apply([], arr);
    
    //Using reduce(ES5)

   function test(args){
     var sum = args.reduce(function(acc, val){
       acc.concat(Array.isArray(val)? test(val): val);
     });
    }

    //Regular implementation
    function test2(arr){
      var result = [];
      arr.forEach(function(val){
        if(Array.isArray(val)){
          result = [].concat.apply([], val);
        } else {
          result.concat(val);
        }
      });
      return result;
    }
    
    console.log(test(arr));
    console.log(test2(arr));

预期产出：

["2", "3", "4","5", "6", "7"]

有人可以告诉我哪里出错了吗？

Answer 1

而已。很简单

var arr = [["2"], ["3", "4"], "5", [["6"], ["7"]]];

function test2(arr) {
    return arr.toString().split(",");
}

console.log(test2(arr));

Answer 2

由于它是嵌套结构，你应该使用recursion

Logic

• 循环传递数组并检查当前项是否为数组。
• 如果是，请重复此过程。
• 如果没有，请将值推送到临时数组。
• 将每个递归的返回值合并到前一个。

Array.forEach

var arr = [["2"],["3", "4"], "5", [["6"], ["7"]] ];

function getFlattenArray(array){
  var _tmp = [];
  array.forEach(function(item){
    if(Array.isArray(item)) {
      _tmp = _tmp.concat(getFlattenArray(item))
    }
    else{
      _tmp.push(item);
    }
  })
  return _tmp;
}

var result = getFlattenArray(arr);

console.log(result)

Array.reduce

var arr = [["2"],["3", "4"], "5", [["6"], ["7"]] ];

function getFlattenArray(array){
  return array.reduce(function(p,c){
    if(Array.isArray(c)) {
      p = p.concat(getFlattenArray(c))
    }
    else{
      p.push(c);
    }
    return p
  }, [])
}

var result = getFlattenArray(arr);

console.log(result)

---

ES6版本

var arr = [["2"],["3", "4"], "5", [["6"], ["7"]] ];

function getFlattenArray(array){
  return array.reduce((p,c) => (Array.isArray(c) ? p=p.concat(getFlattenArray(c)) : p.push(c) ) && p, [])
}

var result = getFlattenArray(arr);

console.log(result)

Answer 3

我认为我链接你的代码不起作用的原因是你可能犯了同样的错误。我相信（如果我错了，不要小心查找，有人会纠正我）箭头函数会自动返回最后一行，所以当把代码转换成ES5时你会忘记返回arr.reduce(...)。

这适用于我，Windows上的Chrome。

var arr = [
  ["2"],
  ["3", "4"], "5", [
    ["6"],
    ["7"]
  ]
];

function flatten(arr) {
  return arr.reduce(function(acc, val) {
    return acc.concat(Array.isArray(val) ? flatten(val) : val);
  }, []);
}

console.log(flatten(arr));

Answer 4

var arr = [["2"],["3", "4"], "5", [["6"], ["7"]] ];

var flatten = arr.flat(Infinity);

console.log(flatten);

由于Array.prototype.flat()已包含在标准ECMAScript 2019（ES10）中，因此无需实现自己的方法来展平数组。

flat方法可以使用参数来指定嵌套数组结构应该被展平的深度。在上面的例子中，我传递了全局范围变量Infinity，因此它会使所有级别变平。

在撰写本文时（04/11/2019），除Edge之外的所有主流浏览器都在其较新版本中实现了该功能。 Babel 7.4.0（带有core-js @ 3）也附带了它。