[javascript]자바스크립트 배열

자바스크립트에서 배열의 특징

-배열 요소의 타입의 고정되어 있지 않다.

-배열요소의 인덱스가 연속되지 않아도 된다. 

 

자바스크립트 배열 생성 방법

1.대괄호를 사용하여 생성(배열 리터럴)

		//1.빈배열 생성후 요소 추가 
		var arr1 = [];
		arr1[0] = '1';
		arr1[1] = '2';
		arr1[2] = '3';
		console.log("arr1=" + arr1);

		//2.초기값 할당 배열 생성
		var arr2 = [ 1, 2, 3 ];
		console.log("arr2=" + arr2);

		//3.배열 크기 할당하여 생성
		var arr3 = [ , , , ]; //쉼표수가 배열의 크기
		console.log("arr3=" + arr3);

2.Array() 함수로 생성

		//1.빈배열 생성후 요소 추가 
		var arr1 = new Array();
		arr1[0] = '1';
		arr1[1] = '2';
		arr1[2] = '3';
		console.log("arr1=" + arr1);

		//2.초기값 할당 배열 생성
		var arr2 =  new Array(1, 2, 3);
		console.log("arr2=" + arr2);

		//3.배열크기지정 생성
		var arr3 =  new Array(3);
		console.log("arr3=" + arr3);

-배열 생성 방법에 따른 큰 차이는 없지만 리터럴 형식을 사용한 경우에 브라우저에서 좋은 성능을 보이며 리터럴 형식이 코드 크기를 줄일수 있는 방법이기 때문에 리터럴을 사용하는 편이 추천된다.

---

자바스크립트 배열 길이 가져오기

length

배열의 길이를 반환한다.

* length 속성에 값을 설정하면 배열의 크기를 줄이거나 늘릴수 있다.

 

자바스크립트 배열 내장함수 반복문(수정,출력 등)

forEach()

for문을 대체하는 배열 내장함수

예제) 배열의 요소 출력

-기존 for문

	 let arr=['고양이','강아지','햄스터',5];
	 for(var i=0;i<arr.length;i++)
	 {
		 console.log(arr[i]);
	 }

-forEach 함수 

	 let arr=['고양이','강아지','햄스터',5];
     	 arr.forEach(i=>{
		 console.log(i);
	 });

 

각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어주며 이 함수의 파라미터는 각 원소를 가르킨다. 이를 콜백함수라고 부른다. 

얕은 복사(swallow Copy)가 수행되어 기존 배열이 수정된다.

* 콜백함수란? -다른 코드의 매개변수로서 넘겨주는 실행가능한 코드를 말함

* 얕은 복사(swallow Copy)란 - 객체의 참조(주소)값의 복사,결국 한 데이터를 공유하는 것

자바스크립트 배열 내장함수 재정의

map()

주어진 배열의 값들을 오름차순으로 접근해 새로운 값을 정의하고 신규 배열을 만들어 반환.

배열의 값을 재정의할때 사용함

	 let arr=[1,2,3,4,5];
	 let s=n=>n*n;
	 let arr2=arr.map(s);
	 console.log(arr2);

결과값

-map과 forEach문의 차이-기존 배열을 수정하느냐 새로운 배열을 생성하여 수정하느냐의 차이

자바스크립트 배열 내장함수 요소 찾기

indexOf()

-요소값으로 몇번 째 요소인지 찾아주는 함수

	 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
	 let index=arr.indexOf("토끼");
	 console.log(index);

결과값=2

findIndex()

-요소가 객체일때 몇번재 요소인지 찾아주는 함수

return 값이 찾아낸 요소의 index값이다.

		let arr = [

		{
			name : '백설',
			type : '강아지',
			age : 8
		}, {
			name : '대박이',
			type : '강아지',
			age : 7
		}, {
			name : '삼색',
			type : '고양이',
			age : 5
		}, {
			name : '삼색',
			type : '고양이',
			age : 5
		}, {
			name : '마를린',
			type : '고양이',
			age : 3
		} ];
		let index = arr.findIndex(ele => ele.name === '대박이');
		console.log(index);

findIndex가 return한 값

find()

-요소가 객체일때 몇번재 요소인지 찾아주는 함수 

return 값이 찾아낸 요소 이다.

		let arr = [

		{
			name : '백설',
			type : '강아지',
			age : 8
		}, {
			name : '대박이',
			type : '강아지',
			age : 7
		}, {
			name : '삼색',
			type : '고양이',
			age : 5
		}, {
			name : '삼색',
			type : '고양이',
			age : 5
		}, {
			name : '마를린',
			type : '고양이',
			age : 3
		} ];
		let index = arr.find(ele => ele.name === '대박이');
		console.log(index);

find()가 return한 값

자바스크립트 배열 요소 삭제

pop()

배열의 마지막 요소를 삭제

-return 값은 삭제된 요소의 값이다.

	 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
	 let returnValue=arr.pop();
	 console.log(arr);
	 console.log(returnValue);

pop()을 실행한 후 arr 값

arr.pop()이 return한 값

length -1

배열의 마지막 요소를 삭제

		 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
		 arr.length=arr.length-1;
		 console.log(arr);

shift()

배열의 첫번째 요소 삭제

-return 값은 삭제된 요소의 값이다.

	 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
	 let returnValue=arr.shift();
	 console.log(arr);
	 console.log(returnValue);

shift()을 실행한 후 arr 값

arr.shift()이 return한 값

 

splice(인덱스,제거할 요소 개수)

설정한 배열 인덱스 위치부터 특정 개수 만큼 배열의 요소를 삭제

* 첫번째 인자를 0으로 지정하고 두번째 인자를 생략하면 모든 배열의 요소가 삭제된다.

-return 값은 제거한 요소를 담은 배열이다.

-활용

//문제1.다음 배열에서 400,500를 삭제하는 code를 입력하세요.
// -문제 출처)제주 코딩 베이스 캠프 코드 패스티벌


     let nums = [ 100, 200, 300, 400, 500 ];
    //*********************************************************************************
		console.log("실행 전=" + nums);
		for (var i = 0; i < nums.length; i++) {
			if (nums[i] == '400') {
				var result = nums.splice(i, 2);
			}
		}
		console.log("실행 후=" + nums);
		console.log("결과 값=" + result);

splice()로 변경한 배열값과 splice()가 리턴한 결과값

slice(인덱스,잘라낼 요소 개수)

배열을 잘라낼때 사용,기존의 배열을 수정하지않고 새로운 배열을 만든다.

retrun 값은 새롭게 생성한 잘라낸 배열이다.

		let arr = [ "고양이", "강아지", "토끼", "햄스터", "앵무새" ];
		let result = arr.slice(1,2);
		console.log(arr);
		console.log(result);

slice()사용 후 기존 배열 arr값과 slice()의 반환 값

delete

배열의 요소는 그대로 두고 값만 삭제

		 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
		 delete arr[1]
		 console.log(arr);

삭제하게 되면 요소의 값만 삭제되어 undefined 으로 출력

자바스크립트 배열 요소 추가

unshift()

배열의 맨 앞에 새 요소 추가

return  값은 배열의 length값이다.

		let arr = [ "고양이", "강아지", "토끼", "햄스터", "앵무새" ];
		let result = arr.unshift("도마뱀");
		console.log(arr);
		console.log(result);

unshift()사용후 배열 arr값과 unshift()가 return한 값

push()

배열의 맨 뒤에 새 요소 추가

return  값은 배열의 length값이다.

		let arr = [ "고양이", "강아지", "토끼", "햄스터", "앵무새" ];
		let result = arr.push("도마뱀");
		console.log(arr);
		console.log(result);

push()사용후 배열 arr값과 push()가 return한 값

 

배열명(배열명.length)

배열의 맨 뒤에 새 요소 추가

		let arr = [ "고양이", "강아지", "토끼", "햄스터", "앵무새" ];
		arr[arr.length]="도마뱀";
		console.log(arr);

push를 사용했을 때와 결과는 같다.

배열이름[인덱스]

n번째 인덱스 위치에 요소 추가, n번째 인덱스에 기존 값이 있을경우 덮어씌워지며 n번째 인덱스와 배열의 끝번호사이에 값이 정의되지 않을시 undefined요소가 자동생성된다.

		let arr = [ "고양이", "강아지", "토끼", "햄스터", "앵무새" ];
		arr[2] = "도마뱀";
		console.log(arr);

결과

		let arr = [ "고양이", "강아지", "토끼", "햄스터", "앵무새" ];
		arr[8] = "도마뱀";
		console.log(arr);

결과

splice(인덱스, 0, 요소 )

인덱스 부터 입력한 요소가 추가된다.

		 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
		 arr.splice(1,0,"도마뱀");
		 console.log(arr);

splice()실행결과

splice(인덱스, 0, 요소1, 요소2, ... )

인덱스 부터 입력한 요소들이 추가된다.

		 let arr=["고양이","강아지","토끼","햄스터","앵무새"];
		 arr.splice(1,0,"도마뱀","물고기");
		 console.log(arr);

splice()실행결과