Bảng chữ cái Mảng, Đối tượng và Mảng Đối tượng - Thủ thuật CSS

Anonim

Một mảng:

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

Bạn có thể sắp xếp thứ tự bảng chữ cái dễ dàng như:

fruits.sort();

Nhưng hãy chú ý cách viết hoa không nhất quán trong mảng… tất cả các ký tự viết hoa sẽ được sắp xếp trước các ký tự viết thường (kỳ lạ là đủ) vì vậy nó sẽ phức tạp hơn một chút:

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

Mảng đối tượng

Mọi thứ vẫn trở nên phức tạp hơn nếu những gì bạn đang cố gắng sắp xếp được lồng trong các đối tượng. Dễ dàng có thể là trường hợp làm việc với API JSON.

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

Chúng tôi có thể tạo một chức năng sắp xếp tùy chỉnh cho việc này, nhưng một bước xa hơn là tạo một chức năng chung chung hơn lấy khóa để sắp xếp dưới dạng tham số.

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

Vì vậy, bây giờ chúng ta có thể sử dụng nó để sắp xếp:

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

Chỉ là một đối tượng

Nếu chúng ta chỉ có một đối tượng…

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

Chúng ta vẫn cần viết thường các khóa đó, nhưng chúng ta có thể sắp xếp một mảng khóa và sau đó tạo một đối tượng mới từ mảng khóa mới được sắp xếp đó.

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

Mảng đối tượng cần sắp xếp trên Key

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

Đây có lẽ là cách khó nhất trong số đó, nhưng cần có đủ thông tin ở trên để phân loại. Hiểu rồi.

Mã trực tiếp

Xem Mảng chữ cái bằng bút của Chris Coyier (@chriscoyier) trên CodePen.