[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기

[javascript] 2018. 4. 17. 03:09

[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기


1. 배열의 문자 정렬하기


var string_array = ['ban', 'kim' , 'han', 'choi' , 'kang' , 'an'];
var string_hangule_array = ['트와이스', '위너' , '에이핑크', '나중에' ,'가오가이거' , '쿠쿠다스' , '빵빠레'];
console.log(string_array);
// (6) ["ban", "kim", "han", "choi", "kang", "an"]
console.log(string_array.sort());
// ["an", "ban", "choi", "han", "kang", "kim"]
console.log(string_hangule_array);
// ["트와이스", "위너", "에이핑크", "나중에", "가오가이거", "쿠쿠다스", "빵빠레"]
console.log(string_hangule_array.sort());
//["가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]

var string_mix_array = ['에이핑크', 'ban', '나중에' , '트와이스' , 'kim' , '위너' , 'han', '쿠쿠다스' , '빵빠레', 'choi' ,'가오가이거' , 'kang' , 'an'];
console.log(string_mix_array);
// ["에이핑크", "ban", "나중에", "트와이스", "kim", "위너", "han", "쿠쿠다스", "빵빠레", "choi", "가오가이거", "kang", "an"]
console.log(string_mix_array.sort());
// ["an", "ban", "choi", "han", "kang", "kim", "가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


간단하게 String.sort()를 사용하면 영어, 한글에서 정렬이 간편하게 된다. 



2. 배열 숫자 정렬하기


var number_array = [10 , 99 , 7 , 12 , 3];
var string_number_array = ['10' , '99' , '7' , '12' , '3'];

console.log(number_array); //  [10, 99, 7, 12, 3]
console.log(number_array.sort()); //[10, 12, 3, 7, 99]
console.log(string_number_array); //  [10, 99, 7, 12, 3]
console.log(string_number_array.sort()); //[10, 12, 3, 7, 99]

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


결과를 보면 애석하게도 정렬이 되지 않는다. 왜냐하면, ASCII 문자 순서로 정렬이 되기 때문이다. 그래서 string_number_array와 number_array의 sort 결과가 둘다 동일하게 나왔다. 그렇다면 어떻게 해야하는가?


=> sort(sortFunction)를 직접 만들어줘야한다.


console.log(number_array.sort(number_ascending)); //[3, 7, 10, 12, 99]
console.log(number_array.sort(number_descending)); //[99, 12, 10, 7, 3]

function number_ascending(a, b) { // 오름차순
return a - b;
}
function number_descending(a, b) { // 내림차순
return b - a;
}

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


3. 배열 날짜 정렬하기

예제와 결과화면 코드를 올려드려요. 직접 해보시길 권장합니당~


var data = [
    { '날짜': "2012-11-14", '학년': 3, '점수': 200, },
    { '날짜': "2013-11-14", '학년': 1, '점수': 300, },
    { '날짜': "2017-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2018-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2019-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2020-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2021-11-31", '학년': 3, '점수': 200, },
    { '날짜': "2023-11-01", '학년': 2, '점수': 190, },
    { '날짜': "2002-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2010-11-14", '학년': 2, '점수': 190, },
    { '날짜': "2008-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2009-11-14", '학년': 1, '점수': 100, }
];
console.log(data.sort(date_ascending)); // 오름차순
function date_ascending(a, b) {
var dateA = new Date(a['날짜']).getTime();
var dateB = new Date(b['날짜']).getTime();
return dateA > dateB ? 1 : -1;
};

console.log(data.sort(date_descending)) // 내림차순

function date_descending(a, b) {
var dateA = new Date(a['날짜']).getTime();
var dateB = new Date(b['날짜']).getTime();
return dateA < dateB ? 1 : -1;
};

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)



전체 테스트 코드


저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편  (0) 2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기  (0) 2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker  (0) 2018.04.19
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유  (0) 2018.04.17
[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기  (0) 2018.04.16
블로그 이미지

미나미나미

,

[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유

[javascript] 2018. 4. 17. 02:26

[javascript] 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유


자바스크립트(Javascript) 배열 확인하기 => isArray() 

왜 typeof() 는 왜 안되는가?

자바스크립트(Javascript)에서 객체(object)와 더불어 배열이 존재한다.


아래의 예제를 보자.


var object = new Object(); // = {}; //
var array = new Array(); // = [];
var object2 = {};
var array2 = [];
console.log(typeof(object) );
console.log(typeof(object2) );
console.log(typeof(object) === typeof(object2));//true

console.log(typeof(array) );
console.log(typeof(array2) );
console.log(typeof(array) === typeof(array));//true

console.log(typeof(object) === typeof(array)); //true

console.log(Array.isArray(object) ); // false
console.log(Array.isArray(array2) ); // true


결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


이와 같이 보게되면 typeof()의 반환 값을 보게되면 array , array2 , object, object2 모두 object로 반환하게 된다. 즉, typeof()는 object와 array를 구분할 수 없습니다. (typeof 반환에서 array를 반환할 수 없습니다.)

 [typeof 반환 되는 값 MDN https://developer.mozilla.org/enUS/docs/Web/JavaScript/Data_structures]



Array.isArray() 함수를 사용하여서 Array와 Object 를 구분하시면 될거 같습니다.



저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편  (0) 2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기  (0) 2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker  (0) 2018.04.19
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기  (0) 2018.04.17
[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기  (0) 2018.04.16
블로그 이미지

미나미나미

,

[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기

[javascript] 2018. 4. 16. 00:24

[javascript]object,Object.keys(),Object.values() 다루기


1. javascript에서 Object란?


 Javascript는 Object 기반의 스크립트 언어라고 한다. Object는 데이터를 한곳에 모으고 구조화하는데 유용하도고 한다. (뭐 그렇다고 한다. 솔직히 개념만 늘어놓아서 아 알겠어!를 외치는 천재이길 바라지만... 난 아닌거 같다 ... 그리고 엄청나게 뛰어나신 분들이 다 정리를 하셨다능!!ㅋㅋㅋ) 


자, 예를 들어보자고, 

고객 중 홍길동 이고 , 나이는 23 이고, 직업은 경찰관이라고 해보자.

각각의 변수로 만들게 되면,


var client_name = '홍길돌';
var client_age = '23';
var client_job = '경찰관';


이렇게 각각의 변수명을 가지는 값을 넣어줘야한다. 이런 경우 단순하게 데이터를 정의해서 값을 넣는 것이 그닥 어렵지 않지만 , 여기서 성별, 취미 , 특기 , 연봉, 가족관계 ...  많은 데이터를 변수명을 지정하고 , 값을 넣어준다면 데이터에 관리하는 큰 불편함이 생길 것이다. 이점을 해결하기 위한 Object 함수를 사용한다.


이걸  Object 형식으로 변경한다면,

var test = 'a'; // string
var test1 = 1 ; // number
var client = { 'name' : '홍길돌' , 'age' : 23 , 'job' : '경찰관'};
// 또는 new Object(); 같은 방법이면 축약법으로도 같은 기능을 수행

console.log(typeof(test)); //변수의 타입을 확인
console.log(typeof(test1));  //변수의 타입을 확인
console.log(typeof(client)); //변수의 타입을 확인               
console.log(client)


결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


client 부분만 자세히 봐주세요! 

client 변수에 Object를 값으로 name(key) : '홍길동' (value) 이런식으로 값을 넣어주면 됩니다. 즉, key : value 값 형식으로 넣어주시면 됩니다.


데이터를 추가한다면, 

client['sex'] = '남';
client['hobby'] ='socker';

console.log(client)

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


자 그렇다면 , 예를 들어 다른 사람이 만들어 놓은 Object 자동차에 관한 정보가 있을 때 이에 대한 key와 value를 정보를 알고 싶은 경우가 있죠. 


이럴 때, 유용한 정보 Obejct.keys()와 Object.values()가 있습니다.



2.  Obejct.keys()와 Object.values() 사용 해보기


결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

var car = {'name' : 'max' , 'maxSpeed' : "240" , 'minSpeed' : "0" , color : 'blue' };
//car에 대한 정보를 설정
console.log(Object.keys(car)); //car key의 정보
console.log(Object.values(car)); //car vlaue의 정보

console.log(car['name']); // 특정 key 정보를 알고 싶을 때
console.log(car['age']);// key값이 정의되지 않는 경우



Object.keys()를 통해서 Object car 만들어진 key의 정보를 얻을 수 있고,

Object.values()를 통해서 Object car 만들어진 value의 정보를 얻을 수 있습니다.

지금은 key와 value 정보들이 많지는 않지만, 많을 경우를 대비하여서 사용할 수 있습니다.

그리고 key에 대한 값이 없는 경우 undefined로 나오는 것을 확인할 수 있습니다.


전체 테스트 코드


저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편  (0) 2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기  (0) 2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker  (0) 2018.04.19
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기  (0) 2018.04.17
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유  (0) 2018.04.17
블로그 이미지

미나미나미

,
반응형

공지사항

글 보관함

달력

«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

티스토리툴바