[days03] js 배열

배열은 자료형이 object이다.

배열 선언 형식  :  var 배열명 = [항목1, 항목2, 항목3,...];

<script>
var cars = ["kia","volvo","bmw"];		
//var cars = new Array("kia","volvo","bmw"); //이렇게해도 똑같으나 권장x
		
console.log(cars.length); //3 배열길이
console.log(cars[0]); //"kia" 첫번째 요소
</script>

 

 

배열 정렬

- 오름차순 : fruits.sort();

- 내림차순 :  오름차순을 한 다음 -> fruits.reverse();

(reverse함수는 내용물을 거꾸로 출력하는 함수이기 때문에 오름차순으로 정렬한 후 역순으로 출력하면 내림차순이 됨)

//오름차순 정렬
<script>
var fruits = ["Banana","Orange","Apple","Mango"];
	
	fruits.sort(); 
	document.getElementById("demo").innerHTML+=fruits.toString()+"<br>";
	//Apple,Banana,Mango,Orange
</script>


//내림차순 정렬
<script>
var fruits = ["Banana","Orange","Apple","Mango"];
	document.getElementById("demo").innerHTML=fruits.toString()+"<br>";
	
	fruits.sort(); 
	fruits.reverse(); 
	//Orange,Mango,Banana,Apple
	document.getElementById("demo").innerHTML+=fruits.toString()+"<br>";
</script>

기준을 가지고 배열 정렬

1. 숫자 기준

<script>
var cars = [
	{type:"Volvo", year:2020},
	{type:"Jeep", year:2018},
	{type:"BMW", year:2021},
];

cars.sort(function(a, b) {
	return a.year-b.year;
})

 document.getElementById("demo").innerHTML =
	cars[0].type +" "+cars[0].year+"<br>"+
	cars[1].type +" "+cars[1].year+"<br>"+
	cars[2].type +" "+cars[2].year+"<br>";
</script>

2. 문자 기준

 

//1. 함수 이용하지 않고
<script>
var cars = [
	{type:"Volvo", year:2020},
	{type:"Jeep", year:2018},
	{type:"Bmw", year:2021},
];

	cars.sort(function(a, b) {
		 if(a.type>b.type) return 1;
		else if (a.type<b.type) return -1;
		else 0; 
}); 



//2. 함수 이용
cars.sort(function(a, b) {
	return a.type.localeCompare(b.type); // 0,1,-1
})


 document.getElementById("demo").innerHTML =
	cars[0].type +" "+cars[0].year+"<br>"+
	cars[1].type +" "+cars[1].year+"<br>"+
	cars[2].type +" "+cars[2].year+"<br>";
</script>

참고!!

<script>

alert("Abc" =="abc"); //false
alert("Abc" >"abc"); //false
alert("Abc" <"abc"); //true

 alert("abc".localeCompare("abc")) //0 같으면
 alert("Abc".localeCompare("abc")) //1 뒤에가 더 크면
 alert("abc".localeCompare("Abc")) //-1 앞에가 더 크면
</script>

 

요소 수정, 추가

- m[m.length]=""; 맨 마지막에 추가

- m.push(" ");

<script>
//요소 수정
	cars[0]="Opel"; 
//요소 추가
	cars[cars.length]="aa"; //3
	cars[cars.length] ="bb"; //4 
	//index값을 length주면 마지막 요소로 추가됨
	//또는 push()
	cars.push("car");
	//4 5 6 7 8 9 건너뛰고 특정 번호에 요소 추가
	cars[10] ="xxx";
</script>

 마지막 요소 얻어오기 

- m[m.lengh-1]

-m.pop() : 제거하고 가져오기

<script>
	document.getElementById("demo").innerHTML =m[m.length-1];
	document.getElementById("demo").innerHTML =m.pop();
	//pop()+제거  (삭제하고 가져오기)
</script>

요소 삭제

//3 5 2 4 1
 	//delete m[3]; => 4삭제
 	document.getElementById("demo").innerHTML = m.toString()+"<br>";//3,5,2,,1
 	//(주의) 정의되지 않은 구멍이 남았다.

배열 출력

var txt = "<ol>";
	for (var i = 0; i < cars.length; i++) {
		txt+="<li>"+ cars[i] +"</li>";
	} 
	txt+="</ol>";
	document.querySelector("#demo").innerHTML=txt;

이렇게 출력해도 되지만 반복처리할 수 있는 함수가 존재한다.

forEach(function(elt, i, array) { }

elt는 요소, i는 객체번호이다.

만일 let와 i와 array중에 안쓰는게 있다면 지워버려도 된다.

var txt = "<ol>";
	cars.forEach(function(elt, i, array) {
		txt+="<li>"+elt+"("+i+")"+"</li>";
	});	
	txt+="</ol>";
	document.querySelector("#demo").innerHTML=txt;

배열인지 아닌지 확인

배열을 typeof로 찍어보면 object로 출력된다. => 이게 array인지 뭔지 확인할 수 가 없다.

배열인지 아닌지 확인할 수 있는 함수가 존재한다.

 - Array.isArray(배열명) 

 - 배열명 instanceof Array

alert(typeof cars); //object 	
		
alert(Array.isArray(cars)); //true (object가 배열인지 아닌지 확인할 수 있게)
alert(cars instanceof Array); //true (cars 객체가 Array 타입의 인스턴스니?)
		

각 요소를 구분자(*)로 구분

<script>
var m= [3,5,2,4,1];
	document.getElementById("demo").innerHTML=m.toString(); // 3,5,2,4,1
	document.getElementById("demo").innerHTML=m.join("/"); // 3/5/2/4/1
	document.getElementById("demo").innerHTML = "<ul><li>"+m.join("</li><li>")+"<ul>";
	
</script>

shift() / unshift() 

shift() : 첫번째 요소를 제거하고 다른 모든 요소를 앞으로 이동

unshift(값) : 첫번째 요소에 추가하고 다른 모든 요소를 뒤로 이동

<script>
var m= [3,5,2,4,1];
//shift() 함수
	m.shift(); 
	document.getElementById("demo").innerHTML += m.toString()+"<br>"; //5,2,4,1
	m.shift();
	document.getElementById("demo").innerHTML += m.toString()+"<br>"; //2,4,1

//unshift() 함수
	m.unshift(100); 
 	document.getElementById("demo").innerHTML = m.toString()+"<br>"; //100,2,4,1
 	m.unshift(200);
 	document.getElementById("demo").innerHTML = m.toString()+"<br>"; //200,100,2,4,1
</script>

splice()

잇다, 연결하다

splice(새로운 요소를 연결할 위치 인덱스, 제거할 요소 개수, 추가요소)

m.splice(2, 0, 100,200);
* 리턴값 : 삭제된 항목의 배열을 반환

<script>
var m= [3,5,2,4,1];
m.splice(2, 0, 100,200); //3,5,100,200,2,4,1
m.splice(2,1, 100,200); //3,5,100,200,4,1
m.splice(2,2, 100,200); //3,5,100,200,1

var d = m.splice(2,2,100,200); //하면 2,4
document.getElementById("demo").innerHTML =m.toString();
</script>

slice() 

얇게 썰다

m.slice(1,3) 하면 m[1] ,[2] 값 출력

<script>
var m= [3,5,2,4,1];
var n = m.slice(2); //2,4,1
var n = m.slice(1,3);//5,2start, end값 (end생략시 끝까지)
	document.getElementById("demo").innerHTML = n.toString()+"<br>"; 

</script>

 

1~100까지의 난수 5개 출력하기

<script>
	//0.0<= 실수 <1.0 
	//document.getElementById("demo").innerHTML = Math.random();
	
	// 1~100까지의 난수 5개
	var m =[];
	for (var i = 0; i <5; i++) {
		m.push(Math.floor(Math.random()*100)+1);
	}
	document.getElementById("demo").innerHTML = m.toString()+"<br>";
    
    
	//오름차순
	//m.sort(); //요소: 마치 문자열처럼 비교 (15, 3~ 일케 나옴)
	 m.sort(function(a, b) { //1,-1,0 
		//return a-b; 오름차순
		return b-a; //내림차순
	}) 
    
    //무작위 순서로 배열 정렬
	 m.sort(function(a, b) {
		return 0.5-Math.random();
	})
	document.getElementById("demo").innerHTML += m.toString()+"<br>";
 	
 	
 	//가장큰값, 작은값
  	m.sort(function(a, b) {
 		return a-b;
 	});
 	document.getElementById("demo").innerHTML += m[0]+"/"+m[m.length-1]+"<br>";
    
    //최대값 최소값 구하는 2번째 방법
		var max = Math.max.apply(null, m); 
		var min = Math.min.apply(null, m);
		document.getElementById("demo").innerHTML += min+"/"+max+"<br>";


    
 </script>

오름차순

랜덤

최대값, 최소값

특정 값 위치 찾기

- indexOf

- lastIndexOf 

(위 두개는 똑같은 index값을 반환하며, 해당 배열에 값이 없을 경우 -1 반환)

<script>
var m = [45, 4, 9, 16, 25];

var index = m.indexOf(9); //2
var index = m.lastIndexOf(9); //2 (뒤에서부터 찾아도 인덱스 값은 똑같다)
var index = m.lastIndexOf(99); //없으면 -1 반환
</script>

 

특정 조건을 만족하는 값 반환

- m.find() : 조건을 만족하는 첫번째 배열요소의 값을 반환하는 함수
- m.findIndex() : 조건을 만족하는 첫번째 배열요소의 인덱스(위치)를 반환하는 함수

 

m.find() : 값 반환

<script>
var m = [45, 4, 9, 16, 25];
var x =m.filter(function(elt, i, array) {
	return elt>18;
});
document.getElementById("demo").innerHTML=x; 
</script>

m.findIndex() : 위치 반환

<script>
var m = [45, 4, 9, 16, 25];

var x =m.findIndex(function(elt, i, array) {
	return elt>18;
});
document.getElementById("demo").innerHTML=x; 
</script>

 

배열 중복 체크

<script>

var m = [45, 4, 9, 16, 25];
var  x =4;
//true/false로 돌리기
var isCheck= false;
m.forEach(function(elt, i, array) {
	if(x==elt) 
		isCheck= true;
});

document.getElementById("demo").innerHTML=isCheck;
</script>

- Array.every()

모든 요소가 조건을 만족한다면 true 

- Array.some()

하나라도 만족한다면 true

 

<script>
//Array.every()
var isCheck = m.every(function(elt, i, array) {
	return elt !=x; //하나라도 false가 나오면 false 돌림
})


 //Array.some() 
  isCheck= m.some(function(elt, i, array) {
 	return elt == x;
 }) 
 </script>

 

Array.map() :  각 배열의 요소 -> 새로운 배열 생성 반환하는 함수

m 배열의 각 요소들을 2배로 만든 새로운 배열 생성

<script>

var n =[];
/*	이렇게 해도 되지만 
	for (var i = 0; i < m.length; i++) {
			n.push(m[i]*2);
	}
	document.getElementById("demo").innerHTML=n.toString();
 */

var n = m.map(function(elt, i, array) { //만약 elt만 사용할거면 i, array를 지워도 됨
	return elt*2 ; //2배 키운 새로운 함수
});
document.getElementById("demo").innerHTML=n.toString();
</script>

 

Array.filter() : 조건에 맞춰 필터링

문제) 20보다 큰 값들로 이루어진 새로운 n 배열 생성

