روشهای آرایه JavaScript: مرتب سازی ، نقشه ، فیلتر و کاهش

آرایه های JavaScript سنگ بنای توسعه وب مدرن است و ابزارهای قوی برای مدیریت و دستکاری داده ها ارائه می دهد. در میان این ابزارها ، روشها sortبا mapبا filterوت reduce متمایز از همه کاره بودن و قدرت آنها. در این مقاله ، ما این روش ها را با جزئیات بررسی خواهیم کرد و توضیحات و نمونه های عملی را برای تعمیق درک شما ارائه می دهیم.

1 array.prototype.sort

در sort روش بر اساس یک ترتیب مشخص ، عناصر یک آرایه را سازماندهی می کند. به طور پیش فرض ، این عناصر را به عنوان رشته هایی به ترتیب واژگان شناسی مرتب می کند. با این حال ، با یک عملکرد مقایسه سفارشی ، می توانید منطق مرتب سازی پیشرفته را پیاده سازی کنید.

نحو

array.sort([compareFunction])

• compareFunction: تابعی که ترتیب مرتب سازی را تعریف می کند. دو استدلال (الف ، ب) طول می کشد و باز می گردد:
  • یک مقدار منفی اگر a باید قبل بیاید bبشر
  • صفر اگر a وت b معادل هستند
  • یک مقدار مثبت اگر a باید بعد از bبشر

مثال: مرتب سازی اعداد به ترتیب صعودی

const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers);
// Output: [7, 19, 23, 42, 73]

مثال: مرتب سازی اشیاء بر اساس خاصیت

const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books);
// Output: [
//   { title: 'Book B', year: 1998 },
//   { title: 'Book A', year: 2001 },
//   { title: 'Book C', year: 2015 }
// ]

• در sort روش آرایه اصلی را اصلاح می کند.
• برای جلوگیری از نتایج غیر منتظره ، همیشه یک تابع مقایسه را برای مرتب سازی عددی یا پیچیده ارائه دهید.

2 array.prototype.map

در map روش با استفاده از یک تابع ارائه شده به هر عنصر از آرایه اصلی ، یک آرایه جدید ایجاد می کند. معمولاً برای تبدیل داده ها استفاده می شود.

نحو

array.map(callback(element, index, array))

• callback: تابعی که روی هر عنصر اجرا می شود ، دریافت می کند:
  • عنصر فعلی
  • شاخص آن
  • آرایه اصلی

مثال: تغییر مجموعه ای از اعداد

const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map(num => num ** 2);

console.log(squares);
// Output: [1, 4, 9, 16, 25]

مثال: قالب بندی داده ها

const users = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Smith' }
];

const fullNames = users.map(user => `${user.firstName} ${user.lastName}`);

console.log(fullNames);
// Output: ['John Doe', 'Jane Smith']

• کار با آرایه های پراکنده: map روش پاسخ به تماس برای هر شاخص ، از جمله مواردی که هستند ، انجام می شود undefined در آرایه های پراکنده به عنوان مثال:

  const sparseArray = [1, , 3]; // Sparse array with a missing element
  const result = sparseArray.map(x => x || 0);
  console.log(result);
  // Output: [1, 0, 3]

• ساختار آرایه را حفظ می کند: حتی اگر برخی از عناصر باشند undefined یا حذف شد ، map ساختار آرایه اصلی را حفظ می کند:

  const array = [10, undefined, 30];
  const doubled = array.map(x => (x !== undefined ? x * 2 : x));
  console.log(doubled);
  // Output: [20, undefined, 60]

• map غیر مخرب است ؛ این یک آرایه جدید را بدون اصلاح اصل باز می گرداند.
• این ایده آل برای تبدیل ساختارهای داده است. در map روش با استفاده از یک تابع ارائه شده به هر عنصر از آرایه اصلی ، یک آرایه جدید ایجاد می کند. معمولاً برای تبدیل داده ها استفاده می شود.

3 array.prototype.filter

در filter روش آرایه جدیدی را ایجاد می کند که فقط عناصری را برآورده می کند که یک شرط خاص را برآورده می کند. این اغلب برای استخراج زیر مجموعه های داده استفاده می شود.

نحو

array.filter(callback(element, index, array))

• callback: تابعی که تعیین می کند که آیا یک عنصر باید گنجانده شود (بازده true) یا حذف شده (بازده false).

مثال: فیلتر کردن حتی اعداد

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(num => num % 2 === 0);

console.log(evens);
// Output: [2, 4, 6]

مثال: فیلتر کردن اشیاء به شرط

const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 500 }
];

const expensiveProducts = products.filter(product => product.price > 700);

console.log(expensiveProducts);
// Output: [
//   { name: 'Laptop', price: 1200 },
//   { name: 'Phone', price: 800 }
// ]

• آرایه های پراکنده: برخلاف mapبا filter پرش از دست رفته یا undefined عناصر موجود در آرایه های پراکنده کاملاً. به عنوان مثال:

  const sparseArray = [1, , 3];
  const filtered = sparseArray.filter(x => x !== undefined);
  console.log(filtered);
  // Output: [1, 3]

