Kaedah JavaScript ew ini adalah pengubah permainan!

Pada Julai 2023, ECMAScript mengeluarkan beberapa spesifikasi baharu untuk JavaScript. Beberapa ciri termasuk kaedah Tatasusunan baharu yang tidak mengubah suai tatasusunan sedia ada. Dalam blog ini, kita akan bercakap tentang tiga daripada mereka (satu dari 2024) yang mesti anda ketahui jika anda ingin mengetahui perkembangan terkini dengan aliran terkini dalam Web dan JavaScript !

Array.toSorted()

Array.sort() asal mengisih elemen tatasusunan di tempat. Kadang-kadang anda mungkin tidak mahu tingkah laku ini. Dalam pengaturcaraan, secara amnya adalah amalan yang baik untuk mengelak daripada mengubah suai nilai sedia ada dan sebaliknya mengembalikan versi baharu.

Array.toSorted() menyelesaikan masalah ini dengan mengembalikan tatasusunan baharu dengan elemen yang diisih seperti yang diterangkan dalam fungsi panggil balik!

Saya amat menggemari ciri ini kerana saya sudah mula menggunakannya dalam kod saya lama sebelum VSCode dan pelayar web mendapat sokongan yang sewajarnya!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() ialah penambahan baharu yang menyediakan cara yang tidak berubah untuk membalikkan tatasusunan. Tidak seperti Array.reverse(), yang mengubah suai tatasusunan asal, Array.toReversed() mengembalikan salinan terbalik tatasusunan, meninggalkan asal tidak berubah.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() menawarkan cara yang tidak merosakkan untuk mengalih keluar, menggantikan atau menambah elemen dalam tatasusunan. Traditional Array.splice() mengubah suai tatasusunan secara langsung, tetapi Array.toSpliced() mencipta tatasusunan baharu dengan perubahan yang digunakan, meninggalkan tatasusunan asal tidak berubah. Ini boleh memberi manfaat apabila anda perlu menggunakan perubahan tanpa menjejaskan data sumber.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Object.groupBy()

Kaedah ini dikeluarkan secara rasmi pada ES2024, tetapi masih tersedia sebelum ini dengan polyfill dan telah pun maju ke peringkat ECMAScript yang lebih baru.

Object.groupBy() mengumpulkan item tatasusunan yang diberikan berdasarkan sifat objek tertentu. Ini amat berguna dan boleh menjadi sangat berguna apabila anda ingin mengumpulkan senarai objek tertentu dan kemudian mengulanginya dengan sewajarnya dalam struktur nilai kunci. Fakta menarik tentang kaedah ini ialah ia tidak dilaksanakan sebagai kaedah prototaip tatasusunan kerana isu keserasian web. (Banyak perpustakaan JavaScript lama telah melaksanakan beberapa kod dalam ruang nama Array.prototype.group(), itulah sebabnya!)

BONUS: Melaksanakan Object.groupBy() anda sendiri kepada kumpulan dengan berbilang elemen

Akhirnya, anda juga mungkin perlu mengumpulkan mengikut berbilang sifat. Kumpulan Object.groupBy() asal pada satu tahap sahaja.

Laksanakan kod di bawah dalam projek anda untuk mengumpulkan elemen mengikut berbilang sifat!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

Contoh:

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Akhir!

Sekiranya anda telah sampai ke penghujung artikel ini, Terima kasih banyak kerana membaca! ?

Atas ialah kandungan terperinci Kaedah JavaScript ew ini adalah pengubah permainan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!