[자바스크립트]배열

//배열 선언
let arr = new Array();

let fruits = ["사과", "오렌지", "자두"];
alert(fruits.length);	//3

//trailing 쉼표
배열의 마지막 요소는 객체와 마찬가지로 쉼표로 끝날 수 있다.

 

pop/push/shift/unshift

let fruits = ["사과", "오렌지", "배"];

//pop()
//배열 끝 요소를 제거해서 반환한다.
alert(fruits.pop());		//배

//push()
//배열 끝에 요소를 추가한다.
fruits.push("포도");	
fruits.push("복숭아","망고");

//shift()
//배열의 맨 앞 요소를 제거해서 반환한다.
alert(fruits.shift());		//사과

//unshift()
//배열의 맨 앞에 요소를 추가한다.
fruits.unshift("참외");

 

반복문

let fruits = ["사과", "오렌지", "자두"];

// for .. of
for (let fruit of fruits){
	alert(fruit);
}


//배열은 객체형에 속하기 때문에 for .. in도 가능하지만, 프로퍼티를 대상으로 순회하여 생기는 문제점과
//객체가 아닌 배열에 사용할 경우 처리속도가 매우 느리기 때문에 되도록이면 for .. of를 사용하자.

 

length 프로퍼티

length는 배열 내 요소의 개수가 아니라 가장 큰 인덱스에 1을 더한 값이다.

또한 length값을 수동으로 증가시키면 변화가 없지만, 감소시킬 경우 배열이 잘려 복구되지 않는다.

 

arr.length = 0;  

위와 같이 간단히 배열을 비울 수 있다.

 

배열 요소 추가 및 제거

 

arr.splice( )

//arr.splice(index[, deleteCount, elem1, ..., elemN])

let arr = ["a", "b", "c"];
arr.splice(1,1);	//인덱스 1부터 요소 한 개를 제거

arr.splice(0, 1, "d", "e");		//인덱스0부터 1개 제거 후 d,e추가
arr.splice(2,0, "f");			//인덱스2에 요소 f추가 (deleteCount를 0으로 하면 제거하지 않음.)

 

arr.slice( )

let arr = ["t", "e", "s", "t"];

alert(arr.slice(1, 3));		//e,s
alert(arr.slice(-2));		//s,t

 

arr.concat( )

let arr = [1, 2];
alert(arr.concat([3, 4]));

 

arr.forEach( )

arr.forEach(function(item, index, array){

});

arr.forEach((item, index, array) => {
	alert(`${item} is at index ${index} in ${array}`);
});

 

arr.find( )

find메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾아 반환한다.

let result = arr.find(function(item,index,array){
});
//find안의 조건과 일치하여 true가 반환되면 반복을 멈추고 해당 요소를 반환한다.
//조건에 해당하는 요소가 없으면 undefined를 반환.



let users = [
	{id: 1, name:"Jisu"},
    {id: 2, name:"dong"},
    {id: 3, name:"daou"}
];

let user = users.find(item => item.id == 1);

 

arr.filter( )

find메서드와 달리 filter는 조건을 충족하는 요소가 여러개일 경우 사용한다.

조건에 맞는 요소 전체를 담은 배열을 반환한다.

let users = [
	{id: 1, name: "jisu"},
    {id: 2, name: "dong"},
    {id: 3, name: "lang"}
];

let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length);

 

배열을 변형하는 메서드

arr.map()

let fruits = ["banana", "apple", "orange"];
fruits = fruits.map(item => item.length);
alert(fruits);			//6, 5, 6

 

arr.sort( )

let arr = [1, 2, 15];

arr.sort();

alert(arr);			// 1, 15, 2

//요소는 문자열로 취급되어 사전편집기준으로 재정렬되기 때문에 
//새로운 정렬기준을 만들기 위해서는 sort()안에 인자를 넘겨줘야 한다.

//정렬 함수
let arr = [1, 15, 2];
arr.sort(function(a,b) { return a - b; });
alert(arr);		//1, 2, 15

//화살표 함수
arr.sort((a,b) => a - b);

 

arr.reverse( )

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert(arr);		// 5, 4, 3, 2, 1

 

arr.split( )

let names = 'jeong, ji, su';

let arr = names.split(',');

for (let name of arr) {
	alert(`${name}에게 보내는 메시지`);
}

let str = "test";
alert(str.split(''));  //t,e,s,t

 

arr.join( )

let arr = ['jeong', 'ji', 'su'];

let str = arr.join(';');

alert(str);			//jeong;ji;su;

 

arr.isArray( )

arr이 배열인지 여부 판단