[JavaScript] 배열

배열

join ( 배열 값의 사이사이에 값을 추가, join 을 사용하면 배열이 string 자료형으로 변환 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const city = ["서울", "부산", "인천"];
      const printArr = () => {
        for (let i = 0; i < city.length; i++) {
          document.write(`배열 데이터[${i}] : ${city[i]}<br>`);
        }
      };
      printArr();
      city[3] = "대구";
      document.write("<hr>" + city + "<br>");
      document.write(typeof city + "<br>");
      const join01 = city.join();
      const join02 = city.join("-");
      document.write(`조인 결과 1 : ${join01}, type : ${typeof join01}<br>`);
      document.write(`조인 결과 2 : ${join02}, type : ${typeof join02}<br>`);
      // 조인은 배열 사이사이에 값을 어떤걸로 변경할지 선택
      // 아무것도 설정하지 않으면 , 으로 적용되며 join 을 사용하면
      // 배열이 아닌 string 자료형으로 변경된다
    </script>
  </body>
</html>

push, pop ( 배열의 마지막 값을 추가, 배열의 마지막 값을 제거 )

unshift, shift ( 배열의 맨 앞의 값을 추가, 배열의 맨 앞의 값을 제거 )

concat ( 배열의 마지막 값을 추가하지만 원본 배열은 건드리지 않고 복사본을 만든다 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let kdata = ["서울", "부산"];
      document.write(`기본 배열 : ${kdata}<br>`);
      kdata.push(`인천`, `대구`);
      document.write(`push : ${kdata}<br>`);
      kdata.pop();
      document.write(`pop : ${kdata}<br>`);

      kdata.unshift(`111`, `222`);
      document.write(`unshift : ${kdata}<br>`);
      kdata.shift();
      document.write(`shift : ${kdata}<br>`);

      let data = kdata.concat(`안녕`, `하세요`);
      document.write(`concat : ${data}, type : ${typeof data}<br>`);
      document.write(`kdata : ${kdata}<br>`);
    </script>
  </body>
</html>

forEach ( 단순 배열 출력 및 연산에 사용, 리턴 값을 가질 수 없음 )

map ( 리턴 값을 가지므로 원하는대로 저장하여 사용할 수 있음 )

★ 둘 다 괄호 안에 함수를 가진다 ★

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [`1111`, `2222`, `3333`];
      for (let i = 0; i < data.length; i++) {
        document.write(data[i] + "<br>");
      }
      document.write("<hr>");

      //   function t(d) {
      //     console.log(d);
      //     document.write(d);
      //   }
      const t = (d) => console.log(d);
      data.forEach(t);
      // forEach 는 단순 출력, return 값을 가질 수 없다.
      // 고로 단순히 연산, 출력하는데만 사용할 수 있다
      // forEach() 괄호 안에는 함수가 들어가야하며
      // 각 값들을 매개변수로 받아 처리한다
      data.forEach((d) => {
        document.write(d);
      });







      //   function t02(d) {
      //     return `<b style="color:blue;">${d}</b>`;
      //   }
      const t02 = (d) => `<b style="color:blue;">${d}</b>`;
      const mapData = data.map(t02);
      // map 은 리턴값을 가진다
      document.write("<hr>" + mapData + "<hr>");
      const mapData02 = data.map((d) => `<b style="color:yellow;">${d}</b>`);
      document.write("<hr>" + mapData02 + "<hr>");
    </script>
  </body>
</html>

Dictionary ( 키와 값을 가진다, 함수도 값으로 가질 수 있다 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let dic = { f0: 100, f1: 200 };
      document.write(`기본 값 : ${dic}<br>`);

      function test() {
        document.write("test실행<br>");
      }

      dic.f2 = "값 추가";
      dic["f3"] = "f33333";
      dic.func = test;

      document.write(dic + "<br>");
      document.write(dic["f1"] + "<br>");
      document.write(dic.f2 + "<br>");
      document.write(dic.f3 + "<br>");
      document.write(dic.func + "<br>");
      dic.func();
    </script>
  </body>
</html>

filter ( 데이터 중 해당하는 값만 걸러서 가져온다 )

★ () 에 함수를 가짐 ★

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
      const filter01 = (value, index) => {
        console.log(`index : ${index}, value : ${value}`);
        return value >= 50;
      };
      const result01 = data.filter(filter01);
      document.write(result01 + "<br>");
      const result02 = data.filter((value) => value <= 50);
      document.write(result02 + "<br>");
    </script>
  </body>
</html>

배열의 값을 받아와서 회원의 정보 확인하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      let userDB = [
        { id: `aaa`, name: `홍길동`, age: 20 },
        { id: `bbb`, name: `김개똥`, age: 30 },
        { id: `ccc`, name: `고길동`, age: 40 },
      ];

      function init() {
        // alert("실행");
        const div = document.querySelector(".test");
        let msg = `아이디 : ${userDB[0].id}<br>
        이름 : ${userDB[0].name}<br>
        나이 : ${userDB[0].age}<br>`;
        div.innerHTML = msg;

        const div2 = document.querySelector(".test2");
        let msg2 = ``;
        for (const user of userDB) {
          // userDB 가 가지고 있는 값을 user 라는 변수로 하나씩
          // 가지고 옴
          msg2 += `아이디 : ${user.id}<br>
            이름 : ${user.name}<br>
            나이 : ${user.age}<br>`;
        }
        div2.innerHTML = msg2;
      }
    </script>
  </head>
  <body onload="init()">
    <!-- 웹이 구동되면 init() 함수를 실행시켜라... -->
    <!-- 자바스크립트의 window.load 와 같은 역할 -->
    <div class="test"></div>
    <hr />
    <div class="test2"></div>
  </body>
</html>

실습 예제

let userInfo = [ 
{ 'id' : 'aaa', 'name' : '홍길동', 'age' : 20 }, 
{ 'id' : 'bbb','name' : '김개똥', 'age' : 30 }, 
{ 'id' : 'ccc', 'name' : '고길동', 'age' : 40 } 
]

유저 데이터

예제 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid black;
      }
      th {
        border: 1px solid black;
      }
      td {
        border: 1px solid black;
      }
    </style>
    <script>
      let userInfo = [
        { id: "aaa", name: "홍길동", age: 20 },
        { id: "bbb", name: "김개똥", age: 30 },
        { id: "ccc", name: "고길동", age: 40 },
      ];

      function lookInf(username) {
        const lookInf = document.querySelector(".allUserList");
        msg = "";
        for (const user of userInfo) {
          if (user.name == username) {
            msg += `<b>아이디</b> : ${user.id}<br>
                    <b>이름</b> : ${user.name}<br>
                    <b>나이</b> : ${user.age}`;
          }
        }
        lookInf.innerHTML = msg;
      }

      function lookAllUser() {
        const lookAllUser = document.querySelector(".allUserList");
        let msg = "";
        for (const user of userInfo) {
          msg += `<tr><td>${user.id}</td><td onclick="lookInf('${user.name}')">${user.name}</td><td>${user.age}</td></tr>`;
        }
        let allUserTable =
          "<table> <thead> <th>아이디</th> <th>이름</th> <th>나이</th> </thead>" +
          msg +
          "</table>";
        lookAllUser.innerHTML = allUserTable;
      }

      function lookUser() {
        const lookUser = document.querySelector(".allUserList");
        const inputId = document.getElementById("inputId").value;
        let msg = "";
        for (const user of userInfo) {
          if (user.name == inputId) {
            msg += `<tr> <td>${user.id}</td> <td onclick="lookInf('${user.name}')">${user.name}</td> <td>${user.age}</td> </tr>`;
          }
        }
        let allUserTable =
          "<table> <thead> <th>아이디</th> <th>이름</th> <th>나이</th> </thead>" +
          msg +
          "</table>";
        lookUser.innerHTML = allUserTable;
      }

      function deleteUser() {
        const deleteUser = document.querySelector(".allUserList");
        const deleteId = document.getElementById("inputDeleteId").value;

        const deleteFilter = (value) => {
          return value.name != deleteId;
        };
        const deleteResult = userInfo.filter(deleteFilter);

        let msg = "";
        for (const user of deleteResult) {
          msg += `<tr> <td>${user.id}</td> <td onclick="lookInf('${user.name}')">${user.name}</td> <td>${user.age}</td> </tr>`;
        }
        let deleteUserTable =
          "<table> <thead> <th>아이디</th> <th>이름</th> <th>나이</th> </thead>" +
          msg +
          "</table>";

        deleteUser.innerHTML = deleteUserTable;
      }
    </script>
  </head>
  <body>
    <div class="allUserList">목록을 보여 줍니다</div>
    <hr />
    <input type="button" value="모든 회원 보기" onclick="lookAllUser()" />
    <hr />
    <input type="text" placeholder="input id" id="inputId" />
    <br />
    <input type="button" value="특정 회원 조회" onclick="lookUser()" />
    <hr />
    <input type="text" placeholder="input id" id="inputDeleteId" />
    <br />
    <input type="button" value="특정 회원 삭제" onclick="deleteUser()" />
  </body>
</html>

예제 풀이

728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] js 파일로 자바스크립트 코드 관리 (0)	2024.03.27
[JavaScript] setTimeout, setInterval, 자식요소 (추가, 삭제) (0)	2024.03.26
[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 ) (0)	2024.03.25
[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 ) (0)	2024.03.25
[JavaScript] 조건문, 반복문 (1)	2024.03.22

저녕호의 개발세상

[JavaScript] 배열

배열

실습 예제

'FE > JavaScript' 카테고리의 다른 글

티스토리툴바

[JavaScript] 배열

배열

실습 예제

'FE > JavaScript' 카테고리의 다른 글

'FE/JavaScript' Related Articles

티스토리툴바