JavaScript – Kurs

Przypisanie destrukturyzujące

Wyobraźmy sobie obiekt do którego elementów chcemy się dostać. Przyjmijmy że ten obiekt ma poniższą strukturę:

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

Aby dostać się do elementów tej metody możemy zastosować poniższą metodę:

req.params;
req.body;

Wyświetlmy wynik w konsoli:

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

Kiedy chcielibyśmy przypisać te wartości do zmiennych zastosowalibyśmy:

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

Więc w przypadku kiedy mielibyśmy więcej elementów obiektu:

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',
};

a kiedy chcielibyśmy te wartości przypisać do zmiennych zastosowalibyśmy poniższej formy:

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

Używanie przypisania destrukturyzującego do ustawienia wartości zmiennych

Pracując z powyższym przykładowym obiektem mozemy zastosować przypisanie destrukturyzujące(Destructuring assignment):

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

W tym przypadku req jest zdestrukturyzwoane a const params będzie równe req.params

Żeby sprawdzić jak to działa odpalmy poniższy 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'

Przypisanie destrukturyzjące i zagnieżdżone obiekty

Wyobraźmy sobie, że chcemy mieć dostęp do zagnieżdżonych elementów obiektu. W tym przypadku będziemy przypisać id ktorę jest wartością przypisaną do obiektu params. W przypadku ES5 wykorzystalibyśmy skladni req.body.id.Spróbujmy wykorzystać Przypisanie destrukturyzujące

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'

Konsola zwróci nam ‘Request params ID’

Elementy niezdefiniowane i przypisanie destrukturyzjące

Na warsztat weźmy teraz obiekt który jest “niekompletny”.

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

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

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

W tym przypadku jeśli element jest niezdefiniowany consola zwróci nam undefined;

Przypisanie destrukturyzujące i elementy niezdefiniowane w obiektach zagnieżdżonych

Zastosujmy przypisanie destrukturyzujące w przypadku obiektów zagnieżdzonych, z których będziemy chcieli przypisać do zmiennych wartości elementów.

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

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

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

W powyższym przypadku kiedy element jest niezdefiniowany i będziemy starać się go przypisać do zmiennej consola zwróci poniższy błąd:
Uncaught TypeError: Cannot destructure property `id` of ‘undefined’ or ‘null’.;

Please follow and like us:
error

Join the Conversation

1 Comment

  1. Reply
Leave a comment

Your email address will not be published. Required fields are marked *