[JavaScript] 배열

​

 

배열

배열 : 하나의 변수에 여러 값을 저장할 수 있는 객체 자료

 

 

배열 선언

let seasons = ["봄", "여름", "가을", "겨울"];
let color = ["초록", "빨강", "갈색", "흰색"];

 

 

배열 관련 메서드

concat()

let seasons = ["봄", "여름", "가을", "겨울"];
let color = ["초록", "빨강", "갈색", "흰색"];

// 배열 두개 concat
let concatArr = seasons.concat(color);
console.log(concatArr); // ["봄", "여름", "가을", "겨울", "초록", "빨강", "갈색", "흰색"];
console.log(concatArr.length); // 8

 

join()

 

let seasons = ["봄", "여름", "가을", "겨울"];

// 배열 join
console.log(seasons.join("::")); // 봄::여름::가을::겨울

 

reverse()

let seasons = ["봄", "여름", "가을", "겨울"];

// 배열 reverse
console.log(seasons.reverse()); // [ '겨울', '가을', '여름', '봄' ]

 

요소 추가, 삭제

let color = ["초록", "빨강", "갈색", "흰색"];

// 요소 추가
color.push("검정"); // 배열의 끝에 추가
color.unshift("주황"); // 배열의 시작에 추가
console.log(color); // [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]


// 요소 삭제
color.pop("검정"); // 배열의 마지막 원소 삭제
color.shift("주황"); // 배열의 첫 원소 삭제
console.log(color); // [ '초록', '빨강', '갈색', '흰색' ]


// 원하는 인덱스 요소 삭제 - splice(시작번호, 삭제 개수, 추가요소)
let color = [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]
color.splice(2); // 인덱스 2번부터 끝까지 삭제
console.log(color); // [ '주황', '초록']

color.splice(2, 3); // 인덱스 2번부터 3개 요소 삭제
console.log(color); // [ '주황', '초록', '검정' ]

color.splice(2, 3, '노랑'); // 인덱스 2번부터 3개 요소 삭제하고 인덱스 2번에 '노랑' 추가
console.log(color); // [ '주황', '초록', '노랑', '검정' ]

 

 

slice()

let color = [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]

// 요소 잘라서 새로운 배열 생성 - slice(시작인덱스, 끝인덱스)
let myColor = color.slice(3);
console.log(myColor); // [ '갈색', '흰색', '검정' ]

let myColor = color.slice(1, 4); // 4 앞에까지 들고옴
console.log(myColor); // [ '초록', '빨강' ]

 

 

isArray()

let color = [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]

// 배열인지 확인 
console.log(Array.isArray(color)); // true

 

indexOf(), lastIndexOf()

let color = [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]

// 요소의 인덱스 반환 
// indexOf : 앞에서 검색, 
console.log(color.indexOf("갈색")); // 3
console.log(color.indexOf("파랑")); // -1

// lastIndexOf : 뒤에서 검색
console.log(color.lastIndexOf("갈색")); // 3
console.log(color.lastIndexOf("파랑")); // -1

 

foreach()

let color = [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]

// foreach()
color.forEach(function (elem, idx) {
  console.log(`index : ${idx}, element : ${elem}`);
});
// index : 0, element : 주황
// index : 1, element : 초록
// index : 2, element : 빨강
// index : 3, element : 갈색
// index : 4, element : 흰색
// index : 5, element : 검정

color.forEach((elem, idx) => console.log(idx, elem));
// 0 주황
// 1 초록
// 2 빨강
// 3 갈색
// 4 흰색
// 5 검정

 

map()

let arr = [1, 2, 3, 4, 5];

// map() : 기존 배열을 이용해 새로운 배열 생성
let mapArr = arr.map(function (elem) {
  return elem * elem;
});
console.log(mapArr); // [ 1, 4, 9, 16, 25 ]

 

filter()

let arr = [1, 2, 3, 4, 5];

// filter() : 특정조건 만족하는 요소 추출 -> 새로운 배열 생성
// every() : and, some() : or
let filterArr = arr.filter(function (elem) {
  return elem <= 3;
});
console.log(filterArr); // [ 1, 2, 3 ]

// every() : 모두 참 -> 참
// some() : 한개만 참 -> 참
function lessthan3(element, index, array) {
  return element <= 3;
}
let everylt3 = arr.every(lessthan3);
console.log(everylt3); // false
let somelt3 = arr.some(lessthan3);

 

reduce(), reduceRight()

let arr = [1, 2, 3, 4, 5];

// reudce() : 왼쪽에서 두 개씩 묶어 하나가 될 때까지 줄여가는 연산
// reduceRight() : 오른쪽에서 두 개씩 묶어 하나가 될 때까지 줄여가는 연산
let reduceArr = arr.reduce(function (pre, cur) {
  console.log(`pre : ${pre}, cur : ${cur}`);
  return pre + cur;
});
console.log(reduceArr); // 15

 

sort()

let arrNum = [2, 7, 5, 3, 1, 6, 8];

// sort()
console.log(arrNum);
// 유니코드 순서에 따라서 정렬
console.log(arrNum.sort()); // [ 10, 2, 3, 5, 7 ]
// 파라미터(compareFunction)를 활용
console.log(
  arrNum.sort(function (a, b) { 
    return a - b; // 오름차순
    //return a + b; // 내림차순
  })
); // [ 2, 3, 5, 7, 10 ]


let color = [ '주황', '초록', '빨강', '갈색', '흰색', '검정' ]

// 글자 sort()
console.log(color);
console.log(
  color.sort(function (a, b) {
    return a > b ? 1 : -1; // 오름차순
    //return a < b ? 1 : -1; // 내림차순
  })
); // [ '갈색', '검정', '빨강', '주황', '초록', '흰색' ]

 

배열 예제

// p1. 생성자 함수, 메서드, 배열을 이용한 성적 구하기
function Student(name, kor, eng, math, art) {
  this.name = name;
  this.kor = kor;
  this.eng = eng;
  this.math = math;
  this.art = art;
}

Student.prototype.getSum = function () {
	// 해당 인스턴스 this. 으로 필드 접근
  return (this.kor + this.eng + this.math + this.art);
}

Student.prototype.getAvg = function () {
  return (this.getSum() / (Student.length - 1));
}

Student.prototype.toResult = function () {
  return `${this.name}\t${this.getSum()}\t\t${this.getAvg()}`;
}

let students = [];
// 배열에 인스턴스를 추가
students.push(new Student('ㅁㅁㅁ', 50, 49, 60, 79));
students.push(new Student('ㄴㄴㄴ', 80, 80, 80, 80));
students.push(new Student('ㅇㅇㅇ', 78, 69, 90, 89));
students.push(new Student('ㄹㄹㄹ', 56, 78, 56, 87));
students.push(new Student('ㅎㅎㅎ', 98, 87, 87, 56));

console.log(students[0].getSum)

let sungjuk = '이름\t총점\t평균\n';
for (let student of students) {
  sungjuk += student.toResult() + '\n'
}

console.log(sungjuk)

 

 

 

- Just Do It -