Jam's story
[JS] 배열 본문
배열 선언방법
let/var/const 배열명=[];
배열명[index]=??;
const 배열명=[??,??,??];
대부분 const를 쓴다.
<script>
var pdemo=document.getElementById("demo");
//1.
const carls=["Saab","Kia","Volvo","BMW"];
carls[4]=Date.now;
carls[5]=function(){};
pdemo.innerHTML=
"배열크기"+carls.length+"<br>"
+"배열의 0번째요소 "+carls[0]
+"배열의 2번째요소 "+carls[2] +"<br>"
+typeof(carls)+"<br>" //object
+"<br>"+carls+"<br>" ;//Saab,Kia,Volvo,BMW
//2.
var cars=[];
cars[0]="Saab";
cars[1]="Kia";
cars[2]="Volvo";
cars[3]="BMW";
//3.
var cars=new Array("Saab","Kia","Volvo","BMW");
</script>
배열의 정렬
오름차순 : sort() ; - 기본
내림차순 : reverse()
var fruits=["banana","orange","apple","mango"];
//오름차순
fruits.sort(); //apple,banana,mango,orange
console.log(fruits.toString());
//내림차순
fruits.reverse(); //orange,mango,banana,apple
console.log(fruits.toString());
숫자를 기준으로 정렬
<script>
var smp=[
{name:"김평야", age:23},
{name: "오천", age:33},
{name: "단", age:22},
];
//오름차순
smp.sort(function(a,b){
return a.age-b.age;
})
/* 단,22
김평야,23
오천,33 */
document.getElementById("demo").innerHTML=
smp[0].name+","+smp[0].age+"<br>"
+smp[1].name+","+smp[1].age+"<br>"
+smp[2].name+","+smp[2].age+"<br>";
//내림차순
smp.sort(function(a,b){
return b.age-a.age;
})
/* 오천,33
김평야,23
단,22 */
</script>문자기준
console.log("ABC".localeCompare("ABC")); //같으면 0
console.log("ABC".localeCompare("abc")); //뒤에가 더 크면 1
console.log("ABC".localeCompare("ABc"));//1
console.log("abc".localeCompare("ABC")); //-1
console.log("AbC".localeCompare("ABC")); //-1
같으면 0
뒤에가 더 크면 1
앞에가 더 크면 -1
//오름차순
smp.sort(function(a,b){
if(a.type>b.type) return 1;
else if(a.type<b.type) return -1;
else 0;
});
document.getElementById("demo").innerHTML=
smp[0].name+","+smp[0].age+"<br>"
+smp[1].name+","+smp[1].age+"<br>"
+smp[2].name+","+smp[2].age+"<br>"
/*
김평야,23
오천,33
단,22 */
//오름차순
smp.sort(function(a, b) {
return a.name.localeCompare(b.name); // 0,1,-1
})
//위의 식을 람다식으로
smp.sort((a,b) => { a.name.localeCompare(b.name);});
document.getElementById("demo").innerHTML+=
smp[0].name+","+smp[0].age+"<br>"
+smp[1].name+","+smp[1].age+"<br>"
+smp[2].name+","+smp[2].age+"<br>"
오름차순, 내림차순 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body> <input type="radio" name="sort" value="1" checked="checked">오름차순정렬
<input type="radio" name="sort" value="-1">내림차순정렬
<button onclick="test();"> 배열 정렬 후 출력 </button>
<script>
function test(){
// m.sort(); //오름차순 정렬
//string 형태는 정렬이 잘되지만 number형은 제대로 되지 않는다.
var radioValue=parseInt($(":radio[name=sort]:checked").val());
var m=[3,5,2,4,100,1,51];
m.sort((a,b) => radioValue*(a-b)); //오름차순정렬
/* m.sort((a,b) => b-a); //내림차순정렬-숫자
m.sort((a,b) => a-b); //오름차순정렬-숫자 */
m.forEach(function(elt,i,array){
console.log("m["+i+"]="+elt);
})
}
</script>
</body>
</html>
예제2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex05_03.html - 배열 연습 3</h3>
<!-- 매번 입력하기 귀찮아서 input박스에 "3,5,2,4,1,100,51" value로 설정 -->
숫자 입력: <input type="text"id="num"autofocus="autofocus"value="3,5,2,4,1,100,51">
<br>
<button>배열추가</button>
<p id="demo"></p>
<br>
<input type="radio"name="sort"checked="checked">오름차순정렬
<input type="radio"name="sort">내림차순정렬
<!-- 숫자를 입력하고 입력한 숫자가 배열에 들어가게 코딩해 보자. -->
<script>
// 4단계
// 배열을 오름차순 내림차순 버튼을 누르면 정렬되게 해보자.
var numbers=[];
$("button").click(function(event){
var data = $("#num").val();
var nums = data.split(/\s*,\s*/);
//type of nums array => object
//demo /li
nums.forEach(function(elt,i,array){
numbers.push(elt);
});
text = "<ol>";
numbers.forEach(function(elt,i,array){
text+="<li>"+elt+"</li>";
})
//numbers.forEach((elt,i,array)=>text+="<li>"+elt+"</li>");
text+="</ol>"
$("#demo").html(text);
});
</script>
<!--
<script>
//3단계
// 이제 1,2,3,4 와 같이 콤마 연산자로 하더라도 배열에 추가하고 싶다.
var numbers=[];
$("button").click(function(event){
var data = $("#num").val();
var nums = data.split(/\s*,\s*/);
//type of nums array => object
//demo /li
nums.forEach(function(elt,i,array){
numbers.push(elt);
});
text = "<ol>";
numbers.forEach(function(elt,i,array){
text+="<li>"+elt+"</li>";
})
//numbers.forEach((elt,i,array)=>text+="<li>"+elt+"</li>");
text+="</ol>"
$("#demo").html(text);
});
</script>
-->
<!--
<script>
var numbers=[];
//index
//numbers[0]=100;
//numbers[1]=5;
//numbers[6]=34;
//배열의 요소 추가할 때의 위치(index) - numbrs.length
$("button").click(function(event){
var n = $("#num").val();
if( isNaN(n) || n=="" ){
alert("입력 잘못했습니다.(숫자가 아님)");
$("#num")
.focus()
.select();
return;
}
/*
배열 요소 추가하는 방법
numbers[numbers.length]=n;
*/
//위와같이 코딩 하지 않더라도
//마지막 요소로 추가하는 함수가 있다.
//배열 요소 추가 - push()
numbers.push(n);
var text = "<ol>";
numbers.forEach(function(elt,i,array){
console.log(elt+"/"+i+"/"+array);
text+="<li>"+elt+"</li>";
})
text+="</ol>"
$("#demo").html(text);
});
</script>
-->
<!--
<script>
var numbers=[];
//index
//numbers[0]=100;
//numbers[1]=5;
//numbers[6]=34;
//배열의 요소 추가할 때의 위치(index) - numbrs.length
$("button").click(function(event){
var n = $("#num").val();
if( isNaN(n) || n=="" ){
alert("입력 잘못했습니다.(숫자가 아님)");
$("#num")
.focus()
.select();
return;
}
numbers[numbers.length]=n;
var text = "<ol>";
for (var i = 0; i < numbers.length; i++) {
text+="<li>"+numbers[i]+"</li>"
}//for
text+="</ol>"
$("#demo").html(text);
});
</script>
-->
</body>
</html>ex05_03.html - 배열 연습 3
숫자 입력:오름차순정렬 내림차순정렬
예제1,2 혼합 - 라디오버튼으로 정렬기준 정한후 , 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.03 04:29:15</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex05_03_02.html</h3>
숫자 입력: <input type="text"id="num"autofocus="autofocus"value="3,5,2,4,1,100,51">
<br>
<br>
<input type="radio"name="sort"checked="checked" value="1">오름차순정렬
<input type="radio"name="sort" value="-1">내림차순정렬
<button>배열추가하고 정렬</button>
<p id="demo"></p>
<script>
var numbers=[];
$("button").click(function(event){
var data=$("#num").val();
var nums=data.split(/\s*,\s*/);
nums.forEach(function(elt, i,array){
numbers.push(elt);
});
var RadioValue=parseInt($(":radio[name=sort]:checked").val());
console.log(numbers.toString());
//오름차순정렬 numbers.sort(function(a,b){ return a-b;});
// numbers.sort((a,b) => a-b);
numbers.sort((a,b) => RadioValue*(a-b));
console.log(numbers.toString());
var text="<ul>";
numbers.forEach(function(elt,i,array){
text+="<li>"+elt+"</li>";
});
text+="</ul>";
$("#demo").html(text);
});
</script>
</body>
</html>ex05_03_02.html
숫자 입력:오름차순정렬 내림차순정렬
js
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.03 04:47:21</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex05_03js.html</h3>
숫자 입력: <input type="text"id="num"autofocus="autofocus"value="3,5,2,4,1,100,51">
<br>
<br>
<input type="radio"name="sort"checked="checked" value="1">오름차순정렬
<input type="radio"name="sort" value="-1">내림차순정렬
<br><br>
<button onclick="arrlist();">배열추가하고 정렬</button>
<p id="demojs" style="border:3px solid rgb(255, 174, 174) ;">
배열이 여기에 나타납니다. </p>
<script>
var numbers=[];
//배열이 함수 안으로 들어가면 버튼을 누를때마다 초기화가 되기때문에 추가가 되지 않는다.
function arrlist(){
var datas=document.querySelector("input:first-of-type").value;
var nums=datas.split(/\s*,\s*/);
nums.forEach(function(elt,i,array){
numbers.push(elt);
});
console.log(numbers.toString());
var RadioValue=document.querySelector("input[name=sort]:checked").value;
console.log( RadioValue);
numbers.sort((a,b) => RadioValue*(a-b));
console.log(numbers.toString());
var hStr="<ul>";
numbers.forEach(function(elt,i,array){
hStr+="<li>"+elt+"</elt>";
});
hStr+="</ul>";
document.getElementById("demojs").innerHTML=hStr;
}
</script>
</body>
</html>ex05_03js.html
숫자 입력:오름차순정렬 내림차순정렬
배열이 여기에 나타납니다.
배열 li로 출력
//배열 출력
var text="<ol>";
for (let i = 0; i < smp.length; i++) {
text+="<li>"+smp[i].name+"</li>";
}
text+="</ol>";
$("#demo").html(text);반복처리할 수 있는 함수가 존재한다.
forEach(function(elt, i, array) { }
elt는 요소, i는 객체번호이다.
만일 let와 i와 array중에 안쓰는게 있다면 지워도 가능
var colors=new Array("pink","oranage","red","pupple");
var text="<ol>";
colors.forEach(function(elt, i, array) {
text+="<li>"+elt+"("+i+")"+"</li>";
});
text+="</ol>";
document.querySelector("#demo").innerHTML=text;
배열인지 아닌지 확인
배열을 typeof로 찍어보면 object로 출력되기 떄문에
배열인지 아닌지 확인할 수 있는 함수가 존재한다.
- Array.isArray(배열명)
- 배열명 instanceof Array
console.log(Array.isArray(colors)); //true
console.log(smp instanceof Array); //truejoin - 구분자 추가
pdemo.innerHTML=colors.toString();
pdemo.innerHTML=colors.join("/"); //pink/oranage/red/pupple
//join으로 li태그 만들기
pdemo.innerHTML= "<ol><li>"+colors.join("</li><li>")+"</li></ol>";
shift() / unshift()
shift() : 첫번째 요소를 제거하고 다른 모든 요소를 앞으로 이동
unshift(값) : 첫번째 요소에 추가하고 다른 모든 요소를 뒤로 이동
console.log(colors.toString()); //pink,oranage,red,pupple
colors.shift();
console.log(colors.toString()); //oranage,red,pupple
colors.unshift("strawberry");
console.log(colors.toString()); //strawberry,oranage,red,pupple
slice()
얇게 썰다
m.slice(1,3) 하면 m[1] ,[2] 값 출력
splice()
잇다, 연결하다
splice(새로운 요소를 연결할 위치 인덱스, 제거할 요소 개수, 추가요소)
m.splice(2, 0, 100,200);* 리턴값 : 삭제된 항목의 배열을 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
var m=[3,5,2,4,1];
console.log(typeof m); //object
console.log(Array.isArray(m)); //배열인지 아닌지
console.log(m instanceof Array); //true
console.log(m.toString()); //3,5,2,4,1
console.log(m); //[3, 5, 2, 4, 1]
/*
li태그에 배열요소 넣기
var text="<ol>";
m.forEach(function(elt, i,array){
text+="<li>"+elt+"</li>";
})
text+="</ol>";
$("#demo").html(text);
*/
//구분자넣기
// console.log(m.join("/")); // 3/5/2/4/1
//join함수로 li태그에 배열요소 넣기
/*
var text="<ul> <li>";
text+= m.join("</li><li>");
text+="</li></ul>";
$("#demo").html(text);
*/
//새로운 요소 추가 100
m.push(100);
//가장마지막요소가져오기
/*
//1.
var lastElement=m[m.length-1];
console.log(lastElement);
//2.
var lastElement=m.pop();*/
/*
pop(): 마지막요소 +제거
shift(): 첫요소+ 제거
*/
/*
var firstElement=m.shift();
console.log(firstElement);
*/
//push()마지막요소 추가 , unshift() 첫요소 추가하고 뒤로 한칸씩 밀음
var len=m.unshift("100");
console.log("len="+len);
//console.log(m.toString());
//2번째요소값을 500으로 변경
//m[2]=500;
//배열 요소 삭제= pop() shift()
console.log("배열을 delete로 삭제: "+m.toString());
delete m[1];
console.log(m.toString());
//delete는 앞으로 땡기거나 하지않고 빈자리로 남아있다.
console.log(m[1]); //undefined
var n=[15,25,35];
var o=[66,77];
//배열병합 concat()
var mn=m.concat(n);
console.log("concat으로 두 배열 병합"+mn.toString());
var mno=n.concat(n,o);
console.log("concat으로 세 배열 병합"+mno.toString());
//concat으로 값+배열 병합
console.log("원래 m배열: "+m.toString());
var newm=m.concat(1003);
console.log("concat으로 값+배열 병합"+newm.toString());
//1~for 2칸식밀고
m[6]=m[4];
m[5]=m[3];
m[4]=m[2];
m[3]=m[1];
//새로운 값넣으면 되는데
m[2]=200;
m[1]=100;
//저렇게 구현할 필요없이 splie() 메소드를 사용한다.
/* splice 란? - 잇다 연결한다.
m.splice(pos,amount,newelt);
splice(새로운 요소를 연결할 위치 인덱스, 제거할 요소 개수, 추가요소)
추가요소를 나열해서 n개이상 추가 가능
*/
m.splice(1,0,100) //3,100,5,2,4,1
m.splice(1,0,100,200); //3,100,200,5,2,4,1
m.splice(1,2); //3,4,1
console.log(m.toString());
//slice() - 배열의 일부를 새 배열로 잘라내는 기능
var n=m.slice(1,3);
//새 배열에 m[1],m[2]로 새 배열이 만들어지고 ,원래배열에는 제거되지 않는다.
//복사같은 느낌
console.log(m.toString());
console.log(n.toString());
//1.배열의 가장 큰 값을 찾아서 출력
//2.배열의 가장 작은 값을 찾아서 출력
</script>
</body>
</html>
<script>
var m=[];
for (let i = 0; i < 5; i++) {
m.push(Math.floor(Math.random()*100)+1);
}
document.getElementById("demo").innerText+=m.toString();
m.sort(function(a,b){
return a-b;// 오름차순
// return b-a; //내림차순
});
document.getElementById("demo").innerHTML+="<br>";
document.getElementById("demo").innerText+="오름차순 정렬 :";
document.getElementById("demo").innerText+=m.toString();
m.sort(function(a,b){
return 0.5-Math.random();
});
document.getElementById("demo").innerHTML+="<br>";
document.getElementById("demo").innerText+="무작위 정렬 :";
document.getElementById("demo").innerText+=m.toString();
//가장 작은값과 가장 큰값
m.sort(function(a,b){
return a-b;
});
document.getElementById("demo").innerHTML+="<br>";
document.getElementById("demo").innerText+="가장 작은값과 가장 큰값 : ";
document.getElementById("demo").innerText+=m[0]+","+m[m.length-1];
//2번째 방법으로 최대값 최소값 구하기
var max= Math.max.apply(null,m);
var min=Math.min.apply(null,m);
document.getElementById("demo").innerHTML+="<br>";
document.getElementById("demo").innerText+="가장 작은값과 가장 큰값 : ";
document.getElementById("demo").innerText+=min+","+max;
</script>
배열 함수
- toString()
- join(구분자)
- push(요소) 요소추가 후 배열의 크기 반환.
- pop() 마지막 요소 제거 후 반환.
- shift() 첫번째 요소 제거 후 반환.
- unshift(요소) 앞에 요소 추가 후 배열의 크기 반환.
- splice(위치, 제거갯수, [추가요소...]) 배열에 새 항목을 추가하는 메서드
- slice(시작, 끝) 끝 인덱스는 포함하지 않는다.
- sort([compare])
- reverse()
- forEach()
- map(e, i, arr => 계산) 각 배열의 요소에 대해 함수를 수행하고 새 배열 생성해서 반환하는 메서드
- filter(e, i, arr => 조건)
- reduce 배열을 줄이다.
- every(e, i, arr => 조건) 모든 요소가 조건을 만족하는지 여부를 반환하는 메서드. boolean 을 반환한다.
- some
- indexOf(요소) 인덱스 반환 앞에서부터 검색할 값을 찾기 시작하는 속성
- lastIndexOf(요소) 끝에서부터검색할 값을 찾기 시작
- includes(요소) 배열에 있는지 boolean 반환
- find(e, i, arr => 조건) 찾은 첫번째요소를 반환
- findIndex()
Array.map() : 각 배열의 요소를 가지고 새로운 배열 생성 반환하는 함수
<script>
var n = m.map(function(elt, i, array) { //만약 elt만 사용할거면 i, array를 지워도 된다.
return elt*2 ; //2배 키운 새로운 함수
});
document.getElementById("demo").innerHTML=n.toString();
</script>
Array.filter() : 조건에 맞춰 필터링
<script>
//1번
var n =[];
for (var i = 0; i < m.length; i++) {
if(m[i]>15) n.push(m[i]);
}
//2번 Array.forEach()
m.forEach(function(elt, i, array) {
if(elt>15) n.push(elt);
})
//3번 Array.filter() : 조건을 만족하는 필터링한 배열 요소만 가지고 새로운 배열 생성
var n = m.filter(function(elt, i, array) {
return elt>15;
})
document.getElementById("demo").innerHTML=n.toString();
//4번
//위식을 람다식으로 표현
var n=m.filter( (elt) => {return elt>15});
</script>
7. m 배열의 모든 요소의 합을 구해서 출력하세요.
reduce() 각 배열의 요소 -> 함수 -> 단일 값 생성 . 왼쪽부터 처리
reduceRight() 오른쪽 부터 처리
let sum= m.reduce(function(sum,elt, i,array){
return sum+elt;
},0);
중복체크
.every() 배열의 모든 요소가 조건에 만족하는지 여부를 반환하는 함수
.some() 하나라도 만족하는것이 있는지
<script>
//1번째
function isDuplication(m,n){
for (let i = 0; i < m.length; i++) {
if(m[i]==n) return true;
}
return false;
}
var m=[1,3,5];
var n=parseInt(Math.random()*5)+1;
console.log(n);
var check=isDuplication(m,n);
console.log(check? "중복해":"중복안해");
//2번째
var m=[1,3,5];
var n=parseInt(Math.random()*5)+1;
//every() 배열의 모든 요소가 조건에 만족하는지 여부를 반환하는 함수
var check=m.every(function(elt,i,array){
return n!=elt;
});
//some() 하나라도 만족하는것이 있는지
console.log(check);
</script>
for in 각 요소의 인덱스를 반환
for of 각 요소 값을 반환
인덱스 반환
indexOf(요소) 앞에서부터 검색할 값을 찾기 시작하는 속성
시작할 위치가 생략이 될 경우에는 시작위치의 값을 0으로 인식하여 처음부터 검색을 시작
일치하는 결과값이 없을 경우에는 -1 리턴
lastIndexOf(요소) 끝에서부터검색할 값을 찾기 시작
시작할 위치가 생략이 될 경우에는 시작위치의 값을 끝으로 인식하여 끝부터 검색을 시작
일치하는 결과값이 없을 경우에는 -1 리턴
찾는 시작위치만 다를 뿐 결과값은 동일하게 맨 앞에서부터 위치의 값을 반환
includes - boolean형으로 있다 없다만 나타냄
var m = [45, 4, 9, 16, 25];
console.log(m.indexOf(4)); //1
console.log(m.indexOf(30));// -1
console.log(m.lastIndexOf(4)); //1
console.log(m.lastIndexOf(45)); //0
console.log(m.lastIndexOf(30)); //-1
console.log(m.lastIndexOf(16)); //3
console.log(m.indexOf(16,0)); //-1
//lastIndexOf 뒤에서 부터 찾음
console.log(m.lastIndexOf(16,0)); //-1
//includes는 boolean형으로 있다 없다만 나타냄
console.log(m.includes(45)); //true
for (var idx in m) {
console.log(idx); //각각 인덱스값이 출력된다.
//배열의 값을 출력하고 싶다면
console.log(m[idx]);
}
//실제 요소값을 반환
for (const elt of m) {
console.log(elt);
}
.entries() 인덱스값과 요소값을 같이 반환
let e= m.entries();
//of 뒤에 m이 아닌 e가 와야한다.
for (let x of e) {
//인덱스값= key, 요소값=value
console.log(x);
/* (2) [0, 45]
(2) [1, 2]
(2) [2, 1]
(2) [3, 11]
(2) [4, 35] 인덱스값과 요소값이 이렇게 출력된다. */
+추가
js 는 함수의 매개변수 갯수가 일치하지 않아도 함수 이용 가능
<script>
function sum(){
var result=0;
for(var i =0; i<arguments.length; i++){
result+=arguments[i];
}
return result;
}
var result=sum(1,2,3,4);
console.log(result);
</script>'WEB > JavaScript' 카테고리의 다른 글
| [JS] 달력만들기 (0) | 2022.06.03 |
|---|---|
| [JS] Date (0) | 2022.06.03 |
| [JS] 문자열 다루기 (0) | 2022.06.02 |
| [ JS] days03 (0) | 2022.06.02 |
| [JS] 체크 모두풀기, 해제하기 (0) | 2022.06.02 |
Comments