소개
데이터 중심 정보 시스템에서 데이터를 표 형식으로 표시하는 일반적인 방법입니다. 데이터 정렬은 필수 기능입니다. 정렬은 단일 필드로 정렬로 나누고 여러 필드의 다른 정렬 방향으로 정렬 할 수 있습니다. 단일 필드 정렬은 매우 제한적이며 데이터 문제의 변경에 대한 사용자의 요구를 충족시킬 수 없습니다. 멀티 필드 분류는이 결함을 더 잘 보충 할 수 있습니다.
멀티 필드 분류에서 구현 방법은 백엔드 구현 및 프론트 엔드 구현으로 큰 수준에서 나눌 수 있습니다.
백엔드 분류
백엔드 구현 정렬은 데이터베이스 수준 또는 응용 프로그램 수준에서 구현할 수 있습니다.
데이터베이스 수준에서 멀티 필드 정렬을 구현하는 것은 매우 간단합니다. SQL 정렬 명령 "Order By" - Order By Field1 ASC, Field2 Desc, Field3 ASC- ....
애플리케이션 수준은 PHP, Java Web, ASP.NET 등과 같은 웹 애플리케이션 계층 (C/S 아키텍처는 여기에서 논의되지 않음)을 말합니다. 응용 프로그램 수준 구현은 PHP, Java 및 .NET (C#/VB)와 같은 백엔드 서비스 언어를 사용하여 데이터를 정렬하는 것입니다. C#의 LINQ는 컬렉션 유형에 대한 내장 작업을 수행하고 다중 교정 분류를 지원하기 때문에 LINQ를 사용하여 FOS Orderby F에서 F 에서이 목표를 쉽게 달성 할 수 있기 때문에 F.Name 하강, F.NUM Assending Select F (LINQ의 정렬 성급이 SQL과 거의 동일하다는 것을 알 수 있습니다). 다른 언어에 유사한 지원이 내장되어 있지 않으면 일반적인 알고리즘에 따라 구현되며, 이는 일반적이며 프로그래밍 언어와 관련이 없습니다.
프론트 엔드 분류
JavaScript에서 배열에는 정렬 방법 "정렬"이 있습니다. 배열이 간단한 배열 인 경우 (배열 요소는 간단한 유형 - 문자열, 값 및 부울)이 방법을 사용하여 분류 목적을 쉽게 달성 할 수 있습니다. 그러나 배열 요소가 이름/값 쌍의 객체와 같은 단순하지 않은 유형 인 경우 지정된 속성에 따라 다른 정렬 방향으로 정렬하려면 "정렬"메소드에 대한 간단한 호출이이를 달성 할 수 없습니다.
다행히도 "정렬"메소드는 원하는 정렬 방법을 구현할 수있는 사용자 정의 정렬 인터페이스를 보유합니다.
"정렬"배열의 모습을 보자.
기능 프로토 타입을 정렬하십시오
// 배열의 요소를 제자리에 정렬 하고이 배열을 반환합니다. // 기본적으로 문자열의 유니 코드 코드 포인트별로 정렬하십시오. Array.prototype.sort ([CompressFunction] : 숫자); // 번호 : -1 | 0 | 1. // 일반적인 비교 함수 (정렬 된 오름차순 순서). 함수 compartUnction (item1, item2) {if (item1> item2) {return 1; // 하강 순서로 정렬하면 -1을 반환합니다. } else if (item1 === item2) {return 0;} else {return -1; // 하강 순서로 정렬하면 1.}}참고 : 비교 기능이 지정되지 않은 경우 요소는 문자열의 문자로 변환되어 유니 코드 비트 순서로 정렬됩니다. 예를 들어, "체리"는 "바나나"앞에 정리됩니다. 숫자를 정렬 할 때 9는 80 앞에 나타나고 문자열로 먼저 변환되고 "80"은 "9"보다 앞서 있습니다.
• 비교 기능 (a, b)이 0보다 작은 경우 A는 B 앞에 배열됩니다.
• 비교 기능 (A, B)이 0, A 및 B와 같으면
상대적 위치는 변경되지 않습니다. 참고 : ECMAScript 표준은 이러한 동작을 보장하지는 않으며 모든 브라우저가이를 준수하지는 않습니다 (예 : 2003 년 Mozilla
2019 년 이전 버전);
• 비교 기능 (a, b)이 0보다 큰 경우 b는 a 전에 배열됩니다.
• 비교 기능 (a, b)은 항상 동일한 비교 결과를 동일한 입력에 반환해야합니다. 그렇지 않으면 정렬 된 결과는 불확실합니다.
참고 : 위 규칙에 의해 얻은 분류 결과는 오름차순 순서입니다. 내림차순 결과를 얻으려면 비교 결과가 0보다 큰 경우 결과를 0보다 작은 결과를 반환합니다. 비교 결과가 0보다 작 으면 0보다 큰 결과를 반환 할 수 있습니다.
다중 교정 정렬을 구현하려면 열쇠는 함수 구현을 비교하는 것입니다. 위 규칙에 따라 여러 방향으로 여러 속성의 순서가 구현되고 두 비교 항목 간의 크기 관계가 여전히 반환됩니다.
그렇다면 많은 속성 객체의 크기 관계를 결정하는 방법은 무엇입니까? 이것은 두 단계로 수행 할 수 있습니다.
첫 번째 단계는 분류 속성 및 방향에 따라 두 분류 항목을 비교하여 얻은 결과를 기록하는 것입니다.
var proforders = { "prop1": "asc", "prop2": "desc", "prop3": "asc"}; 함수 cmp (item1, item2, proforders) {var cps = []; // 각 정렬 속성의 비교 결과를 기록하는 데 사용됩니다. -1 | 0 | 1. var isASC = true; // 정렬 방향. for (froporders in froporders) {isASC = froforders [p] === "asc"; if (item1 [p]> item2 [p]) {cps.push (isasc? 1 : -1); break; // Loop에서 뛰어 내릴 수 있습니다. 여기서는 이미 Item1이 "item2보다 큽니다"라는 것을 이미 알고 있기 때문입니다. } else if (item1 [p] === item2 [p]) {cps.push (0);} else {cps.push (isasc? -1 : 1); break; // 루프에서 뛰어 내릴 수 있습니다. item1 "보다 작습니다"item2. }} /*...*/}두 번째 단계는 각 분류 속성의 비교 결과를 기반으로 두 비교 항의 최종 크기 관계를 종합적으로 판단하는 것입니다.
/ * ... * for (var j = 0;
위의 아이디어를 사용하면 전체 비교 기능을 쉽게 구현할 수 있습니다. 비교 함수에 대한 완전한 JavaScript 코드는 다음과 같습니다.
비교 함수
함수 SORTBYPROPS (item1, item2) { "Strict 사용"; var props = []; for (var _i = 2; _i <arguments.length; _i ++) {props [_i -2] = arguments [_i];} var cps = []; // 정렬 속성 비교 결과를 저장합니다. // 정렬 속성이 지정되지 않은 경우 모든 속성의 오름차순 순서로 정렬하십시오. var asc = true; if (props.length <1) {for (var p in item1) {if (item1 [p]> item2 [p]) {cps.push (1); break; // 더 큰 경우 루프가 나옵니다. } else if (item1 [p] === item2 [p]) {cps.push (0);} else {cps.push (-1); break; //보다 적은 경우 루프가 점프됩니다. }}} else {for (var i = 0; i <props.length; i ++) {var prop = prop = prop [i]; for (var o in prop) {asc = prop [o] === "asc"; if (item1 [o]> item2 [o]) {cps.push (asc? 1 : -1); // 더 큰 경우 루프가 나옵니다. } else if (item1 [o] === item2 [o]) {cps.push (0);} else {cps.push (asc? -1 : 1); break; //보다 적은 경우 루프가 점프됩니다. }}}} for (var j = 0; }테스트 사례
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- proporders);}); console.log (항목);} 함수 testAsc () {test ({ "name": "asc", "value": "asc"});} 함수 testdesc () {test ({ "name": "desc", "value": "desc"}); "desc"});} 함수 testdescasc () {test ({ "name": "desc", "value": "asc"});} typeScript code/**** 정렬 방향. */type direct = "asc"| "desc";/**** 정렬 속성. ** ** @interface ipropertyorder*/인터페이스 ipropertyorder {[name : string] : direct;}/**** 간단한 이름/값 개체. ** ** @Interface isimpleObject*/interface isimpleObject {[name : String] : String | 번호 | 부울;}/**** 지정된 속성 및 정렬 방향에 따라 간단한 이름/값 객체를 정렬합니다 (정렬 속성과 정렬 방향에 따라 **는 두 항목을 차례로 비교하고 정렬 위치를 나타내는 값을 반환합니다). ** ** @template t 간단한 이름/값 객체. ** @param {t} item1 정렬 비교 항목 1. ** @param {t} item2 비교 항목 2. ** @param {... ipropertyorder []} props 정렬 속성. ** @returns 항목 1이 항목 2보다 큰 경우, 반환 1, 항목 1이 항목 2와 같고, 0, 그렇지 않으면 -1을 반환합니다. */function sortByProps <t isimpleObject> (item1 : t, item2 : t, ... props : ipropertyorder []) { "Strict 사용"; var cps : array <number> = []; // 정렬 속성 비교 결과를 저장합니다. // 정렬 속성이 지정되지 않은 경우 모든 속성의 오름차순 순서로 정렬하십시오. var asc = true; if (props.length <1) {for (var p in item1) {if (item1 [p]> item2 [p]) {cps.push (1); break; // 더 큰 경우 루프가 나옵니다. } else if (item1 [p] === item2 [p]) {cps.push (0);} else {cps.push (-1); break; //보다 적은 경우 루프가 점프됩니다. }}} else {// 지정된 속성 및 리프팅 방향별로 정렬됩니다. for (var i = 0; i <props.length; i ++) {var prop = props [i]; for (var o in prop) {asc = prop [o] === "asc"; if (item1 [o]> item2 [o]) {cps.push (asc? 1 : -1); break; // 더 큰 경우 루프가 나옵니다. } else if (item1 [o] === item2 [o]) {cps.push (0);} else {cps.push (asc? -1 : 1); break; //보다 적은 경우 루프가 점프됩니다. }}}} for (var j = 0; }시나리오와 제한 사항을 사용하십시오
JavaScript를 사용하여 프론트 엔드에서 다중 교정 정렬을 구현하면 서버 측의 요청이 줄어들고 서버 측의 컴퓨팅 압력을 줄이지 만 로컬 데이터 만 정렬 해야하는 상황에만 적합합니다. 전체 데이터 세트를 여러 속성으로 정렬 해야하는 경우 결국 서버 측 데이터베이스 수준에서 수행됩니다.
위의 내용은 JavaScript 객체 어레이가 지정된 속성과 편집기가 소개 한 정렬 방향으로 정렬되는 방법에 대한 전체 설명입니다. 나는 그들이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!