javascript - JS/ES6: Destrukturalizácia undefined

Používam takúto deštrukturalizáciu:

const { item } = content
console.log(item)

Ale ako by som mal riešiť content === undefined - čo spôsobí chybu?

„Starý“ spôsob by vyzeral takto:

const item = content && content.item

Takže, ak je content nedefinované -> item bude tiež nedefinované.

Môžem urobiť niečo podobné pomocou deštrukturalizácie?

Odpoveď č. 1

Môžete použiť krátke uzatváranie na hodnotenie (short circuit evaluation), aby ste poskytli predvolenú hodnotu, ak je content nepravdivá hodnota, zvyčajne undefined alebo null v tomto prípade.

const content = undefined
const { item } = content || {}
console.log(item)                       // undefined

Menej idiomatický spôsob (pozri tento komentár) je rozšíriť obsah do objektu pred jeho deštrukturalizáciou, pretože hodnoty null a undefined sa ignorujú.

const content = undefined
const { item } = { ...content }
console.log(item) // undefined

Ak rozkladáte parametre funkcie, môžete priradiť predvolenú hodnotu (= {} v príklade).

Poznámka: Predvolená hodnota sa použije iba v prípade, ak je deštrukturovaný parameter undefined, čo znamená, že deštrukturovanie null hodnôt spôsobí chybu.

const getItem = ({ item } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem())                  // undefined

try {
  getItem(null)
} catch(e) {
  console.log(e.message)                // Error - Cannot destructure property `item` of 'undefined' or 'null'.
}

Alebo nastaviť predvolenú hodnotu pre vlastnosť item, ak vstupný objekt túto vlastnosť neobsahuje

const getItem = ({ item = "default" } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem({ foo: "bar" }))    // "default"

Odpoveď č. 2

const { item } = Object(content)

Odpoveď č. 3

Destrukturalizácia vnoreného objektu je čistá a krátka, ale je problematická, keď je zdrojová vlastnosť null alebo undefined v pravom objekte

povedzme, že máme

const {
  loading,
  data: { getPosts },
} = useQuery(FETCH_POSTS_QUERY);

Riešenie 1 ak máme dáta objekt, ale nemáme getPosts, môžeme použiť:
(Nastavenie predvolenej hodnoty na každej úrovni)

const {
  loading,
  data: { getPosts = [] } = { getPosts: [] },
} = useQuery(FETCH_POSTS_QUERY);

Riešenie 2: ak je udalosť data undefined, potom:

const {
  loading,
  data: { getPosts } = { getPosts: [] },
} = useQuery(FETCH_POSTS_QUERY);

Odpoveď č. 4

Nedávno bol pridaný: Operátor zlučovania s nulou (??).
Ktorý v podstate vracia hodnotu z pravej strany, ak je hodnota z ľavej strany null alebo undefined (v našom prípade undefined namiesto objektu).

const { item } = undefined or null
// Uncaught TypeError: Cannot destructure property 'item' of 'null' as it is  null.

const { item } = content ?? {}
console.log(item)   // undefined

Tak zvážte použitie operátora. Rovnako, ako bolo spomenuté v predchádzajúcich odpovediach, existuje || (alebo) operátor. Pre nás v tomto konkrétnom prípade nie je významný rozdiel.

To je len otázka vkusu, v našom tíme máme dohodu: používame ?? na definovanie predvoleného objektu, ak je cieľový objekt null alebo undefined, a v iných prípadoch používame operátor ||.

Súvisiace články