Javascript 배열1, Array함수 push( ) / pop() [자바스크립트 도장깨기]

목차

 

배열 만드는 2가지 방법

1차원 배열

1. 리터널 대괄호를 사용하는 방법(간소화된 방법으로 주로 사용한다. )

var arr = []; // 빈 배열
var arr = ["서울", "인천", "경기"]; // 문자열 배열

2. Array() 생성자 함수를 사용하는 방법

var arr = new Array(); // 길이가 100인 배열
var arr = new Array(1, 2, 3); // 초기값을 지정한  배열
var strarr = new Array("ABC", "BCD", "CDE");

 

 

2차원 배열

var arr =  new Array(	new Array(10, 20, 30),
			new Array(10, 20, 30),
                        new Array(10, 20, 30));

 

var arr = [[10,20,30],[10,20,30],[10,20,30]];

 

 

메서드

concat()

기존 배열에 다른 배열 or 값을 합쳐서 새로운 배열로 만드는 함수

let week1 = new Array("일", "월", "화", "수");
let week2 = new Array("목", "금", "토", "일");

let weekly = week1.concat(week2); 
// ["일", "월", "화", "수", "목", "금", "토", "일"]'

 

join()

배열 요소를 연결하는 함수, 요소 사이에 넣을 구분 기호를 지정할 수 있다.

let numbers = ['1', '2', '3'];
numbers.join();
// ['1', '2', '3'] 

numbers.join('-');
// 1-2-3

 

pop() & push()

- pop(), 배열의 마지막 요소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄인다.

- push(), 배열에 하나 또는 여러 개의 값을 넣고 새로운 배열을 길이를 반환한다.

let weekly = new Array("일","월","화","수");
let poped = weekly.pop(); // 배열 끝 요소를 삭제
let pushed = new Array("목", "금", "토") // 배열 끝에 요소를 추가

document.write(poped);
// 수

weekly.push(pushed);
document.write(weekly);
// 일, 월, 화, 목, 금, 토

 

 shift() & unshift()

- shift(), 배열의 첫요소를 제거한다.

- unshift(), 베열의 처음에 요소를 추가한다.

let weekly = new Array("일","월","화","수");
document.write(weekly.shift()); 
// 월, 화, 수

weekly.unshift("목, 금");
document.write(weekly);

// 목, 금, 월, 화, 수

 

 

slice()

배열값의 일부분을 선택하여 새로운 배열을 만든다

let weekly = ["일","월","화","수"];
document.write(weekly.slice(2));
// [화, 수]
document.write(weekly.slice(1,4));
// [월, 화, 수]

 

 

splice()

배열 중간에 요소를 추가, 삭제하는 함수이다. 괄호한에 인수에 따라 요소를 삭제, 추가한다.

let nums = [0,1,2,3,4,5,6,7];
nums.splice(2)); // nums[2]부터 모두 삭제, 3,4,5,6,7 삭제
document.write(nums); // 0, 1

let nums = [0,1,2,3,4,5,6,7];
nums.splice(2, 1)); // nums[2]에서 1개만 삭제, 2 삭제
document.write(nums); // 0, 1, 3, 4, 5, 6, 7]

let nums = [0,1,2,3,4,5,6,7];
nums.splice(2, 1, "two")); // nums[2]에 "two"로 대체
document.write(nums); // 0, 1, 2, 3, 4, 5, 6, 7]

nums.splice(2, 0, "two")); // nums[2]에 "two"를 추가
document.write(nums); // 0, 1, 2,"two", 3, 4, 5, 6, 7]

 

sort() & reverse()

nums.sort([compareFuction]

- sort(), 정렬 순서를 정의하는 함, 기존 배열을 변경한다. 

- reverse(), 배열의 순서를 거꾸로 만들 수 있다.

 

const nums = [2, 1, 3, 10];
nums.sort(); // 1, 10, 2, 3

const fruits = ['Apple', 'Banana', 'Orange'];
fruits.reverse(); //// Orange, Banana, Apple

 

sort 숫자 정렬

nums의 10은 3보다 큰 수인데 먼저 정렬 된거로 보인다. sort가 아스키코드(문자)기준인 정렬방법이기 때문이다.

 

숫자 정렬을 위핸 compareFunction 파라미터가 필요하다. 선언할 경우 배열의 요소를 2개씩 반복해서 보낸 뒤 반환하는 값을 기준으로 정렬은 한다. 보내는 요소를 a, b라고 할 시 함수의 해석은 아래와 같다.

 

반환 값 > 0 : b가 a보다 앞에 있어야 한다. ( 13 - 5, 8로 5가 13보다 앞에 있어야 한다.

반환 값 = 0 : a와 b의 순서를 바꾸지 않는다. 

반환 값 < 0 : a가 b보다 앞에 있어야 한다. ( 8 - 27, -19 음수로 27이 8보다 뒤에 있어야 한다. )

 

let nums = [27, 8, 5, 13];
// 8 27
// 5 8
// 13 5 
// 13 8
// 13 27

nums.sort((a, b) => {
 console.log(a, b);
 return a - b ;
});

//오름차순
nums.sort(function(a, b){
	return a - b;
}
//내림차순
nums.sort(function(a, b){
	return b - a;
}

 

toString()

배열을 문자열로 나타낸다.

let nums = [1, 2, 3, 4, 5];
nums.toString();
// '1, 2, 3, 4, 5'