자바 스크립트, 배열, 배열함수

※ 배열

 

 

​

● 배열 => 대괄호

1. 배열의 선언

let num = []

let arr = new Array()

2. 배열의 생성

num = [1,2,3]

arr = new Array(1,2,3)

배열안에 있는 값을 저장, 접근 => 인덱스 번호

배열의 전체 길이 => 배열이름.length

​

● 배열 : 여러 변수를 하나의 묶음으로 다루는 것

1. 배열의 선언

let arr = []

let arr2 = new Array(10)

※ new Array(배열길이)

** 배열 길이를 설정했어도, 초과 가능

=> 공간이 동적, 가변적

​

★★ 중요! 무조건! 배열의 선언을 먼저 진행

​

2. 배열의 생성

arr = [1,2,3]

arr2 = new Array(1,2,3,4,5)

console.log(arr2)

결과=>

​

1+2. 선언과 생성 동시에

let arr3 = [1,2,3]

​

3. 배열 안에 데이터 저장

** 인덱스로 접근할 때 0부터 시작!

​

let teacher = []

teacher[0]='나예호 선생님'

teacher[1]='홍성채 선생님'

console.log(teacher.length)

결과=>

​

4. 배열에 저장된 데이터에 접근

=> 인덱스!

for문을 통해 배열에 있는 전체 값 추출

0~ 배열.length

​

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

console.log(teacher[i])

}

결과 =>

​

● 배열 예제

1. list 라는 배열을 선언

2. list 라는 배열 안에 1부터 8까지의 값을 생성한다.

3. 홀수 만을 구분해서 출력

3-1) 홀수를 넣어줄 수 있는 배열을 따로 선언

3-2) 홀수의 개수를 판단하는 변수를 선언

출력 : list 안에 들어있는 홀수는 1,3,5,7 이며 총 4개다.

​

let list=[1,2,3,4,5,6,7,8]

홀수를 판단하고, 홀수를 넣어줄 수 있는 배열

let reslist=[]

 

 

Case 1. 알고리즘 풀이 : for문을 이용해서 홀수일때만 cnt을 증가시키고 reslist에 list의 홀수를 추출해 저장

reslist[cnt] = list[i]

cnt++

 

홀수의 개수를 판단할 수 있는 숫자

let cnt=0

​

3. 홀수 만을 구분해서 출력

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

짝수 or 홀수 : 홀수일 때만 list[i]를 reslist[cnt]를 저장후 cnt를 1씩 증가 시킴

if(list[i]%2 ==1){

reslist[cnt] = list[i]

cnt++

}

}

console.log(reslist)

console(cnt)

​

Case 2. push() : 배열의 맨 마지막 인덱스에 데이터 넣기

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

짝수 or 홀수

if(list[i]%2 ==1){

reslist.push(list[i])

}

}

console.log(reslist)

console(reslist.length)

​

​

​

/* 나의 풀이

for(let i=0; i<8;i+=2){ // i+2, i+=2<- 2를 다른 숫자로 변경가능

console.log(list[i])

list1.push(list[i]) //.push() 해당 리스트에 추가

}

 

for(let i=0;i<8;i+2){

console.log(list[i])

list1[i]=list[i]

}

console.log(list1)

console.log('list 안에 들어있는 홀수는 '+list1+' 이며 총 '+list1.length+'개다.')

*/

결과=>

​

​

● 배열 함수

let list = []

​

1. push() ★

배열의 맨 마지막 인덱스에 데이터 넣기

list.push(5)

list.push('박진우')

console.log('push: '+list)

결과 =>

​

2. pop() ★

배열의 맨 마지막 인덱스 데이터 삭제

list.pop()

console.log('pop: '+list)

결과 =>

​

3. unshift()

배열의 맨 앞 인덱스에 데이터 넣기

list.unshift('홍성채')

console.log('unshift: '+list)

결과 =>

​

4. shift()

배열의 맨 앞 인덱스 삭제

list.shift()

console.log('shift: '+list)

결과 =>

​

5. splice()

원하는 위치에 데이터 추가 or 삭제

