JavaScript
Vernietiging opdracht

Invoering

Syntaxis

• let [x, y] = [1, 2]
• let [first, ... rest] = [1, 2, 3, 4]
• let [one,, three] = [1, 2, 3]
• let [val = 'default value'] = []
• let {a, b} = {a: x, b: y}
• let {a: {c}} = {a: {c: 'genest'}, b: y}
• let {b = 'standaardwaarde'} = {a: 0}

Opmerkingen

Destructureringsfunctieargumenten

Trek eigenschappen van een object doorgegeven aan een functie. Dit patroon simuleert benoemde parameters in plaats van te vertrouwen op argumentpositie.

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

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

greeting(user)

Dit werkt ook voor arrays:

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

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

Variabelen hernoemen tijdens destructurering

Met destructurering kunnen we naar één sleutel in een object verwijzen, maar deze als een variabele met een andere naam declareren. De syntaxis ziet eruit als de sleutel / waarde-syntaxis voor een normaal JavaScript-object.

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

Arrays vernietigen

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

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

We kunnen de standaardwaarde in de destructureringsmatrix instellen, zie het voorbeeld van standaardwaarde tijdens destructurering .

Met de destructureringsmatrix kunnen we de waarden van 2 variabelen gemakkelijk omwisselen:

var a = 1;
var b = 3;

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

We kunnen lege slots opgeven om onnodige waarden over te slaan:

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

Objecten vernietigen

Destructurering is een handige manier om eigenschappen uit objecten in variabelen te extraheren.

Basissyntaxis:

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

let { name, age } = person;

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

Destructurering en hernoemen:

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

let { name: firstName } = person;

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

Destructurering met standaardwaarden:

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'

Destructurering en hernoemen met standaardwaarden

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'

Destructurering binnen variabelen

Afgezien van het vernietigen van objecten in functieargumenten, kunt u ze als volgt in variabele declaraties gebruiken:

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."

Zoals u kunt zien, zijn er drie nieuwe variabelen gemaakt: name , age en location en hun waarden zijn bij de objectpersoon person als deze overeenkomen met sleutelnamen.

Restparameters gebruiken om een array met argumenten te maken

Als je ooit een array nodig hebt die bestaat uit extra argumenten die je misschien wel of niet verwacht te hebben, afgezien van de argumenten die je specifiek hebt opgegeven, kun je de parameter array rest in de argumentdeclaratie als volgt gebruiken:

Voorbeeld 1, optionele argumenten in een array:

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

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

Voorbeeld 2, alle argumenten zijn nu een array:

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

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

De console wordt waar afgedrukt omdat myArguments een array is, en de ...myArguments in de parameterargumentenverklaring converteert een lijst met waarden die zijn verkregen door de functie (parameters) gescheiden door komma's naar een volledig functionele array (en niet een arrayachtig object) zoals het native argumentenobject).

Standaardwaarde tijdens destructurering

We komen vaak een situatie voor waarbij een eigenschap die we proberen te extraheren niet bestaat in het object / de array, wat resulteert in een TypeError (terwijl geneste objecten worden vernietigd) of wordt ingesteld op undefined . Tijdens het destructeren kunnen we een standaardwaarde instellen, waarop deze zal terugvallen als deze niet in het object wordt gevonden.

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

Geneste destructurering

We zijn niet beperkt tot het vernietigen van een object / array, we kunnen een genest object / array vernietigen.

Genestelde objectvernietiging

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

Geneste array-destructurering

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

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

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

Destructurering is niet alleen beperkt tot een enkel patroon, we kunnen er arrays in hebben, met n-niveaus van nesten. Evenzo kunnen we arrays vernietigen met objecten en vice versa.

Arrays in object

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

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

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

Objecten binnen arrays

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

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

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