Opanuj Destrukturyzację w JavaScript dla Czystszego Kodu

Wyobraźmy sobie, że mamy obiekt, do którego chcemy uzyskać dostęp. Ten obiekt wygląda następująco:

let req = {
  params: {
    id: 'Request params ID',
    params: {
        id: 'Internal ID'
    }
  },
  body: 'Request body'
};

Aby uzyskać dostęp do elementów tego obiektu możemy:

req.params;
req.body;

Aby wyświetlić je w konsoli:

console.log(req.params);
console.log(req.body);

Jeśli chcemy przypisać te właściwości do zmiennych lub stałych:

const params = req.params;
const body = req.body;

Więc w przypadku gdy ten obiekt miałby więcej właściwości jak:

let req = {
  params: {
    id: 'Request params ID',
    params: {
        id: 'Internal ID'
    }
  },
  body: 'Request body',
  param2: 'value of param2',
  param3: 'value of param3',
  param4: 'value of param4',
};

i chcielibyśmy przypisać je do zmiennych/stałych, musielibyśmy mieć:

const params = req.params;
const body = req.body;
const param2 = req.param2;
const param3 = req.param3;
const param4 = req.params4;

Użycie przypisania destrukturyzującego do przypisywania wartości do zmiennych/stałych

W tym przypadku możemy użyć przypisania destrukturyzującego:

const { params, body, param2, param3, param4 } = req;

Teraz obiekt req jest destrukturyzowany i stała params będzie równa req.params

Aby sprawdzić jak to działa, uruchommy ten kod:

let req = {
  params: {
    id: 'Request params ID',
    params: {
        id: 'Internal ID'
    }
  },
  body: 'Request body',
  param2: 'value of param2',
  param3: 'value of param3',
  param4: 'value of param4',
};

const { params, body, param2, param3, param4 } = req;

console.log('params: ', params); // { id: 'Request params ID', params: { id: 'Internal ID' } }
console.log('body: ', body); // 'Request body'
console.log('param2: ', param2); // 'value of param2'
console.log('param3: ', param3); // 'value of param3'
console.log('param4: ', param4); // 'value of param4'

Destrukturyzacja zagnieżdżonych elementów w obiekcie

Wyobraźmy sobie, że musimy uzyskać dostęp do zagnieżdżonego elementu. W tym przypadku spróbujemy uzyskać dostęp do wartości id, która jest zagnieżdżona w params. Normalnie musielibyśmy to zrobić używając req.body.id. Spróbujmy zrobić to za pomocą przypisania destrukturyzującego:

let req = {
  params: {
    id: 'Request params ID',
    params: {
        id: 'Internal ID'
    }
  },
  body: 'Request body',
};

const { params: {id} } = req;

console.log('id: ', id); // 'Request params ID'

To zwróci 'Request params ID'

Destrukturyzacja i niezdefiniowane elementy w obiekcie

Wyobraźmy sobie, że teraz używamy destrukturyzacji, ale nasz obiekt nie jest "kompletny".

let req = {
  params: {
    id: 'Request params ID',
    params: {
        id: 'Internal ID'
    }
  },
  body: 'Request body',
  // param2: 'value of param2', // param2 nie istnieje
  param3: 'value of param3',
  param4: 'value of param4',
};

const { params, body, param2, param3, param4 } = req;

console.log('param2: ', param2); // undefined

Jeśli element nie istnieje, zwróci wartość undefined;

Destrukturyzacja i niezdefiniowane zagnieżdżone elementy w obiekcie

Wyobraźmy sobie, że teraz używamy destrukturyzacji dla obiektu:

let req = {
  // params: {
  //   id: 'Request params ID',
  //   params: {
  //       id: 'Internal ID'
  //   }
  // },
  body: 'Request body',
  // param2: 'value of param2', // param2 nie istnieje
  param3: 'value of param3',
  param4: 'value of param4',
};

const { params: {id}, body, param2, param3, param4 } = req;

console.log('id: ', id); // undefined

Jeśli element nie istnieje, zwróci błąd: Uncaught TypeError: Cannot destructure property `id` of 'undefined' or 'null'.;