黑马程序员技术交流社区

标题: 【上海】JSON.string() [打印本页]

作者: 透露姓名的网民 时间: 2019-12-13 18:32
标题: 【上海】JSON.string()
本帖最后由透露姓名的网民于 2019-12-13 18:40 编辑

JSON.stringify() 九大特性
JSON.stringify()第一大特性：
对于 undefined、任意的函数以及 symbol 三个特殊的值作为属性的值时直接忽略；
undefined、任意的函数以及 symbol 三个特殊的值作为数组元素时将转为null；
undefined、任意的函数以及 symbol 三个特殊的值单独序列化即调用JSON.stringify()时转为undefined；

[JavaScript] 纯文本查看 复制代码



const data = {

  a: "aaa",

  b: undefined,

  c: Symbol("dd"),

  fn: function() {

    return true;

  }

};

JSON.stringify(data); // 输出：？



// "{"a":"aaa"}"

JSON.stringify(["aaa", undefined, function aa() {
return true
  }, Symbol('dd')])  // 输出：？

// "["aaa",null,null,null]"

JSON.stringify(function a (){console.log('a')})
// undefined
JSON.stringify(undefined)
// undefined
JSON.stringify(Symbol('dd'))
// undefined

JSON.stringify()第二大特性：
对象的属性不能保证以特定的顺序出现在序列化后的字符串中，数组对象除外。
正如我们在第一特性所说，JSON.stringify() 序列化时会忽略一些特殊的值，所以不能保证序列化后的字符串还是以特定的顺序出现（数组除外）。
const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function() {
return true;
  },
  d: "ddd"
};
JSON.stringify(data); // 输出：？
// "{"a":"aaa","d":"ddd"}"

JSON.stringify(["aaa", undefined, function aa() {
return true
  }, Symbol('dd'),"eee"])  // 输出：？

// "["aaa",null,null,null,"eee"]"

JSON.stringify() 第三大特性：
转换值如果自身有 toJSON() 函数，该函数返回什么值，序列化结果就是什么值，并且忽略其他属性的值。
JSON.stringify({
say: "hello JSON.stringify",
toJSON: function() {
   return "today i learn";
}
  })
// "today i learn"

JSON.stringify()第四大特性：
JSON.stringify() 将会正常序列化 Date 的值。实际上 Date 对象自己部署了 toJSON() 方法（同Date.toISOString()），因此 Date 对象会被当做字符串处理。
JSON.stringify({ now: new Date() });
// "{"now":"2019-12-08T07:42:11.973Z"}"

JSON.stringify() 第五大特性：
NaN 和 Infinity 格式的数值及 null 都会被当做 null。
JSON.stringify(NaN)
// "null"
JSON.stringify(null)
// "null"
JSON.stringify(Infinity)
// "null"

JSON.stringify() 第六大特性：
关于基本类型的序列化：布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// "[1,"false",false]"

JSON.stringify() 第七大特性：
关于对象属性的是否可枚举：
其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。
// 不可枚举的属性默认会被忽略：
JSON.stringify(
Object.create(
      null,
      {
         x: { value: 'json', enumerable: false },
         y: { value: 'stringify', enumerable: true }
      }
)
);
// "{"y":"stringify"}"

JSON.stringify() 第八大特性：
我们都知道实现深拷贝最简单粗暴的方式就是序列化：JSON.parse(JSON.stringify())，
这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点：
比如现在我们要说的循环引用问题。
// 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
const obj = {
  name: "loopObj"
};
const loopObj = {
  obj
};
// 对象之间形成循环引用，形成闭环
obj.loopObj = loopObj;
// 封装一个深拷贝的函数
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
// 执行深拷贝，抛出错误
deepClone(obj)

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

JSON.stringify() 第九大特性：
所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
JSON.stringify({ [Symbol.for("json")]: "stringify" }, function(k, v) {
if (typeof k === "symbol") {
   return v;
}
  })
// undefined

JSON.stringify() 的第二个参数和第三个参数：
第二个参数 replacer，replacer 参数有两种形式，可以是一个函数或者一个数组。
作为函数时，它有两个参数，键（key）和值（value），函数类似就是数组方法 map、filter 等方法的回调函数，
对每一个属性值都会执行一次该函数。如果 replacer 是一个数组，数组的值代表将被序列化成 JSON 字符串的属性名。
replacer 作为函数时：
第二个参数replacer 非常强大， replacer 作为函数时，我们可以打破九大特性的大多数特性。
const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function() {
return true;
  }
};
// 使用 replacer 参数作为函数时
JSON.stringify(data, (key, value) => {
  switch (true) {
case typeof value === "undefined":
   return "undefined";
case typeof value === "symbol":
   return value.toString();
case typeof value === "function":
   return value.toString();
default:
   break;
  }
  return value;
})
// "{"a":"aaa","b":"undefined","c":"Symbol(dd)","fn":"function() {\n return true;\n  }"}"

传入 replacer 函数的第一个参数，需要注意的是，replacer 被传入的函数时，第一个参数不是对象的第一个键值对，
而是空字符串作为 key 值，value 值是整个对象的键值对：
const data = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};
JSON.stringify(data, (key, value) => {
  console.log(value);
  return value;
})
// 第一个被传入 replacer 函数的是 {"":{a: 2, b: 3, c: 4, d: 5}}
// {a: 2, b: 3, c: 4, d: 5}
// 2
// 3
// 4
// 5

实现map函数：
我们还可以用它来手写实现一个对象的类似 map 的函数。
const data = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};
const objMap = (obj, fn) => {
if(typeof obj !== 'function'){
      throw new TypeError(`${fn} is not a function` );
}
return JSON.parse(JSON.stringify(obj, fn));
}
objMap(data, (key, value) => {
if(value % 2 === 0){
      return value / 2;
}
      return value;
})
// {a: 1, b: 3, c: 2, d: 5}

replacer 作为数组时:
replacer 作为数组时，结果非常简单，数组的值就代表了将被序列化成 JSON 字符串的属性名。
const jsonObj = {
  name: "JSON.stringify",
  params: "obj,replacer,space"
};
// 只保留 params 属性的值
JSON.stringify(jsonObj, ["params"]);
// "{"params":"obj,replacer,space"}" 作者：弹铁蛋同学
链接：https://juejin.im/post/5decf09de51d45584d238319
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者: xiaowang66 时间: 2019-12-19 17:18
加油呀

作者: 梦缠绕的时候 时间: 2019-12-19 17:25
可以

作者: 魔都黑马少年梦 时间: 2019-12-19 17:38
可以

作者: 小影姐姐 时间: 2019-12-19 23:12
乾坤未定，你我皆是黑马!

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2