본문 바로가기
Vue/Vue 정리

< ES6 - Destructuring / LocalStorage >

by 마늘아빠 2021. 1. 6.
728x90
반응형

비구조 할당 (구조 분해 할당)

  • 예시 Code1
    <script>
  const member = {
    id: 'aaa',
    name: 'bbb',
    age: '30',
  };
  /** es5까지 주로 사용된 문법 구조
  let id = member.id;
  let name = member.name;
  let age = member.age;
  console.log(id, name, age);
*/

  /** es6부터 주로 사용하는 문법 - 비구조 할당 (구조 분해 할당) */
  let { id, name, age } = member;
  console.log(id, name, age);
</script>

  • 예시 Code2
    <script>
  function getMember() {
    return {
      id: 'aaa',
      name: 'bbb',
      age: '30',
    };
  }
  /** es5까지 주로 사용된 문법 구조
  let member = getMember();
  let id = member.id;
  let name = member.name;
  let age = member.age;
  console.log(id, name, age);
*/

  /** es6부터 주로 사용하는 문법 - 비구조 할당 (구조 분해 할당) */
  let { id, name, age } = this.getMember();
  console.log(id, name, age);
</script>

  • 예시 Code3
    /** es5까지 주로 사용된 문법 구조 */
  function showMember(member) {
    console.log('아이디: ', member.id);
    console.log('이름: ', member.name);
    console.log('나이: ', member.age);
  }

  let member = {
    id: 'aaa',
    name: 'bbb',
    age: '22',
  };

  /** es6부터 주로 사용하는 문법 - 비구조 할당 (구조 분해 할당) */
  function showMember2({ id, name, age }) {
    console.log('아이디: ', id);
    console.log('이름: ', name);
    console.log('나이: ', age);
  }

  /** es6의 문법의 하나 Default-Parameter */
  function showMember3({ id, name, age, email = '이메일없음' }) {
    console.log('아이디: ', id);
    console.log('이름: ', name);
    console.log('나이: ', age);
    console.log('이메일: ', email);
  }
  showMember(member);
  showMember2(member);
  showMember3(member);
</script>

LocalStorage

  • 예시 Code
    <body>
    키 : <input type="text" id="key" /><br />
    값 : <input type="text" id="value" /><br /><br />
    <button id="addBtn">추가</button>
    <button id="removeBtn">삭제</button>
    <button id="clearBtn">전체삭제</button>
    <button id="viewBtn">조회</button><br />
    <ul id="dataView"></ul>
    <script>
      document.querySelector('#addBtn').onclick = () => {
        console.log('add');
        // 키, 값을 로컬저장소에 저장
        let key = document.querySelector('#key').value;
        let value = document.querySelector('#value').value;
        console.log(key, value);
        localStorage.setItem(key, value);
      };
      document.querySelector('#removeBtn').onclick = () => {
        console.log('remove');
        let key = document.querySelector('#key').value;
        localStorage.removeItem(key);
      };
      document.querySelector('#clearBtn').onclick = () => {
        console.log('clear');
        localStorage.clear();
      };
      document.querySelector('#viewBtn').onclick = () => {
        console.log('view');
        let liHtml = '';
        for (let i = 0; i < localStorage.length; i++) {
          let key = localStorage.key(i);
          let value = localStorage.getItem(key);
          liHtml += `<li>$: $</li>`;
          document.querySelector('#dataView').innerHTML = liHtml;
        }
      };
    </script>
</body>

Uploaded by Notion2Tistory v1.1.0

반응형

'Vue > Vue 정리' 카테고리의 다른 글

< Vuex >  (0) 2021.01.06
< Vue / Cli >  (0) 2021.01.06
< Vue 정리 2 >  (0) 2021.01.06
< Vue 정리 >  (0) 2021.01.06

관련글

티스토리툴바