JSON.stringify进阶

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

参数

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

返回值

一个表示给定值的JSON字符串。

进阶：

如果需要使用JSON.stringify序列化的数组或对象中 key、value 的值为 undefined，那么序列化后的字符串数组或对象将缺少 undefined 所对应的 value key。

示例

let str = [
  {
    
    
    key: 1,
    value: undefined
  },
  {
    
    
    key: 2,
    value: undefined
  },
  {
    
    
    key: 3,
    value: undefined
  },
]
JSON.stringify(str)

输出结果

正确用法

let newStr = str.map((item) => {
    
    
  const value = typeof item.value === 'undefined' ? '' : item.value
  return {
    
    
    ...item,
    value
  }
})

console.log(JSON.stringify(newSignInfo))
// '[{"key":1,"value":""},{"key":2,"value":""},{"key":3,"value":""}]'

JSON.stringify 深拷贝弊端

• undefined、任意的函数以及symbol值，出现在非数组对象的属性值中时在序列化过程中会被忽略
• undefined、任意的函数以及symbol值出现在数组中时会被转换成 null。
• undefined、任意的函数以及symbol值被单独转换时，会返回 undefined。

深拷贝方案

使用Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）， Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

function copyObject(orig) {
    
    
    var copy = Object.create(Object.getPrototypeOf(orig));
    copyOwnPropertiesFrom(copy, orig);
    return copy;
}

function copyOwnPropertiesFrom(target, source) {
    
    
    Object
    .getOwnPropertyNames(source)
    .forEach(function (propKey) {
    
    
      var desc = Object.getOwnPropertyDescriptor(source, propKey);
      Object.defineProperty(target, propKey, desc);
    });
    return target;
}
var obj = {
    
    
    name: '李Lisa',
    age: '25',
    job: 'developer'
};

var obj2 = copyObject(obj);
console.log(obj2);
obj.age = 39;
obj.name = '老王';
console.log(obj);
console.log(obj2);

注意 如果对象比较大，层级也比较多，深复制会带来性能上的问题。在遇到需要采用深复制的场景时，可以考虑有没有其他替代的方案。在实际的应用场景中，也是浅复制更为常用。

浅拷贝方案

使用ES6、ES9中的 解构赋值，对象的扩展运算符方法进行深拷贝

const newObj = {
    
    ...obj}
const newArray = [...Array]

希望看完的朋友可以点个Star/关注，您的支持是对我最大的鼓励。

如果喜欢本文的话，欢迎关注我的订阅号，漫漫技术路，期待共同学习成长。