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]

[كائن الكائن] ليس بالضبط ما أردنا رؤيته ، أليس كذلك؟

لا تسأل لماذا نستخدم 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'
    }
]

... ونريد أن نرى أيًا من المستخدمين هو المسؤول (يمتلك المشرف خاصية "الوصول").

إذا استخدمنا console.log (JSON.stringify (المستخدمين)) ، نحصل على ما يلي:

[{"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 (المستخدمين):



... لكننا نتحدث عن JSON.stringify () ، لذلك لا نتشتت انتباهنا. المثال ليس جيدًا جدًا ، لكن أعتقد أن الفكرة واضحة.

2. استخدام دالة كوسيطة ثانية


تقوم الدالة بتقييم كل زوج من قيم المفاتيح كوسيطة ثانية للتشفير وفقًا لمنطق هذه الوظيفة. إذا عدنا غير محدد ، فلن يتم عرض زوج قيمة المفتاح المقابل. مثال:

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

نحصل على ما يلي:



شكرا لكم على اهتمامكم.

الترميز سعيدة!

All Articles