20240109_TIL 12일차

[1] TIL

 1.  "Javascript 기초 : Array와 method by 김병연 튜터님" 정리 

  (1) 배열의 정의 및 특징

    1) Array : 데이터의 배열, 모음, 집합

      const arr = [1, 2, 3];

       const arr 2 = new Array [1, 2, 3];

    2) 특징

     a. 순서가 있음.

     b. 숫자, 문자열, 객체, 배열 모두 저장할 수 있음

     c. 크기가 고정되어 있지 않음.

  (2) method

    1) 끝에 추가 

     fruits.push(‘orange’);

   2) 끝에 제거

     fruits.pop();

   3) 첫번째 요소 제거 

    fruits.shift();

   4) 첫번째 요소에 추가

    fruits.unshift();

   5) 첫번째 요소 제거, mango 추가

    fruits.splice(1, 1, ‘mango’);

   6) 각 요소에 2를 곱한 배열 만들기

    const doubled = numbers.map (function(num) { return num * 2; });

   7) 짝수만 있는 배열

    const even = numbers.filter (function (num) { return num % 2 === 0   });

   8) 피자 2번째, 3번째, 4번째 조각 자르기

    const sliced = pizza.slice(1, 4);

   9) 기존 배열에 orange, mango 추가

    const moreFruits = fruits.concat ([‘orange’, ‘mango’ ]);

  10) 배열의 요소를 모두 더한 값

    reduce((a,c) => a+c); 

    const sum = numbers.reduce ((acc. Curr, idx) => { return acc + curr;};

   11) 짝수 요소를 반환 (첫 번째)

    const firsteven = numbers.find((num) =>  { return num %2 === 0; };

   12) 배열에서 짝수 요소가 있으면 true, 없으면 false

    const hasEven = numbers.some(num => num %2 ===0);

   13) 모든 요소가 짝수이면 true, 아니면 false

    const isAllEven = numbers.every(num => num %2 ===0);

   14) 배열에 특정 요소가 있으면 true, 없으면 false

    const hasBanana = fruits.includes(‘banana’);  

   15) 배열의 ‘banana’ 요소의 인덱스 구하기

    const bananaIdx = fruits.indexOf(‘banana’);

  16) 배열에서 apple 요소의 마지막 index 구하기

    const lastAppleIdx = fruits.lastIndexOf(‘apple’);

  17) 배열의 각 요소들을 출력하기

    fruits.forEach((fruit) => console.log(fruit));

(3) item, price로 구성된 배열

  Q1) 가격이 300 이하인 것들만

    const result = items.Filter ((item ) => item.price <= 300 }

  Q2) 가격 다 더하기

    const totalPrice = items.reduce(acc, curr) => return acc + curr.price;}, 0);

  Q3) 가격의 평균값

    console.log(totalPrice / items.length);

  Q4) Book 찾기

.  const foundBook = items.find((item) => item.name === ‘Book’)

(4) 웹 개발 기본

  1) JavaScript는 id로 지정, camel => const findBookPrice.

  2) CSS는 class로 지정, kebab => const find-book-price

  3) id로 지정 => const listItem = document.getElementById(‘itemList’); 

  4) class로 지정 => const listitem = document.querySelector(‘#itemList);

  5) items.forEach((item) => {const li = document.createElement(‘li’)};

  6) li.textContext = `이름: $(item.name} 가격: ${item.price)`;  itemList.appendChild(li)}