[JAVASCRIPT] 객체/배열 함수

Notice

Recent Posts

Recent Comments

Link

수빈의 GitHub

250x250

« 2025/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

Tags more

Archives

Today

Total

관리 메뉴

[JAVA_Back-End]

[JAVASCRIPT] 객체/배열 함수 본문

Programming/HTML+ CSS + JAVASCRIPT

[JAVASCRIPT] 객체/배열 함수

너굴위 2023. 8. 16. 16:06

728x90

모듈화

함수

지역변수

제어문

객체

멤버필드(변수)

메서드(함수)

=>멤버필드의 초기화

*생성자:constructor

*setter/getter

*사용자 정의(개발자)-문법

*내장 사용법

기본객체- 자료형 연관 클래스

Object

String-암기

BOM-Browser Object Model - 브라우저 제어

DOM-Document Object Model-html 제어

*외장 사용법

*주민번호 계산 코드

- util.js에 따로 선언시켜 빼낸다

//함수화 시키기

//js에 따로 선언

const isJuminCheck=function(jumin){

//입력값 처리

jumin=jumin.replace('-','');

const bits=[2,3,4,5,6,7,8,9,2,3,4,5]

let sum=0;

for(let i=0;i<bits.length;i++){

sum+=Number(jumin.substring(i,i+1)*bits[i]);

}

let lastNum=parseInt(jumin.substring(12,13));

resultsum=(11-(sum%11))%10;

//출력

if(lastNum==resultsum){

return true;

}else{

return false;

}

};

메인코드

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let jumin='010928-4162316'

isJuminCheck(jumin);

if(isJuminCheck(jumin)){

console.log('맞음');

}else{

console.log('틀림');

}

</script>

</body>

</html>

#처음에는 메인에 기능구현 -> 해당 기능을 깔끔하게 정리(함수화, 모듈화) -> 해당 함수를 js파일로 빼낸뒤 메인에는 따로 적용시킴 -> 메인에서 사용자의 입출력 관련 소스만 남기도록 함

=>체계적인 소스코드를 생성할 수 있게 된다.

[날짜함수]

*날짜와 관련된 함수들

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let today= new Date();

console.log(today);

console.log(today.toString());

console.log(today.toLocaleString());

let strToday= today.toLocaleString();

console.log(strToday);

console.log(strToday.substring(0,11)); //날짜만 문자열로 자름

console.log(today.getFullYear());

console.log(today.getMonth()+1);

console.log(today.getDate());

//0:일요일

console.log(today.getDay());

//Timestamp -1970년 1월 1일부터 현재까지의 밀리초

console.log(today.getTime());

console.log(today.getHours()); //시간 가져오기

console.log(today.getMinutes()); //분 가져오기

</script>

</body>

</html>

*두 날짜 사이의 일수 계산하기

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let date1= new Date(2023,8-1,1);

let date2= new Date(2023,8-1,9);

//timestamp 밀리세컨드의 차이

console.log(date2-date1);

console.log(date2.getTime()-date1.getTime());

let time=date2.getTime()-date1.getTime();

let day=0;

day=time/(1000*60*60*24); //두 날짜 사이의 일 수 계산하기1

console.log(day);

console.log(date2.getDate()-date1.getDate()); //두 날짜 사이의 일 수 계산하기2

let date = new Date();

console.log(date.toLocaleString());

date.setDate(date.getDate()+7); //현재 설정된 날짜를 가져와 7일을 플러스 시켜 date에 저장한다

console.log(date.toLocaleString()); //date를 문자열로 가져온다

</script>

</body>

</html>

[수학함수]

*올림/내림/반올림

console.log(Math.ceil(5.6)); //올림

console.log(Math.ceil(5.5));

console.log(Math.ceil(5.4));

console.log(Math.floor(5.6)); //내림

console.log(Math.floor(5.5));

console.log(Math.floor(5.4));

console.log(Math.round(5.6)); //반올림

console.log(Math.round(5.5));

console.log(Math.round(5.4));

</script>

* 최대/최소

console.log(Math.max(52,273,57,32));

console.log(Math.min(52,273,57,32));

</script>

*랜덤함수

//0 <= x < 1 -실수값을 추출

console.log(Math.random()); //해당 랜덤함수를 수학적으로 따로 계산하여 얻고 싶은 랜덤 숫자의 범위를 지정해줘야 한다.

console.log(Math.random());

//0 ~ 9 까지의 임의의 정수 추출

//0<= x < 10

//0*10 <= x <1 *10 후 정수화 진행

console.log(parseInt(Math.random()*10));

</script>

*(응용) 로또 번호 추출하기

console.log(parseInt(Math.random()*45)+1);

let html="";

document.write('<table width="200">');

for(let row=0; row<5; row++){

html+="<tr>";

for(let col=0;col<6;col++){

html+='<td align=center>'+(parseInt(Math.random()*45)+1)+"</td>";

}

html+="</tr>";

}

html+="</table>";

document.write(html);

</script>

[배열 응용하기]

< 집합데이터 >

1. 배열(Array / List) - 순서(인덱스)가 있는 집합데이터

2. Set - 순서가 없고 중복을 배제한 집합데이터

3. Map - 순서 대신 키를 사용해서 저장하는 집합데이터

Array

1) 배열의 결합(concat)

let arr1=new Array(1,2,3);

let arr2=new Array(4,5,6,7);

let arr31=arr1.concat(arr2); //배열의 결합 (문자열과 같이 배열끼리 이어서 나타낼 수 있다)

console.log(arr31);

let str11=arr31.join();

console.log(str11);

let str12=arr31.join(':');

console.log(str12);

let reverse1=arr31.reverse(); //거꾸로 출력

console.log(reverse1);

</script>

2) 배열 내용 pop하여 없애거나 splice로 추가하기

let greenArr=["교대","방배","강남"];

let yellowArr=["미금","정자","수서"];

greenArr.splice(2,1,"서초","역삼");

console.log(greenArr);

let data1 =yellowArr.pop();

let data2=yellowArr.shift();

yellowArr.push(data2);

console.log(yellowArr);

yellowArr.unshift(data1);

console.log(yellowArr);

</script>

3) indexOf로 일치하는 문자의 인덱스 번호 확인하기

console.log(Array.isArray([1,2,3]));

console.log(Array.isArray({ }));

const arr =new Array('1','2','3','4','5','6','7','8','9')

console.log(arr.indexOf('8')); //해당 문자가 있는 인덱스 번호를 알려준다.

console.log(arr.lastIndexOf('8')); //indexOf와 같은 기능

</script>

4) forEach로 배열안의 내용과 인덱스 번호 출력하기

let arr = new Array(1,2,3,4);

//for

arr.forEach(function(element,i){ //forEach함수는 배열의 크기에 따라 반복이 된다.

//console.log('hello');

console.log(element,i); //안에 인자 변수를 넣게 되면 배열 안의 내용이 나타난다.

}); //두번째 인자는 배열의 순서값을 알 수 있다

let sum = 0;

arr.forEach(function(e){

sum+=e;

});

console.log('합계:',sum);

</script>

5) 인덱스의 내용을 범위를 지정하여 새로 채워넣기

let arr = new Array(1,2,3,4,5);

console.log(arr.fill(7)); //배열 안 내용을 모두 7로 채워라

console.log(arr.fill(7,1)); //7을 인덱스 1부터 끝까지 채워라

console.log(arr.fill(7,1,3)); //7을 인덱스 1부터 인덱스 3전까지 채워라

</script>

Set (중복X)

1) set을 사용하여 배열 집어넣기

const set=new Set();

console.log(set);

console.log(typeof set);

const set1= new Set([1,3,5,4,2]); //Set안에는 배열을 집어넣을 수 있음

console.log(set1);

console.log(set1.size);

const set2=new Set([1,2,3,4,5,6,4,5,3,2]);

