JavaScript：如何避免push数组嵌套，正确填充过滤器Values数组？

现有多级层级选择列表，用户点击表格列可将对应值推入过滤器。当前有以下JavaScript数组：

var name = ['Akansha', Navya]
var age = ['24', '26']
var id = ['2345', '34555']

需要将这些数据转换为过滤器预期的JSON格式：

Values:(2)
0:{name:'Akansha', age:'24', id:'2345'}
1:{name:'Navya', age:'26', id:'34555'}

通过for循环构建了符合格式的nameValues数组：

var nameValues =[];

for(var i=0; i < name.length; i++){
 var filterValue = new nam3({ // nam3是过滤器预定义的对象，此处初始化
name: name[i];
age: age[i];
id: id[i]
});
nameValues.push(filterValue);
}

console.log(nameValues); // 输出符合预期格式的数组
//(2)
//0:{name:'Akansha', age:'24', id:'2345'}
//1:{name:'Navya', age:'26', id:'34555'}

但执行product.values.push(nameValues)时出现嵌套数组，引发对象引用错误：

Values:Array(1)
       0: Array(2)
          0:{name:'Akansha', age:'24', id:'2345'}
          1:{name:'Navya', age:'26', id:'34555'}

问题核心 #

Array.push()会把传入的整个数组当作单个元素插入目标数组，导致嵌套结构。要将nameValues的元素逐个加入product.values，可以用以下方法：

方法1：扩展运算符（简洁推荐）

用扩展运算符...拆解数组，将每个元素单独推入：

product.values.push(...nameValues);

方法2：concat合并数组

如果需要生成新数组（不修改原数组结构），使用concat合并后重新赋值：

product.values = product.values.concat(nameValues);

若product.values初始为空，直接赋值更高效：

product.values = nameValues;

原代码小修正 #

注意两处语法错误，否则可能导致代码运行失败：

1. name数组里的Navya未加引号，需改为字符串：

var name = ['Akansha', 'Navya']

2. 初始化nam3对象时，属性间用逗号分隔（不是分号）：

var filterValue = new nam3({
  name: name[i],
  age: age[i],
  id: id[i]
});

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