배열 객체

  1. 배열 메서드 : length : 배열 길이 구하기 : 반환(숫자)
  2. 배열 메서드 : join() : 배열 요소 결합하기 : 반환(문자열)
  3. 배열 메서드 : push() : 배열 마지막 요소에 추가하기 : 반환(숫자)
  4. 배열 메서드 : unshift() : 배열 처음 요소에 추가하기 : 반환(숫자)
  5. 배열 메서드 : shift() : 배열 첫 요소 삭제하기 : 반환(삭제된 요소)
  6. 배열 메서드 : pop() : 배열 마지막 요소 삭제하기 : 반환(삭제된 요소)
  7. 배열 메서드 : indexOf() : 배열 요소 검색하기 : 반환(숫자)
  8. 배열 메서드 : lastIndexOf() : 배열 요소 끝에서 검색하기 : 반환(숫자)
  9. 배열 메서드 : includes() : 배열 요소 검색하기 : 반환(숫자)
  10. 배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬할 때 : 반환(불린)
  11. 배열 메서드 : sort() : 배열 요소의 순서를 정렬할 때 : 반환(배열)
  12. 배열 메서드 : concat() : 배열 요소를 결합할 때 : 반환(배열)
  13. 배열 메서드 : slice() : 배열 요소를 다른 요소로 변경할 때 : 반환(배열)
  14. 배열 메서드 : splice() : 배열 요소를 다른 요소로 변경할 때 : 반환(배열)
  15. 배열 메서드 : find() : 배열 요소 검색하기 : 반환(요소)
  16. 배열 메서드 : findIndex() : 배열 첫 요소 검색하기 : 반환(요소)
  17. 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색하기 : 반환(배열)
  18. 배열 메서드 : map() : 배열 요소 추출하여 새로운 배열로 만들기 : 반환(배열)
  19. 배열 메서드 : reduce() : 배열 요소를 하나로 만들기 : 반환(결과값)
  20. 배열 메서드 : reduceRight() : 배열 요소를 하나로 만들기 : 반환(결과값)
  21. 배열 메서드 : Array.from() : 배열로 변환하기 : 반환(배열)
  1. charAt()을 이용한 CSS 속성 첫 글자 검색하기
  2. find()를 이용한 CSS 검색하기

01. 배열 메서드 : length : 배열 길이 구하기

번호 기본값 메서드 결과값 
{
    const arr = [100, 200, 300, 400, 500];
    const text = arr.length;

    document.querySelector(".sample01_R1").innerHTML = text;
}

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

