티스토리 뷰

Javascript

배열 Method

seop8044 2022. 2. 15. 14:07

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)

번호 기본값 속성 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const arrNumLength = arrNum.length;
    document.querySelector(".sample01_R1").innerHTML = arrNumLength;

    const arrText = ['a', 'b', 'c', 'd', 'e'];
    const arrTextLength = arrText.length;
    document.querySelector(".sample01_R2").innerHTML = arrText.length;

    const arr = [1, 2, ['a', 'b']];
    const arrLength = arr.length;
    document.querySelector(".sample01_R3").innerHTML = arrLength;
}

02. 배열 메서드 : join() : 배열 요소 문자열 결합 : 반환(문자열)

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const text1 = arrNum.join("*");
    const text2 = arrNum.join("-");
    const text3 = arrNum.join("");
    const text4 = arrNum.join(" ");

    document.querySelector(".sample02_R1").innerHTML = text1;

    document.querySelector(".sample02_R2").innerHTML = text2;

    document.querySelector(".sample02_R3").innerHTML = text3;

    document.querySelector(".sample02_R4").innerHTML = text4;
}

03. 배열 메서드 : 1번 push() 마지막 요소에 추가 / 2번 pop() 마지막 요소에 삭제

번호 기본값 메서드 리턴값 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const arrPush = arrNum.push(600)
    document.querySelector(".sample03_R1").innerHTML = arrNum;
}

04. 배열 메서드 : 1번 unshift() 처음 요소에 추가 / 2번 shift() 처음 요소에 삭제

번호 기본값 메서드 리턴값 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const arrNumUnshift = arrNum.unshift(600);
    document.querySelector(".sample04_R1").innerHTML = arrNum;

    const arrNum = [100, 200, 300, 400, 500];
    const arrNumShift = arrNum.shift();
    document.querySelector(".sample04_R2").innerHTML = arrNum;
}

05. 배열 메서드 : 1번 reverse() 배열 요소 순서 반대로 정렬/ 2번 sort() 배열 요소 순서 정렬

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const arrNumReverse = arrNum.reverse();
    document.querySelector(".sample05_R1").innerHTML = arrNum;

    const arrNum2 = [100, 200, 300, 400, 500];
    const arrNumSort2 = arrNum2.sort();
    document.querySelector(".sample05_R2").innerHTML = arrNum2;

    const arrNum3 = [100, 200, 300, 400, 500];
    const arrNumSort3 = arrNum3.sort(function(a,b){return b-a});
    document.querySelector(".sample05_R3").innerHTML = arrNum3;

    const arrNum4 = [500, 400, 300, 200, 100];
    const arrNumSort4 = arrNum4.sort(function(a,b){return a-b});
    document.querySelector(".sample05_R4").innerHTML = arrNum4;

    const arrNum5 = ['c', 'd', 'e', 'a', 'b'];
    const arrNumSort5 = arrNum5.sort((a,b) => a.localeCompare(b));
    document.querySelector(".sample05_R5").innerHTML = arrNum5;

    const arrNum6 = ['c', 'd', 'e', 'a', 'b'];
    const arrNumSort6 = arrNum6.sort((a,b) => b.localeCompare(a));
    document.querySelector(".sample05_R6").innerHTML = arrNum6;
}

09. 배열 메서드 : concat() : 배열 요소를 결합 : 반환(배열)

번호 기본값 메서드 결괏값 
{
    const arrNum1 = [100, 200, 300];
    const arrNum2 = [400, 500, 600];
    const arrConcat = arrNum1.concat(arrNum2);
    document.querySelector(".sample06_R1").innerHTML = arrConcat;

    const arrSpread = [...arrNum1, ...arrNum2];
    document.querySelector(".sample06_R2").innerHTML = arrSpread;
}

10. 배열 메서드 : reduce() : 배열 요소 하나로 정리 : 반환(결괏값)

번호 기본값 메서드 결괏값 
{
    const arrNum1 = [100, 200, 300, 400, 500];
    const arrReduce1 = arrNum1.reduce(element => element)
    document.querySelector(".sample07_R1").innerHTML = arrReduce1;

    const arrNum2 = [100, 200, 300, 400, 500];
    const arrReduce2 = arrNum2.reduce((previous, current) => previous + current)
    document.querySelector(".sample07_R2").innerHTML = arrReduce2;

    const arrNum3 = [100, 200, 300, 400, 500];
    let sum = 0;
    for(let i = 0; i p.concat(c));
    document.querySelector(".sample07_R4").innerHTML = arrReduce4;

    const arrNum5 = ["javascript", "react", "vue"];
    const arrReduce5 = arrNum5.reduceRight((p,c) => p+c);
    document.querySelector(".sample07_R5").innerHTML = arrReduce5;
}

12. 배열 메서드 : slice() : 배열 요소를 다른 요소로 변경 : 반환(배열)

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const result = arrNum.slice(2)
    document.querySelector(".sample08_R1").innerHTML = result;

    const result2 = arrNum.slice(2, 3);
    document.querySelector(".sample08_R2").innerHTML = result2;

    const result3 = arrNum.slice(2, 4);
    document.querySelector(".sample08_R3").innerHTML = result3;

    const result4 = arrNum.slice(2, 5);
    document.querySelector(".sample08_R4").innerHTML = result4;

    const result5 = arrNum.slice(-2);
    document.querySelector(".sample08_R5").innerHTML = result5;

    const result6 = arrNum.slice(-2, 5);
    document.querySelector(".sample08_R6").innerHTML = result6;
}

13. 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경 : 반환(배열)

