5 малоизвестных возможностей JSON.stringify()

Доброго времени суток, друзья!

В этой небольшой заметке я хочу рассказать вам о некоторых редко используемых возможностях JSON.stringify(). Возможно, они окажутся вам полезными.

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

// создаем объект user
const user = {
    name: 'Harry Heman',
    age: 29,
    job: 'developer'
}

// преобразуем объект в строку, используя стандартный метод toString(), и выводим результат в консоль
console.log(user.toString()) // [object Object]

[object Object] — это не совсем то, что мы хотели увидеть, не правда ли?

Не спрашивайте, зачем мы вообще используем toString(). Предположим, что нам жизненно необходимо перевести объект в строку.

Теперь попробуем использовать JSON.stringify():

console.log(JSON.stringify(user)) // {"name":"Harry Heman","age":29, "job": "developer"}

Мы сделали это, Карл!

Однако возможности JSON.stringify() этим не исчерпываются.

1. Использование массива в качестве второго аргумента

Вы не ослышались, функция stringify может иметь второй аргумент. Этим аргументом является массив ключей объекта, который мы хотим отобразить в консоли. Допустим, у нас есть такой массив объектов:

let users = [
    {
        id: 1,
        login: 'harry',
        password: 'qwerty',
        status: 'admin',
        access: true
    },
    {
        id: 2,
        login: 'alice',
        password: 'qwerty',
        status: 'user'
    },
    {
        id: 3,
        login: 'bob',
        password: 'qwerty',
        status: 'user'
    },
    {
        id: 4,
        login: 'john',
        password: 'qwerty',
        status: 'user'
    },
    {
        id: 5,
        login: 'jane',
        password: 'qwerty',
        status: 'user'
    }
]

… и мы хотим увидеть, кто из пользователей является админом (у админа есть свойство «access»).

Если мы используем console.log(JSON.stringify(users)), то получим следующее:

[{"id":1,"login":"harry","password":"qwerty","status":"admin", "access": true},{"id":2,"login":"alice","password":"qwerty","status":"user"},{"id":3,"login":"bob","password":"qwerty","status":"user"},{"id":4,"login":"john","password":"qwerty","status":"user"},{"id":5,"login":"jane","password":"qwerty","status":"user"}]

Согласитесь, не очень читабельно.

Теперь попробуем сделать следующее:

console.log(JSON.stringify(users, ['id', 'access'])) // [{"id":1,"access":true},{"id":2},{"id":3},{"id":4},{"id":5}]

Так намного лучше.

Справедливости ради надо отметить, что в данном случае мы могли бы использовать console.table(users):



… но мы говорим о JSON.stringify(), поэтому не отвлекаемся. Пример не очень хороший, но, думаю, идея понятна.

2. Использование функции в качестве второго аргумента

Функция в качестве второго аргумента stringify оценивает каждую пару ключ-значение согласно логике данной функции. Если мы возвращаем undefined, то соответствующая пара ключ-значение не отображается. Пример:

const result = JSON.stringify(users, (key, value) => {
    if (typeof value === 'string') return undefined

    return value
})

console.log(result) // [{"id":1,"access":true},{"id":2},{"id":3},{"id":4},{"id":5}]

3. Использование числа в качестве третьего параметра

Третий аргумент отвечает за пробелы. Если таким аргументом является число, то каждый уровень строки будет иметь соответствующий отступ:

console.log(JSON.stringify(user, null, 2))

Получаем следующее:

{
  "name": "Harry Heman",
  "age": 29,
  "job": "developer"
}

4. Использование строки в качестве третьего аргумента

Если третьим параметром является строка, то вместо пробелов будут использованы символы этой строки:

console.log(JSON.stringify(user, null, '->'))

Получаем следующее:

{
->"name": "Harry Heman",
->"age": 29,
->"job": "developer"
}

5. Метод toJSON

Метод toJSON может быть свойством любого объекта. JSON.stringify() возвращает результат этой функции без преобразования всего объекта:

const user = {
    first: 'Harry',
    last: 'Heman',
    age: 29,
    toJSON(){
        return {
            full: `${this.first} ${this.last}`
        }
    }
}

console.log(JSON.stringify(user)) // "full": "Harry Heman"

Бонус

Кроме JSON.stringify() и toJSON(), существует также метод json(), возвращающий обещание (промис). Данный метод используется в запросах на сервер.

Пример использования:

const url = 'https://jsonplaceholder.typicode.com/users'

asyncAwaitFetch()
async function asyncAwaitFetch(){
    try {
        const response = await fetch(url)
        const data = await response.json()
        console.table(data)
    } catch (error){
        console.error(error)
    } finally {
        console.log('потрачено')
    }
}

Получаем следующее:



Благодарю за внимание.

Счастливого кодинга!