当面试官问起JSON.stringify时，我这样回答后，他说...

最新推荐文章于 2024-06-02 11:36:08 发布
最新推荐文章于 2024-06-02 11:36:08 发布
阅读量2.1k 收藏 4
点赞数 1
分类专栏： 【JavaScript/jQuery】 文章标签： json javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Umbrella_Um/article/details/123526098
版权

前言

JSON.stringify 作为日常开发中经常使用的方法，你真的能灵活运用它吗？
面试官问起这个时，你只会说我就只会用JSON序列化对象吗？

学习本文之前让大家带着几个问题，一起来深入学习，打开 JSON.stringify 的另一扇门~

  1. JSON.stringify 函数有几个参数，每个参数分别有啥用啊?
  2. JSON.stringify 序列化准则有哪些啊?
  3. 函数序列化中会如何处理?
  4. null、undefined、NaN 等特殊的值又会如何处理?
  5. ES6 后增加的 Symbol 类型、BigInt 序列化过程中会有特别处理吗?
  6. stringify 什么情况下不适合做深拷贝?
  7. 你能想到那些 stringify 的妙用?

整个文章的脉络跟下面思维导图一致，大家可以先留一下印象。
请添加图片描述

三参数

在日常编程中，我们经常 JSON.stringify 方法将某个对象转换成 JSON 字符串形式。

let user = {
	name: '张三',
	age: 18
}
// 输出结果: {"name":"张三","age":18}
console.log(JSON.stringify(user))

但 stringify 真的就这么简单吗？我们先来看一下 MDN 中对 stringify 的定义。

MDN 中指出: JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
看完定义，stringfy 不止一个参数吗？当然了，stringify 有三个参数。

咱们来看一下 stringify 语法和参数介绍:

JSON.stringify(value[, replacer [, space]])

  • value: 将要序列后成 JSON 字符串的值。
  • replacer (可选)
    1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
    2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
    3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
  • space (可选): 指定缩进用的空白字符串，用于美化输出
    1. 如果参数是个数字，它代表有多少的空格。上限为10。
    2. 该值若小于1，则意味着没有空格
    3. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格
    4. 如果该参数没有提供（或者为 null），将没有空格

replacer 的用法

用法一：replacer 作为函数

replacer 作为函数，它有两个参数，键(key) 和 值(value)，并且两个参数都会被序列化。

在开始时，replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象。理解这点很重要，replacer 函数并非是上来就把对象解析成键值对形式，而是先传入了待序列化对象。随后每个对象或数组上的属性会被依次传入。 如果函数返回值为undefined或者函数时，该属性值会被过滤掉，其余按照返回规则。

// repalcer 接受两个参数 key value 分别为对象的每个键值对
// 根据 undefined 的返回进行过滤 测试
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
// 据 function 的返回进行过滤 测试
function replacerFunc(key, value) {
  if (typeof value === "string") {
    return () => {};
  }
  return value;
}
let user = { name: '张三', age: 18, sex: '男', friends: ['小明', '小花', 007], isMarried: false };
JSON.stringify(user, replacer);      //  输出结果: {"age":18,"friends":[null,null,7],"isMarried":false}'
JSON.stringify(user, replacerFunc);  // 同上

注意📢：从结果发现 friends 数组按之前说的为啥不直接返回数组，相反连里面每一个值都好像遍历了一次 replacer 函数，且出现了null ？

解答 >>>>>>>
这也是 stringify 处理数组的一个特殊知识点； 如果序列化的是数组 stringify会对里面每一项进行无差别对待，也就是说数组的每一项会重新走一次replacer 函数，但是呢此时经过 replace 函数 → 返回的 undefined 或者函数，当前值不会被忽略，而将会被 null 取代噢~

用法二：replacer 作为数

作为数组比较好理解，过滤数组中出现的键值。

let params = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
// 输出结果: {"week":45,"month":7}
JSON.stringify(params, ['week', 'month']);

JSON 序列化结果为 {"week":45,"month":7} , 只保留 week 和 month 属性值。

