Llevarlo a comprender la tarea de desestructuración de JavaScript

Recomendaciones relacionadas:

conceptos

ES6 proporciona un modo de asignación más conciso para extraer valores de matrices y objetos, lo que se denomina desestructuración.

Ejemplo:

[a, b] = [50, 100];
consola.log(a);
// resultado esperado: 50
consola.log(b);
// salida esperada: 100

[a, b, ...descanso] = [10, 20, 30, 40, 50];
consola.log(descanso);
// resultado esperado: [30, 40, 50]

Desestructuración de matrices

La desestructuración de matrices es muy simple y concisa. Utilice un literal de matriz en el lado izquierdo de la expresión de asignación. Cada nombre de variable en el literal de matriz se asigna al mismo índice del desestructurado. matriz. ¿Qué significa el elemento

? Al igual que en el ejemplo siguiente, los elementos de la matriz de la izquierda obtienen los valores de los índices correspondientes de la matriz desestructurada de la derecha,

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

declara asignaciones separadas.

Puede deconstruir las asignaciones por separado mediante declaraciones de variables.

Ejemplo: declarar variables, asignar valores por separado

// Declarar variables let a, b;
// Luego asigna valores [a, b] = [1, 2];
consola.log(a); // 1
console.log(b); // 2

Valor predeterminado de desestructuración

Si el valor extraído mediante la desestructuración no está undefined , puede establecer el valor predeterminado:

let a, b;
// Establecer el valor predeterminado [a = 5, b = 7] = [1];
consola.log(a); // 1
console.log(b); // 7En

el ejemplo anterior, configuramos valores predeterminados para a y b. En este caso, si el valor de aob undefined , asignará el valor predeterminado establecido al correspondiente. Variables (5 se asigna a a, 7 se asigna a b)

intercambian valores de variables

En el pasado, cuando intercambiábamos dos variables, siempre usábamos

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

;

Sin embargo, en la deconstrucción En la asignación, podemos intercambiar los valores de dos variables en una expresión desestructurante

let a = 1 let b = 3;// Intercambiar los valores de a y b [a, b]; = [b, a]; console.log( a); // 3console.log(b); // 1

Deconstruir la matriz devuelta por la función.

Podemos deconstruir directamente una función que devuelve una

función de matriz c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

En el ejemplo anterior, ** El El valor de retorno [10, 20] de c()** se puede usar en una línea de código separada

para ignorar el valor de retorno (u omitir un elemento determinado)

Puede omitir selectivamente algunos valores de retorno no deseados

con la función c (. ) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b // 3

asigna el valor restante de la matriz a a)

variable

cuando Al utilizar la desestructuración de matrices, puede asignar todas las partes restantes de la matriz asignada a una variable

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

caso

, b también se convertirá en una matriz y los elementos de la matriz son todos los elementos restantes.

Tenga cuidado aquí, no puede escribir una coma al final. Si hay una coma adicional, se informará un error

let [a, ...b,] = [1, 2, 3];// SyntaxError: elemento de descanso. puede no tener una coma final

Desestructuración de matrices anidadas

Al igual que los objetos, las matrices también se pueden anidar.

Ejemplo:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Usa desestructuración anidada para asignar rojo, verde y azul
// Usa desestructuración anidada para asignar rojo, verde, azul
const [hexadecimal, [rojo, verde, azul]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

Desestructuración de cadenas

En la desestructuración de matrices, si el objetivo de la desestructuración es un objeto transitable, se pueden realizar la desestructuración y la asignación. El objeto transitable implementa la interfaz Iterator. Datos

let [a, b, c, d, e] = 'hola';/*
a = 'h'
b = 'e'
c = 'l'
re = 'l'
mi = 'o'
*/

Deconstrucción de objetos

deconstrucción básica de objetos

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = abreviatura de x;
console.log(z); // true

se asigna a un nuevo nombre de variable.

El nombre de la variable se puede cambiar cuando se utiliza la desestructuración de objetos

let o = { p: 22, q: true };
sea ​​{ p: foo, q: bar } = o;

consola.log(foo); // 22
console.log(bar); // código verdadero

foo

de

var {p: foo} = o p del objeto o y luego lo asigna a una variable llamada foo.

out por desestructuración undefined , podemos establecer el valor predeterminado

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

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

Asigna un valor al nuevo nombre de objeto y proporciona un valor predeterminado.

Como se mencionó anteriormente, asignamos un valor al nuevo nombre de objeto. Aquí podemos proporcionar un valor predeterminado para el nuevo nombre de objeto. , si no se deconstruye, se usará automáticamente el valor predeterminado

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

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

Use la desestructuración de matrices y objetos al mismo tiempo.

Las matrices y los objetos se pueden usar juntos en estructuras

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

const [, , {nombre}] = accesorios;
console.log(name); // "FizzBuzz"

no está completamente deconstruido

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//No deconstruyas x

// x = indefinido
// y = 'mundo'

asigna el valor restante a un objeto

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

Desestructuración de objetos anidados (la desestructuración se puede ignorar)

let obj = {p: ['hello', {y: 'world'}] };
sea ​​{p: [x, { y }] } = obj;
// x = 'hola'
// y = 'mundo'
let obj = {p: ['hola', {y: 'mundo'}] };
let {p: [x, { }] } = obj;//ignorar y
// x = 'hola'

Nota:

tenga cuidado al utilizar variables declaradas para

la demostración de errores de desestructuración:

let x;{x} = {x: 1};

el motor JavaScript entenderá {x} como un bloque de código, lo que dará como resultado una sintaxis; error, queremos evitar escribir las llaves al principio de la línea para evitar que JavaScript las interprete como un bloque de código

correcta

de

escribir

:

let

function add([x, y]) {
	return x + y;}add([1, 2]);

en el código anterior, el parámetro de la función add es una matriz en la superficie, pero al pasar el parámetro, el parámetro de la matriz se deconstruye en las variables x e y. la función Internamente, es lo mismo que pasar directamente x e y.

el

uso de la asignación de desestructuración. Hay muchas formas

de intercambiar los valores de las variables,

sea x = 1;
sea ​​y = 2;
[x, y] = [y, x];

valores

de xey. Este método de escritura no solo es conciso sino también fácil de leer y la semántica es clara.

de una función

solo puede devolver un valor. Si desea devolver múltiples valores, solo podemos colocar estos valores en una matriz u objeto y devolverlos cuando tengamos una asignación desestructurante, tomando estos valores. desde el objeto o matriz es como buscar algo

// Devuelve un ejemplo de función de matriz() {
  return [1, 2, 3];}let [a, b, c] = ejemplo();
  // Devuelve un ejemplo de función de objeto() {
  devolver {
    foo: 1,
    barra: 2
  };
  }let { foo, bar } = ejemplo();

Extraer la asignación de desestructuración de datos JSON

es particularmente útil para extraer datos en objetos JSON.

Ejemplo:

let jsonData = {.
  identificación: 42,
  estado: "OK",
  datos: [867, 5309]
};

let {id, estado, datos: número} = jsonData;

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

Usando el código anterior, podemos recuperar rápidamente el valor en los datos JSON.

Recomendaciones relacionadas: Tutorial de JavaScript

Lo anterior es para ayudarlo a comprender los detalles de la asignación de desestructuración de JavaScript. Para obtener más información, preste atención a php. ¡Otros artículos relacionados en el sitio web chino!