여러 키 값 쌍이있는 객체 배열이 있으며 ‘updated_at’에 따라 정렬해야합니다.
[
{
"updated_at" : "2012-01-01T06:25:24Z",
"foo" : "bar"
},
{
"updated_at" : "2012-01-09T11:25:13Z",
"foo" : "bar"
},
{
"updated_at" : "2012-01-05T04:13:24Z",
"foo" : "bar"
}
]가장 효율적인 방법은 무엇입니까?
답변
사용할 수 있습니다 Array.sort.
예를 들면 다음과 같습니다.
var arr = [{
"updated_at": "2012-01-01T06:25:24Z",
"foo": "bar"
},
{
"updated_at": "2012-01-09T11:25:13Z",
"foo": "bar"
},
{
"updated_at": "2012-01-05T04:13:24Z",
"foo": "bar"
}
]
arr.sort(function(a, b) {
var keyA = new Date(a.updated_at),
keyB = new Date(b.updated_at);
// Compare the 2 dates
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
console.log(arr);답변
나는 이미 비슷한 질문에 대답했다 : 객체 배열을 정렬하는 간단한 함수
그 질문에 대해 나는 당신이 원하는 것을 할 수있는이 작은 기능을 만들었습니다.
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key]; var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}답변
에 Array.sort () 메소드 대신 배열의 요소를 정렬하고 배열을 반환한다. Immutable 이 아니기 때문에 Array.sort ()에 주의하십시오 . 불변 정렬의 경우 immutable-sort를 사용하십시오 .
이 방법은 현재 updated_atISO 형식으로 배열을 정렬하는 것 입니다. new Data(iso_string).getTime()ISO 시간을 Unix 타임 스탬프로 변환 하는 데 사용 합니다. 유닉스 타임 스탬프는 간단한 수학을 할 수있는 숫자입니다. 결과의 첫 번째 및 두 번째 타임 스탬프를 뺍니다. 첫 번째 타임 스탬프가 두 번째 타임 스탬프보다 크면 반환 숫자는 양수입니다. 두 번째 숫자가 첫 번째 숫자보다 크면 반환 값은 음수입니다. 둘이 동일하면 리턴은 0이됩니다. 인라인 함수에 필요한 반환 값으로 완벽하게 정렬됩니다.
대한 ES6 :
arr.sort((a,b) => new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime());대한 ES5 :
arr.sort(function(a,b){
return new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime();
});updated_at유닉스 타임 스탬프로 변경하면 다음과 같이 할 수 있습니다.
대한 ES6 :
arr.sort((a,b) => a.updated_at - b.updated_at);대한 ES5 :
arr.sort(function(a,b){
return a.updated_at - b.updated_at;
});이 글을 쓰는 시점에서 최신 브라우저는 ES6를 지원하지 않습니다. 최신 브라우저에서 ES6을 사용하려면 babel 을 사용 하여 코드를 ES5로 변환하십시오. 가까운 시일 내에 ES6에 대한 브라우저 지원이 예상됩니다.
Array.sort () 는 가능한 세 가지 결과 중 하나의 반환 값을 받아야합니다.
- 양수 (첫 번째 항목> 두 번째 항목)
- 음수 (첫 번째 항목 <두 번째 항목)
- 두 항목이 같으면 0
인라인 함수의 리턴 값은 양수 또는 음수 일 수 있습니다. Array.Sort ()는 반환 번호가 무엇인지 신경 쓰지 않습니다. 반환 값이 양수, 음수 또는 0인지에만 관심이 있습니다.
불변 정렬의 경우 : (ES6의 예)
const sort = require('immutable-sort');
const array = [1, 5, 2, 4, 3];
const sortedArray = sort(array);다음과 같이 작성할 수도 있습니다.
import sort from 'immutable-sort';
const array = [1, 5, 2, 4, 3];
const sortedArray = sort(array);가져 오기-가져 오기는 ES6에 자바 스크립트를 포함하는 새로운 방법이며 코드를 매우 깨끗하게 보이게합니다. 내 개인적인 마음에 드는 것.
불변 정렬은 소스 배열을 변경하지 않고 새로운 배열을 반환합니다. const불변 데이터에는 사용 을 권장합니다.
답변
@David Brainer-Bankers의 대답 은 약간 알파벳순으로 문자열 또는 숫자 순으로 정렬되어 있으며 대문자로 시작하는 단어가 소문자로 시작하는 단어 (예 : “apple, Early”)로 정렬되지 않도록합니다. 순서대로 표시됩니다.
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key];
var y = b[key];
if (typeof x == "string")
{
x = (""+x).toLowerCase();
}
if (typeof y == "string")
{
y = (""+y).toLowerCase();
}
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}답변
밑줄 js 또는 lodash를 사용하십시오.
var arrObj = [
{
"updated_at" : "2012-01-01T06:25:24Z",
"foo" : "bar"
},
{
"updated_at" : "2012-01-09T11:25:13Z",
"foo" : "bar"
},
{
"updated_at" : "2012-01-05T04:13:24Z",
"foo" : "bar"
}
];
arrObj = _.sortBy(arrObj,"updated_at");_.sortBy() 새로운 배열을 돌려줍니다
참조 http://underscorejs.org/#sortBy 및 lodash 문서 https://lodash.com/docs#sortBy을
답변
ES2015 지원을 통해 다음을 수행 할 수 있습니다.
foo.sort((a, b) => a.updated_at < b.updated_at ? -1 : 1)답변
가져온 데이터
[
{
"gameStatus": "1",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-20 11:32:04"
},
{
"gameStatus": "0",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 18:08:24"
},
{
"gameStatus": "2",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 18:35:40"
},
{
"gameStatus": "0",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 10:42:53"
},
{
"gameStatus": "2",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-20 10:54:09"
},
{
"gameStatus": "0",
"userId": "1a2fefb0-5ae2-47eb-82ff-d1b2cc27875a",
"created_at": "2018-12-19 18:46:22"
},
{
"gameStatus": "1",
"userId": "7118ed61-d8d9-4098-a81b-484158806d21",
"created_at": "2018-12-20 10:50:48"
}
]오름차순
arr.sort(function(a, b){
var keyA = new Date(a.updated_at),
keyB = new Date(b.updated_at);
// Compare the 2 dates
if(keyA < keyB) return -1;
if(keyA > keyB) return 1;
return 0;
});Asc 주문 예
[
{
"gameStatus": "0",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 10:42:53"
},
{
"gameStatus": "0",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 18:08:24"
},
{
"gameStatus": "2",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 18:35:40"
},
{
"gameStatus": "0",
"userId": "1a2fefb0-5ae2-47eb-82ff-d1b2cc27875a",
"created_at": "2018-12-19 18:46:22"
},
{
"gameStatus": "1",
"userId": "7118ed61-d8d9-4098-a81b-484158806d21",
"created_at": "2018-12-20 10:50:48"
},
{
"gameStatus": "2",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-20 10:54:09"
},
{
"gameStatus": "1",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-20 11:32:04"
}
]내림차순
arr.sort(function(a, b){
var keyA = new Date(a.updated_at),
keyB = new Date(b.updated_at);
// Compare the 2 dates
if(keyA > keyB) return -1;
if(keyA < keyB) return 1;
return 0;
});설명 순서의 예
[
{
"gameStatus": "1",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-20 11:32:04"
},
{
"gameStatus": "2",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-20 10:54:09"
},
{
"gameStatus": "1",
"userId": "7118ed61-d8d9-4098-a81b-484158806d21",
"created_at": "2018-12-20 10:50:48"
},
{
"gameStatus": "0",
"userId": "1a2fefb0-5ae2-47eb-82ff-d1b2cc27875a",
"created_at": "2018-12-19 18:46:22"
},
{
"gameStatus": "2",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 18:35:40"
},
{
"gameStatus": "0",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 18:08:24"
},
{
"gameStatus": "0",
"userId": "c02cfb18-ae66-430b-9524-67d9dd8f6a50",
"created_at": "2018-12-19 10:42:53"
}
]