隐藏实力的 JSON.stringify，原来还能够这么用！

JavaScript 有许多各司其职的函数。咱们天天都在用，但不知道他们的额外功能。直到有一天看了文档以后才发现，它们原来有许多超出咱们想象的功能。JSON.stringify  就是其中一个。今天咱们就来聊聊这个隐藏实力的选手。

基本用法

JSON.stringify 方法接受一个参数并将其转换成JSON 字符串形式。

const firstItem = { 
  title: 'Transformers', 
  year: 2007 
};

JSON.stringify(firstItem);
// {'title':'Transformers','year':2007}

复制代码

当出现一个不能序列化成 JSON 字符串的元素时就会出现问题 。

const secondItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]) 
};

JSON.stringify(secondItem);
// {'title':'Transformers','year':2007,'starring':{}}

复制代码

第二个参数

JSON.stringify 还有第二个参数，叫替换器参数。

你能够传一个字符串数组，做为对象属性白名单，这些属性将会包含在输出结果里。

JSON.stringify(secondItem, ['title']);
// {'title':'Transformers'}

复制代码

咱们能够筛掉一些不想要的值。这些值要么太大（好比 Error 对象），要么没法转成可读的JSON形式。

替换器参数也能够是一个函数。该函数接受 JSON.stringify 方法遍历对象时当前的属性和值做为参数。若是函数不返回任何值或者返回 undefined，当前节点就不会出如今结果里。

JSON.stringify(secondItem, (key, value) => {
  if (value instanceof Map) {
    return [...value.values()];
  }
  return value;
});
// {'title':'Transformers','year':2007,'starring':['Shia LaBeouf','Megan Fox']}

复制代码

经过让函数返回 undefined，能够在结果里删除这些属性。

JSON.stringify(secondItem, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
});
// {"year":2007,"starring":{}}

复制代码

第二个参数还能够用来建立简单的对象哈希函数。但有一点要注意，JSON.stringify(obj)不能保证属性的输出顺序，当序列化的结果用于哈希/校验和的时，这点相当重要。为此，咱们能够把第二个参数设置为Object.keys(obj).sort()，对象将会以这个顺序序列化。

function objectHash(obj: object): string {
  const str = JSON.stringify(obj, Object.keys(obj).sort());
  return createHash('sha1').update(str).digest('hex');
}
复制代码

第三个参数。

第三个参数设置最终字符串里的空白缩进。若是参数是一个数字，那么序列化的每一个层级都会用这个数量的空格符缩进。

JSON.stringify(secondItem, null, 2);
//{
//  "title": "Transformers",
//  "year": 2007,
//  "starring": {}
//}

复制代码

若是第三个参数是字符串，就会替代空格符。

JSON.stringify(secondItem, null, '🦄');
//{
//🦄"title": "Transformers",
//🦄"year": 2007,
//🦄"starring": {}
//}

复制代码

toJSON 方法

若是咱们序列化的对象有一个toJSON方法，它将会采用自定义的序列化过程。你能够在方法里返回一个新的值，这个值将会替换原始对象被序列化。

const thirdItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]),
  toJSON() {
    return { 
      name: `${this.title} (${this.year})`, 
      actors: [...this.starring.values()] 
    };
  }
};

console.log(JSON.stringify(thirdItem));
// {"name":"Transformers (2007)","actors":["Shia LaBeouf","Megan Fox"]}

复制代码

最后

查看咱们平常使用的函数的文档，有时候会有很多收获。可能会有惊喜，咱们也能学到很多东西。保持对知识的渴求，常常读读文档吧！

微信公众号：1024译站