• از بین بردن مقادیر فال: به راحتی می توانید تمام مقادیر فالسی را حذف کنید (به عنوان مثال ، falseبا 0با nullبا undefinedبا NaNبا "") با استفاده از Boolean سازنده به عنوان پاسخ به تماس:

  const mixedArray = [0, "hello", false, 42, undefined, "world", null];
  const truthyValues = mixedArray.filter(Boolean);
  console.log(truthyValues);
  // Output: ["hello", 42, "world"]

• filter آرایه اصلی را تغییر نمی دهد.
• این یک ابزار قدرتمند برای استخراج داده های مربوطه یا تمیز کردن آرایه ها است.

4 array.prototype.reduce

در reduce روش یک تابع را در برابر باتری و هر عنصر آرایه (از چپ به راست) اعمال می کند تا آن را به یک مقدار واحد کاهش دهد.

نحو

array.reduce(callback(accumulator, currentValue, index, array), initialValue)

• callback: تابعی که بر روی هر عنصر اجرا می شود ، با پارامترها:
  • باتری
  • عنصر فعلی
  • شاخص عنصر فعلی.
  • آرایه اصلی

• initialValue: مقدار اولیه باتری (اختیاری اما توصیه می شود).

مثال: جمع بندی اعداد

const numbers = [10, 20, 30, 40];

const total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total);
// Output: 100

مثال: گروه بندی داده ها توسط خاصیت

const people = [
  { name: 'Mike', age: 25 },
  { name: 'Larry', age: 30 },
  { name: 'Charlie', age: 25 }
];

const groupedByAge = people.reduce((acc, person) => {
  if (!acc[person.age]) {
    acc[person.age] = [];
  }
  acc[person.age].push(person.name);
  return acc;
}, {});

console.log(groupedByAge);
// Output: {
//   25: ['Mike', 'Charlie'],
//   30: ['Larry']
// }

• آرایه های چند بعدی مسطح: می توانید استفاده کنید reduce برای صاف کردن آرایه های تو در تو به یک آرایه واحد:

  const nestedArray = [[1, 2], [3, 4], [5, 6]];
  const flattened = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
  console.log(flattened);
  // Output: [1, 2, 3, 4, 5, 6]

• اجرای تحولات نقشه/فیلتر مانند: در بعضی موارد ، reduce آیا می تواند رفتار را تقلید کند map یا filter در حین ترکیب چندین تحول در یک پاس واحد:

  const numbers = [1, 2, 3, 4, 5];
  const transformed = numbers.reduce((acc, num) => {
    if (num % 2 === 0) {
      acc.push(num * 2); // Double even numbers
    }
    return acc;
  }, []);
  console.log(transformed);
  // Output: [4, 8]

• reduce بسیار انعطاف پذیر ، قادر به تولید آرایه ها ، اشیاء یا مقادیر واحد است.
• این یک ابزار قدرتمند برای تحولات سفارشی ، جمع آوری داده ها و موارد دیگر است.
• همیشه مقدار اولیه را برای پیش بینی بهتر ارائه دهید.

ترکیب روشها

بیایید داده های فروش را تجزیه و تحلیل کنیم و کل درآمد حاصل از معاملات با ارزش بالا را تعیین کنیم ، با توجه به اینکه چگونه روش های ترکیبی مانند mapبا filterوت reduce می تواند برای عملکرد بهینه شود. به عنوان مثال ، هنگام کار با مجموعه داده های بزرگ ، می توان با زنجیر کردن منطق در یک واحد از تکرارهای متعدد جلوگیری کرد reduce عملیات این امر سربار را کاهش می دهد و می تواند در هنگام برخورد با سناریوهای در زمان واقعی یا محدود شده منابع مفید باشد.

const sales = [
  { product: 'Laptop', price: 1500, quantity: 2 },
  { product: 'Phone', price: 800, quantity: 5 },
  { product: 'Tablet', price: 500, quantity: 10 }
];

// Step 1: Calculate revenue for each product
const revenues = sales.map(sale => ({
  product: sale.product,
  revenue: sale.price * sale.quantity
}));

// Step 2: Filter high-revenue products
const highRevenue = revenues.filter(item => item.revenue > 3000);

// Step 3: Calculate total revenue
const totalHighRevenue = highRevenue.reduce((sum, item) => sum + item.revenue, 0);

console.log(revenues);
// Output: [
//   { product: 'Laptop', revenue: 3000 },
//   { product: 'Phone', revenue: 4000 },
//   { product: 'Tablet', revenue: 5000 }
// ]

console.log(highRevenue);
// Output: [
//   { product: 'Phone', revenue: 4000 },
//   { product: 'Tablet', revenue: 5000 }
// ]

console.log(totalHighRevenue);
// Output: 9000

پایان

جاوا اسکریپت sortبا mapبا filterوت reduce روشها برای دستکاری داده های کارآمد و ظریف ضروری هستند. درک مکانیک و برنامه های آنها به توسعه دهندگان این امکان را می دهد تا کد تمیزتر و قابل حفظ تر را بنویسند. آزمایش با این روش ها مهارت های برنامه نویسی شما را تقویت می کند!