تبدیل اشیا به آرایه و برعکس در جاوا اسکریپت — به زبان ساده

۴۳۶ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۴ دقیقه
تبدیل اشیا به آرایه و برعکس در جاوا اسکریپت — به زبان ساده

اگر تاکنون با مجموعه داده‌ها و به طور خاص API-های مبتنی بر وب کار کرده باشید، حتماً تا به حال با «نمادگذاری شیئ جاوا اسکریپت» (JavaScript Object Notation) یا به اختصار JSON سر و کار یافته‌اید. این نمادگذاری یک جایگزین سبک‌تر XML است که در پایگاه‌های داده مبتنی بر سند مانند MongoDB مورد استفاده قرار می‌گیرد. در عمل JSON همه جا حضور دارد. در این راهنما با روش تبدیل اشیا به آرایه و برعکس در جاوا اسکریپت آشنا خواهیم شد.

بدین ترتیب متدهای داخلی موجود در کلاس Object جاوا اسکریپت که یک شیء را گرفته و به آرایه تبدیل می‌کنند و یا برعکس عمل می‌کنند می‌شناسیم. پیش از پرداختن به این موضوع به بررسی JSON می‌پردازیم تا مطمئن شویم که با ساختار آن آشنا هستیم.

مروری بر JSON

دو نوع داده‌ای که موجب شده‌اند JSON چنین انعطاف‌پذیر باشد، شیء و آرایه هستند. این دو، انواع داده‌ پیچیده‌ای هستند که چندین مقدار را نگهداری می‌کنند و از این نظر با انواع داده ابتدایی که یک مقدار را ذخیره می‌سازند متفاوت هستند.

  • شیءها مجموعه نامرتبی از جفت‌های کلید-مقدار هستند. کلید یک شناسه متنی است که باید درون شیء، یکتا باشد. مقدار می‌تواند یک نوع داده ابتدایی و یا یک مقدار داده پیچیده باشد.
  • آرایه‌ها لیست مرتبی از مقادیر هستند که به شناسه یکتا نیاز ندارند و می‌توانند شامل انواع داده مختلفی باشند. موقعیت مقادیر در لیست به نام اندیس خوانده می‌شود که از صفر آغاز می‌شود، یعنی آیتم نخست در آرایه دارای اندیس 0 است.

مجموعه داده‌های پیچیده می‌توانند شامل آرایه‌ای از اشیا یا اشیایی که مقدار آرایه (و یا حتی شیء دیگر) دارند باشند. هر زمان که ساختمان داده پیچیده‌ای درون یک ساحتمان داده پیچیده قرار گیرد، از این وضعیت به صورت «تودرتو سازی» (Nesting) یاد می‌کنیم.

اینک که به صورت فشرده با JSON آشنا شدیم، به موضوع اصلی مقاله بازمی‌گردیم.

تبدیل یک شیئ به یک آرایه

زمانی که یک شیئ را به یک آرایه تبدیل می‌کنیم از متد ()entries. در کلاس Object بهره خواهیم گرفت. بدین ترتیب شیئ ما به یک آرایه از آرایه‌ها تبدیل می‌شود. هر آرایه تودرتو یک لیست دو مقداری است که آیتم نخست کلید و آیتم دوم شامل مقدار است.

1let character = {
2   "first_name": "Locke",
3   "last_name": "Cole",
4   "job": "Treasure Hunter"
5}
6let arr = Object.entries(character);
7console.log(arr);
8/*
9[
10  ["first_name","Locke"],
11  ["last_name","Cole"],
12  ["job","Treasure Hunter"]
13]
14*/

اما این متد در زمان تبدیل اشیای پیچیده‌ای که خود شامل شیءها و یا آرایه‌های تودرتو هستند چگونه عمل می‌کند؟ بهترین راه تست عملی آن است:

1let obj = {
2  "name": "Rean Schwarzer",
3  "occupations": [
4    "Student (graduated)",
5    "Resistance Leader",
6    "New Class VII Instructor"
7  ],
8  "parents": {
9    "father": "Teo",
10    "mother": "Lucia"
11  }
12}
13let entries = Object.entries(obj);
14console.log(entries);
15/*
16[
17  ["name", "Rean Schwarzer"],
18  [
19    "occupations", [
20      "Student (graduated)",
21      "Resistance Leader",
22      "New Class VII Instructor"
23    ]
24  ],
25  [
26    "parents", {
27      father: "Teo",
28      mother: "Lucia"
29    }
30  ]
31]
32*/

توجه کنید که آرایه یا شیء تودرتو در لیست دو آیتمی به مقدار دوم تبدیل می‌شود. این متد اشیای تودرتو را به صورت بازگشتی به آرایه تبدیل نمی‌کند. تنها سطح فوقانی تبدیل خواهد شد.

تبدیل یک آرایه به یک شیئ

قبلاً تبدیل یک شیئ به یک آرایه با استفاده از متدهای داخلی جاوا اسکریپت در کلاس Object یک مسیر یک طرفه محسوب می‌شد و امکان تبدیل معکوس وجود نداشت.

با این حال از نسخه ES2019/ES10 به بعد، متد ()fromEntries. معرفی شده است که یک آرایه از آرایه دو آیتمی را به یک شیئ تبدیل می‌کند و عملاً معکوس متد ()entries است. برای بررسی عملی آن کار را با یک مثال ساده آغاز می‌کنیم. نتیجه قابل پیش‌بینی است:

1let scores = [
2  ["Tim", 90],
3  ["Joe", 88],
4  ["Kelly", 95],
5  ["Jesse", 77]
6]
7let obj = Object.fromEntries(scores);
8console.log(obj);
9/*
10{
11  Jesse: 77,
12  Joe: 88,
13  Kelly: 95,
14  Tim: 90
15}
16*/

اما در مورد ساحتمان داده پیچیده چطور؟

1let arr = [
2  ["name", "Rean Schwarzer"],
3  [
4    "occupations", [
5      "Student (graduated)",
6      "Resistance Leader",
7      "New Class VII Instructor"
8    ]
9  ],
10  [
11    "parents", {
12      father: "Teo",
13      mother: "Lucia"
14    }
15  ]
16];
17let obj = Object.fromEntries(arr);
18console.log(obj);
19/*
20{
21  name: "Rean Schwarzer",
22  occupations: [
23    "Student (graduated)",
24    "Resistance Leader",
25    "New Class VII Instructor"
26  ],
27  parents: {
28    father: "Teo",
29    mother: "Lucia"
30  }
31}

همانند متد ()entries این متد نیز تنها آرایه سطح فوقانی را تبدیل می‌کند. آرایه‌های در عمق بیشتر و اشیا به همان صورت ارسال می‌شوند. اینک سؤال این است که اگر آرایه ما به درستی قالب‌بندی نشده باشد چه اتفاقی رخ می‌دهد؟ اگر آرایه‌ یک مقدار ابتدایی یا یک شیء داشته باشد چه می‌شود؟ اگر یک آرایه تودرتو کمتر از دو آیتم داشته باشد چطور؟ اگر آرایه تودرتو بیش از دو آیتم باشد چه اتفاقی رخ خواهد داد. در ادامه این سناریوها را بررسی می‌کنیم:

1// Non-array value
2let arr = [
3  ["first_name","Jonathan"],
4  "Arthur",
5  ["last_name","Hsu"]
6]
7let obj = Object.fromEntries(arr);
8console.log(obj);
9// "TypeError: Iterator value Arthur is not an entry object

زمانی که یک شیء non-entry را ارسال می‌کنیم، متد یک خطای TypeError بازگشت می‌دهد.

1// Nested array item has less than two items
2let arr = [
3  ["first_name","Jonathan"],
4  ["middle_name"],
5  ["last_name","Hsu"],
6  []
7]
8let obj = Object.fromEntries(arr);
9console.log(obj);
10/*
11{
12  first_name: "Jonathan",
13  last_name: "Hsu",
14  middle_name: undefined,
15  undefined: undefined
16}
17*/

اگر آرایه تودرتو خالی باشد، یعنی آیتمی نداشته باشد، جفت کلید-مقدار حاصل به صورت undefined: undefined خواهد بود، در حالی که با آرایه تودرتو با یک آیتم منفرد به صورت یک جفت کلید-مقدار با یک مقدار تعریف‌نشده رفتار می‌شود.

1// Nested array item has more than two items
2let arr = [
3  ["first_name","Jonathan"],
4  ["middle_name","Arthur","Jones"],
5  ["last_name","Hsu"]
6]
7let obj = Object.fromEntries(arr);
8console.log(obj);
9/*
10{
11  first_name: "Jonathan",
12  last_name: "Hsu",
13  middle_name: "Arthur"
14}
15*/

همچنین زمانی که آرایه تودرتو بیش از دو آیتم داشته باشد، آیتم‌های مازاد نادیده گرفته می‌شوند.

اگر این مطلب برای شما مفید بوده است، آموزش‌ها و مطالب زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
better-programming
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *