JavaScript Object destructing

Summary: in this tutorial, you’ll learn about the JavaScript object destructing that assigns properties of an object to individual variables.

se você quiser aprender como destruir um array, você pode verificar o tutorial de destruição do array.

Introduction to the JavaScript object destructing assignment

suponha que você tem um person object with two properties: firstName and lastName.

Code language: JavaScript (javascript)

Antes de ES6, quando você deseja atribuir propriedades do person objeto para variáveis, normalmente, fazer como esta:

Code language: JavaScript (javascript)

ES6 introduz o objeto desestruturação sintaxe que fornece uma maneira alternativa para atribuir propriedades de um objeto para variáveis:

Code language: JavaScript (javascript)

neste exemplo, o firstName e lastName propriedades são atribuídas ao fName e lName variáveis, respectivamente.

nesta sintaxe:

Code language: JavaScript (javascript)

o identificador antes do cólon (:) é a propriedade do objeto e o identificador após o cólon é a variável.

Notice that the property name is always on the left whether it’s an object literal or object destructoring syntax.

Se as variáveis têm os mesmos nomes que as propriedades do objeto, você pode tornar o código mais conciso da seguinte forma:

Code language: JavaScript (javascript)

neste exemplo, nós declaradas duas variáveis firstName e lastName, e atribuídas as propriedades do objeto pessoa para as variáveis na mesma instrução.

é possível separar a declaração e a atribuição. No entanto, você deve rodear as variáveis entre parênteses:

se você não usar os parênteses, o motor JavaScript irá interpretar o lado esquerdo como um bloco e lançar um erro de sintaxe.

quando você atribui uma propriedade que não existe a uma variável usando a destruição do objeto, a variável é definida para undefined. Por exemplo:

Code language: JavaScript (javascript)

neste exemplo, a propriedade middleName não existe no objeto person, portanto, a variável middleName é undefined.

define valores por omissão

pode atribuir um valor por omissão à variável quando a propriedade de um objecto não existe. Por exemplo:

Code language: JavaScript (javascript)

neste exemplo, atribuímos a cadeia vazia à variável middleName quando o objecto da pessoa não tem a propriedade middleName.

também, atribuímos a propriedade currentAge à variável age com o valor padrão de 18.

no Entanto, quando o objeto pessoa tem o middleName propriedade, a atribuição funciona como de costume:

Code language: JavaScript (javascript)

Desestruturação de um objeto nulo

Uma função pode retornar um objeto ou null em algumas situações. Por exemplo:

Code language: JavaScript (javascript)

e usa a missão de destruição de objectos.:

Code language: JavaScript (javascript)

O código irá lançar um TypeError:

Code language: JavaScript (javascript)

Para evitar isso, você pode usar o (||) para regressar a null objeto para um objeto vazio:

Code language: JavaScript (javascript)

Agora, não irá ocorrer nenhum erro. E o firstName e lastName será undefined.

destruição de objectos aninhados

assumindo que tem um employee objecto que tem um name objecto como propriedade:

Code language: JavaScript (javascript)

a seguinte declaração destrói as propriedades do objeto aninhado name em variáveis individuais:

Code language: JavaScript (javascript)

É possível fazer vários atribuição de uma propriedade a várias variáveis:

Code language: JavaScript (javascript)

Desestruturação dos argumentos da função

Suponha que você tem uma função que exibe o objeto pessoa:

Code language: JavaScript (javascript)

É possível destructure o objeto argumento passado para a função como esta:

Code language: JavaScript (javascript)

parece bem menos detalhado, especialmente quando você usar muitas propriedades do argumento do objeto. Esta técnica é frequentemente usada em Reat.

Summary

• Object destructing assigns the properties of an object to variables with the same names by default.