JSON.stringify() все еще может это сделать

JavaScript

Что касается JSON, я считаю, что все должны быть хорошо знакомы. Будь то внешняя или внутренняя детская обувь, вы должны иметь дело с JSON каждый день. JSON — это аббревиатура JavaScript Object Notation (JavaScript Object Notation), которая является облегченной текстовые данные Формат обмена, меньше, быстрее и проще для анализа, чем xml

В JavaScript объект JSON содержит два метода:parse()иstringify(), первое используется для десериализации, второе используется для сериализации.Так называемая сериализация, в популярном понимании — это превращение объекта в строку, а десериализация — это соответствующий противоположный процесс.

Сегодня мы в основном говорим оstringify()метод. Хотя мы обычно используем этот метод, мы часто игнорируем дальнейшее использование этого метода. Если мы сможем правильно использовать этот метод, мы можем добиться вдвое большего результата с половиной усилий в реальном процессе разработки.

Я полагаю, что все будут часто использовать его в обычном процессе разработки.console.logчтобы распечатать результат вывода.Например, мы печатаем объект ниже:

let obj = {
  name:'zhangsan',
  age:undefined
}
console.log(obj)  // // {name: "zhangsan", age: undefined}

Какие свойства фильтруются?

Очень понятно выводить результаты в консоль для достижения желаемых результатов.Но если некоторые значения свойств в нашем объекте бессмысленны.Например,в следующем коде возраст является неопределенным свойством,мы не хотим управление Что делать, если консоль выводит его.В это время его можно использоватьJSON.stringify()способ достижения цели фильтрации

let obj = {
  name:'zhangsan',
  age:undefined
}
console.log(JSON.stringify(obj))  // {"name":"zhangsan"}

Мы видим, что результат вывода в это время уже установил значение атрибута какundefinedэтоageатрибуты отфильтровываются. И этоJSON.stringify()одно из свойств .undefined, значением свойства является любая функция илиsymbolтип также будет отфильтрован.

let obj = {
  name:'zhangsan',
  age:undefined,
  f:() => { console.log(1) },
  symbol:Symbol('This is a symbol')
}
console.log(JSON.stringify(obj))  // {"name":"zhangsan"}

Давайте добавим еще одно свойство к этому объекту.На этот раз мы добавим массив, и этот массив содержит некоторые из упомянутых выше типов.Что получится в результате?

let obj = {
  name:'zhangsan',
  age:undefined,
  f:() => { console.log(1) },
  symbol:Symbol('This is a symbol'),
  arr:[1, undefined, 2, this.f, 3, Symbol('This is a symbol in array')]
}
console.log(JSON.stringify(obj))  // {"name":"zhangsan","arr":[1,null,2,null,3,null]}

можно увидеть,undefined, функция иsymbolтипы сталиnull. Ниже мы также будем использовать эти типы для проверки, если мы напрямую используемJSON.stringify()Как ими управлять?

console.log(JSON.stringify(undefined))  // undefined
console.log(JSON.stringify(() => { console.log(1) }))  // undefined
console.log(JSON.stringify(Symbol('This is a symbol')))  // undefined

Вы можете видеть, что вывод всеundefined, Давайте посмотрим на некоторые другие специальные значения:

console.log(JSON.stringify(null))  // null
console.log(JSON.stringify(NaN))  // null
console.log(JSON.stringify(Infinity))  // null

можно увидетьnull,NaN,Infinityи т.д. сталиnull.

Давайте посмотрим на результат преобразования объекта-обертки

console.log(JSON.stringify(new String('str')))  // "str"
console.log(JSON.stringify(new Boolean(true)))  // true
console.log(JSON.stringify(new Number(1)))  // 1

Видно, что объекты-обертки строк, логических значений и чисел станут примитивными значениями при сериализации

метод toJSON()

Если мы преобразуем объект, чтобы иметьtoJSONЭтот метод, то возвращаемый результат определяется им:

let obj = {
  name:'zhangsan',
  toJSON:function(){
    return 'customize return value'
  }
}
console.log(JSON.stringify(obj))  // "customize return value"

Если отображаемое определениеtoJSONметод, но неreturnлюбой контент, то результатundefined

