JavaScript(JS) - 배열

조성주·2023년 2월 24일
1

JavaScript

목록 보기
5/21
post-thumbnail

✅ 배열(Array)

  • 여러 개체(Entity)값을 순차적으로 나열한 자료 구조이다.
  • 배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근한다.
  • 선언은 new Array() 혹은 []로 한다.
const asd = new Array();
const arr = [];

대표 속성(Property)과 메서드(Method)

1) 배열 크기

  • Array.length : 배열의 크기를 출력한다.
const arr = ["aa", 'bb", "cc"];
console.log(arr.length) // output : 3

2) 배열 타입 확인

  • Array.isArray() : 배열인지 아닌지 확인을 한다.
Array.isArray([]); // output : true

3) 배열 추가

  • Array.push(value) : value를 배열의 요소로 맨 뒤에 추가를 한다.
const arr = [];
arr.push("aa");
  • Array.unshift(value) : value를 배열의 요소로 맨 앞에 추가를 한다.
const arr = ["aa"];
arr.unshift("bb") // arr = ["bb", "aa"]
  • Array.concat() : s인자로 주여진 배열이나 값들을 기존 배열에 합쳐서 새 배열로 반환한다.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); output: Array ["a", "b", "c", "d", "e", "f"]

4) 배열 삭제

  • Array.pop() : 맨 뒤에 요소를 삭제를 한다.
const arr = ["aa", "bb", "cc"];
arr.pop() // arr = ["aa", "bb"]
  • Array.shift() : 맨 앞에 요소를 삭제를 한다.
const arr = ["aa", "bb", "cc"];
arr.shift() // arr = ["bb", "cc"]
  • Array.splice() : 배열로부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있다. 원본 배열에 영향을 미친다.
const arr_1 = ["aa", "bb", "cc", "dd", "ee"];
const arr_2 = arr_1.splice(1, 3, "asd", "asd");

console.log(arr_1); [ 'aa', 'asd', 'asd', 'ee' ] -> 자른 공간에 추가할 요소가 들어간다.
console.log(arr_2); [ 'bb', 'cc', 'dd' ]
  • Array.slice() : 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다. 첫번째 인자로 시작 인덱스(index), 두번째 인자 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환한다. 복사를 하는 것이기 때문에 원본 배열에 영향을 미치지 않는다.
const arr_1 = ["aa", "bb", "cc", "dd", "ee"];
const arr_2 = arr_1.slice(0, 3);

console.log(arr_1); // [ 'aa', 'bb', 'cc', 'dd', 'ee' ]
console.log(arr_2); // [ 'aa', 'bb', 'cc' ]

3) 배열 반복문

  • for, while문 : for문 while문으로 배열 인덱스에 접근하여 배열을 출력할 수 있다.
for(let i=0; i<arr.length; i++){
	console.log(arr[i]);
}

while(i < arr.length){
	console.log(arr[i])
    i++;
}
  • for .. of문 : 배열을 순회하며 배열 element를 뽑는다.
for(let element of arr ){
	console.log(element) // 요소 출력
}
  • for .. in문 : 배열을 순회하며 배열의 key(index)를 뽑는다.
for(let key in arr){
	console.log(key) // key 출력
}

4) 배열 탐색

  • Array.indexOf(item, from) : 문자열과 동일하게 item을 검색하여 해당 item에 index를 출력한다. from에 값을 넣으면 몇번째 index부터 검색할 지 지정한다.
let arr = ["aa", "bb", "cc"];
arr.indexOf("bb"); // 1
  • Array.lastIndexOf(item, from) : lastIndexOf는 indexOf에 반대로 배열 뒤에서 부터 요소를 검색한다.
let arr = ["aa", "bb", "bb", "cc"];
arr.indexOf("bb"); // 2
  • Array.includes() : 요소의 여부를 확인하여 불리언 형태로 출력한다.
let arr = ["aa", "bb", "bb", "cc"];
arr.indexOf("dd"); // false

5) 배열 정렬

  • Array.sort() : 배열을 순서대로 정렬을 한다. 문자열은 ABC 순으로 정렬한다.
let arr = [1, 3, 7, 6, 5]
arr.sort() // [1, 3, 5, 6, 7]

let arr_2 = ["abc", "bww", "ace", "cww"]
arr_2.sort() //  ["abc", "ace", "bww", "cww"]

6) 배열 반전

  • Array.reverse() : sort 메서드와 반대로 역순으로 정렬한다.
let arr = [1, 3, 7, 6, 5]
arr.reverse() // [7, 6, 5, 3, 1]

let arr_2 = ["abc", "bww", "ace", "cww"]
arr_2.reverse() //  ["cww", "bww", "ace", "abc"]

7) 배열 변환

  • Array.join(separator) : 배열값을 특정 기준을 배열 요소 사이에 포함하여 문자열로 변환한다.
let arr_2 = ["abc", "bww", "ace", "cww"]
arr.join("!"); // abc!bww!ace!cww
profile
프론트엔드 개발자가 되기 위한 기록

0개의 댓글