九特性

特性一: undefined、函数、Symbol值
  1. 出现在非数组对象属性值中: undefined、任意函数、Symbol 值在序列化过程中将会被忽略
  2. 出现在数组中: undefined、任意函数、Symbol 值会被转化为 null
  3. 单独转换时: 会返回 undefined
// 1. 对象属性值中存在这三种值会被忽略
let user1 = {
  name: '张三',
  age: 18,
  sayHello() {
    console.log('hello world')
  },
  gir: undefined,
  id: Symbol(007)
}
// 输出结果: {"name":"张三","age":18}
console.log(JSON.stringify(user1))

// 2. 数组中这三种值会被转化为 null
let user2 = [
  '李四', 
  20, 
  function sayHello() {
    console.log('hello world')
  }, 
  undefined,
  Symbol(123)
]

// 输出结果: ["李四",20,null,null,null]
console.log(JSON.stringify(user2))

// 3. 这三种值单独转化将会返回 undefined
console.log(JSON.stringify(undefined))
console.log(JSON.stringify(Symbol(007)))
console.log(JSON.stringify(function sayHello() { 
  console.log('hello world')
}))
特性二: toJSON() 方法

转换值如果有 toJSON() 方法，toJSON() 方法返回什么值，序列化结果就返回什么值，其余值会被忽略，也就是只处理toJSON 方法里面返回的元素

let user = {
  name: '李四',
  age: 20,
  toJSON(){
    return ['张三', Symbol(007), undefined, 18, true]
  }
}
// 输出结果: ["张三",null,null,18,true]
console.log(JSON.stringify(user));
特性三: 布尔值、数字、字符串的包装对象

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值

// 输出结果: ["张三",18,true]
JSON.stringify([new String("张三"), new Number(18), new Boolean(true)])
特性四: NaN Infinity null

特性四主要针对 JavaScript 里面的特殊值，例如 Number 类型里的 NaN 和 Infinity 及 null 。此三种数值序列化过程中都会被当做 null

// 特性三讲过布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
// 隐式类型转换就会调用包装类，因此会先调用 Number => NaN => null
// 1/0 => Infinity => null
// 输出结果: [null,null,null,null]
JSON.stringify([Number('123a'), +'123a', 1/0, null])
特性五: Date对象

Date 对象上部署了 toJSON 方法(同 Date.toISOString() )将其转换为字符串，因此 JSON.stringify() 将会序列化 Date 的值为时间格式字符串

// 输出结果: "2021-02-28T03:55:02.929Z"
JSON.stringify(new Date())
特性六: Symbol

特性一提到，Symbol 类型当作值来使用时，对象、数组、单独使用分别会被忽略、转换为 null 、转化为 undefined

同样的，所有以 Symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

let user = {
  name: '张三',
  age: 18,
  [Symbol('sex')]: '男'
}
function replacer(key, value) {
  if (typeof key === 'symbol') {
    return value;
  }
}

// 输出结果: undefined
JSON.stringify(user, replacer)

通过上面案例，我们可以看出，虽然我们通过 replacer 强行指定了返回 Symbol 类型值，但最终还是会被忽略掉。

特性七: BigInt

JSON.stringify 规定: 尝试去转换 BigInt 类型的值会抛出 TypeError

let bigNumber = BigInt(1)
// 输出结果: Uncaught TypeError: Do not know how to serialize a BigInt
console.log(JSON.stringify(bigNumber))
特性八: 循环引用

对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误

日常开发中深拷贝最简单暴力的方式就是使用 JSON.parse(JSON.stringify(obj))，但此方法下的深拷贝存在巨坑，关键问题就在于 stringify 无法处理循环引用问题。

let obj = {
  name: '张三',
  age: 18
}

let loopObj = {
  obj
}
// 形成循环引用
obj.loopObj = loopObj;
/* Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'loopObj' -> object with constructor 'Object'
    --- property 'obj' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:10:6
*/
JSON.stringify(obj)
特性九: 可枚举属性