번호 기본값 메서드 결과값 
{
    const arr = [100, 200, 300, 400, 500];

    const text1 = arr.join("*");
    const text2 = arr.join("-");
    const text3 = arr.join("");
    const text4 = arr.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. 배열 메서드 : unshift() / push() : 배열 처음 요소에 추가하기 : 반환(숫자)

번호 기본값 메서드 결과값 
{
    const arr1 = [100, 200, 300, 400, 500];
    const text1 = arr1.push(600);

    document.querySelector(".sample03_P1").innerHTML = text1;
    document.querySelector(".sample03_R1").innerHTML = arr1;

    const arr2 = [100, 200, 300, 400, 500];
    const text2 = arr2.unshift(600);

    document.querySelector(".sample03_P2").innerHTML = text2;
    document.querySelector(".sample03_R2").innerHTML = arr2;
}

04. 배열 메서드 : shift() / pop(): 배열 요소 삭제하기 : 반환(삭제된 요소)

번호 기본값 메서드 메서드 값 결과값 
{
    const arr1 = [100, 200, 300, 400, 500];
    const text1 = arr1.shift();

    document.querySelector(".sample04_P1").innerHTML = text1;
    document.querySelector(".sample04_R1").innerHTML = arr1;

    const arr2 = [100, 200, 300, 400, 500];
    const text2 = arr2.pop();

    document.querySelector(".sample04_P2").innerHTML = text2;
    document.querySelector(".sample04_R2").innerHTML = arr2;
}

05. 배열 메서드 : indexOf() / lastIndexOf() / includes() : 배열 요소 검색하기

번호 기본값 메서드 결과값 
{
    const arr = [100, 200, 300, 400, 500];

    const text = arr.indexOf(200);
    document.querySelector(".sample05_R1").innerHTML = text;

    const text2 = arr.lastIndexOf(200);
    document.querySelector(".sample05_R2").innerHTML = text2;

    const arr3 = [100, 200, 300, 200, 500];
    const text3 = arr3.lastIndexOf(200);
    document.querySelector(".sample05_R3").innerHTML = text3;

    const text4 = arr.includes(200);
    document.querySelector(".sample05_R4").innerHTML = text4;
}

06. 배열 메서드 : reverse() / sort() : 배열 요소 순서 정할 때

번호 기본값 메서드 결과값 
{
    const arr = [100, 200, 300, 400, 500];

    const text = arr.reverse();
    document.querySelector(".sample06_R1").innerHTML = text;

    const text2 = arr.sort();
    document.querySelector(".sample06_R2").innerHTML = text2;

    const text3 = arr.sort(function(a,b){return b-a;});
    document.querySelector(".sample06_R3").innerHTML = text3;

    const str1 = ['c', 'd', 'e', 'a', 'b'];

    const text4 = str1.sort((a,b) =>  a.localeCompare(b));
    document.querySelector(".sample06_R4").innerHTML = text4;
}

07. 배열 메서드 : concat() / 펼침 연산자 : 배열 요소를 결합할 때 : 반환(배열)

번호 기본값 메서드 결과값 
{
    const arrNum1 = [100, 200, 300];
    const arrNum2 = [400, 500, 600];

    const result1 = arrNum1.concat(arrNum2);
    document.querySelector(".sample07_R1").innerHTML = result1;

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

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

번호 기본값 메서드 결과값 
{
    const arrNum1 = [100, 200, 300, 400, 500];

    const result1 = arrNum1.slice(2);
    document.querySelector(".sample08_R1").innerHTML = result1;

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

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

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

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

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

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

번호 기본값 메서드 메서드 결과값 배열 결과값 
{
    const arrNum1 = [100, 200, 300, 400, 500];
    const result1 = arrNum1.splice(2);
    document.querySelector(".sample09_A1").innerHTML = arrNum1;

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

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

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

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

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

10. 배열 메서드 : find() / findIndex() : 배열 요소 검색하기

번호 기본값 메서드 결과값 
{
    //리턴값 함수
    // const find = arr.find(function(element){
    //     retyrn element === 300
    // });

    //화살표 함수
    // const find = arr.find((element)=>{
    //     return element === 300
    // });

    //화살표 함수 괄호 생략
    // const find = arr.find(element=>{
    //     return element === 300
    // });

    //화살표 함수 괄호, 리턴 생략

    const arr = [100, 200, 300, 400, 500];
    const find = arr.find(element => element === 300);
    document.querySelector(".sample10_R1").innerHTML = find;

    const text = ["javascript", "react", "vue"];
    const find2 = text.find(element => element === "javascript");
    document.querySelector(".sample10_R2").innerHTML = find2;

    const text3 = ["javascript", "react", "vue"];
    const find3 = text3.findIndex(element => element === "javascript");
    document.querySelector(".sample10_R3").innerHTML = find3;
}

11. 배열 메서드 : filter() : 조건에 만족하는 배열 요소 검색하기 : 반환(배열)

번호 기본값 메서드 결과값 
{
    const arrNum1 = [100, 200, 300, 400, 500];
    const result1 = arrNum1.filter((el) => {
        return el === 300;
    });
    document.querySelector(".sample11_R1").innerHTML = result1;

    const arrNum2 = [100, 200, 300, 400, 500];
    const result2 = arrNum2.filter(el => el >= 300);
    document.querySelector(".sample11_R2").innerHTML = result2;

    const arrText1 = ["javascript", "react", "vue"];
    const result3 = arrText1.filter(el => el ==="javascript");
    document.querySelector(".sample11_R3").innerHTML = result3;
}

12. 배열 메서드 : map() : 배열 요소 추출하여 새로운 배열로 만들기 : 반환(배열)

번호 기본값 메서드 결과값 
{
    const arrNum1 = [100, 200, 300, 400, 500];
    // const result1 = arrNum1.map(function(el){
    //     return el;
    // });
    // const result1 = arrNum1.map((el) => {return el});
    const result1 = arrNum1.map(el => el);
    document.querySelector(".sample12_R1").innerHTML = result1;

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

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

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

13. 배열 메서드 : reduce(), reduceRight() : 배열 요소를 하나로 만들기 : 반환(결과값)

번호 기본값 메서드 결과값 
{
    const arrNum1 = [100, 200, 300, 400, 500];
    const result1 = arrNum1.reduce(el => el);
    document.querySelector(".sample13_R1").innerHTML = result1;

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

    const arrNum3 = [100, 200, 300, 400, 500];
    let sum = 0;
    for(i=0; i<arrNum3.length; i++){
        sum = sum + arrNum3[i];
    }
    document.querySelector(".sample13_R3").innerHTML = sum;

    const arrNum4 = [[100, 200], [300, 400]];
    const result4 = [arrNum4.reduce((p, c)=> p.concat(c))];
    document.querySelector(".sample13_R4").innerHTML = result4;

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

14. 배열 메서드 : Array.from() : 배열로 변환하기 : 반환(배열)

번호 기본값 메서드 결과값 
{
    const text = "javascript";
    const result = Array.from(text);
    document.querySelector(".sample14_R1").innerHTML = result;
    console.log(result);

    const text2 = "javascript";
    const result2 = Array.from(text2, el => el + "10");
    document.querySelector(".sample14_R2").innerHTML = result2;

    const text3 = "javascript";
    const result3 = [...text3].map(el => el);
    document.querySelector(".sample14_R3").innerHTML = result3;
}