[js] JavaScript 배열 __개발공부 69일차

배열 선언방법

 

3가지 방법 다 똑같이 배열선언하는 방법이지만 왠만하면 첫번째 방법으로 많이 쓴다.

 

1)첫번째 방법 

const cars=["Saab","Kia","Volvo","BMW"];

2) 2번째 방법

var cars = [];
cars[0]="Saab";
cars[1]="Kia";
cars[2]="Volvo";
cars[3]="BMW";

3) 3번째 방법  -거의 안쓰인다.
var cars = new Array("Saab","Kia","Volvo","BMW");

 

배열 선언후 출력하기

 

배열 정렬

 

1) 오름차순

 

sort() 함수 사용

 

const fruits = ["Banana","Orange","Apple","Mango"];
fruits.sort();                      //한줄 코딩으로 오름차순이 되었다.
let len = fruits.length;
let text = "<ol>";

 

for (var i = 0; i < len; i++) {
    text+="<li>"+fruits[i]+"</li>"
}//for

text+="</ol>";
$("#demo").html(text);

 

2) 내림차순

 

ㄱ. 첫번째 방법

- sort() 함수로 정렬한다음에 reverse로 거꾸로 만든다.

 

reverse();

- 원래 배열의 순서를 거꾸로 만드는 함수이다.
    [1,2,3,4]     reverse     => [4,3,2,1]

 

const fruits = ["Banana","Orange","Apple","Mango"];
fruits.sort();                      

fruits.reverse();
let len = fruits.length;
let text = "<ol>";

 

for (var i = 0; i < len; i++) {
    text+="<li>"+fruits[i]+"</li>"
}//for

text+="</ol>";
$("#demo").html(text);

 

ㄴ.두번째 방법

- 도움말 사이트 참고 해서 if 문으로 조건 주기

 

 fruits.sort(function(a,b){
     if(a<b){
        return 1;

    }
    if(a>b){
        return -1;
    }
 });

 

ㄷ. 세번째 방법

- localCompare() 이용

 

fruits.sort(function(a,b){
     return b.localeCompare(a);
 });

 

ㄹ.네번째 방법(세번째 방법에서 람다식으로만 바꾼거다.)

fruits.sort((a,b)=> b.localeCompare(a)  ); 

 

 

sort()

 

m = [3,5,2,4,1,100,51]

m.sort( ); 

오름차순 정렬  => 일반적으로 sort주면 문자열 기준으로 정렬된다.
 
 m[0]=1
 m[1]=100
 m[2]=2
 m[3]=3
 m[4]=4
 m[5]=5
 m[6]=51

그래서 sort 안에 람다식으로 정렬기준을 설정해야 숫자로써 오름차순, 내림차순이 가능하다.

m.sort((a,b)=>a-b);   //오름차순 정렬
m.sort((a,b)=>b-a);   //내림차순 정렬

 

 

 

람다식을 사용해서 오름, 내림차순을 결정해 주는걸 예를 들어 확인해 보자.

라디오 버튼의 value 값들을 1 -1로 설정해 놓았기 때문에 체크된 라디오 박스에 따라 radioValue  값이

1         or      -1

로 결정된다.

 

람다식 안의 a-b 값에 radioValue 값을 곱해줌으로서

a - b   or    b - a

로 변환되어서 오름 ,내림차순이  결정되는것이다.

 

 

 

배열 예제

 

숫자를 input박스에 입력하고 입력한 숫자가 배열에 들어가게 코딩해 보자.

        

 

1단계) 알고리즘적으로 마지막 요소 추가하기

 

var numbers=[];
//배열의 요소 추가할 때의 위치(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);

});

 

 

2단계) push()함수 사용해서 마지막 요소 추가하기

 

$("button").click(function(event){
var n = $("#num").val();
if(  isNaN(n) || n==""  ){
alert("입력 잘못했습니다.(숫자가 아님)");
$("#num")
.focus()
.select();
return;
}

numbers.push(n);

var text = "<ol>";
for (var i = 0; i < numbers.length; i++) {
text+="<li>"+numbers[i]+"</li>"
}//for
text+="</ol>"
$("#demo").html(text);

});

 

 

 

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);

    });

 

 

4단계) 배열을 오름차순 내림차순 버튼을 누르면 정렬되게 해보자.
??

 

 

배열 관련 함수

 

 

isArray( ) / instanceof( )

 

배열인지 아닌지 확인해 주는 함수

 

console.log(Array.isArray(m));                //true
console.log(m instanceof Array);            //true

 

 

join( )
(***중요***)

 

구분자를 지정해서  그 구분자로 요소를 연결해서 문자열로 반환하는 메서드

 

push( )

 

push() 함수 : 새로운 요소를 마지막 부분에 추가해주는 함수.

m.push(100);

 

 

pop( )

 

pop() : 가장 마지막 요소를 가져오고 제거하는 함수
var lastElement = m.pop(); 

 

 

shift( )

 

shift():첫 요소+ 제거
var firstElement = m.shift();

 

 

unshift( )

 

unshift() : 첫 요소 추가하는 함수
var len = m.unshift("100");

 

 

요소값 변경

 

2번째 요소값(2)을 500변경ㅇ
m[2] = 500;

 

 

delete( )

 

delete m[1];

shift()와 다르게 제거된 부분의 공간이 남아있다.

console.log(m.toString());  //3,   ,2,4,1

 

 

concat( )

 

concat() 배열 병합 - 두 배열이 병합된 새로운 배열을 반환하는 메서드

 

var n = [15,25,35];
var o = [66,67];

var mn = m.concat(n);

 

3개 배열 합치고 싶을때
var mno = m.concat(m,o);

 

concat는 배열만 병합하는게 아니라 값+배열 병합도 가능하다.
var newm = m.concat(1000);

 

 

splice( )

 

splice(  pos,   amount,   ...    )

            pos                            새 요소를 추가할 위치

            amount                      제거할 요소 수
            나머지 매개변수        추가할 새 요소

 

첫번째 용도 : 추가하는 기능

m = [ 3 , 5 , 2 , 4 ,1]

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);                             //1위치 부터 2개 제거해라 라는 의미이다.

 

3,5,2,4,1   =>  3,4,1

 

 

slice( )

 

slice : 배열의 일부를 새 배열로 잘라내는 기능         단, 원래 배열(m)제거하지 않는다.
m = [ 3 , 5 , 2 , 4 ,1]
var n = m.slice(1,3);                          //[5,2]

console.log(m.toString());                 //3,5,2,4,1
console.log(n.toString());                  //5,2