[23.06.27.]2주차 2번째 수업 화요일

3강. 배열과 객체

목차

1. 배열,객체 자료형 설명

2.데이터에 따라 HTML을 변경하는 방법

3.다양한 배열 메소드 학습하기

4.Spread Operator

5.LocalStorage 사용법

 

 

1. Array,Object 자료형 설명

Array(배열) 여러개의 데이터를 한번에 저장하고 싶을때 사용

[]

let 강아지들 = [재롱이,감자,뚱땡이]

강아지들[0] = "순식" (let 사용 X)

 

Object(객체)

let 우리집강아지정보 = {이름: "밤송이", 종 : "포메라니안", 나이:9}

관련된 데이터를 한 번에 관리하기 위함

 

우리집강아지정보.이름

우리집강아지정보.종

우리집강아지정보.나이

우리집강아지정보["이름"]

우리집강아지정보["종"]

우리집강아지정보["나이"]

 

 

 

배열.forEach(function() {})

 

3.배열메소드학습하기.

find 하나만 찾기

const 숫자배열 = [1,2,3,4,5,6];
const 사보다큰숫자하나 = 숫자배열.find((숫자)=>{
    return 숫자>4
})
console.log(사보다큰숫자하나);

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
    평점: 5,
    후기개수: 2997,
    좋아요수: 31352,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
    평점: 5,
    후기개수: 45021,
    좋아요수: 156057,
  },
];
const 후기가_4만개_넘는_상품 = products.find((product)=>{
    return product.후기>40000
})
console.log(후기가_4만개_넘는_상품)

filter

조건에 만족하는 요소만 필터링을 통해 새로운배열 만들어줌

const ages = [32, 33, 16, 40]
const result = ages.filter((age)=>{
    return age>30;
})

result 새로운 배열 탄생 ages 배열은 바뀌지 않음

ages.push(400)

원래 ages배열에 400을 넣어줌

 

map

forEach와 똑같이 전체 배열접근

새로운 배열 안만들어주고 전체가 교체가됨?

const numbers = [1, 2, 3, 4];
const newArr = numbers.map((number) => {
  return num * 2;
});

sort

오름차순 배열정렬

기준배열 변경시킴

let korean = ["다", "나", "가"];
korean.sort();

숫자는 정렬안돼! 문자열만 정렬가능

//오름차순
numbers.sort((a,b)=>{
    return a-b
})

number배열일때 위에처럼하면 오름차순으로 정렬됨 a-b가 양수이면 a를 뒤로보냄

 

4.Spread Operator(...)

양쪽 대괄호[] 제거

 

5.LocalStorage사용법

서버에 저장할 정도로 중요하진 않은 정보를 저장하기위해 사용

날아가도 상관 없는 데이터이지만 있으면 편리한 정보

 

 

로컬스토리지에 데이터 추가하기 or 수정하기

localStorage.setItem("상품명", "멋있는 셔츠")

(키,값)

로컬스토리지에서 데이터 가져오기

localStorage.getItem("상품명")

로컬스토리지의 데이터 삭제하기

localStorage.removeItem("상품명")

로컬스토리지의 문제점

문자열만 가능하므로 문자열이 아닌것은  JSON.stringify()

localStorage.setItem("상품명", JSON.stringify({name: "멋있는티셔츠",가격: 10000}))

사용할때는 문자열로 되어있는것을 또 객체로 바꿔줘야해 JSON.parse()

JSON.parse(localStorage.getItem("상품명"))

새로운 객체넣기

가져온다

새로운배열만들기

다시넣기

 

응용문제 풀기

id=1 인 상품의 가격을 35000원으로 바꾸고 다시 넣어주세요.

//id=1, price 35000원으로 바꾸기
const 변경된상품들 = JSON.parse(localStorage.getItem("products")).map(
  (item) => {
    if (item.id === 1) {
      return {
        id: item.id,
        brand: item.brand,
        name: item.name,
        price: 35000,
      };
    } else {
      return { ...item };
    }
  }
);
localStorage.setItem("가격변경상품", JSON.stringify(변경된상품들));