5 Секретные особенности JSON.Stringify ()

JavaScript

5 секретных возможностей JSON.stringify()

Credits: [Kirmeli.com](https://www.google.com/url?sa=i&url=https%3A%2F%2Fahmedalkiremli.com%2Fwhy-to-learn-what-to-learn-and-how-to-learn%2F&psig=AOvVaw3IGik44VGBXe661UZsW5Mh&ust=1581750442478000&source=images&cd=vfe&ved=0CAMQjB1qFwoTCMj-5Oi90OcCFQAAAAAdAAAAABAR)

Метод JSON.stringify() преобразует объект или значение JavaScript в строку JSON.

Как разработчик JavaScript,JSON.stringify()это наиболее распространенная функция, используемая для отладки. Но что он делает, разве мы не можем использоватьconsole.log()сделать то же самое? Давайте попробуем.

//初始化一个 user 对象
const user = {
 "name" : "Prateek Singh",
 "age" : 26
}

console.log(user);

// 结果
// [object Object]

Ой!console.log()не помог нам распечатать желаемый результат. он выводит**[object Object]**,Поскольку преобразование по умолчанию из объекта в строку[object Object]. Поэтому мы используемJSON.stringify()Сначала преобразуйте объект в строку, а затем напечатайте его в консоли, как показано ниже.

const user = {
 "name" : "Prateek Singh",
 "age" : 26
}

console.log(JSON.stringify(user));

// 结果
// "{ "name" : "Prateek Singh", "age" : 26 }"

Как правило, разработчики используютstringifyСценарий функции более общий, как мы делали выше. Но я расскажу вам несколько скрытых секретов, которые облегчат вам разработку.

1: второй параметр (массив)

Да,stringifyФункции также могут иметь второй параметр. Это массив ключей объектов для вывода в консоль. Кажется достаточно простым? Давайте копнем немного глубже. у нас есть объектproductИ мы хотим знать значение атрибута name продукта. Когда мы распечатаем это: console.log(JSON.stringify(продукт)); Он выведет следующий результат.

{"id":"0001","type":"donut","name":"Cake","ppu":0.55,"batters":{"batter":[{"id":"1001","type":"Regular"},{"id":"1002","type":"Chocolate"},{"id":"1003","type":"Blueberry"},{"id":"1004","type":"Devil’s Food"}]},"topping":[{"id":"5001","type":"None"},{"id":"5002","type":"Glazed"},{"id":"5005","type":"Sugar"},{"id":"5007","type":"Powdered Sugar"},{"id":"5006","type":"Chocolate with Sprinkles"},{"id":"5003","type":"Chocolate"},{"id":"5004","type":"Maple"}]}

Трудно найти в логахnamekey, так как на консоль выводится много бесполезной информации. Когда объект становится больше, сложность поиска свойств возрастает. Здесь пригодится второй параметр функции stringify. Давайте перепишем код и посмотрим на результат.

console.log(JSON.stringify(product,['name' ]);

// 结果
{"name" : "Cake"}

Проблема решена, вместо того, чтобы печатать весь объект JSON, мы можем передать нужные ключи в виде массива во втором параметре, таким образом, печатая только нужные свойства.

2: Второй параметр (функция)

Мы также можем передать функцию в качестве второго параметра. Он вычисляет каждую пару ключ-значение на основе логики, записанной в функции. если вернутьсяundefined, пара ключ-значение не будет напечатана. Пожалуйста, обратитесь к примеру для лучшего понимания.

const user = {
 "name" : "Prateek Singh",
 "age" : 26
}

Passing function as 2nd argument

// 结果
{ "age" : 26 }

Толькоageпечатается, потому что функция оцениваетtypeOfВозвращает строковое значениеundefined.

3: Третий параметр — число

Третий параметр управляет интервалом между последней строкой. если параметр являетсяколичество, каждый уровень в строковой классификации будет иметь отступ на это количество пробелов.

// 注意：为了达到理解的目的，使用 '--' 替代了空格

JSON.stringify(user, null, 2);
//{
//--"name": "Prateek Singh",
//--"age": 26,
//--"country": "India"
//}

4: Третий параметр — строка

Если третий параметрstring, то он будет использоваться вместо символа пробела, показанного выше.

JSON.stringify(user, null,'**');
//{
//**"name": "Prateek Singh",
//**"age": 26,
//**"country": "India"
//}
// 这里 * 取代了空格字符

5: метод toJSON

у нас естьtoJSONСпособ, который можно использовать в качестве свойства любого объекта.JSON.stringifyВерните результат этой функции и сериализуйте его вместо преобразования всего объекта в строку. См. пример ниже.

const user = {
 firstName : "Prateek",
 lastName : "Singh",
 age : 26,
 toJSON() {
    return { 
      fullName: `${this.firstName} + ${this.lastName}`
    };
 }
}

console.log(JSON.stringify(user));

// 结果
// "{ "fullName" : "Prateek Singh"}"

Здесь мы видим, что он просто печатаетtoJSONрезультат функции вместо печати всего объекта.

Я надеюсь, ты сможешь научитьсяstringify()некоторые основные характеристики.

Если вы нашли эту статью полезной, пожалуйста, поставьте лайк и читайте больше подобных статей со мной.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории