배열 (Array)

어떤 타입의 값이라도 담을수 있는 그릇 (크기 지정 필요 X)

(1) 배열 생성

1. Array() 생성자 함수

: 생성자 함수로 객체를 생성할 때는 반드시 new 연산자를 같이 써야한다.

let exArr = new Array();

- 매개변수

• 인자가 1개이고 숫자 타입일 경우
  : 호출된 인자를 length로 갖는 빈 배열 생성
• 그 외의 경우
  : 호출된 인자를 요소로 갖는 배열 생성

var arr = new Array(3); 
console.log(arr, arr.length);	 // [undefined, undefined, undefined] 3
var arr2 = new Array(true,’가’,a’,1); 
console.log(arr2, arr2.length);	 // [true, ‘가’,  ‘a’, 1], 4

2. 배열 리터럴

: 객체를 쉽게 정의할 수 있도록 디자인된 표기법

• 대괄호 [ ] 를 이용해서 객체를 생성, 데이터를 쉼표 ","로 구분

Ex) var arr = [‘jaen’, ‘jsp’, 2018]

 

(2) 배열 다루기

1. 배열 읽기

대괄호 [ ] 안에 배열 내 위치 인덱스 값 ( 0부터 시작! )

let arr = ['jaen'];
console.log(arr[0] , arr[1]);	// ‘jaen’ undefined

2. 배열 쓰기

배열 표준 메소드 또는 직접 인덱스에 접근하여 할당한다.

array [index] = data;

let arr = [];
arr.push(1);	//[1]
arr[1] = 2;	 //[1, 2]
arr.pop();	  //[1]

console.log(arr);	//[1]

 

(3) 배열 관련 속성 및 메소드

let arr = ['jaen', ‘js’, 2018];	//start!!!

• length 속성
  배열의 길이를 알려주며, 배열 원소의 가장 큰 인덱스가 변했을 때 변경된다.

arr.length;		//3 (length === index - 1)

• 원소 추가 : push() 배열 뒤, unshift() 배열 앞

arr.push(‘back!’);	// [’jaen’, ‘js’, 2018, ‘back!’]
arr.unshift(‘front!’);	// [‘front!’, ’jaen’, ‘js’, 2018, ‘back!’]

• 원소 삭제 : pop() 배열 뒤, shift() 배열 앞

arr.pop();		// [‘front!’,’jaen’, ‘js’, 2018]
arr.unshift();		// [’jaen’, ‘js’, 2018]

 

• concat() 메소드 : 현재 배열 데이터를 기반으로 새로운 배열을 만드는 메서드

  array.concat([value1[, value2[, ...[, valueN]]]])

  - 매개변수 : 배열 또는 값

  let arr2 = [1,2];			
  let otherArr = arr.concat(arr2);	// [‘jaen’ ‘js’, 2018, 1, 2]
  otherArr  = otherArr.concat(3,['front','develop']); // [’jaen’, ‘js’, 2018, 1, 2, 3, 'front', 'develop'] 
  // 원래 배열 arr은 그대로 남음, 영향 ❌

   

• slice() 메소드 : 배열에 포함된 데이터 일부를 가진 새로운 배열을 만드는 메서드 (원소 복사)

  array.slice( startIndex, endIndex )

  - 매개변수

  • startIndex :: default - 0
      음수 인덱스 : 배열의 끝에서부터의 길이,
      startIndex > array.length : 빈 배열 반환
  • endIndex :: default - array.length
      음수 인덱스 : 배열의 끝에서부터의 길이,
      endIndex > array.length : 배열 전체 반환

  arr.slice();	// [’jaen’, ‘js’, 2018]
  arr.slice(1);	// [‘js’, 2018]
  arr.slice(-1);	// [2018]
  arr.slice(0,2);	// [’jaen’, ‘js’]
  arr.slice(2,1);	// []
  //arr 그대로 [’jaen’, ‘js’, 2018], 영향 ❌

• splice() 메소드 : 배열 데이터 삽입, 대체, 삭제 (*삭제한 데이터 배열로 반환)

  splice(start, deleteCnt, itemN)

  • 매개변수
    • start: 배열에서 시작 위치(변경이 시작되는 인덱스)
    • deleteCnt: start에서 지정한 시작 위치부터 삭제할 요소의 수
    • itemN: 삭제할 위치에 추가할 요소

  let spliceArr = arr.splice(1,1);	// arr : [’jaen’, 2018], spliceArr : [‘js’]
  spliceArr = arr.splice(1,0,’wow’);   //arr : [‘jaen’,‘wow’, 2018], spliceArr : []
  spliceArr= arr.splice(1,1,101,102);	//arr:[’jaen’, 101,102, 2018],spliceArr: [‘wow’]

   

• indexOf(), lastIndexOf() : 위치 탐색 메소드

  indexOf() : 배열의 처음(인덱스 0)에서 검색을 시작

  lastIndexOf() : 배열의 마지막에서 검색을 시작

  • 매개변수 (검색할 data, 검색 시작할 index)
    찾아낸 데이터의 인덱스를 반환하는데, 찾지 못하면 -1을 반환

  var colors = ['red', 'blue', 'orange', ‘red’, ‘green’, ’brown']; 
  colors.indexOf('red');		// 0 
  colors.lastIndexOf('red')	 // 3 
  colors.indexOf('red', 2); 	// 3 (3번째 인덱스부터 마지막까지 검색)
  colors.lastIndexOf('red', 2); // 0 (3번째 인덱스부터 처음까지 검색)

   

• length 속성 : 배열 내에 가장 큰 인덱스에 1을 더한 값 (배열의 원소개수 X)

  console.log(arr, arr.length); 	// [’jaen’, ‘js’, 2018] 3
  arr.length = 5;
  console.log(arr); 		// [’jaen’, ‘js’, 2018, undefined, undefined]

   

---

 

• 날짜 관련 메서드

  Date 객체 : 날짜 & 시간 사용하는 자바스크립트 내장 객체

• Date.parse() 메서드
  // 매개변수 넘기지 않을 경우 현재 날짜 & 시간 저장
  let now = new Date (); // Sun June 17 2018 00:05:14 GMT+0900