Archive

JS Day 8 배열

23 Dec 2020 | Javascript

JS Day 8 배열

  1. 배열

    • 순서가 필요한 작업을 할 때 배열을 이용하자
    • 자바스크립트의 배열엔 자료형의 제약이 없다. 함수, 객체 뭐든지 올 수 있음.
    • FIFO 자료구조인 큐(Queue)와 LIFO 자료구조인 스택(stack)을 구현 할 수 있다.
    /*
*	pop() : 배열의 끝 요소를 제거하고 반환
*	push() : 배열의 끝에 요소를 추가
*	shift() : 배열의 앞 요소를 제거하고 반환
*	unshift() : 배열의 앞에 요소를 추가
*/
let zoo = ["fox","rabbit"]; //java와 다르게 []로 배열을 선언한다
   
console.log(zoo.pop()); // rabbit
zoo.push("mouse");
console.log(zoo); // ["fox", "mouse"]
   
console.log(zoo.shift()); // fox
zoo.unshift("horse");
console.log(zoo); // ["horse", "mouse"]
    • 배열의 앞 요소에 무언가를 하면 뒤에 있는 요소들을 전체 뒤로 밀거나 땡겨야한다. 이 배열의 길이가 1억이라면 어떨까? 그만큼 연산이 많아지고 당연히 shift나 unshift는 성능면에서 push나 pop보다 떨어진다.
    • 배열을 순회 할 때는 일반 for문을 돌려도 되지만 for-of 문을 사용하면 편리하다.
    let zoo = ["fox","horse","rabbit","mouse"];
   
for(let animal of zoo){
    console.log(animal);
}// fox부터 차례대로 출력된다
    • for-in과의 차이는 무엇일까? * for-in은 객체를 순회할 때 주로 쓰이는데 모든 프로퍼티를 대상으로 순회를 돈다. key가 꼭 숫자가 아니어도 순회의 대상이 되기 때문에 속도가 늦다.
    • 결론 : 배열에서는 for-of를 사용하자
    • 배열의 길이를 임의로 늘리는 것은 아무 효과가 없지만 줄이면 배열이 잘려나간다. 잘려나간 배열은 메모리에서 삭제되어 복구 할 수 없게 된다.
    let zoo = ["fox","horse","rabbit","mouse"];
   
zoo.length = 10;
console.log(zoo); // 비어있는 empty가 6칸 늘어난다.
   
zoo.length = 2;
console.log(zoo); // ["fox","horse"]
console.log(zoo[3]); // undefined
    • java에서 처럼 new array(int length)로 배열을 생성 할 수도 있다. 하지만 잘 사용되지 않는다고 한다.
    • 다차원 배열 역시 생성 가능하다.
    • 배열엔 toString 메소드가 구현되어 있어 호출시 배열의 요소가 문자열로 반환된다.


  2. 배열 메소드

    • splice()

    • splice()는 배열의 추가, 삭제, 교체가 모두 가능한 유용한 메소드이다.
    • delete()는 배열의 요소를 삭제하고 빈 공간으로 둔다.
    • splice()는 삭제된 요소로 구성된 배열을 반환한다.
    • deleteCount를 0으로 주면 배열을 건드리지 않고 원하는 위치에 요소를 추가 할 수 있다.
    • index에 음수를 주면 뒤에서부터 센다.
    • deleteCount를 안적으면 index부터 모든 요소를 삭제한다.
    /*
*	slice(index, (deleteCount), (element...)) - ()생략 가능
*	index의 위치에 count만큼 삭제하고 element를 추가한다
*/
let zoo = ["fox", "mouse", "rabbit"];
let newZoo = zoo.splice(1,1);
console.log(newZoo); // mouse
   
zoo.splice(-1,0,"horse"); // ["fox", "horse", "rabbit"]
zoo.splice(1); // ["fox"]
    • slice()
    • slice(start, end) : start부터 end-1 까지의 요소를 복사한 새로운 배열 반환.
    • splice()와 다르게 기존의 배열을 건드리지 않는다.
    • 음수를 적으면 뒤에서부터 센다.
    let zoo = ["fox", "mouse", "rabbit"];
