JavaScript JSON 数组深度赋值与对象转数组实战解析
在前端复杂数据处理场景中，JSON 数组的深度赋值和JSON 对象转 JSON 数组是高频需求，前者需解决嵌套对象的层级拷贝问题，后者需实现数据格式的灵活转换。
一、JSON 数组深度赋值：递归实现层级拷贝
对于包含多层嵌套对象的 JSON 数据，浅拷贝仅能复制顶层属性，嵌套对象仍会存在引用关联。而通过递归函数可实现深度赋值，逐层遍历并拷贝所有层级的属性，生成与原数据完全独立的新对象。
1. 核心实现代码
<!DOCTYPE HTML>
<html>
<head>
<title>test1</title>
</head>
<body>
<script>
var arr={
"name":"zhansan",
"age":23,
"address":{
"city":"beijing",
"gas":{
"gasSheet":"气态流出物月报",
"H_adjust":1
},
"time":{
"duration":31
}
},
"units":{"title":"function"}
}
function show(obj){
var tmp={};
for(var i in obj){
if(obj[i]=="object"){
<span style="color:#ff0000;">tmp[i]=show(obj[i]);</span>
}
else{
<span style="color:#ff0000;">tmp[i]=obj[i]</span>
}
}
return tmp;
}
var result=show(arr);
console.log(result);
</script>
</body>
</html>
2. 关键技术解析
- 递归逻辑：函数show()接收目标对象，遍历其所有属性；若属性值为对象类型，则递归调用自身处理嵌套对象；若为基础类型（字符串、数值等），则直接赋值。
- 数据独立性：深度赋值后生成的result与原对象arr无引用关联，修改result的嵌套属性不会影响原数据，避免浅拷贝导致的 “牵一发而动全身” 问题。
- 注意事项：原代码中obj[i]=="object"存在语法错误，需修正为typeof obj[i] == "object"，否则无法正确判断属性类型。
二、JSON 对象转 JSON 数组：两种方案对比
在可视化图表（如 ECharts）、列表渲染等场景中，常需将{key:value}结构的 JSON 对象，转换为[{name:key,data:value}]格式的 JSON 数组。以下两种实现方案各有优劣，可根据业务需求选择。
1. 方案一：基于固定长度数组的赋值
适用于 JSON 对象键值对数量固定且已知的场景，直接通过索引为数组元素赋值。
核心代码：
var kpis = {"A": [1,2,3,4,5],"B": [ 2,3,4,5,6]};
var series = [{name:null,data:null}, {name:null,data:null}];
var index=0;
for( var tests in kpis){
series[index].name=tests;
series[index].data=kpis[tests];
index++;
}
方案点评：
- 优点：逻辑简单，无需额外创建对象，直接复用已有数组结构。
- 缺点：通用性差，若kpis的键值对数量超过series的初始长度，超出部分无法赋值，需手动扩展数组长度，适配性不足。
2. 方案二：动态 push 生成数组（推荐）
通过动态创建 JSON 对象并push到空数组，适配任意数量的键值对，是更通用的实现方案。
核心代码：
var kpis = {"A": [1,2,3,4,5],"B": [ 2,3,4,5,6]};
var series=[];
for(var tests in kpis){
var json = {name:tests, data:kpis[tests]};
series.push(json);
}
方案点评：
- 优点：完全适配任意长度的kpis对象，无需关注键值对数量，自动扩展数组长度，通用性强。
- 缺点：需额外创建临时对象json，但对性能影响可忽略不计，在实际开发中性价比更高。
三、核心总结与最佳实践
- JSON 深度赋值：嵌套对象拷贝必须使用递归，避免浅拷贝的引用问题；注意typeof的正确使用，准确判断属性是否为对象类型。
- JSON 对象转数组：固定长度场景用方案一，灵活扩展场景优先方案二；方案二的push方式更符合前端工程化开发需求，推荐在生产环境使用。
