Nesne Dizilerinin, Nesnelerin ve Dizilerin Alfabetikleştirilmesi - CSS Hileleri

Anonim

Bir dizi:

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

Bunu şu kadar kolay bir şekilde alfabetik olarak sıralayabilirsiniz:

fruits.sort();

Ancak dizideki tutarsız büyük / küçük harflere dikkat edin ... büyük harfli karakterlerin tümü küçük harfli karakterlerden önce sıralanacaktır (yeterince garip), bu yüzden biraz daha karmaşık olacaktır:

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

Nesne Dizisi

Sıralamaya çalıştığınız şey nesnelerin içine yerleştirilmişse işler daha da karmaşıklaşır. Bir JSON API ile çalışma durumu kolayca olabilir.

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

Bunun için özel bir sıralama işlevi yapabiliriz, ancak küçük bir adım daha ileride, anahtarın bir parametre olarak sıralanmasını sağlayan daha genel bir işlev yapmaktır.

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

Şimdi bunu sıralamak için kullanabiliriz:

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

Sadece bir nesne

Sadece bir nesnemiz varsa ...

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

Yine de bu anahtarları küçültmemiz gerekiyor, ancak bir anahtar dizisini sıralayabilir ve sonra bu yeni sıralanan anahtar dizisinden yeni bir nesne oluşturabiliriz.

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 ) */

Anahtar üzerinde sıralanacak Nesne Dizisi

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

Bu muhtemelen hepsinden en zor olanıdır, ancak yukarıda bunu çözmek için yeterli bilgi olmalıdır. Anla.

Canlı Kod

CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Kalem Alfabetik Dizileri görün.