let newZoo = zoo.slice(0,2);
console.log(newZoo); // ["fox", "mouse"]
console.log(zoo); // ["fox", "mouse", "rabbit"]
    • concat()
    • concat(item1, item2…) : 기존 배열과 item들을 모두 모아 새로운 배열 반환.
    • item이 배열이면 배열을 모두 복사.
    • item이 객체면 객체 통으로 복사.
    let zoo = ["fox", "mouse"];
zoo.concat("rabbit", "horse");
console.log(zoo); // ["fox", "mouse", "rabbit", "horse"]
    • forEach()
    • 배열의 요소를 순회하며 주어진 함수의 기능을 수행한다.
    • 람다식 표현으로 많이 쓰인다.
    let zoo = ["fox", "mouse"];
zoo.forEach(alert); // fox mouse
   
//앞으로 요런식으로 많이 쓸거다
zoo.forEach(name => name.addEventListener('click', sayHi));
    • indexOf(), lastIndexOf(), includes()
    • 값을 비교 할 때 === 연산자를 사용해서 비교한다. 값이 완전 같아야한다는 말.
    /*
*	indexOf(item, from) : from부터 item을 찾아 index를 반환, 없으면 -1
*	lastIndexOf(item, from) : 위랑 동일, 뒤부터 시작
*	includes(item, from) : from부터 item을 찾고 있으면 true, 없으면 false
*/
   
let arr = ["fox", 1, null, false];
arr.indexOf(false); // 3
arr.indexOf(0); // -1
arr.includes(null) // true
    • find(), findIndex()
    • find()는 특정 조건을 만족시키는 값 한 개를 찾아 반환한다. 없으면 undefined 반환.
    • findIndex()는 위와 동일하나 index를 반환, 없으면 -1 반환.
    • 주로 객체로 구성된 배열에서 많이 쓰인다.
    let zoo = ["fox","mouse","horse"];
zoo.find(name => name.length > 3); // mouse
    • filter()
    • find()는 조건에 맞는 값 하나만 찾는데 비해 filter()는 조건에 맞는 요소를 모두 찾아 배열로 반환한다.
    • 함수의 리턴값은 boolean 형태.
    let zoo = ["fox","mouse","horse"];
zoo.filter(name => name.length > 3); // mouse horse
    • map()
    • filter()와 쓰임새는 비슷하나 리턴값으로 연산식을 수행 할 수 있다. 쉽게 말해, filter()는 조건식이 참이냐 거짓이냐로 판별 할 수 있는걸 걸고 map()은 더하고 빼고 등등 값을 적용시킨 새로운 배열을 만들 수 있다는 것!
    let num = [1,2,3,4];
num.map(item => item * 3); // [3, 6, 9, 12]
    • sort()
    • 배열의 요소를 정렬해준다. 단, 문자열 형태로 변환하여 비교하기 때문에 정렬기준을 인자로 넣어줘야 한다.
    let num = [4,9,123,7,72,23];
num.sort(( a, b ) => a - b ); // [4, 7, 9, 23, 72, 123]
num.sort(( a, b ) => b - a ); // [123, 72, 23, 9, 7, 4]
    • reverse()
    • 배열의 요소를 뒤집는다. 더 이상의 설명은 생략
    • split(), join()
    • split()은 JAVA의 split() 과 같은 기능이다. 구분자를 기준으로 문자를 쪼개준다.
    • join()은 반대로 구분자를 이용해 붙여주는 역할을 한다.
    let zoo = "여우, 쥐, 토끼";
let arr = zoo.split(', ');
for(let name of arr) {
    console.log(`${name}가 똥을 싼다`);
} //output은 생략하겠다
    • reduce()
    • for문 안에서 total += i 처럼 계속 누적되면서 계산이 되는 누산기 같은 녀석이다.
    let num = [1,2,3,4,5];
let result = num.reduce((total, currentValue) => total + currentValue);
console.log(result); // 15
   
/*
	초기값을 안적으면 배열의 첫번째 요소가 초기값(currentValue)이 된다
	total = 1
	다음 회차에 total에 2를 더하고
	다음 회차에 total에 3를 더하고
	.
	.
	이런 식이다.
*/



참고 자료

JAVASCRIPT.INFO

Related Posts