JavaScript
Destruktureringsuppdrag

Introduktion

Syntax

• låt [x, y] = [1, 2]
• låt [först, ... vila] = [1, 2, 3, 4]
• låt [en, tre] = [1, 2, 3]
• let [val = 'default value'] = []
• låt {a, b} = {a: x, b: y}
• låt {a: {c}} = {a: {c: 'kapslad'}, b: y}
• låt {b = 'standardvärde'} = {a: 0}

Anmärkningar

Destruktureringsfunktionsargument

Dra egenskaper från ett objekt som skickas till en funktion. Detta mönster simulerar namngivna parametrar istället för att förlita sig på argumentposition.

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

Detta fungerar också för matriser:

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

Byt namn på variabler under destruktion

Destrukturering tillåter oss att hänvisa till en nyckel i ett objekt, men förklara det som en variabel med ett annat namn. Syntaxen ser ut som nyckelvärdssyntaxen för ett normalt JavaScript-objekt.

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

Destructuring Arrays

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

Vi kan ställa in standardvärde i destruktureringsfält, se exemplet med standardvärde under destruktion .

Med förstörande array kan vi enkelt byta värdena på 2 variabler:

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

Vi kan ange tomma platser för att hoppa över onödiga värden:

[a, , b] = [1, 2, 3] // a = 1, b = 3

Förstörande objekt

Destrukturering är ett bekvämt sätt att extrahera egenskaper från objekt till variabler.

Grundläggande syntax:

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

Destrukturera och byta namn:

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

Destrukturering med standardvärden:

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Destrukturera och byta namn på med standardvärden

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Destrukturera inuti variabler

Bortsett från att förstöra objekt till funktionsargument, kan du använda dem i variabla deklarationer enligt följande:

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

Som ni kan se, har tre nya variabler skapas: name , age och location och deras värden tog från objekt person om de matchas nyckelnamn.

Använd viloparametrar för att skapa ett argumentarray

Om du någonsin behöver en matris som består av extra argument som du kanske eller kanske inte förväntar dig att ha, förutom de som du specifikt deklarerade, kan du använda array-restparametern i argumentdeklarationen enligt följande:

Exempel 1, valfria argument i en matris:

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

Exempel 2, alla argument är en matris nu:

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

Konsolen skrivs ut sant eftersom myArguments är en Array, också ...myArguments inuti parameterns argumentdeklaration konverterar en lista över värden som erhållits med funktionen (parametrarna) separerade av kommatecken till en helt funktionell matris (och inte ett Array-liknande objekt som det ursprungliga argumentet).

Standardvärde vid destruktion

Vi stöter ofta på en situation där en egenskap som vi försöker att extrahera inte finns i objektet / arrayen, vilket resulterar i en TypeError (medan TypeError förstör kapslade objekt) eller ställs in till undefined . Vid destruktion kan vi ställa in ett standardvärde, som det kommer att falla tillbaka till, om det inte hittas i objektet.

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

Häckt destruktion

Vi är inte begränsade till att förstöra ett objekt / array, vi kan förstöra ett kapslad objekt / array.

Kapslad objektförstörelse

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

Nested Array Destructuring

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

Destrukturering är inte bara begränsad till ett enda mönster, vi kan ha matriser i det, med n-nivåer av häckning. På liknande sätt kan vi förstöra matriser med föremål och vice versa.

Arrays inom objekt

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

Objekt inom matriser

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);