console.log(set2);

console.log(set2.size); //데이터를 넣을 때 중복을 배제시키는 알고리즘이 Set에는 있기 때문에 중복되는 값을 제외한 나머지 값에 대한 길이를 알려준다.

console.log(" ");

for(let data of set2){

console.log(data);

}

</script>

2) 문자열 중복 걸러내기/ Set객체로 정의한 배열의 내용 가져오기

const set=new Set();

set.add('축구');

set.add('농구');

set.add('야구');

set.add('배구');

console.log(set);

set.add('축구');

set.add('농구');

set.add('야구');

set.add('족구');

console.log(set); //set을 사용해 문자열 또한 중복을 제거할 수 있다.

console.log(set.has('야구')); //존재하면 true, 존재하지 않으면 false를 반환한다.

console.log(set.has('발야구'));

//foreach를 통해 데이터를 가져오기

set.forEach(function(element){

console.log(element);

});

</script>

Map (키-값 구조)

1) map을 이용해 키-값 형태로 배열 집어넣기 (인덱스의 개념이 아니기 때문에 호출도 다르다)

const map=new Map();

console.log(map);

console.log(typeof map);

const map1 = new Map(

[

['key1','value1'], //키-값 형태로 쌍을 이뤄 나타내기 때문에 인덱스의 개념이 없다.

['key2', 'value2'],

['key3', 'value3']

]);

console.log(map1);

console.log(map1.size);

for(let data of map1){

//console.log(data); //map안에 있는 배열들을 보여준다.

console.log(data[0], data[1]); //map안에 배열 안에있는 키와 값의 내용을 보여준다

}

for(let [key, value] of map1){

console.log(key,value); //배열 안 내용(키-값)을 변수로 지정하고 해당 변수를 불러옴

}

</script>

2) map구조 안의 값을 가져오는 방법 (형태는 배열과 비슷함)

const map1 = //Map객체를 정의하지 않고 중괄호를 통해 값을 넣을 수 있다.

[

{key:1,value:10},

{key:2,value:20},

{key:3,value:30}

];

console.log(map1);

console.log(map1.size);

console.log(map1[0].key); //map구조안의 값을 가져오는 방법

console.log(map1[1].key);

console.log(map1[2].key);

console.log(map1[0].value);

console.log(map1[1].value);

console.log(map1[2].value);

</script>

3) 키를 통해 값을 출력하기/ 키 or 값의 내용을 묶음으로 가져오기

const map = new Map();

map.set('one',100); //데이터를 따로따로 넣는 방식 (set과 동일한 구조)

map.set('two',200);

map.set('three',300);

console.log(map);

console.log(map.get('one')); //인덱스처럼 키값을 집어넣으면 해당되는 값을 출력한다.

console.log(map.get('three'));

map.set('three',500);

map.set('four',400); //키에 대한 중복검사를 해줌 (배열 안에 키가 있으면 값을 갱신시키고 키가 없으면 새로 추가한다)

console.log(map);

//keys(키의 묶음 가져오기)

let keys =map.keys();

console.log(keys);

for (let key of map.keys()){ //키의 정보 뽑기

console.log(key);

}

for (let value of map.values()){ //값의 정보 뽑기

console.log(value);

}

</script>

728x90

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] DOM (CSS) (0)	2023.08.18
[JAVASCRIPT] 내장함수, 기능(window/DOM(HTML)/form) (0)	2023.08.17
[JAVASCRIPT] 객체 (0)	2023.08.11
[JAVASCRIPT] 함수 (0)	2023.08.10
[JAVASCRIPT] 제어문 (if, else, else if, switch, while, for) (0)	2023.08.09

'Programming/HTML+ CSS + JAVASCRIPT' Related Articles

[JAVA_Back-End]

[JAVASCRIPT] 객체/배열 함수 본문

[JAVASCRIPT] 객체/배열 함수

[날짜함수]

[수학함수]

[배열 응용하기]

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

티스토리툴바