🚗 🕒 👨‍🚒 5 fitur JSON.stringify yang kurang dikenal () 💤 🚶🏽 👩🏾‍💻

Selamat siang teman!

Dalam artikel singkat ini, saya ingin memberi tahu Anda tentang beberapa fitur JSON.stringify () yang jarang digunakan. Mereka mungkin bermanfaat bagi Anda.

JSON.stringify () sering digunakan selama debugging untuk mengonversi objek atau string biasa menjadi string dalam format JSON. Tetapi bagaimana metode ini digunakan, dan bisakah kita menyiasati toString ()? Mari kita coba melakukannya.

//   user
const user = {
    name: 'Harry Heman',
    age: 29,
    job: 'developer'
}

//    ,    toString(),     
console.log(user.toString()) // [object Object]

[objek Obyek] bukan apa yang ingin kita lihat, kan?

Jangan tanya mengapa kita menggunakan toString () sama sekali. Misalkan kita perlu menerjemahkan suatu objek menjadi string.

Sekarang coba gunakan JSON.stringify ():

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

Kami berhasil, Carl!

Namun, kemungkinan JSON.stringify () tidak terbatas pada ini.

1. Menggunakan array sebagai argumen kedua

Anda dengar benar, fungsi stringify mungkin memiliki argumen kedua. Argumen ini adalah array kunci dari objek yang ingin kita tampilkan di konsol. Katakanlah kita memiliki sejumlah objek:

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

... dan kami ingin melihat pengguna mana yang merupakan admin (admin memiliki properti "akses").

Jika kami menggunakan console.log (JSON.stringify (pengguna)), kami mendapatkan yang berikut:

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

Setuju, tidak terlalu mudah dibaca.

Sekarang coba yang berikut ini:

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

Jauh lebih baik.

Dalam keadilan, perlu dicatat bahwa dalam hal ini kita dapat menggunakan console.table (pengguna):

... tetapi kita berbicara tentang JSON.stringify (), jadi kita tidak terganggu. Contohnya tidak terlalu bagus, tapi saya pikir idenya jelas.

2. Menggunakan fungsi sebagai argumen kedua

Fungsi mengevaluasi setiap pasangan nilai kunci sebagai argumen kedua untuk dirangkai sesuai dengan logika fungsi ini. Jika kami mengembalikan tidak terdefinisi, maka pasangan nilai kunci yang sesuai tidak ditampilkan. Contoh:

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. Menggunakan angka sebagai parameter ketiga

Argumen ketiga bertanggung jawab untuk spasi. Jika argumen ini adalah angka, maka setiap level baris akan memiliki indent yang sesuai:

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

Kami mendapatkan yang berikut ini:

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

4. Menggunakan string sebagai argumen ketiga

Jika parameter ketiga adalah string, maka karakter string ini akan digunakan sebagai ganti spasi:

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

Kami mendapatkan yang berikut ini:

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

5. metode toJSON

Metode toJSON dapat menjadi properti dari objek apa pun. JSON.stringify () mengembalikan hasil fungsi ini tanpa mengonversi seluruh objek:

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

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

Bonus

Selain JSON.stringify () dan toJSON (), ada juga metode json () yang mengembalikan janji (janji). Metode ini digunakan dalam permintaan server.

Contoh penggunaan:

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('')
    }
}

Kami mendapatkan yang berikut:

Terima kasih atas perhatian Anda.

Selamat coding!