点击按钮后如何将嵌套数组转为一维数组？JavaScript数组处理问题

嘿，我来帮你搞定这个数组嵌套的问题！你现在得到嵌套数组的原因很简单：你用data.push(obj.type)把整个obj.type数组作为单个元素塞进了data里，所以data就变成了[ [元素1, 元素2] ]这种嵌套结构。

下面给你几种简单的解决办法，任选其一都能得到你想要的一维数组：

方案1：直接赋值（最简洁直观） #

既然obj.type本身就是你需要的一维数组，直接把它赋值给data就行，完全不需要用push：

$('button').on('click',function(){ 
  var attr= $(this).attr('title'); 
  var obj = assets.find(function (obj) { 
    return obj.name === attr; 
  }); 
  data = obj.type; // 直接把目标数组赋值给data
  console.log(data); 
});

方案2：用扩展运算符展开后push（适合后续还要添加元素的场景） #

如果你之后还需要往data里追加其他元素，可以用ES6的扩展运算符...把obj.type的元素逐个push进去，避免嵌套：

$('button').on('click',function(){ 
  var attr= $(this).attr('title'); 
  var obj = assets.find(function (obj) { 
    return obj.name === attr; 
  }); 
  data =[]; 
  data.push(...obj.type); // 展开数组元素，逐个添加到data中
  console.log(data); 
});

方案3：使用Array.concat()合并数组 #

concat方法可以把两个数组合并成一个新数组，用空数组和obj.type合并就能得到一维结果：

$('button').on('click',function(){ 
  var attr= $(this).attr('title'); 
  var obj = assets.find(function (obj) { 
    return obj.name === attr; 
  }); 
  data = [].concat(obj.type); // 合并空数组和目标数组
  console.log(data); 
});

修改后，点击按钮时控制台就会输出你期望的一维数组：

(2) [{…}, {…}]
0:{name: "mariam", y: 512}
1:{name: "linda", y: 412}
length:2
__proto__:Array(0)

内容的提问来源于stack exchange，提问作者gerryoftrivia