جاوا اسکریپت : آرایه‌ای از آبجکت را در چندین ستون یا key مرتب کنید

آفلاین
user-avatar
جواد غلامی
24 خرداد 1400, خواندن در 2 دقیقه

بیایید ببینیم که چگونه می‌توانیم مرتب‌ سازی یک آرایه از آبجکت را به طور کامل پیکربندی کنید. فرض کنید مجموعه داده‌های زیر را برای کل مثال خود داریم.

let objs = [
  { name: 'Mark',
    age: 30,
    RollNo: 'R01'
  },
  { name: 'Anne',
    age: 20,
    RollNo: 'R02'
  },
  { name: 'James',
    age: 40,
    RollNo: 'R03'
  },
  { name: 'Jerry',
    age: 30,
    RollNo: 'R04'
  },
  { name: 'Lucy',
    age: 30,
    RollNo: 'R05'
  },
  { name: 'Mark',
    age: 30,
    RollNo: 'R06'
  },
]

بررسی داده‌های خام با استفاده از 

console.table(objs)

۱.PNG

مرتب سازی در یک تک ستون

حال می‌خواهیم این داده‌ها را در یک ستون مرتب کنیم. بهترین روش برای انجام این کار روش sort() است. در زیر مثالی از یک آرایه ساده از رشته‌ها امده است:

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);

خروجی به اینصورت است :

["Dec", "Feb", "Jan", "March"]

در نظر داشته باشید که به صورت اتوماتیک آرایه اصلی را به ترتیب حروف الفبا مرتب می‌کند و آرایه اصلی را نیز با فراخوانی sort() برمی‌گرداند.

مرتب سازی در رشته

اجازه دهید با استفاده از مثال بالا‌، آبجکت خود را مرتب کنیم

objs.sort(function(a, b) {
    return a.name.localeCompare(b.name)
});

۲.PNG

 

شبیه طرز کار SQL.

SELECT * FROM OBJS ORDER BY NAME;

مرتب سازی بر اساس شماره (به روش ES6)

با ES6 می‌توانیم این کار را به صورت یک تابع inline بنویسیم. بیایید براساس عدد سن مرتب سازی کنیم.

objs.sort((a, b) => a.age - b.age);

۳.PNG

شبیه طرز کار SQL.

SELECT * FROM OBJS ORDER BY AGE;

مرتب سازی چند ستونی

ما می‌توانیم به ترتیب مرتب سازی مورد نیازمان، مرتب سازی را با استفاده از اپراتور || ترکیب کنیم.

مرتب سازی بر اساس نام، و سپس سن

objs.sort((a,b)=> (a.age - b.age || a.name.localeCompare(b.name)  ));

4.PNG

شبیه طرز کار SQL.

SELECT * FROM OBJS ORDER BY AGE, NAME; 

مرتب سازی بر اساس نام، و سپس سن(اصلاح)

ما می‌توانیم ترتیب نحوه مرتب سازی را اصلاح کنیم. این در صورتی است که بخواهیم ابتدا بر اساس نام و سپس سن طبقه بندی کنیم

objs.sort((a,b)=> (a.name.localeCompare(b.name) || a.age - b.age));

شبیه طرز کار SQL.

SELECT * FROM OBJS ORDER BY NAME, AGE; 

تغییرات به ترتیب نزولی

اگر می‌خواستیم سن و نام به ترتیب نزولی باشد‌، فقط باید دستور بالا را با کد زیر عوض کنیم

objs.sort((a,b)=> (b.age - a.age || b.name.localeCompare(a.name)  ));

5.PNG

شبیه طرز کار SQL.

SELECT * FROM OBJS ORDER BY NAME DESC, AGE DESC; 

برای مرتب سازی هر 3 ستون را گسترش دهید

با استفاده از منطق ذکر شده می‌توانید تعداد ستونی را که به ترتیب نیاز دارید را مرتب سازی کنید.

objs.sort((a,b)=> (a.name.localeCompare(b.name) || a.age - b.age || a.RollNo - b.RollNo));

۴.PNG

شبیه طرز کار SQL.

SELECT * FROM OBJS ORDER BY NAME , AGE , ROLLNO; 

موارد کاربرد

اگر شما یک API دارید که یک آرایه از آبجکت را به صورت تصادفی برمی‌گرداند. یا مثلا شاید شما یک جدول در رابط کاربری خود داشته باشید و بخواهید داده‌ها را به گونه‌ای مرتب کنید که بیشترین کاربرد را برای کاربر شما داشته باشد (مرتب سازی بر اساس برخی دسته‌ها یا شاید قیمت‌ها). تمام کاری که شما باید انجام دهید این است که منطق ذکر شده را تغییر دهید و تمام!

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
جواد غلامی @gholamuuuu
جواد هستم طراح و توسعه دهنده وب. مهندسی برق می خونم
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو