JSON的一个常见用途是作为与Web服务器交换资料。当向Web服务器传送资料时，资料必须是字串格式。使用JSON.stringify()可以将JavaScript物件转换为字串型别。那么如何通过原生javascript来实现这个功能呢？
实现思路
通过递回呼叫，来实现对转换物件Object的深层value进行遍历。利用array的join方法实现最终的字串拼接。
具体程式码
function json2str(o) {let arr = [];
const fmt = function(s) {
if(typeof s == \'object\' && s !== null) return json2str(s);
return /^(string)$/.test(typeof s) ? `"${s}"`: s;
}
for (var i in o) arr.push(`"${i}":${fmt(o[i])}`)
return `{${arr.join(\',\')}}`
}
const obj = { name: "Lily", age: 30, tel: "132xxxxxxxx", address: { city : "beijing", district: "haidian", detail: "dddddddd"} };
const generatedData = json2str(obj)
对比JSON.stringify方法
可直接在浏览器执行如下程式码Create JSON string from a JavaScript object.
function json2str(o) {
let arr = [];
const fmt = function(s) {
if(typeof s == \'object\' && s !== null) return json2str(s);
return /^(string)$/.test(typeof s) ? `"${s}"`: s;
}
for (var i in o) arr.push(`"${i}":${fmt(o[i])}`)
return `{${arr.join(\',\')}}`
}
const obj = { name: "John", age: 30, tel: "132xxxxxxxx", address: { city : "beijing", district: "haidian", detail: "dddddddd"} };
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
const myJSON2 = json2str(obj)
document.getElementById("demo2").innerHTML = myJSON2;
执行结果
小结
本文的JSON.stringify()方法的原生JS实现属于对javascript灵活应用的基本功。实现思路来自于笔者平日的工作与思考的总结。
希望大家都能掌握以便在面试中脱颖而出。
您的点赞和收藏是我知识输出的最大鼓励
有需要前端学习资料的同学可以私行小编“学习”，获取学习资料一起交流学习
