Abjad Array, Objek, dan Array Objek - Trik CSS

Anonim

Sebuah array:

let fruits = (`bananas`, `Apples`, `Oranges`);

Anda dapat mengurutkan menurut abjad semudah:

fruits.sort();

Tapi perhatikan casing yang tidak konsisten dalam array ... karakter huruf besar semua akan diurutkan sebelum karakter huruf kecil (cukup aneh) jadi ini akan menjadi sedikit lebih rumit:

let fruits = (`bananas`, `Apples`, `Oranges`); fruits.sort((a, b) => ( return a.toLowerCase().localeCompare(b.toLowerCase()); )) console.log(fruits); // ("Apples", "bananas", "Oranges")

Array Objek

Segalanya menjadi lebih rumit lagi jika apa yang Anda coba urutkan bersarang di dalam objek. Mudah bisa menjadi kasus bekerja dengan JSON API.

let fruits = ( ( fruit: `Bananas` ), ( fruit: `apples` ), ( fruit: `Oranges` ) );

Kita dapat membuat fungsi pengurutan khusus untuk ini, tetapi satu langkah lebih jauh adalah membuat fungsi yang lebih umum yang mengambil kunci untuk mengurutkan sebagai parameter.

const propComparator = (propName) => (a, b) => a(propName).toLowerCase() == b(propName).toLowerCase() ? 0 : a(propName).toLowerCase() < b(propName).toLowerCase() ? -1 : 1

Jadi sekarang kita bisa menggunakannya untuk mengurutkan:

fruits.sort(propComparator(`fruit`)); console.log(fruits); /* ( (fruit: "apples"), (fruit: "Bananas"), (fruit: "Oranges") ) */

Hanya sebuah Objek

Jika kita hanya memiliki sebuah objek…

let fruits = ( Bananas: true, apples: false, Oranges: true );

Kita masih perlu menurunkan kunci-kunci itu, tetapi kita dapat mengurutkan array kunci dan kemudian membuat objek baru dari array kunci yang baru diurutkan.

let sortedFruits = (); Object.keys(fruits).sort((a, b) => ( return a.toLowerCase().localeCompare(b.toLowerCase()); )).forEach(function(key) ( sortedFruits(key) = fruits(key); )); console.log(sortedFruits); /* ( apples: false, Bananas: true, Oranges: true ) */

Array Objek untuk diurutkan pada Key

let fruits = ( ( Bananas: true ), ( Apples: false ), ( oranges: true ) );

Ini mungkin yang paling sulit dari semuanya, tetapi harus ada cukup informasi di atas untuk menyelesaikannya. Mengerti.

Kode Live

Lihat Pen Alphabetizing Arrays oleh Chris Coyier (@chriscoyier) di CodePen.