(1) 데이터 추가 : splice(원하는 인덱스,0,추가할데이터)

list.splice(0,0,'나예호')

console.log('splice로 추가: '+list)

(2) 데이터 삭제 : splice(원하는 인덱스, 삭제할 개수)

list.splice(0,2)

console.log('splice로 삭제: '+list)

결과 =>

​

6. forEach 문 ★ : 배열의 요소를 item을 사용해 하나씩 꺼낼 수 있음.

let list2 = ['황해도', '선영표', '나예호', '홍성채']

list2.forEach(function(item){

console.log(item)

})

결과 =>

​

7. at() : 양수의 인덱스를 받을 경우 해당 인덱스를 반환 하고, 음수를 받을 경우 마지막부터 인덱싱해서 반환 한다. 문자열에서도 동일하다.

let res = list2.at(-1)

console.log(res)

결과 =>

​

8. 검색

(1) 포함 여부 알기 : includes

console.log(list2.includes('최영화'))

결과 =>

(2) 내용이 포함 되어 있는 인덱스 indexOf

console.log(list2.indexOf('황해도'))

결과=>

​

● 배열 실습

(1) 과목 수 입력

(2) 과목 수만큼 과목 이름을 입력할 수 있는 입력창

(3) 각 과목들의 점수를 입력할 수 있는 입력창

(4) 각 과목들의 점수, 총점, 평균 점수 도출

(5) 각 점수, 총합, 평균을 HTML 문서 내에 테이블로 출력

** document.write()

내가 HTML 문서 내에 적고싶을땐? document.write()

​

※ 표관련 태그

 

 

​

​

​

​

​

정답!!

​

과목 수, 과목 이름, 과목 점수, 총점, 평균

let subNum = 0;

let subName = [];

let subScore = [];

let totalScore = 0;

let avgScore = 0;

let score = 0;

​

(1) 과목 수 입력

subNum = Number(prompt('과목 수 입력'));

​

(2) 과목 수만큼 과목 이름을 입력할 수 있는 입력창

for (let i = 0; i < subNum; i++) {

subName.push(prompt('점수를 입력할 과목을 입력하세요.'));

}

​

(3) 각 과목들의 점수를 입력할 수 있는 입력창

Case 1 : for문

for (let i = 0; i < subNum; i++) {

(4) 각 과목들의 점수, 총점, 평균 점수 도출

score = Number(prompt(subName[i] + '의 점수를 입력'));

subScore.push(score);

totalScore += score;

}

avgScore = parseInt(totalScore / subNum);

console.log(avgScore)

​

Case 2 : forEach 이용

subName.forEach((item, index) => {

(4) 각 과목들의 점수, 총점, 평균 점수 도출

score = Number(prompt(item + '의 점수를 입력'));

subScore.push(score);

totalScore += score;

})

avgScore = parseInt(totalScore / subNum);

console.log(avgScore)

​

(5) 각 점수, 총합, 평균을 HTML 문서 내에 테이블로 출력

** document.write()

내가 HTML 문서 내에 적고싶을땐? document.write()

 

document.write('<table border="1px solid black" width="200px">')

# 테이블생성- 굵기: 1px, 색상: 블랙, 넓이: 200px

첫번째 tr (행)

document.write('<tr>')

Case 1 : for 문

for (let i = 0; i < subNum; i++) {

document.write('<td>' + subName[i] + '</td>')

}

​

Case 2 : forEach

subName.forEach((item, index) => {

document.write('<td>' + item + '</td>')

})

document.write('<td>총합</td>')

document.write('<td>평균</td>')

document.write('</tr>')

​

두번째 tr (행)

document.write('<tr>')

Case 1 : for문

for (let i = 0; i < subNum; i++) {

document.write('<td>' + subScore[i] + '</td>')

}

Case 2 : forEach

subScore.forEach((item, index) => {

document.write('<td>' + item + '</td>')

})

document.write('<td>' + totalScore + '</td>')

document.write('<td>' + avgScore + '</td>')

document.write('</tr>')

document.write('</table>')