[SIST] Web_javascript_days04/days05

1. 숫자와 관련된 메서드

* 정수/0 과 정수/0의 나머지를 구했을 때..

 

* NaN + 5 = NaN

* NaN + "문자열" = "NaN문자열"

ex) NaN + "5" = "NaN5"

---

1) 순수 숫자인지 아닌지 체크해주는 함수 - isNaN()

- 체크하고자 하는 값이 순수 숫자이면 fasle, 아니라면 true를 반환해주는 함수이다.

---

2) 숫자를 문자열로 변환해주는 메서드 - toString(), toExponential(), toFixed(), toPrecision(), valueOf()

- toString() - 문자열 변환 메서드
  ex) 숫자.toString() -> 문자열로 변환

- toExponential() - 반올림되고, 지수 표기법으로 출력되며, 문자열로 변환되는 메서드
  > 매개변수는 소수점 뒤의 문자수 정의 == 반올림하는 자리수

  > 매개변수가 없으면 반올림을 하지 않겠다.

- toFixed() - 반올림되고, 소수로 표기되며, 문자열로 변환되는 메서드

- toPrecision(p, s) - 전체 자리수로 표기하며, 문자열로 변환되는 메서드

- valueOf() : object -> number 변환할 때 사용하는 메서드
   let x = 100;   // number
   let y = new Number("200");   // object형으로 숫자 표기

---

3) 숫자로 변환하는 메서드 - parseInt(), parseFloat(), Number()

- parseInt() : 정수로만 변환시킴

- parseFloat() : 실수 표기라면 실수로 변환시켜줌

- Number() : 숫자로 변환할 때 사용하는 함수

* Number.MAX_VALUE; 를 찍어보면 javascript에서 제일 큰 숫자는 1.7976931348623157e+308 인 것을 알 수 있다.

---

2. javascript 배열(array)

- 배열 선언 형식

let/var/const 배열명 = [ ];

* 보통은 const를 사용하여 배열을 선언한다.

 

- 배열에 값 할당하기

배열명[0] = 값;

배열명[1] = 값;

 

- 배열 선언과 동시에 값 할당하기

let/var/const 배열명 = [ ??, ??, ??];

 

- 객체, 함수, 배열도 배열의 요소가 될 수 있다.

 

코드 예시)

 

[결과]

---

1) 배열의 정렬(오름차순, 내림차순)

(1) sort() 메서드를 사용해서 정렬한다.

- 매개변수인 compareFunction를 아무것도 안주면 배열의 요소들이 문자열로 취급되어 오름차순 정렬이 된다.(유니코드 값 순서대로 정렬)

 

- compareFunction은 두 개의 배열 요소를 파라미터로 입력 받는다.

   a, b 두개의 요소를 파라미터로 입력받을 경우,

1) 리턴하는 값이 0보다 작을 경우(-1),  a가 b보다 앞에 오도록 정렬하고,

2) 리턴하는 값이 0보다 클 경우(1), b가 a보다 앞에 오도록 정렬한다.

3) 만약 0을 리턴하면, a와 b의 순서를 변경하지 않는다.

---

(2) reverse() 메서드도 내림차순 정렬이 가능하다.

- reverse 메서드는 호출한 배열의 순서를 반대로 바꾼다.

 

- 원본 배열을 변형하며 그 참조를 반환한다.

---

(3) 문자열을 비교하여 정렬하는 것이라면 localeCompare()을 사용해도 된다.

- 문자열과 문자열을 비교하고, 정렬순서에 따른 비교를 할 수 있다.

---

코드 예시)

 

[결과]

---

예제1) 숫자를 입력 후 버튼을 클릭하면 배열 추가, radio 버튼으로 오름차순, 내림차순 선택 후 버튼을 누르면 배열 정렬 후 출력하기

 

+ input 태그의 value를 숫자로 지정하면 if문으로 코딩하지 않고 value 값을 곱해서 오름차순, 내림차순 정렬을 할 수 있도록 코딩할 수 있다.

 

* forEach()의 elt, im array가 어떤 것을 의미하는가?

 

*  /\s*,\s*/ : 양 옆에 공백이 몇 개가 와도 상관이 없는 정규표현식

 

* sort() 람다식

