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

در استاندارد ES2017 سه نسخه مختلف از تبدیل شیء به آرایه وجود دارد. در این نوشته روش‌های مختلف تبدیل شیء به آرایه در جاوا اسکریپت را توضیح می‌دهیم. آرایه‌ها متدهای زیادی دارند و با تبدیل کردن شیء به آرایه به همه آن‌ها دسترسی پیدا می‌کنیم:

1const zoo = {
2  lion: '?',
3  panda: '?'
4};Object.keys(zoo)
5// ['lion', 'panda']Object.values(zoo)
6// ['?', '?']Object.entries(zoo)
7// [ ['lion', '?'], ['panda', '?'] ]

تا پیش از این تعریف حلقه روی اشیا کار چندان آسانی نبود. برای مثال زمانی که می‌خواستیم یک object را به یک Array تبدیل کنیم، باید به صورت زیر عمل می‌کردیم:

1var numbers = {
2  one: 1,
3  two: 2
4};var keys = [];for (var number in numbers) {
5  if(numbers.hasOwnProperty(number)){
6    keys.push(number)
7  }
8}keys; // [ 'one', 'two' ]

چنان که مشاهده می‌کنید، این روش چندان بهینه نیست.

متد Object.keys در ES6

با معرفی ES6 در نهایت روش آسان‌تری برای این منظور پیدا شد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

بدین ترتیب یک متد داخلی وجود داشت که به سرعت همه کلیدها را در شیء به یک ارائه تبدیل می‌کرد:

1const numbers = {
2  one: 1,
3  two: 2
4}Object.keys(numbers);
5// [ 'one', 'two' ]

اما اینک سؤال این بود که چرا فقط باید کلیدها را استخراج کنیم و چرا به مقادیر آن‌ها دسترسی نداشته باشیم؟ این نقیصه نیز در ES2017 رفع شده است.

متد Object.values در ES2017

با معرفی متد Object.values در نسخه 2017 این استاندارد از جاوا اسکریپت، هم اکنون می‌توانیم مقادیر را با یک متد در آرایه استخراج کنیم:

1const numbers = {
2  one: 1,
3  two: 2
4}Object.values(numbers);
5// [ 1, 2 ]

متد Object.entries در ES2017

علاوه بر متد فوق در نسخه ES2017 یک متد دیگر نیز معرفی شد که هم کلیدها و هم مقادیر را همزمان استخراج می‌کند:

1const numbers = {
2  one: 1,
3  two: 2
4}Object.entries(numbers);
5// [ ['one', 1], ['two', 2] ]

همچنین می‌توان از آن برای استخراج اشیا به آرایه‌های تو در تو استفاده کرد. به کد زیر توجه کنید:

1const numbers = {
2  one: 1
3};const objectArray = Object.entries(numbers);
4
5objectArray.forEach(([key, value]) => {
6  console.log(key); // 'one'
7  console.log(value); // 1
8})

متدهای اشیایی که در این مقاله معرفی کردیم، موجب سهولت زیادی در کار برنامه نویسان جاوا اسکریپت شده‌اند. Object.keys پشتیبانی خوبی در میان مرورگرها دارد، یعنی حتی از اینترنت اکسپلورر نیز پشتیبانی می‌کند. اما دو متد دیگر یعنی Object.values و Object.entries متأسفانه از اینترنت اکسپلورر پشتیبانی نمی‌کنند. با این حال می‌توان از polyfill برای رفع این مشکل استفاده کرد.

روش استفاده از این پلی‌فیل ها به صورت زیر است:

• MDN: Object.keys (+)
• MDN: Object.values (+)
• MDN: Object.entries (+)

سؤال بعدی شما اینک شاید این باشد که چگونه می‌توانیم آرایه را مجدداً به یک شیء تبدیل کنیم. به این منظور نیز متدی وجود دارد و نام آن Object.fromEntries است. در واقع این متد متضاد Object.entries است.

1const array = [
2  [ 'one', 1 ],
3  [ 'two', 2 ]
4];
5
6Object.fromEntries(array);
7// { one: 1, two: 2 }

توجه کنید که متد اخیر بسیار جدید است و از این رو پشتیبانی بسیار محدودی دارد. از این متد آگاه باشید اما برای استفاده از آن باید کمی صبر کنید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش JavaScript ES6 (جاوا اسکریپت)
• کاربرد کوکی در جاوا اسکریپت — از صفر تا صد
• آشنایی با مفهوم Hoisting در جاوا اسکریپت — به زبان ساده

==