개발공부일지
Javascript - 문자열, 숫자 관련 메서드 / new Date/ 구조분해할당/ spread 연산자(...) 본문
목차
1. 문자열관련 메서드
2. 숫자관련 메서드
3. new Date
4. 구조분해할당
5. spread 연산자
1. 문자열 관련 메서드
- indexOf : 문자열에서 몇번째 자리에 있는지 알려준다.
- length : 문자열의 총 길이를 알려준다.
- slice : 문자열에서 원하는 부분을 잘라서 보여준다.(원본을 훼손하지않는다)
- split : 분해하다라는 뜻으로, 원하는 문자열을 잘라서 배열로 만들어준다.
→ ("") : 문자열 전부 하나씩 다 분해해서 배열로 만들어준다.
→ (" ") : 문자열을 전부 하나의 배열로 만들어준다.
→ 띄어쓰기가 있다면 띄어쓰기 기준으로 나눠져서 배열이 만들어진다.
- replace : 특정문자를 바꿔준다.
- toUpperCase : 문자열을 대문자로 바꿔준다.
- toLowerCase : 문자열을 소문자로 바꿔준다.
const str = "aPpleIsfrUit";
console.log(str);
console.log(str.indexOf("Is"));
console.log(str.length);
console.log(str.slice(2, 7));
console.log(str.split("s"));
console.log(str.split(" "));
console.log(str.split(""));
console.log(str.replace("Is", "not"));
console.log(str.replace("Is", " "));
console.log(str.replaceAll("Is", " ")); //?????
console.log(str.toUpperCase());
console.log(str.toLowerCase());
2. 숫자관련 메서드
- random : 0부터 1사이의 숫자가 랜덤으로 나온다.
- abs : 절대값
- max/min : 최대값/ 최소값
- pow : 제곱
- round/parseInt : 반올림/ 정수
- sqrt : 제곱근(루트)
- 컴퓨터는 소수점에 약하다!!
console.log(Math.random());
console.log(Math.abs(-9));
console.log(Math.max(1, 120, -7, 0.6, 0));
console.log(Math.min(1, 120, -7, 0.6, 0));
console.log(Math.pow(3, 2));
console.log(Math.pow(2, 10));
console.log(Math.round(3.14));
console.log(Math.round(3.54));
console.log(parseInt(3.54));
console.log(Math.round(Math.PI));
console.log(Math.sqrt(8));
console.log(0.9999999999999999);
console.log(0.99999999999999999);
3. new Date()
- new Date : 오늘 날짜와 시간의 정보를 알려준다.
- getDate : 오늘 날짜를 보여준다.
- getHours : 현재 시간을 알려준다
- getDay : 요일을 숫자로 알려준다. (일요일 0부터 ~ 토요일 6까지)
console.log(typeof new Date());
console.log(new Date());
// UTC표기법
console.log(new Date().getDate());
console.log(new Date().getDay());
console.log(new Date().getHours());
console.log(new Date().getTimezoneOffset());
console.log(new Date().toISOString());
//그리니치 영국쪽 시간 (기준 GMT)
console.log(Date.now());
// 1688694024004 그리니치 표준시 MS 0.001초
// 컴퓨터의 모든시간이 GMT로 나와
console.log(new Date(1688694024004));
console.log(
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate() +
" " +
new Date().getHours() +
":" +
new Date().getMinutes()
);
4. 구조분해할당
- 객체를 구조분해해서 키값을 가져올수있다!
const aa = { a: 1, c: 4 };
const bb = { b: 2, d: 15, c: "632" };
console.log({ ...aa, ...bb });
// 구조분해할당
const { a, c } = aa;
console.log(a);
console.log(c);
5. spread연산자 [...[]...[]]
- 여러개의 배열을 풀어서 배열하나로 묶어준다.
- 풀어둔것을 변수로 사용할수없다.
console.log([...[1, 2, 3, 4, 5], ...[1, 2, 3, 4, 5]]);
console.log([...["가", "나", "다"], ...["라", "마"]]);
▼ 스프레드 연산자 활용방법!!!!!
- 이름이 없는것에 이름을 넣어 사용할수있다.
[...document.getElementsByClassName("item")].forEach((item) => {
console.log(item);
});
const [item1, item2, item3, ...items] = [
...document.getElementsByClassName("item"),
];
console.log(item1);
console.log(item2);
console.log(item3);
console.log(items);
★ 오늘의 포인트와 남겨두기 ★
※ 그리니치 영국 시간 GMT
※ setTimeout()
※ new Date().getTimezoneOffset()
※ replaceAll
※ Math.round(Math.PI)
※ Math.random()으로 가위바위보?!?
※ 유용한 방법!!!!!!
const langs = {
ko: "안녕",
en: "Hi",
jp: "gonichiwa",
ch: "nihao",
};
let selcetLang = "ko";
console.log(langs[selcetLang]);
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!
** 목표에 대해 생각하자!!!!!
* 만들고 싶은것의 흐름을 생각해보기