let obj = {
  name:'zhangsan',
  toJSON:function(){}
}
console.log(JSON.stringify(obj))  // undefined

Здесь может быть задействован другой тип объектаDate.если мы сериализуемDateтипа и что в результате?

console.log(JSON.stringify(new Date()))  // "2020-06-20T14:21:15.071Z"

Вы можете видеть, что выводится этот знакомый формат времени, потому чтоDateОбъекты типа имеют свои собственныеtoJSONреализация

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

let obj = Object.create({},{
  name:{
    value:'zhangsan',
    enumerable:false
  },
  age:{
    value:18,
    enumerable:true
  }
})
console.log(obj)  // {age: 18, name: "zhangsan"}
console.log(JSON.stringify(obj))  // {"age":18}

второй параметр

Пока что мы привели несколько примеровJSON.stringify()Использование .Многие думают, что на этом все, но это не так.Далее мы введем его второй параметр.

Если есть такой объект, он имеет различные атрибуты, такие как имя, пол, возраст и т. д. Но мы не хотим заботиться о другой его информации, мы просто хотим знать, каково его имя и значения других его атрибутов. не такие как теundefinedТо же самое бессмысленное значение, как мы можем его отфильтровать?

let obj = {
  name:'zhangsan',
  gender:'female',
  age:18,
  hobby:'swim'
}
console.log(JSON.stringify(obj,['age']))  // {"age":18}

В этот момент нам пригодится наш второй параметр.Мы передаем массив, и значения в этом массиве — это имена свойств, которые мы хотим сохранить, и не возвращать те, которых нет в этом массиве. Помимо передачи типа массива, мы также можем передать функцию.

let obj = {
  name:'zhangsan',
  gender:undefined,
  age:18,
  hobby:'swim'
}
console.log(JSON.stringify(obj, (key, value) => {
  if(typeof value === 'string'){
    return undefined
  }
  return value
}))  // {"age":18}

В функции мы делаем некоторые логические суждения. Когда значение атрибута является строкой, мы отфильтровываем его. Используя этот второй параметр, мы также можем изменить значение атрибута.undefined,symbolсвойства, которые в противном случае не были бы возвращены.

let obj = {
  name:'zhangsan',
  gender:undefined,
  age:18,
  hobby:'swim'
}
console.log(JSON.stringify(obj, (key, value) => {
  if(typeof value === 'string'){
    return undefined
  }
  if(typeof value === 'undefined'){
    return 'not any more undefined'
  }
  return value
}))  // {"gender":"not any more undefined","age":18}

объединить сноваtoString()Этот метод позволяет вывести конкретное содержимое функции:

let obj = {
  name:'zhangsan',
  f:function(){
    console.log('I\'m a function')
  }
}
console.log(JSON.stringify(obj, (key, value) => {
  if(typeof value === 'function'){
    return Function.prototype.toString.call(value)
  }
  return value
})) 
// {"name":"zhangsan","f":"function(){\n    console.log('I\\'m a function')\n  }"}

третий параметр

После разговора о втором параметре, давайте поговорим о третьем параметре. Да, вы правильно прочитали, у него также есть третий параметр. Основная функция этого параметра - украсить выходную строку json. С тремя параметрами строки, которые мы выводим переполнены, что не способствует просмотру, с его помощью мы можем отформатировать наш вывод:

let obj = {
  name:'zhangsan',
  age:18,
  gender:'female'
}
console.log(JSON.stringify(obj,null,2))  
/*{
     "name": "zhangsan",
     "age": 18,
     "gender": "female"
}*/

Если тип, переданный третьим параметром, является числом n, это означает, что каждый уровень имеет отступ на n пробелов больше, чем его предыдущий уровень, и максимальное значение n равно 10. Если тип, переданный третьим параметром, является строкой, строка будет добавлена ​​перед каждым уровнем, а максимальная длина строки также равна 10.

let obj = {
  name:'zhangsan',
  age:18,
  gender:'female'
}
console.log(JSON.stringify(obj,null,'😊'))  
/*{
😊"name": "zhangsan",
😊"age": 18,
😊"gender": "female"
}*/

Суммировать:До сих пор оJSON.stringify()Использование , мы в основном говорили об этом.Большинство точек знаний мы используем следующий рисунок для представления.

Категории