Melengkapkan Huruf, Objek, dan Susunan Objek - Trik CSS

Anonim

Pelbagai:

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

Anda boleh mengurut mengikut abjad semudah:

fruits.sort();

Tetapi perhatikan selongsong yang tidak konsisten dalam array ... aksara huruf besar semuanya akan disusun sebelum huruf kecil (cukup pelik) sehingga 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

Segala-galanya menjadi lebih sukar jika perkara yang anda cuba urutkan bersarang di dalam objek. Mudahnya berlaku dengan menggunakan API JSON.

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

Kita dapat membuat fungsi penyortiran khusus untuk ini, tetapi satu langkah lagi adalah membuat fungsi yang lebih umum yang memerlukan kunci untuk disusun sebagai param.

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

Jadi sekarang kita boleh menggunakannya untuk menyusun:

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

Hanya Objek

Sekiranya kita mempunyai objek ...

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

Kita masih perlu mengecilkan kunci itu, tetapi kita dapat menyusun susunan kunci dan kemudian membuat objek baru dari susunan kunci yang baru disusun.

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 disusun pada Key

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

Ini mungkin yang paling sukar bagi mereka semua, tetapi harus ada cukup maklumat di atas untuk menyelesaikannya. Dapatkannya.

Kod Langsung

Lihat Susunan Huruf Pen oleh Chris Coyier (@chriscoyier) di CodePen.