JS 배열 다루기

인코딩·2022년 8월 11일

JavaScript

목록 보기
5/8

배열에 엘리먼트 추가/삭제

  • .push(element): 배열의 뒤에 값 추가
  • .pop(): 배열의 맨 뒤의 값 삭제하고 반환
  • .shift(): 배열의 앞에서 값 삭제하고 반환
  • .unshift(element): 배열의 앞에 값 추가

배열 붙이기, 검색하기

  • arr1.concat(arr2): 두개의 배열 붙이기
  • arr.indexOf(element): element의 첫번째 위치 반환
  • arr.lastIndexOf(element): element의 마지막 위치 반환
    • 없으면 -1 반환

배열 뒤집기

reverse()

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); // 5,4,3,2,1

배열 정렬

sort()

var arr2 = [1,5,3,6,2];
arr2.sort();
console.log(arr2); //1,2,3,4,5 오름차순

그런데..!
var arr3 = [14, 73, 4, 26]; 이라면,,?
배열 값의 타입을 문자열로 인식하기 때문에 [14, 26, 4, 73] 의 결과가 나온다.
그럼 어떻게 해야 할까요..
두 값씩 전달해서 a-b로 크기를 비교하고 값을 반환해준다
(양수: a>b, 0: a==b, 음수: a<b //오름차순)

var arr = [14, 73, 4, 26];

//오름차순
arr.sort((a,b) => a-b); //[4, 14, 27, 73]

//내림차순
arr.sort((a,b) => b-a); //[73, 26, 14, 4]

문자열 split 함수

문자열을 구분자로 나눠서 각각 담은 배열을 반환하는 함수

var str = "1,2,3,4,5";
str.split(","); // ["1","2","3","4","5"]
str.split(3); //["1,2,", ",4,5"]

배열 안에 특정값 포함 여부

includes()

includes(): 배열이 특정 값을 포함하는지 여부를 boolean 값으로 반환

  • 두번째 인자는 몇번째 index에서부터 검색할것인지!
  • 두번째 인자가 배열 길이보다 크면 무조건 false
  • 두번째 인자에 음수가 들어가면 배열길이+두번째인자의 위치부터 검색
var arr = [1,2,3,4,5];
arr.includes(1); //true
arr.includes(5); //false
arr.includes(2, 4); //false //4,5에서 탐색하니까
arr.includes(2, -1); //false //4,5에서 탐색하니까
arr.includes(2, -4); //true //2,3,4,5에서 탐색하니까
arr.includes(1, -4); //false //2,3,4,5에서 탐색

findIndex()

findIndex(): 찾는 값의 첫번째 index를 반환. 없으면 -1 반환.
...공부중^^~ // indexOf와 무엇이 다른지 이해하고 오세요
https://humahumahuma.tistory.com/81

중복 제거

  1. Set: set 객체는 중복된 값을 가지지 않는다. 이런 특성을 이용.
var arr = [1,2,2,3,4,4,5];
var set = new Set(arr); // set = {1,2,3,4,5}
var new_arr = [...set]; // set객체를 다시 배열로

  1. indexOf(), filter(): 처음 나타날때만 필터되도록
var arr = [1,2,2,3,4,4,5];
var new_arr = arr.filter((element,index) => {
 	return arr.indexOf(element) === index;
});
  1. forEach(), includes(), push()
    새로운 배열 생성, 원래 배열을 순회하면서 중복되지 않는 값들을 새로운 배열에 push
var arr = [1,2,2,3,3,4];
let new_arr = [];
arr.forEach((element) =>{
	if(!new_arr.includes(element)) {
      new_arr.push(element);
    }
});

특정 값 제거

  1. index를 알 때
    splice()를 쓴다.
var arr = [1,2,3,4,5];
arr.splice(2,2); //2번 index부터 2개의 값 제거
arr.splice(1,1); //1번 index부터 1개의 값 제거

두번째 인자 안쓰면 쭉 밀어버리니까 조심

이렇게 된다고요,,

  1. filter이용
var arr = [1,2,3,4,5];
arr = arr.filter((element) => element !== 3); //[1,2,4,5]

배열 길이 지정 초기화

  1. for문 이용
var N = 5;
var arr = [];

for(var i=0; i<N; i++) {
	arr[i] = 0;
}
  1. Array.fill() 이용
var N = 5;
var arr = new Array(N).fill(0);
  • 가장 간결하다.. 하지만 new Array(N)은 속도가 느림!
  1. 얘가 더 빠르다
var N = 5;
var arr;
(arr=[]).length = N;
arr.fill(0);
  1. Array.apply
var N = 5;
var arr = Array.apply(null, new Array(5)).map(Number.prototype.valueOf, 0);

참고 글: https://miiingo.tistory.com/272

profile
인생을 코미디처럼 딩기딩딩기딩

0개의 댓글