Susun pelbagai objek dalam JavaScript dengan kaedah jenis ()

Kaedah JavaScript Native

juga boleh menyusun tatasusunan objek dengan mudah! Artikel ini akan menunjukkan cara menyusun tatasusunan objek yang mengandungi rentetan, nombor, dan tarikh menggunakan kaedah Array.sort, dan memberikan petua praktikal untuk mengendalikan kepekaan kes, penyalinan array, dan perpustakaan umum. Array.sort

mata teras

Kaedah JavaScript's Native
• boleh digunakan untuk menyusun tatasusunan objek, menggunakan fungsi perbandingan untuk menentukan logik penyortiran untuk rentetan, nombor, tarikh, dan sifat lain. Array.sort
Fungsi perbandingan dalam JavaScript mengembalikan nombor untuk menentukan urutan jenis. Jika integer kurang daripada 0, elemen pertama muncul sebelum elemen kedua;
boleh membuat fungsi penyortiran dinamik yang boleh menyusun pelbagai objek menggunakan rentetan atau nilai angka. Fungsi ini boleh disusun menaik atau turun mengikut kunci yang ditentukan.
• Kaedah
JavaScript
• akan mengubah suai array asalnya yang disusun. Untuk mengelakkan ini, anda boleh menggunakan kaedah Array.sort atau pengendali lanjutan untuk membuat contoh array baru dan menyusunnya. Array.slice

penyortiran array asas (dan mengapa ia tidak berfungsi)

Secara lalai, kaedah JavaScript

menukarkan setiap elemen dalam array yang perlu disusun menjadi rentetan dan membandingkannya dalam urutan titik kod Unicode. Array.sort

<code class="language-javascript">const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]</code>

anda mungkin ingin tahu mengapa 32 sebelum 5? Nampaknya tidak masuk akal, bukan? Sebenarnya, ia tidak berlaku. Ini kerana setiap elemen dalam array mula -mula ditukar kepada rentetan, dan "32" adalah sebelum "5" dalam urutan Unicode.

Gunakan

hanya untuk menyusun tatasusunan objek tidak dapat disusun dengan cekap. Nasib baik, kaedah Array.sort menerima parameter pilihan sort yang boleh kita gunakan untuk menyusun pelbagai objek. compareFunction

bagaimana menyusun tatasusunan objek dalam javascript

Untuk menyusun pelbagai objek, gunakan kaedah

dengan fungsi perbandingan. Fungsi perbandingan menggunakan peraturan dan menyusun tatasusunan mengikut logik tersuai kami. Mereka membolehkan kita menyusun pelbagai objek dengan rentetan, bilangan bulat, tarikh, atau mana -mana atribut tersuai yang lain. Kami akan menerangkan bagaimana fungsi perbandingan berfungsi kemudian dalam artikel ini. sort()

Dalam demo ini, kami akan menggunakan pelbagai penyanyi dan menyusunnya mengikut abjad dengan nama band mereka:

<code class="language-javascript">const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];</code>

Fungsi perbandingan berikut membandingkan nama (kapsul) setiap band:

<code class="language-javascript">function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */</code>

Untuk membalikkan susunan jenis, anda boleh membalikkan nilai pulangan fungsi perbandingan:

<code class="language-javascript">const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]</code>

bagaimana fungsi perbandingan berfungsi

Fungsi perbandingan mengembalikan nombor yang digunakan untuk menentukan urutan jenis dengan membandingkan dua inputnya (A dan B). Ringkasnya, jika integer kurang daripada 0, A muncul sebelum B; Tetapi bagaimana anda menentukan nombor ini bergantung kepada anda.

mari kita lihat pelbagai nombor yang mudah:

<code class="language-javascript">const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];</code>

kita boleh melakukan beberapa refactoring itu, kerana menolak B dari A juga akan mengembalikan nilai kita. Fungsi perbandingan ini menyusun pelbagai nombor dari kecil ke besar:

<code class="language-javascript">function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */</code>

Ia juga boleh diwakili sebagai fungsi anak panah tanpa menentukan fungsi perbandingan di tempat lain:

<code class="language-javascript">function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}</code>

Jika anda tidak biasa dengan fungsi anak panah, anda boleh membaca lebih lanjut mengenai mereka di sini: Fungsi Arrow dalam JavaScript.

seperti yang anda lihat, fungsi perbandingan boleh ditulis dalam banyak cara, dan kaedah sort() akan dilaksanakan seperti yang diarahkan.

Buat fungsi penyortiran dinamik

mari kita lengkapkan contoh sebelumnya untuk menjadikannya lebih dinamik. Mari buat fungsi penyortiran yang boleh anda gunakan untuk menyusun pelbagai objek yang nilai -nilainya adalah rentetan atau nombor. Fungsi ini mempunyai dua parameter - kunci yang kita mahu menyusun dan urutan hasil (iaitu naik atau turun):

<code class="language-javascript">const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79</code>

inilah cara menggunakannya:

<code class="language-javascript">function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)</code>

Dalam kod di atas, kaedah hasOwnProperty digunakan untuk memeriksa sama ada atribut yang ditentukan ditakrifkan pada setiap objek dan tidak diwarisi melalui rantaian prototaip. Jika ia tidak ditakrifkan pada kedua -dua objek, fungsi pulangan 0, yang menyebabkan perintah penyortiran tetap tidak berubah (iaitu objek tetap tidak berubah relatif kepada satu sama lain).

Pengendali

typeof juga digunakan untuk memeriksa jenis nilai harta. Ini membolehkan fungsi untuk menentukan cara yang betul untuk menyusun array. Sebagai contoh, jika nilai harta yang ditentukan adalah rentetan, kaedah toUpperCase digunakan untuk menukar semua aksara ke huruf besar, jadi kes aksara diabaikan apabila menyusun.

Anda boleh menyesuaikan fungsi di atas untuk memenuhi jenis data lain, serta keperluan lain yang diperlukan oleh skrip anda.

Perpustakaan Sorting Array Popular

Anda mungkin tidak mempunyai masa atau kesabaran untuk membuat fungsi penyortiran anda sendiri dalam JavaScript asli. Masa adalah wang, dan kod memerlukan masa. Nasib baik, terdapat pelbagai perpustakaan yang dapat memenuhi semua keperluan penyortiran array anda. Berikut adalah senarai pendek beberapa perpustakaan tambahan yang mengandungi fungsi penyortiran ... tiada pesanan tertentu;)

• array-sort
• underscore.js
• Sugarjs
• lodash

Petua cepat: Susun objek Objek mengikut tarikh

Untuk menyusun pelbagai objek mengikut rentetan tarikh, anda hanya perlu memberikan fungsi perbandingan yang pertama mengepam rentetan tarikh dan tolaknya dari satu sama lain:

<code class="language-javascript">nums.sort((a, b) => a - b);</code>

petua cepat: menyusun tanpa mengubah suai array

Tidak seperti banyak fungsi array JavaScript lain, Array.sort adalah salah satu kaedah yang akan mengubah (mengubahsuai) pelbagai jenis dan bukannya mengembalikan array baru. Untuk mengelakkan ini, anda boleh membuat contoh baru array untuk disusun dan mengubahnya. Ini boleh digunakan untuk membuat salinan array menggunakan kaedah array atau sintaks sambungan.

<code class="language-javascript">const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]</code>

Buat salinan array menggunakan Array.slice:

<code class="language-javascript">const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];</code>

Sebagai alternatif, anda boleh menggunakan pengendali lanjutan untuk mendapatkan kesan yang sama:

<code class="language-javascript">function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */</code>

Dalam kedua -dua kes, output adalah sama dan boleh digunakan sebelum menyusun sebarang pelbagai objek.

<code class="language-javascript">function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}</code>

