JS Day 8 배열
23 Dec 2020 | JavascriptJS Day 8 배열
-
배열
- 순서가 필요한 작업을 할 때 배열을 이용하자
- 자바스크립트의 배열엔 자료형의 제약이 없다. 함수, 객체 뭐든지 올 수 있음.
- 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 메소드가 구현되어 있어 호출시 배열의 요소가 문자열로 반환된다.
-
배열 메소드
-
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를 더하고 . . 이런 식이다. */ -
