Leve você para entender a tarefa de desestruturação de JavaScript

Recomendações relacionadas:

Conceitos

ES6 fornece um modo de atribuição mais conciso para extrair valores de arrays e objetos, que é chamado de desestruturação.

Exemplo:

[a, b] = [50, 100];
console.log(a);
// saída esperada: 50
console.log(b);
//saída esperada: 100

[a, b, ...descanso] = [10, 20, 30, 40, 50];
console.log(descanso);
// saída esperada: [30, 40, 50]

Desestruturação de array

A desestruturação de array é muito simples e concisa Use um literal de array no lado esquerdo da expressão de atribuição. array. O que o item

significa? Assim como no exemplo abaixo, os itens do array à esquerda obtêm os valores dos índices correspondentes do array desestruturado à direita,

deixe [a, b, c] = [1, 2, 3];
//uma = 1
// b = 2
// c = 3

declara atribuições separadas

Você pode desconstruir as atribuições separadamente através de declarações de variáveis

​​Exemplo: declarar variáveis, atribuir valores separadamente

// Declarar variáveis ​​let a, b;
// Em seguida, atribua valores [a, b] = [1, 2];
console.log(a);
console.log(b); // 2

Valor padrão da desestruturação

Se o valor retirado pela desestruturação for undefined , você pode definir o valor padrão:

let a, b;
// Define o valor padrão [a = 5, b = 7] = [1];
console.log(a);
console.log(b); // 7No

exemplo acima, definimos valores padrão para a e b. Nesse caso, se o valor de a ou b for undefined , ele atribuirá o valor padrão definido ao correspondente. Variáveis ​​(5 é atribuído a a, 7 é atribuído a b)

trocam valores de variáveis

​​No passado, quando trocávamos duas variáveis, sempre usávamos

//exchange abc = a;a = b;b = c

;

. No entanto, na desconstrução Na atribuição, podemos trocar os valores de duas variáveis ​​​​em uma expressão de desestruturação

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

Desconstrua o array retornado

função

.

  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b)

; O valor de retorno [10, 20] de c()** pode ser usado em uma linha separada de código

para ignorar o valor de retorno (ou pular um determinado item)

Você pode pular seletivamente alguns valores de retorno indesejados

da função c (. ) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b)

; variável

quando você Ao usar a desestruturação de array, você pode atribuir todas as partes restantes do array atribuído a uma variável

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

Neste caso, b também se tornará um array, e os itens do array são todos os itens restantes

.
Tenha cuidado aqui para não escrever uma vírgula no final. Se houver uma vírgula extra, um erro será relatado

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element. não pode ter uma vírgula final

Desestruturação de array aninhado

Assim como os objetos, os arrays também podem ser aninhados.

Exemplo:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use desestruturação aninhada para atribuir vermelho, verde e azul
// Use desestruturação aninhada para atribuir vermelho, verde, azul
const [hex, [vermelho, verde, azul]] = cor;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

Desestruturação de string

Na desestruturação de array, se o alvo da desestruturação for um objeto percorrível, a desestruturação e a atribuição podem ser executadas. Dados

let [a, b, c, d, e] = 'olá';/*
uma = 'h'
b = 'e'
c = 'eu'
d = 'eu'
e = 'o'
*/

Desconstrução de objeto

desconstrução básica de

let x = { y: 22, z: true };
deixe { y, z } = x; // deixe {y:y,z:z} = abreviação de x console.log(y);
console.log(z); // true

é atribuído a um novo nome de variável

O nome da variável pode ser alterado ao usar a desestruturação de objeto

let o = { p: 22, q: true };
deixe { p: foo, q: barra } = o;

console.log(foo);
console.log(bar); // código verdadeiro

foo

=

var {p: foo} = o obtém o nome da propriedade p do objeto o e, em seguida, atribui-o a uma variável chamada foo.

fora por desestruturação é undefined , podemos definir o valor padrão

let {a = 10, b = 5 } = { a: 3 };

console.log(a);
console.log(b); // 5

Atribua um valor ao novo nome do objeto e forneça um valor padrão

Como mencionado anteriormente, atribuímos um valor ao novo nome do objeto. , se não for desconstruído, o valor padrão será usado automaticamente

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa);
console.log(bb); // 5

Use desestruturação de array e objeto ao mesmo tempo.

Arrays e objetos podem ser usados ​​juntos em estruturas

const props = [.
  { id: 1, nome: 'Fizz' },
  { id: 2, nome: 'Buzz' },
  { id: 3, nome: 'FizzBuzz' },
];

const [,, {nome}] = adereços;
console.log(name); // "FizzBuzz"

não está completamente desconstruído

let obj = {p: [{y: 'world'}] };
deixe {p: [{ y }, x ] } = obj; //Não desconstrua x

// x = indefinido
// y = 'world'

atribui o valor restante a um objeto

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
//uma = 10
// b = 20
// rest = {c: 30, d: 40}

Desestruturação de objetos aninhados (a desestruturação pode ser ignorada)

let obj = {p: ['hello', {y: 'world'}] };
deixe {p: [x, { y }] } = obj;
// x = 'olá'
// y = 'mundo'
deixe obj = {p: ['olá', {y: 'mundo'}] };
deixe {p: [x, { }] } = obj; //ignorar y
// x = 'hello'

Nota:

Tenha cuidado ao usar variáveis ​​declaradas para

demonstração de erro de desestruturação:

{x}

= {x: 1};

erro, queremos evitar escrever chaves no início da linha para evitar que o JavaScript as interprete como um bloco de código

correta

de

escrever

:

deixe

a função add([x, y]) {
	return x + y;}add([1, 2]);

No código acima, o parâmetro da função add é um array na superfície, mas ao passar o parâmetro, o parâmetro do array é desconstruído nas variáveis ​​​​x e y. a função Internamente, é o mesmo que passar diretamente em x e y.

o

uso da atribuição de desestruturação. Existem muitas maneiras

de trocar os valores das variáveis,

seja x = 1;
seja y = 2;
[x, y] = [y, x];

O código acima troca os valores de x e y. Este método de escrita não é apenas conciso, mas também fácil de ler, e a semântica é clara

. de uma função

só pode retornar um valor. Se quisermos retornar vários valores, só podemos colocar esses valores em um array ou objeto e retorná-los. do objeto ou array é como procurar por algo

// Retorna um array function example() {
  return [1, 2, 3];}deixe [a, b, c] = exemplo();
  // Retorna um objeto function example() {
  retornar {
    foo: 1,
    barra: 2
  };
  

example

();

Extrair atribuição de desestruturação de dados JSON

é particularmente útil para extrair dados em objetos JSON

.
  identificação: 42,
  status: "OK",
  dados: [867, 5309]
};

deixe {id, status, dados: número} = jsonData;

console.log(id, status, número);
// 42, "OK", [867, 5309]

Usando o código acima, podemos recuperar rapidamente o valor nos dados JSON.

Recomendações relacionadas: Tutorial de JavaScript

O texto acima é para levá-lo a entender os detalhes da atribuição de desestruturação de JavaScript. mais informações, preste atenção em php Outros artigos relacionados no site chinês!