本文介绍JavaScript中两种常见数据转换技巧:利用reduce方法将数组元素动态转换为对象键,以及通过JSON.parse或eval将JSON字符串解析为对象数组。文章包含具体代码示例与操作步骤,帮助开发者快速掌握相关实现逻辑。
JavaScript实现数组转换为对象(JS数组转对象在实际工作中应用广泛)
目标是将一组元素组成的数组转换为对象结构。数组中的每个元素应作为对象的键,并赋予默认的空字符串值,以便后续进行更新操作。
['name','age','city', 'town', 'country']
{
name: "",
age: "",
city: "",
town: "",
country: ""
}
最终确定利用数组的reduce方法来实现这一转换。
通过初始化一个空对象,遍历数组项并利用其动态生成对象的键值对。
const userChoices = ['name','age','city', 'town', 'country'];
const result = userChoices.reduce((acc, curr) => {
acc[curr] = ""
return acc
}, {})
result.name = "calvin"
console.log(result)空对象充当累加器角色,该累加器在每次迭代中被传递回函数,并依次填入数组中的下一项数据。
acc代表正在被填充并最终返回的目标对象,而curr代表当前迭代处理的数据项。
JavaScript中将JSON对象字符串转换为数组的方法
输入为一个JSON字符串,核心任务是将该字符串解析并转换为包含JSON对象的数组。
生成的数组包含从JSON字符串解析得到的JavaScript对象的具体值。解决此问题存在两种主要途径:
第一种方法
首先调用JSON.parse()方法将JSON字符串解析为JavaScript对象,随后利用push()方法提取对象的值并将其推入目标数组。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert JSON string to array
of JSON objects using JavaScript?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP"></p>
<button onclick = "myGFG()">
Click Here
</button>
<p id = "GFG_DOWN"></p>
<script>
var up = document.getElementById("GFG_UP");
var JS_Obj =
'{"prop_1":"val_1", "prop_2":"val_2", "prop_3" : "val_3"}';
up.innerHTML = "JSON string - '" + JS_Obj + "'";
var down = document.getElementById("GFG_DOWN");
function myGFG() {
var obj = JSON.parse(JS_Obj);
var res = [];
for(var i in obj)
res.push(obj[i]);
down.innerHTML = "Array of values - ["
+ res + "]";
}
</script>
</body>
</html> 第二种方法
该方法原理相似,但执行手段不同。通过eval()方法将JSON字符串转换为JavaScript对象,提取对象值后使用push()方法将其推入数组。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to convert JSON string to array
of JSON objects using JavaScript?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP"></p>
<button onclick = "myGFG()">
Click Here
</button>
<p id = "GFG_DOWN"></p>
<script>
var up = document.getElementById("GFG_UP");
var JS_Obj =
'{"prop_1":"val_1", "prop_2":"val_2", "prop_3" : "val_3"}';
up.innerHTML = "JSON string - '" + JS_Obj + "'";
var down = document.getElementById("GFG_DOWN");
function myGFG() {
var obj = eval('(' + JS_Obj + ')');
var res = [];
for(var i in obj)
res.push(obj[i]);
down.innerHTML = "Array of values - ["
+ res + "]";
}
</script>
</body>
</html> 如需了解更多关于JavaScript数组转对象及JSON对象字符串转数组的技术细节,请参阅下方的相关链接