带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(2)

简介: 带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(2)

带你读《现代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

相关文章
|
26天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
4月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
2月前
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
216 0
|
3月前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
102 3
|
3月前
|
XML JSON JavaScript
js的json格式
js的json格式
|
3月前
|
存储 JSON JavaScript
JavaScript JSON
JavaScript JSON
37 5
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
49 0