Petua cepat: menyusun susunan dengan rentetan sekiranya tidak sensitif

Dalam contoh terdahulu kami, kami ingin menyusun pelbagai objek dengan nilai -nilai yang rentetan atau nombor. Walau bagaimanapun, jika anda tahu anda hanya akan memproses objek yang nilainya adalah rentetan, anda boleh menggunakan kaedah JavaScript localeCompare untuk mengatur kod anda.

Kaedah ini mengembalikan nombor yang menunjukkan sama ada rentetan sebelum, selepas atau sama dengan rentetan yang diberikan dalam urutan jenis. Ia membolehkan penyortiran kes sensitif kes-insensitif:

<code class="language-javascript">const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79</code>

Dari segi fungsi compareValues kami, ini bermakna kita boleh menulis cara ini:

<code class="language-javascript">function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)</code>

Anda boleh membaca lebih lanjut mengenai localeCompare pada MDN.

Kesimpulan

Itu sahaja - Pengenalan ringkas untuk menyusun tatasusunan objek menggunakan JavaScript asli. Walaupun banyak perpustakaan menyediakan keupayaan penyortiran dinamik ini, seperti yang ditunjukkan, tidak sukar untuk melaksanakan keupayaan ini sendiri. Di samping itu, ia juga berguna untuk mengetahui apa yang berlaku di belakang tabir.

Untuk membina pemahaman yang lebih komprehensif tentang asas JavaScript asli, kami mengesyorkan JavaScript: dari pemula ke ninjas. Belajar JavaScript dari awal, termasuk ES6, dan mengamalkan pengetahuan baru anda melalui pelbagai projek.

FAQ mengenai cara menyusun tatasusunan objek dalam javascript

Bolehkah anda menyusun tatasusunan objek di JavaScript?

Ya. JavaScript menyediakan kaedah terbina dalam untuk membantu menyusun elemen array.

bagaimana menyusun tatasusunan objek di JavaScript?

anda boleh menggunakan kaedah Array.prototype.sort() dan menyediakan fungsi perbandingan tersuai untuk menyusun pelbagai objek dalam JavaScript. Fungsi perbandingan harus membandingkan sifat -sifat yang relevan bagi setiap objek.

bagaimana menyusun pelbagai objek dalam JavaScript dengan kunci?

anda boleh menyusun pelbagai objek dengan memberikan kunci kepada fungsi perbandingan. Ini membolehkan anda menyusun pelbagai sifat. Untuk menyusun pelbagai objek dengan kunci tertentu (sifat) dalam JavaScript, anda boleh menggunakan kaedah Array.prototype.sort() dan fungsi perbandingan tersuai yang membandingkan nilai kekunci yang dikehendaki untuk setiap objek.

Bagaimana untuk menyusun susunan objek secara dinamik di JavaScript?

Untuk menyusun susunan objek secara dinamik dalam JavaScript berdasarkan kunci (sifat) yang ditentukan pada runtime, anda boleh membuat fungsi yang menerima array dan kunci sebagai parameter. Fungsi ini kemudiannya boleh menggunakan kaedah Array.prototype.sort() serta fungsi perbandingan tersuai untuk mengakses kekunci yang disediakan secara dinamik untuk penyortiran.

Adakah ada perpustakaan yang memudahkan penyortiran tatasusunan objek? Ya, perpustakaan seperti lodash dan garis bawah.js menyediakan fungsi utiliti untuk menyusun tatasusunan objek dengan fungsi dan kemudahan tambahan. Walau bagaimanapun, kaedah terbina dalam JavaScript biasanya mencukupi untuk memenuhi keperluan penyortiran asas. sort()

disortir oleh objek utama objek sensitif? Ya, secara lalai, sort mengikut kekunci objek adalah sensitif kes. Anda boleh menggunakan kaedah

untuk melakukan penyortiran kes-insensitif. localeCompare()

Atas ialah kandungan terperinci Susun pelbagai objek dalam JavaScript dengan kaedah jenis (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!