Скрытая сила 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Метод принимает текущие свойства и значения в качестве параметров при переборе объекта. Если функция не возвращает значения или возвращает неопределенное значение, текущий узел не будет отображаться в результате.

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

Эти свойства можно удалить из результата, заставив функцию возвращать неопределенное значение.

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"]}

Наконец

Глядя на документацию функций, которые мы используем каждый день, иногда можно многое узнать. Могут быть сюрпризы, и мы можем многому научиться. Сохраняйте жажду знаний и чаще читайте документацию!

Публичный аккаунт WeChat: станция перевода 1024