번호 기본값 메서드 리턴값 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const result = arrNum.splice(2);
    document.querySelector(".sample09_R1").innerHTML = arrNum;

    const arrNum2 = [100, 200, 300, 400, 500];
    const result2 = arrNum2.splice(2, 3);
    document.querySelector(".sample09_R2").innerHTML = arrNum2;

    const arrNum3 = [100, 200, 300, 400, 500];
    const result3 = arrNum3.splice(2, 3, 'javascript');
    document.querySelector(".sample09_R3").innerHTML = arrNum3; 

    const arrNum4 = [100, 200, 300, 400, 500];
    const result4 = arrNum4.splice(1, 1, 'javascript');
    document.querySelector(".sample09_R4").innerHTML = arrNum4;

    const arrNum5 = [100, 200, 300, 400, 500];
    const result5 = arrNum5.splice(1, 0, 'javascript');
    document.querySelector(".sample09_R5").innerHTML = arrNum5;

    const arrNum6 = [100, 200, 300, 400, 500];
    const result6 = arrNum6.splice(0, 4, 'javascript', 'jquery');
    document.querySelector(".sample09_R6").innerHTML = arrNum6;
}

14. 배열 메서드 : indexOf() / lastIndexOf() / includes()

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const arrIndex = arrNum.indexOf(200);//중복되면 앞에 요소가 나옴
    document.querySelector(".sample10_R1").innerHTML = arrIndex;

    const arrNum2 = [100, 200, 300, 400, 500];
    const arrIndex2 = arrNum2.indexOf(300);
    document.querySelector(".sample10_R2").innerHTML = arrIndex2;

    const arrNum3 = [100, 200, 300, 400, 500];
    const arrIndex3 = arrNum3.indexOf(600);
    document.querySelector(".sample10_R3").innerHTML = arrIndex3;

    const arrNum4 = [100, 200, 300, 400, 500];
    const arrIndex4 = arrNum4.lastIndexOf(200);//중복되면 뒤에 요소가 나옴
    document.querySelector(".sample10_R4").innerHTML = arrIndex4;

    const arrNum5 = [100, 200, 300, 400, 500];
    const arrIndex5 = arrNum5.includes(200);
    document.querySelector(".sample10_R5").innerHTML = arrIndex5;

    const arrNum6 = [100, 200, 300, 400, 500];
    const arrIndex6 = arrNum6.includes(600);
    document.querySelector(".sample10_R6").innerHTML = arrIndex6;
}

17. 배열 메서드 : find()요소로 반환 / fineIndex()숫자로 반환 / 조건식 사용 불가능

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    // const result = arrNum.find(function(element){
    //     return element === 300
    // })

    // const result = arrNum.find((element) =>{
    //     return element === 300
    // })

    // const result = arrNum.find(element => {
    //     return element === 300
    // })

    const result = arrNum.find(el => el === 300)
    document.querySelector(".sample11_R1").innerHTML = result;

    const result2 = arrNum.find(el => el === 600)
    document.querySelector(".sample11_R2").innerHTML = result2;

    const arrText = ['javascript', 'react', 'vue'];
    const result3 = arrText.find(el => el === 'javascript');
    document.querySelector(".sample11_R3").innerHTML = result3;

    const arrText4 = ['javascript', 'react', 'vue'];
    const result4 = arrText.findIndex(el => el === 'javascript');
    document.querySelector(".sample11_R4").innerHTML = result4;

    const arrText5 = ['javascript', 'react', 'vue'];
    const result5 = arrText.findIndex(el => el === 'html');
    document.querySelector(".sample11_R5").innerHTML = result5;
}
}

19. 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색 : 반환(배열) find와 다르게 조건식 사용가능

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const result = arrNum.filter(el => el === 300);
    document.querySelector(".sample12_R1").innerHTML = result;

    const arrNum2 = [100, 200, 300, 400, 500];
    const result2 = arrNum2.filter(el => el === 600);
    document.querySelector(".sample12_R2").innerHTML = result2;
    //아무것도 나오지 않음

    const arrNum3 = [100, 200, 300, 400, 500];
    const result3 = arrNum3.filter(el => el >= 300)
    document.querySelector(".sample12_R3").innerHTML = result3;
}

20. 배열 메서드 : map() : 배열 요소를 추출하여 새로운 배열로 조합 : 반환(배열)

번호 기본값 메서드 결괏값 
{
    const arrNum = [100, 200, 300, 400, 500];
    const result = arrNum.map(el => el)
    document.querySelector(".sample13_R1").innerHTML = result;

    const arrNum2 = [100, 200, 300, 400, 500];            
    const result2 = arrNum2.map(el => el + "J");
    document.querySelector(".sample13_R2").innerHTML = result2;

    const arrNum3 = [100, 200, 300, 400, 500];            
    const result3 = arrNum3.map(el => el + 100);
    document.querySelector(".sample13_R3").innerHTML = result3;

    const arrNum4 = [{a:100}, {a:200}, {a:300}];            
    const result4 = arrNum4.map(el => el.a);
    document.querySelector(".sample13_R4").innerHTML = result4;
}

'Javascript' 카테고리의 다른 글

Javascript 마우스 이벤트  (0) 2022.02.24
Javascript 이벤트 버블링 / 캡쳐링  (0) 2022.02.23
Javascript 데이터 제어하는 방법  (0) 2022.02.14
Javascript 함수의 종류 (1)  (0) 2022.02.14
Javascript 데이터 불러오는 방법  (0) 2022.02.14

UP NEXT : Javascript

댓글
© 2018 webstoryboy