[𝕁𝕒𝕧𝕒𝕤𝕔𝕣𝕚𝕡𝕥.2] 배열

[𝕁𝕒𝕧𝕒𝕤𝕔𝕣𝕚𝕡𝕥.𝟚] 배열
-𝕋𝕠𝕕𝕒𝕪 𝕝𝕚𝕤𝕥-
𝟙.Array(배열)의 메서드 실습
𝟚.Array(배열)의 반복문 실습

𝟙.Array(배열)의 메서드 실습

concat(), join(), push(), unshift(), pop(), shift(), splice()

𝟏-𝟏.concat()메서드

►concat()메서드는 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 준다. 어느 배열을 먼저 쓰는가에 따라 기준이 달라지고, 결과 배열의 순서도 달라진다.

𝕋𝕀𝕡 -> concat()메서드를 이용해 새로 만들어진 배열은 기존 배열에 영향을 주지않는다.

𝔼𝕩☛ 배열 2개를 합쳐서 새로운 배열 만들기

//배열 2개 합치기
var nums = [1,2,3];
var chars = ["a","b","c","d"];

var numChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write("nums에 chars 합치면:",numsChars,"<br> chars에 nums 합치면:",charsNums);

[결과값 ]
nums에 chars 합치면: 1,2,3,a,b,c,d
chars에 nums 합치면: a,b,c,d,1,2,3

𝟏-𝟐. join()메서드

►join()메서드는 배열 요소를 연결해서 하나의 문자열로 만들어 준다.
이때, 각 요소 사이에 원하는 구분자('/')를 넣을수도 있는데, 따로 지정하지 않으면 요소를 쉼표(',')로 구분한다.

𝔼𝕩☛ 배열 안의 요소 합치기

//배열 안의 요소 합치기
var nums = [1,2,3];
var chars = ["a","b","c","d"];

var string1 = nums.join();
document.write("구분자 없이:",string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("'/'구분자 지정:",string2);

[결과값]
구분자 없이: 1,2,3
'/'구분자 지정 : a/b/c/d

𝟏-𝟑.push(),unshift()메서드
►배열에 새로운 요소를 추가하려면 push() unshift() 메서드를 사용한다.
배열 맨 끝 추가 -> push()
배열 맨 앞 추가 -> unshift()

❖ 주의할 점 -> 배열 맨 앞과 맨 뒤에 요소를 추가하면 원래 있던 배열이 바뀐다.

𝔼𝕩☛배열에 새로운 요소 추가하기

var nums = [1,2,3];

var ret1 = num.push(4,5); //배열 맨 끝에 새로운 요소를 추가
document.write("length:",ret1,"|배열:".nums);
document.write("<br>");

var ret2 = nums.unshift(0);//배열 맨 앞에 새로운 요소를 추가
document.write("length:",ret2,"|배열:".nums)

[결과값]
length :5 | 배열: 1,2,3,4,5
length :6 | 배열: 0,1,2,3,4,5

𝟏-𝟒.pop(),shift()
►배열에서 요소를 꺼내는 메서드
배열 뒤 요소 -> pop()
배열 앞 요소 -> shift()

𝔼𝕩☛ 배열에서 요소 꺼내기

//요소 꺼내기 - 꺼낸 요솟값 반환
var char = ['a','b','c',d];

var popped1 = chars.pop(); //마지막 요소 꺼냄
document.write("꺼낸 요소:",popped1,"| 배열:",chars);
document.write("<dr>");

var popped2 = chars.shift(); //1번째 요소 꺼냄
document.write("꺼낸 요소:",popped2,"| 배열:",chars);
document.write("<dr>");

[결과값]
꺼낸 요소:d | 배열: a,b,c
꺼낸 요소:a | 배열: b,c

𝟏-𝟓.splice()메서드
►splice()메서드는 괄호 안에 들어 있는 인수에 따라 배열 요소를 삭제 하거나 새로운 요소를 추가 splice()메서드를 실행하면 삭제한 요소로 이루어진 새로운 배열이 결과값을 반환

𝔼𝕩☛ 인수가 1개인 경우

//인수가 1개인 경우 
var numbers = [1,2,3,4,5];
var newNumbers = numvers.splice(2);
document.write("반환된 배열:"+ newNumbers + "<br>");
document.write("변경된 배열:"+numbers);

[결과값]
반환된 배열:3,4,5
변결된 배열:1,2

𝔼𝕩☛ 인수가 2개인 경우

var study = ["html","css","wed","jquery"];
var newStudy = study.splice(2,1);
document.write("반환된 배열:"+ newStudy + "<br>");
document.write("변경된 배열:"+study);

[결과값]
반환된 배열 : web
변경된 배열 : html,css,jquery

𝔼𝕩☛인수가 3개 이상인 경우 요소 삭제/추가 하기

//인수가 3개 이상인 경우 
var newStudy2 = study.splice(2,1,"js");
document.write("반환된 배열:"+ newStudy + "<br>");
document.write("변경된 배열:"+study);

[결과값]
반환된 배열 : jquery
변경된 배열 : html,css,js

𝟏-𝟔.slice()메서드
►기존 배열을 바꾸지 않으면서 꺼내는 slice()메서드는 pop()shift()메서드와 같아 보이지만 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고 실행 결과 기존 배열이 바뀌지 않는다는 차이점이 있다.

𝔼𝕩☛ 인수가 1개인 경우

var colors = ["red","green","blue","white","black"]
var colors = colors.slice(2); 
// 인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
document.write(colors2);

[결과값]
blue,white,black

𝔼𝕩☛ 인수가 2개인 경우

var colors = ["red","green","blue","white","black"]
var color3 = colors.slice(2,4); 
// 인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
document.write(colors3);

[결과값]
white,black

𝟚.Array(배열)의 반복문 실습

console.log("램덤으로 점수를 배열에 받아, 반복문으로 총점과 평균 구하기");

let scores = new Array(10);
console.log("====랜덤 생성된 점수 배열====");
for(i=0; i<scores.length; i++){
  scores[i] = Math.floor((Math.random()*100)+1);
  console.log("scores","["+i+"]", "="+scores[i]);
}

console.log("==== 총점 및 평균 ====")
let sum = 0;
let ave = 0.0;

for(i=0; i<scores.length;i++)
  sum += scores[i];
  
  ave = sum/scores.length;
  console.log("총점:" +sum);
  console.log("평균:" +ave);
  

console.log("==============================")

[결과값]
====랜덤 생성된 점수 배열====
scores [0] =33
scores [1] =87
scores [2] =33
scores [3] =38
scores [4] =42
scores [5] =55
scores [6] =27
scores [7] =51
scores [8] =69
scores [9] =91
==== 총점 및 평균 ====
총점:526
평균:52.6

==============================