对于对象(包括 Map / Set / WeakMap / WeakSet)的序列化，stringify 也明确规定，仅会序列化可枚举的属性

// 不可枚举的属性默认会被忽略
let obj1 = new Set([1,2,3,4,5])
let obj2 = Object.create(
    null,
    {
        name: { value: '张三', enumerable: false },
        age: { value: 18, enumerable: true }
    }
)

JSON.stringify(obj1) // 输出结果: {}
JSON.stringify(obj2) // 输出结果: {"age":18}

【拓展芝士🧀】
不可枚举的对象，同样在for…in循环 ， Object.keys方法 中获取不了

六妙用

妙用一：localStorage

localStorage 对象用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。通常我们以对象形式进行存储。

let user = {
  name: '王五',
  age: 30,
  sex: '男'
}
/* ---- 单纯调用 localStorage.setItem() ---- */
localStorage.setItem('userInfo', user);

// 最终返回结果是 [object Object]
// 可见单纯调用localStorage是失败的
console.log(localStorage.getItem('userInfo'))

/* ---- 配合 JSON.stringify 方法 ---- */
localStorage.setItem('userInfo1', JSON.stringify(user))
// 最终返回结果是 { name: '王五', age: 30, sex: '男' }
console.log(JSON.parse(localStorage.getItem('userInfo1')))
妙用二：属性过滤

来假设这样一个场景，后端返回了一个很长的对象，对象里面属性很多，而我们只需要其中几个属性，并且这几个属性我们要存储到 localStorage 中

1.方案一: 解构赋值+ stringify

// 我们只需要 a,e,f 属性
let res = { a:1, b:2, c:3, d:4, e:5, f:6, g:7 }
// 解构赋值
const {a,e,f} = res
// 存储到localStorage
localStorage.setItem('res', JSON.stringify({a,e,f}))
// {"a":1,"e":5,"f":6}
console.log(localStorage.getItem('res'))

2.使用 stringify 的 replacer 参数

// 借助 replacer 作为数组形式进行过滤
localStorage.setItem('res', JSON.stringify(res, ['a','e','f']))
// {"a":1,"e":5,"f":6}
console.log(localStorage.getItem('res'))

当 replacer 是数组时，可以简单的过滤出我们所需的属性，是一个不错的小技巧。

妙用三：三思而后行之深拷贝

使用 JSON.parse(JSON.stringify) 是实现对象的深拷贝最简单暴力的方法之一。但也正如标题所言，使用该种方法的深拷贝要深思熟虑

  1. 循环引用问题，stringify 会报错
  2. 函数、undefined、Symbol 会被忽略
  3. NaN、Infinity 和 -Infinity 会被序列化成 null
  4. …

因此在使用 JSON.parse(JSON.stringify) 做深拷贝时，一定要深思熟虑。如果没有上述隐患，JSON.parse(JSON.stringify) 是一个可行的深拷贝方案。

【小提示】
当面试官，问你深拷贝的时候，是不是可以说一下除了什么情况下，JSON.parse(JSON.stringify) 也是可以深拷贝的，这样面试官应该会很满意的~

妙用四：对象的 map 函数

在使用数组进行编程时，我们会经常使用到 map 函数。有了 replacer 参数后，我们就可以借助此参数，实现对象的 map 函数

// 例如下面给 obj 对象的属性值乘以2
let obj = {
  a: 1,
  b: 2,
  c: 3
}
const fn = (key, val) => {
  if (typeof val === "number") {
    return val * 2;
  }
  return val;
}
// 输出结果: {a: 2, b: 4, c: 6}
console.log(JSON.parse(JSON.stringify(obj, fn)))

很多同学有可能会很奇怪，为什么里面还需要多加一部判断，直接 return value * 2 不可吗？

解答>>>>>>>>
上文讲过，replacer 函数首先传入的是待序列化对象，对象 * 2 => NaN => toJSON(NaN) => undefined => 被忽略，就没有后续的键值对解析了。

妙用五：删除对象属性

借助 replacer 函数，我们还可以删除对象的某些属性

