TIL[非構造化割り当て]

オブジェクト非構造割り当て

通常、オブジェクトがパラメータとして関数に入力場合、

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo(user){
  const info = `유저 이름: ${user.name}, 나이: ${user.age}, 
사는 곳: ${user.city}`; 
  
  console.log(info); 
}

showUserInfo(user); // 유저 이름: Peter, 나이: 22, 사는 곳: Seoul

showUserInfo関数は、パラメータuserオブジェクトの情報をクエリーするたびにuserを表示します.名前のオブジェクトを使用したキー値クエリー情報が表示されます.しかしながら、より短く、より簡便にするために、非構造化割当てを用いることができる.

1.パラメータとしてオブジェクトを受信した後、関数に非構造化割り当てを行います。

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo(user){
  const {name, age, city} = user;
  // const name = user.name 
  // const age = user.age 
  // const city = user.city
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}`; 
  
  console.log(info); 
}

showUserInfo(user);

非構造化割り当て構文はconst{変数(オブジェクトのキーなど)}=オブジェクトである.そう言えば終わりだ.これにより、変数はオブジェクトのキー値を自動的に指します.

2.関数のパラメータレベルでの非構造化割り当て

最初の例より簡単な例があります.関数のパラメータ部分で非構造化割当てを行います.

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo({name, age, city}){
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}`; 
  
  console.log(info); 
}

showUserInfo(user);

前の例よりも簡潔な様子が見られます.

3.例外-パラメータステップの非構造化割り当てに値がありません

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo({name, age, city, hobby}){
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}, 취미: ${hobby}`; 
  
  console.log(info); 
}

showUserInfo(user); // 유저 이름: Peter, 나이: 22, 사는 곳: 
		    // Seoul, 취미: undefined

userではkeyはname,age,cityであり,関数のパラメータには嗜好が含まれておりundefinedを返すのが見られる.この場合、関数のパラメータレベルにデフォルト値を入れるだけです.

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo({name, age, city, hobby = 'game'}){
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}, 취미: ${hobby}`; 
  
  console.log(info); 
}

showUserInfo(user); // 유저 이름: Peter, 나이: 22, 사는 곳: 
		    // Seoul, 취미: game

4.rest/spread構文を使用してオブジェクトを分解

const person = {
       name: '김코딩',
       age: 23,
       level: 'Junior',
     }
const {name, ...args} = person;
console.log(name); // '김코딩'
console.log({...args}); // { age: 23, level: 'Junior }

const person = {
       name: '조이서',
       major: '생물학과',
       lesson: '생물',
       grade: 'A'
     }
const { name, lesson: course, grade} = person;
console.log(name); // 조이서
console.log(lesson); // 생물
console.log(course); // 생물
// const lesson = person.lesson = course = '생물'
console.log(grade); // A

5.spread構文を使用してオブジェクトをコピーする

const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
       age: 35
     }

const overwriteChanges = {
  name: '박해커',
  age: 20, 
  ...user
}
console.log(overwriteChanges); 
// user = {
//      name: '김코딩',
//      company: {
//        name: 'Code States',
//        department: 'Development',
//        role: {
//          name: 'Software Engineer'
//        }
//      },
//       age: 35
//     }

最初はoverwriteChangesオブジェクト内にnameとageがありましたが、オブジェクトuserをコピーすると値が上書きされます.したがってnameとageの値も変化していることが確認できる.

非構造タイリングの割り当て

配列は、オブジェクトのように非構造化割り当てを行うこともできます.この構文は、配列内の要素を別の名前(変数)として再宣言する場合に使用します.

1.配列内の要素を変数に割り当てます。

const array = [1, 2];
const [one, two] = array; 
// const [one, two] = [1, 2]
// const one = array[0]
// const two = array[1]

console.log(one); // 1
console.log(two); // 2

デフォルト値が指定されている場合.

var a, b;

[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

2.関数のパラメータレベルでの非構造化割り当て

const arr = [1, 2];

function addValue([a, b]){
  return a + b;
}
addValue(arr); // 3

3.rest/spread構文を使用して配列を分解する

const array = ['code', 'states', 'im', 'course'];
const [start, ...rest] = array;
console.log(start) // code
console.log(rest) // ['states', 'im', 'course'] 

restパラメータを使用すると配列が生成されることを忘れてはいけない.

4.変数値の交換

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

変数をcontとして宣言すると、値が変更されるため使用できません.変数値を交換するにはletまたはvarを使用する必要があります.
ソース:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment