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

相关文章
|
5天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
5天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
32 10
|
2天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
2天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
8 0
|
2天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
3天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
20 1
|
5天前
|
存储 JavaScript 前端开发
Javascript教程
Javascript教程
9 0
|
5天前
|
JavaScript 前端开发 Java
《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
【5月更文挑战第4天】本文介绍了如何使用JavaScriptExecutor在自动化测试中实现元素高亮显示。通过创建并执行JS代码,可以改变元素的样式,例如设置背景色和边框,以突出显示被操作的元素。文中提供了一个Java示例,展示了如何在Selenium中使用此方法,并附有代码截图和运行效果展示。该技术有助于跟踪和理解测试过程中的元素交互。
12 0
|
5天前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
18 6