let user = {
  name: '张三',
  age: 18
}
// 输出结果: {"age":18}
JSON.stringify(user, (key, val) => {
  // 返回值为 undefined时，该属性会被忽略 
  if (key === 'name') {
    return undefined;
  }
  return val;
})
妙用六：对象判断

JSON.stringify 可以将对象序列化为字符串，因此我们可以借助字符串的方法来实现简单的对象相等判断

//判断数组是否包含某对象
let people = [
  {name:'张三'},
  {name:'李四'},
  {name:'王五'},
];
let people1 = {name:'张三'};
// true
JSON.stringify(people).includes(JSON.stringify(people1))
 
// 判断对象是否相等
let p1 = {name:'张三', age: 18, sex: '男', firends: ['李四','王五']}
let p2 = {name:'张三', age: 18, sex: '男', firends: ['李四','王五']}

// true
JSON.stringify(p1) === JSON.stringify(p2);

参考链接

@Umbrella
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json面试题_21道前端面试题，值得收藏
weixin_39795325的博客
11-21 1967
不点蓝字，我们哪来故事？1、scrollWidth,clientWidth,offsetWidth的区别scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。2、怎...
JSON.stringify转换JSON时日期时间不准确的解决方法
10-25
主要介绍了JSON.stringify转换JSON时日期时间不准确的解决方法,即JSON数据中包含日期对象时,在转换时会转换成国际时间,而不是中国的时区,需要的朋友可以参考下
程序员Web面试之JSON
06-26 122
JSON是什么？ JSON（JavaScript对象表示法）, 是在网络通信下，常用的一种数据表达格式，它有助于我们于一个自描述的，独立的和轻的方式呈现并交换数据。这些数据可以易于和转换为JavaScript对象。 JSON格式的最大优点: 它可以被很容易得被转换为一个javascript对象。例如，下面的代码片段中看到的，我们有一个JSON格式的数据里面有“姓名”...
解决JSON.stringify 方法在序列化 BigInt 类型时的错误
最新发布
qweasl_的博客
06-02 394
这是从数据库的article表中查找id为 1 的数据，它里面有个content的属性，其值有百多来字。今天学nest时，使用apifox发送请求获取数据，结果还一直报错，而且还是我从未见过的。我都是跟着人家敲的，我就纳闷了，就上网查资料 ， 原来是我的。2.自定义Json.stringify 方法。1.直接将BigInt 转为string。content的值使用mock随机生成的。类型，从而导致这个错误。
JSON.stringify(responseStr))
梦想氧吧
11-14 952
stringify()用于从一个对象解析出字符串，responseStr是响应的数据
console.log(JSON.stringify(response))
heyuqing32的博客
02-27 2327
console.log(JSON.stringify(response)) 的使用  
json面试题_Java面试题：json该如何定义？json与xml的区别有哪些？
weixin_39814378的博客
11-21 343
什么是jsonJson是一种字符串数据格式，一般用于数据传输格式。json字符串中[]对应JSONArray, {}对应JSONObjectjson与xml的区别(1).可读性方面。JSON和XML的数据可读性基本相同，JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，XML可读性较好些。(2).可扩展性方面。XML天生有很好的扩展性，JSON当然也有，没有什么是XML...
解决JSON.stringify()自动将中文转译成unicode的问题
10-18
下面小编就为大家分享一篇解决JSON.stringify()自动将中文转译成unicode的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
10-17
主要介绍了JavaScript -- JSON.parse 函数 和 JSON.stringify 函数,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
浅谈JSON.parse()和JSON.stringify()
10-23
本文给大家简单描述了下JSON.parse()和JSON.stringify()的异同点，十分的实用，有需要的小伙伴可以参考下
一道面试题之关于自定义Json解析器
成长的烧年
06-30 1586
最近在群里里面有哥们说在面试的时候，要求上机写一个简单的Json解析器，看到这个题目的时候，心里慌得一比，因为感觉有些力不从心，不知道从哪里下手，所以赶紧查了一下Gson源码，看看有什么启示没有。当然，这篇扯淡并不是介绍Gson源码，而是想自定义一个简单的Json解析器，来熟悉一下Java的反射知识和字符串操作知识。 先装个B，其实也没有我们想的辣么难啊，我们先来看看一般简单的Json字符串的格...
JSON.stringify 方法
笑儿--永不凋零的梦想
06-10 777
作用：这个函数的作用主要是为了系列化对象的。
json与xml的优缺点比较（面试）
liuke
08-03 5401
XML和json的优缺点 xml的优点 （1）格式统一 （2）容易与其他系统进行远程交互，数据共享比较方便 xml的缺点 （1）xml文件庞大，文件格式复杂，传输占带宽 （2）服务器和客户端都需要花费大量代码来解析xml,导致服务器和客户端代码变得异常复杂且不易维护 （3）客户端和服务端解析xml花费较多的资源和时间 json的优点 （1）数据格式比较简单，易于读写，格式是压缩的
前端面试之Ajax和Json
周清城的博客
11-13 4909
今天面试的两个公司都有问到这个，不过我虽然没有对这两个东西达到精通的程度，但还是记得定义的： Ajax：页面异步刷新方式，在更新页面内容时，不用跳转到另外一个页面就可以实现数据的更新，可以提升页面的友好度 Json：数据交换方式，它把页面的数组转化为字符串，然后再把字符串以某种方式转化为数据传给页面显示 以上就是我答的所有了，只怪自己在实际项目应用中没有去过多的关注它们的原理，所以只
干货｜Dubbo面试题及答案
传智播客的专栏
11-16 655
【面试题1】Dubbo支持的协议dubbo(默认)：单一长连接和NIO异步通讯，适合大并发小数据量的服务调用，以及消费者远大于提供者。传输协议 TCP，异步，Hessian 序列化。rm...
JS中JSON序列化JSON.stringify的坑点和处理
热门推荐
jason_renyu的博客
03-21 1万+
JSON.stringify的问题 在js中提到对象转JSON字符串，基本都会想到JSON.stringify这个方法，以及对应的解析方法JSON.parse方法，这个的转换也被不少人用于深拷贝的操作中。 但是随着这一对方法的使用，我们会发现它们存在的弊端，比如会丢失函数和undefined类型的内容，如下： 这里边的丢失内容为undefined类型c和函数f，在查询了资料后发现JSON.stringify会丢失的内容有以下内容: 使用JSON.Stringify 转换的数据中，如果包含 function
字符串拼接和json面试题
呵呵的牛
03-02 672
json面试题和字符串拼接面试题
Web前端面试指导(二十六)：JSON 格式是什么？你了解吗？
雄领IT的专栏
10-04 3583
题目点评 这道题目问得比较抽象，像这种比较抽象的提问，在面试的时候是非常常见的，面试官喜欢就抽象到具体，然后不断地追问，试图通过追问的方式打断你的思路，顺便观察你的应变能力和技术实力。建议在回答的时候尽量详尽，不要给面试官穷追猛打的机会。 JSON是什么 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据
关于JSON.stringify 与 JSON.parse使用小记（笔记向）
u012829344的博客
03-08 1028
前段时间做了一个任务，为了在商城搜索页面给商品的显示顺序做排序，要给商品加上相对应的权值，跳到权重页面，首先需要查出来所有的已经绑定权重值的商品列表，显示出权重值，有效日期以及是否有效等状态，（楼主用的是datatable，其实可以用handlebar来处理，会使页面数据显示更美观，样式更容易更改，但是由于时间紧迫，就没改）跑题了，页面上有一个按钮，点击时可以查找出所有的没有绑定权值的商品列表，每
请告诉我JSON.parse和JSON.stringify的区别
05-02
JSON.parse() 方法将一个 JSON 字符串解析成 JavaScript 对象。...JSON.parse() 接受一个 JSON 字符串并返回一个 JavaScript 对象，而 JSON.stringify() 接受一个 JavaScript 对象并返回一个 JSON 字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值