带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(1)https://developer.aliyun.com/article/1349575?groupCode=tech_library
日志记录
在记录日志时,可以将 JavaScript 对象转换为 JSON 字符串,并将其作为日志消息的一部分。
const obj = { name: 'John', age: 25 }; const logMessage = `User info: ${JSON.stringify(obj)}`; console.log(logMessage);
数据展示
将 JavaScript 对象转换为 JSON 字符串后,可以方便地在前端页面中展示、渲染或打印。
const obj = { name: 'John', age: 25 }; const jsonString = JSON.stringify(obj); document.getElementById('user-info').textContent = jsonString;
3. 完整优雅的实现
下面是一个完整且优雅的 JSON.stringify() 实现,它考虑了处理循环引用、日期和正则表达式等特殊类型,并尽量保持了性能优化。
function stringify(obj) { const seen = new WeakSet(); // 用于检测循环引用 const typeMap = { '[object Date]': 'Date', '[object RegExp]': 'RegExp', }; function isObject(value) { return typeof value === 'object' && value !== null; } function handleSpecialTypes(value) { if (value instanceof Date) { return { type: 'Date', value: value.toISOString() }; } else if (value instanceof RegExp) { return { type: 'RegExp', value: value.toString() }; } return value; } function replacer(key, value) { if (seen.has(value)) { throw new TypeError('Converting circular structure to JSON'); } if (isObject(value)) { seen.add(value); } value = handleSpecialTypes(value); return value; } function stringifyHelper(obj) { if (isObject(obj)) { if (Array.isArray(obj)) { return '[' + obj.map((item) => stringifyHelper(item)).join(',') + ']'; } else { const properties = Object.keys(obj) .map((key) => `"key":{key}":{stringifyHelper(obj[key])}`) .join(','); return `{${properties}}`; } } else { return JSON.stringify(obj, replacer); } } return stringifyHelper(obj);}
此实现使用了递归和一些辅助函数来处理不同的数据类型。它会检查循环引用并抛出错误,处理特殊类型(如日期和正则表达式),并使用递归进行深度优先遍历。
请注意,此实现仅为简化示例,对于更复杂的场景可能需要进行更多的处理和优化。建议在实际使用中参考第三方库或更全面的文档和资源。
带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(3)https://developer.aliyun.com/article/1349573?groupCode=tech_library