sort((a,b) => a-b);  -> 오름차순 정렬

sort((a,b) => b-a);  -> 내림차순 정렬

---

3. 배열에 사용되는 메서드 OR 연산자 OR 속성

1) 배열인지 아닌지 확인하는 메서드와 연산자 - Array.isArray(), instanceof

---

2) 배열을 문자열로 바꿔주는 메서드 - toString()

---

3) 새로운 요소 추가하기 - push(), unshift()

- push() : 새로운 요소를 맨 마지막에 추가를 하고 리턴 값은 배열의 크기를 돌려준다.

 

- unshift() : 새로운 요소를 맨 처음에 추가를 하고 리턴 값은 배열의 크기를 돌려준다.

---

4) 배열의 가장 마지막 요소와 첫 번째 요소 가져오기 - pop(), shift()

- 배열명.length는 배열의 크기를 가지고 오기 때문에 -1 를 하면 마지막 요소를 가져올 수 있다.

 

- pop() : 배열의 가장 마자막 요소를 가져와 반환하고 그 값은 제거한다. 맨 뒤의 인덱스는 사라진다.

 

- shift() : 배열의 맨 첫번째 요소를 가져와 반환하고 그 값은 제거한다. 맨 처음의 인덱스는 사라진다.

---

5) 배열의 요소 값 변경과 배열의 요소 삭제하기 - 메서드 X

- delete : 배열 요소 삭제는 하지만 인덱스들이 밀리거나 땡겨지지않고 자리는 남겨둔다.

---

6) 배열 + 배열 / 값 + 배열 병합하여 새로운 배열로 반환하는 메서드 - concat()

- concat() : 두개의 배열을 병합 / 값 + 배열 병합하여 새로운 배열로 반환하는 메서드

---

7) 새로운 요소를 원하는 위치 값에 추가 / 삭제 메서드 - splice()

- splice(pos, amount, newelt)

    > pos : 새 요소를 추가할 위치값
    > amount : 제거할 요소의 갯수
    > 나머지 매개변수(newelt..) : 추가할 새 요소

    > newelt 매개변수 값을 안준다면 제거하겠다는 의미

---

8) 배열의 일부를 새 배열로 잘라내는 메서드 - slice()

- slice() : 배열의 일부를 새 배열로 잘라내는 기능 -> 원래 배열에 있는 값을 제거하지 않는다.

---

4. days05_배열 관련 추가로 배운 메서드(22.06.03)

1) 배열의 가장 큰 값, 가장 작은 값 출력하기

- Math.max.apply()와 Math.min.apply()를 활용하면 쉽게 구할 수 있다.

 

func

가져다 쓸 메소드

 

thisObj (선택 사항)

현재 객체로 사용될 객체

 

argArray

함수에 전달될 인수 집합

 

apply는 인자 배열을 받아 실행하는 함수로

Math.max가 func

null은 thisObj

m이 argArray에 해당한다.

---

2) m 배열의 각 요소의 값을 두 배 증가하시킨 새로운 배열 n을 만들어서 출력하기

map() : 자동으로 각 배열의 요소에 대해 함수를 수행하여 새로운 배열을 생성하는 메서드

---

3) m 배열의 각 요소의 값 중 15보다 큰 것만으로 새로운 배열 n 을 만들어서 출력하기

filter() : 조건을 만족하는(만족하면 true, false 반환) 배열의 요소만을 가진 새로운 배열을 생성하는 함수

---

4) m 배열의 모든 요소의 합을 구해서 출력하기

reduce() : 왼쪽에서 부터 처리, 각 배열의 요소들이 함수 실행을 거쳐 단일 값을 생성해서 반환하는 메서드(요소 -> 함수 -> 단일 값 생성)

reduceRight : 오른쪽에서 부터 처리

---

5) 1~5 사이의 임의의 값을 n 변수 저장하고 m 배열에 중복되는 지를 체크하기

every() : 배열의 모든 요소가 조건에 만족하는 지 여부를 반환하는 메서드(만족하면 true, 아니면 false)

some() : 배열의 하나의 요소라도 조건에 만족하면 true, 아니라면 false 반환하는 함수

> 중복된 값이 나와서 false를 반환 1,3,5에 해당하지 않는 2,4가 나온다면 true가 나옴