<script>
	//1번
	var n =[];
	for (var i = 0; i < m.length; i++) {
			if(m[i]>=20) n.push(m[i]);
	}
	
	
 	//2번 Array.forEach()
	  m.forEach(function(elt, i, array) {
 		//console.log(elt+"/"+i+"/"+array.toString());
 		if(elt>=20) n.push(elt);
 	})
	 //같은 결과지만 시험이라면 foreach쓰는 사람을 뽑겠다
	 
     
	 //3번 Array.filter() : 필터링한 배열 요소만 가지고 새로운 배열 생성
	  var n = m.filter(function(elt, i, array) {
	 	return elt>=20;
	 })
	 
	 document.getElementById("demo").innerHTML=n.toString(); 
	 //또, foreach보다 filter를 쓰는 사람을 뽑겠다
</script>

 

Array.reduce() : 각 배열의 요소 -> 단일 값으로 축소하겠단 함수

 문제) m배열의 20보다 같거나 큰 요소들의 합을 demo 출력

<script>
	//1	for문
	 var sum =0;
	 for (var i = 0; i < m.length; i++) {
		if(m[i]>=20) sum+=m[i];
	}
	 document.getElementById("demo").innerHTML=sum; 

	  
	  //2 forEach문
	   var sum =0;
	m.forEach(function(elt, i, array) {
		if(elt>=20) sum+=elt;
	});
	 document.getElementById("demo").innerHTML=sum; 
	 
	 //3 Array.reduce() 줄이다	
	 var sum = m.reduce(function(sum, elt, i, array) { //reduce나 reduceright나 똑같다 지금
		 //리듀스라이트 : 우측부터 줄여나가는것
	 	if(elt>=20) return sum+elt;
	 	else return sum;
	 });
	 document.getElementById("demo").innerHTML=sum;  
 </script>