배열

#배열

    /*
      #배열선언
      const 배열 = new Array();
        배열[0] = '값';
        #배열 리터럴 표현식
        const 배열 = ['값','값1'];
        배열[0] 키(인덱스) = 값 (value);
       map - 배열에서 새로운 배열을 만듬
       filter - 배열에서 골라내기
      */
      //배열선언방식
      const array = new Array();
      array[3] = 1; //4번째자리 1
      array.push("뒤");
      array.unshift("앞");
      array.shift();
      array.pop();
      console.log(array);
      /*
       배열 추가 삭제
       https://gent.tistory.com/295
       array.push('뒤'); // 배열의 끝에 요소를 추가
       array.unshift('앞'); // 배열의 앞쪽에 요소를 추가
       array.shift(); // 배열의 첫번째 요소를 제거
       arr.pop(); // 배열의 마지막 요소를 제거
       .splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거
      */

      const array2 = []; //배열방식2
      array2[0] = 1;
      console.log(array2);

#for Each

  <div id="tabMenu">
      <ul class="tMenu">
        <li>menu01</li>
        <li>menu02</li>
        <li>menu03</li>
      </ul>
      <div class="tContent">
        <div>content01</div>
        <div>content02</div>
        <div>content03</div>
      </div>
    </div>
    <script>
      const array = [
        {
          id: 1,
          content: "나는 1이다",
        },
        {
          id: 2,
          content: "나는 2다",
        },
        {
          id: 3,
          content: "나는 3이다",
        },
        {
          id: 4,
          content: "나는 4이다",
        },
        {
          id: 5,
          content: "나는 5이다",
        },
        {
          id: 6,
          content: "나는 6이다",
        },
        {
          id: 7,
          content: "나는 7이다",
        },
        {
          id: 8,
          content: "나는 8이다",
        },
      ];
      //배열을 도와주는 함수 foreach
      //array.forEach((el) => console.log(el.content));
      array.forEach((el, idx, arry) => console.log(el.content, idx, arry));

      const TUL = document.querySelectorAll(".tMenu > li");
      const TCON = document.querySelectorAll(".tContent > div");
      console.log(TUL); // 배열이 아니구 nodelist임
      TUL.forEach((el, idx) => {
        //console.log(el, idx);
        el.addEventListener("click", () => {
          TUL.forEach((el) => el.classList.remove("on"));
          el.classList.add("on");
          //console.log(idx);
          TCON.forEach((el) => el.classList.remove("on"));
          TCON[idx].classList.add("on");
        });
      });
      /*
      https://kutar37.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-siblings-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-get-siblings-in-pure-javascript
      */
      const spread = [...TUL];
      console.log(spread);

      const UL = document.querySelector(".tMenu");
      const LI = [...UL.children]; //html collection - 배열이아님
      console.log(LI);

      UL.addEventListener("click", (e) => {
        //console.log(e.target, e.currentTarget);
        let idx = LI.indexOf(e.target); //indexOf();  배열의 index 번호를 받아올때
        console.log(idx);
      });
      /*
      https://velog.io/@chlwlsdn0828/Js-Spread-%EC%97%B0%EC%82%B0%EC%9E%90-Rest-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0
      */
    </script>

#인덱스

<ul id="UL"></ul>
    <script>
      //indeOf index 반환하기
      const array = ["일", "이", "삼", "사", "오"];
      const array2 = [10, 28, 4, 38, 6, 45];

      const idx = array.indexOf("삼"); //삼 값의 index 번호 반환

      console.log(idx);

      const idx2 = array.includes("사"); //includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별
      console.log(idx2); //Boolean값으로 반환됨, true

      const find = array.find((el) => el === "오"); //find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
      console.log(find);

      const find2 = array2.find((el) => el > 12); //12보다 큰 첫번째 수만 반환 - 따라서 28반환
      console.log(find2);

      const find3 = array2.filter((el) => el > 12);
      //filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
      console.log(find3); //[28, 38, 45]

      /*배열자르기*/
      const arry_s = array.slice(0, 2); // 자르기 시작할 인덱스번호 , 자를갯수
      console.log(arry_s); //['일', '이']

      /*배열 순서바꾸기*/
      const arry_r = [...array].reverse(); // ...을 쓰면 나열해줌
      console.log(arry_r);
    </script>

 

#배열에 값추가 (map 활요)

<ul id="UL"></ul>
    <script>
      const DATA = [
        {
          id: 1,
          content: "나는 1이다",
          date: 20220721,
        },
        {
          id: 2,
          content: "나는 2다",
          date: 20220721,
        },
        {
          id: 3,
          content: "나는 3이다",
          date: 20220721,
        },
        {
          id: 4,
          content: "나는 4이다",
          date: 20220721,
        },
        {
          id: 5,
          content: "나는 5이다",
          date: 20220721,
        },
        {
          id: 6,
          content: "나는 6이다",
          date: 20220721,
        },
        {
          id: 7,
          content: "나는 7이다",
          date: 20220721,
        },
        {
          id: 8,
          content: "나는 8이다",
          date: 20220721,
        },
      ];
      //map -> 새로운 배열을 생성(나열의 의미)

      const A = DATA.map((data, idx, arry) => console.log(data, idx, arry));
      console.log(A);
      const B = DATA.map((data) => {
        return "<li>" + data.id + "</li>";
      });
      console.log(B);
      const C = DATA.map((data) => {
        return "<li>" + data.content + "</li>";
      });
      console.log(C);
      const D = DATA.map((data) => `<li>${data.date}</li>`);
      console.log(D);

      const RESULT = DATA.map((data) => `<li>${data.content}</li>`).join("");
      console.log(RESULT);
      //.slice(0, 2)
      document.querySelector("#UL").innerHTML = RESULT;

      //join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
      //기본 구분자, 쉼표와 공백, 더하기 기호, 빈 문자열의 네 가지 구분자를 사용해 배열을 연결
    </script>

#filter

    <ul id="UL"></ul>

    <script>
      const DATA = [
        {
          id: 1,
          content: "나는 1이다",
          date: 20220721,
        },
        {
          id: 2,
          content: "나는 2다",
          date: 20220721,
        },
        {
          id: 3,
          content: "나는 3이다",
          date: 20220721,
        },
        {
          id: 4,
          content: "나는 4이다",
          date: 20220721,
        },
        {
          id: 5,
          content: "나는 5이다",
          date: 20220721,
        },
        {
          id: 6,
          content: "나는 6이다",
          date: 20220721,
        },
        {
          id: 7,
          content: "나는 7이다",
          date: 20220722,
        },
        {
          id: 8,
          content: "나는 7이다",
          date: 20220721,
        },
      ];
      //filter -> 조건에 맞는 것만 새로운 배열로 생성
      //const RESULT = DATA.filter((el) => el.id !== 3);
      const RESULT = DATA.filter((el) => el.content === "나는 7이다");
      console.log(RESULT);

      const NEWLIST = RESULT.map(
        (data) => `<li>${data.content} <small>${data.date}</small></li>`
      ).join("");

      UL.innerHTML = NEWLIST;
      //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
    </script>