JavaScript

JS | 배열

개발 공부 2022. 12. 28. 11:57

자바 스크립트의 배열은 [ ] 로 묶어주기만 하면 됩니다.

자바 스크립트의 배열의 저장은 자바와 다르게 타입과 상관없습니다.

같은 타입만 들어갈 수 있는것이 아니라 어떤 타입이든 섞여서 들어갈 수 있다.

리스트처럼 동작 / 특징은 리스트와 같다 / 동적인 배열 / 고정값이 아닌 자동으로 변경된다.

 

같은 코드 

var arr1 = [];

var arr4 = new Array();

 

괄호 안에 매개값을 하나만 넣으면 크기, 여러개 넣으면 배열의 초기값이다.

 

 

//배열의 선언 방법1
        //[]로 표현합니다.

        var arr = [];
        console.log(arr); // []

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

        var arr2 = ['a','b','c']; 
        console.log(arr2); //['a', 'b', 'c']

        var arr3 = [1,2,3,'a','b'];
        console.log(arr3); //[1, 2, 3, 'a', 'b']

        //배열의 사용
        console.log(arr[0]); //1
        console.log(arr[1]); //2
        console.log(arr[2]); //3

        arr[0] = 100; //값의 변경
        console.log(arr[0]); //100

        console.log('------------------');

        //배열의 선언 방법2
        var arr = new Array(); //빈배열
        console.log(arr); //[]

        var arr2 = new Array(10); //크기가 10인 배열
        console.log(arr2); //[empty × 10]

        var arr3 = new Array(1,2,3); //크기가 3, 초기값 1,2,3
        console.log(arr3); //[1, 2, 3]

        //배열의 길이확인
        console.log('배열의 길이',arr3.length);  //배열의 길이 3

 

배열을 조작하는 다양한 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript

 

JavaScript | MDN

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼

developer.mozilla.org

 

매개값이 여러개 들어갈 수 있는 함수가 있고, 아닌 함수가 있어서 

억지로 외우는것보다 실제로 적용해보면서 확인하는 것이 좋다.

 

Array.prototype.push() 

배열의 마지막에 값을 추가해주는 함수

//배열을 조작하는 다양한 함수
//MDN
var arr = [1,2,3,4,5];

//배열 마지막에 추가 push()
arr.push(6);
console.log(arr); //[1, 2, 3, 4, 5, 6]

Array.prototype.pop()

배열의 마지막에 있는 값을 없애는 함수

// 배열 마지막 요소 제거
arr.pop();
console.log(arr); //[1, 2, 3, 4, 5]

Array.prototype.unshift()

배열의 앞에 값을 추가해주는 함수

//배열의 첫번째에 추가
arr.unshift([1,2]);
//배열 안에 배열을 넣을 수도 있다. 매개변수가 유동적이다.
console.log(arr); //[Array(2), 1, 2, 3, 4, 5]
arr.unshift(10);
console.log(arr); //[10, Array(2), 1, 2, 3, 4, 5]

Array.prototype.shift()

배열의 앞에 있는 값을 없애는 함수

//배열의 첫번째 요소 제거 shift()
arr.shift();
console.log(arr); //[Array(2), 1, 2, 3, 4, 5]
arr.shift();
console.log(arr);//[1, 2, 3, 4, 5]

Array.prototype.splice()

배열의 요소를 삭제, 또는 교체하거나 새 요소를 추가해서 배열의 내용을 변경해주는 함수

중간 요소를 삭제하거나 추가할 때 사용

 //(인덱스 위치,삭제 요소, 추가할 요소)
        
//배열의 중간의 추가 삭제 splice()
arr.splice(2,1); //2번 인덱스의 1개 삭제, a추가
console.log(arr); // [1, 2, 4, 5]

arr.splice(2,1,'a'); //2번 인덱스의 1개 삭제, a추가
console.log(arr); //[1, 2, 'a', 5]

arr.splice(2,0,'b'); //2번 인덱스의 0개 삭제, b추가
console.log(arr); // [1, 2, 'b', 'a', 5]

Array.prototype.sort()

문자열 정렬 방식으로 정렬해주는 함수

//배열 정렬 -> 사전등재순
arr.sort();
console.log(arr); // [1, 2, 5, 'a', 'b'] 숫자는 문자보다 빠름

var arr2 = [1000,2,5,10];
arr2.sort();
console.log(arr2); // [10, 1000, 2, 5]

Array.prototype.reverse()

배열을 뒤집어주는 함수

arr.reverse();
console.log(arr); // ['b', 'a', 5, 2, 1]

Array.prototype.indexOf()

인덱스 위치를 찾아주는 함수

 //배열의 탐색
console.log(arr.indexOf('a')); //발견된 위치 : 1
console.log(arr.indexOf('a',2)); //2번쨰 위치에서부터 a를 탐색, 값이 없다면 -1반환

// -적용예시
if(arr.indexOf('a')!=-1){ //'a'가 있다면
}

Array.prototype.concat() //중요

배열과 배열을 합쳐 new 배열을 만들어주는 함수 (배열합치기 함수)

//배열 합치기
var arr2 = ['가','나','다'];
var newArr = arr2.concat(arr2); 
console.log(newArr); //['가', '나', '다', '가', '나', '다']

 

 

이 외에 자주 사용되는 함수

  • filter
  • foreach (반복문)
  • join
  • map 

정리해놓기!