반응형

# 자바스크립트 학습

# sort(분류)

## sort()

구분 데이터(값)
data 대상
파라미터 함수opt
반환 sort 결과
  • 엘리먼트 값을 승순으로 정렬
var value = [4, 2, 3, 1];
log(value.sort();

=>
[1, 2, 3, 4]
  • 정렬 기준은 엘리먼트 값의 Unicode 순서이다. 
  • Unicode의 코드 포인트가 작으면 앞에 오고, 크면 뒤에 온다.
var value = ["A1", "A01", "B2", "B02"];
log(value.sort());

=>
[A01, A1, B02, B2]

왼쪽에서 오른쪽으로 문자 하나씩 비교하여 정렬
A01과 A가 같으므로 다음 문자 비교
0과 1을 비교하게 되며 0이 1보다 코드 포인트가 앞에 있어 앞에 정렬
  • 주의 : sort 대상 배열도 정렬된다.
var value = [4, 2, 3, 1];
log(value.sort());
log(value);

=>
[1, 2, 3, 4]
[1, 2, 3, 4]
  • 값이 undefined이면 끝으로 이동한다.
var value = [ , , 1, 2];
log(value.sort());

=>
[1, 2, undefined, undefined]

## sort() 와 Unicode

  • 숫자에 해당하는 Unicode의 code point로 정렬
var value = [101, 26, 7, 1234];
log(value.sort());

=>
[101, 1234, 26, 7]

사람이 생각하는 일반적인 정렬은 7, 26, 101, 1234
코드 포인트로 비교하여 sort하기 때문에 사람이 생각하는 것과는 다른 결과가 나온다.

사람이 생각하는 일반적인 정렬로 sort 하기 위해서는
sort()의 파라미터에 콜백함수를 작성하고 콜백함수와 같이 정렬해야 한다.

 

# sort 알고리즘

## sort()

  • sort 알고리즘
var value = [101, 26, 7, 1234];
value.sort(function(one, two){
	return one - two;
});
log(value);

=>
[7, 26, 101, 1234]

sort() 파라미터에 콜백함수 지정
콜백함수를 호출하면서 파라미터 값으로 101, 26 넘기면,
one(101)-two(26) 진행, 결과는 양수
반환 값이 0보다 크면 배열에서 값의 위치를 바꿈
값이 0보다 작거나 같으면 배열에서 값의 위치를 바꾸지 않음
다시 처음으로 돌아가 바뀌는 것이 없을 때까지 반복

## reverse()

구분 데이터(값)
data 대상
파라미터 사용하지 않음
반환 결과
  • 배열의 엘리먼트 위치를 역순으로 바꾼다.
  • 엘리먼트 값이 아닌 인덱스 기준, 이때 대상 배열도 바뀐다.
var value = [1, 3, 7, 5];
log(value.reverse());

=>
[5, 7, 3, 1]

 

# Array 오브젝트(ES5)

## 프로퍼티 리스트(ES5)

이름 개요
Array 함수
isArray() 배열 여부 반환, 배열이면 true, 아니면 false 반환
Array.prototype
indexOf() 지정한 값에 일치하는 엘리먼트 인덱스 반환
lastIndexOf() indexOf()와 같으며, 마지막 인덱스 반환
forEach() 배열을 반복하면서 콜백 함수 실행
every() 반환 값이 false일 때까지 콜백 함수 실행
some() 반환 값이 true일 때까지 콜백 함수 실행
filter() 콜백 함수에서 true를 반환한 엘리먼트 반환
map() 콜백 함수에서 반환한 값을 새로운 배열로 반환
reduce() 콜백 함수의 반환 값을 파라미터 값으로 사용
reduceRight() reduce()와 같음. 단, 배열의 끝에서 앞으로 진행

## isArray()

구분 데이터(값)
object Array 오브젝트
파라미터 체크 대상
반환 배열이면 true, 아니면 false
  • 체크 대상이 배열이면 true, 아니면 false 반환
  • isArray()는 함수이다.
log(Array.isArray([1, 2]));	// isArray()는 함수이므로
log(Array.isArray(123));	// Array.isArray() 형태로 호출

=>
true
false
  • isArray() 함수가 필요한 이유
log(typeof {a: 1});
log(typeof [1, 2]);
log(typeof null);

=>
object
object
object

typeof 연산자로 배열 여부 체크 불가능 하므로
배열 여부 체크를 위해 Array.isArray() 사용

 

# index 처리 메서드

## indexOf()

구분 데이터(값)
data 검색 대상
파라미터 검색할 값
검색 시작 인덱스, 디폴트 : 0
반환 검색된 인덱스
  • 파라미터 값과 같은 엘리먼트의 인덱스를 반환
  • 왼쪽에서 오른쪽으로 검색하며, 값이 같은 엘리먼트가 있으면 검색 종료
var value = [1, 2, 5, 2, 5];
log(value.indexOf(5));

=>
2

배열의 왼쪽부터 5를 검색
2번 인덱스에 5가 있으므로 2를 반환
  • 값의 체크는 데이터 타입까지 체크한다.
var value = [1, 2, 5, 2, 5];
log(value.indexOf("5"));

=>
-1
배열의 왼쪽부터 "5"를 검색
2번과 4번 인덱스에 5가 있지만 타입이 다르다.
같은 값이 없으면 -1을 반환
  • 두 번째 파라미터의 인덱스부터 검색
var value = [1, 2, 5, 2, 5];
log(value.indexOf(5, 3));

=>
4

3번 인덱스부터 5를 검색
2번 인덱스에 5가 있지만, 3번 인덱스부터 검색하므로 4가 반환된다.
  • String과 Array의 indexOf() 차이
log("ABCBC".indexOf("C", -2));

var list = ["A", "B", "C", "D", "C"];
log(list.indexOf("C", -2));

=>
2
4

두 번째 파라미터에 음수를 작성했을 때 검색 방법이 다르다.
String 오브젝트는 2번째 파라미터에 음수를 작성하면 0으로 간주하여 처음부터 검색
Array 오브젝트는 2번째 파라미터에 음수를 작성하면 음수에 length를 더해서 시작 인덱스로 사용

## lastIndexOf()

구분 데이터(값)
data 검색 대상
파라미터 검색할 값
검색 시작 인덱스opt
반환 검색된 인덱스
  • 파라미터 값과 같은 엘리먼트의 마지막 인덱스 반환(뒤에서 앞으로 검색한다는 표현이 더 맞음)
  • 다른 처리 방법은 indexOf() 와 같다.
var value = [1, 2, 5, 2, 5];
log(value.lastIndexOf(5));

=>
4
반응형

+ Recent posts