10. Destruktion

BY admin
|

10. Destruktion #

  • 10.1. Översikt
    • 10.1.1. Objekt destruktion
    • 10.1.2. Array destructuring
    • 10.1.3. Var kan destruktion användas?
  • 10.2. Bakgrund: konstruera data kontra extrahera data
  • 10.3. Mönster för destruktion
    • 10.3.1. Välj vad du behöver
  • 10.4. Hur får mönster tillgång till värderingarnas inre?
    • 10.4.1. Objektmönster tvinga värden till objekt
    • 10.4.2. Array mönster arbeta med iterables
  • 10.5. Standardvärden
    • 10.5.1. undefined utlöser standardvärden
    • 10.5.2. Standardvärden beräknas på begäran
    • 10.5.3. Standardvärden kan hänvisa till andra variabler i mönstret
    • 10.5.4. Standardvärden för mönster
    • 10.5.5. Mer komplexa standardvärden
  • 10.6. Fler objekt destructuring funktioner
    • 10.6.1. Fastighetsvärde stenografi
    • 10.6.2. Beräknade fastighetsnycklar
  • 10.7. Fler Array destructuring funktioner
    • 10.7.1. Elision
    • 10.7.2. Vila operatör (...)
  • 10.8. Du kan tilldela mer än bara variabler
  • 10.9. Fallgropar av destruktion
    • 10.9.1. Börja inte ett uttalande med en lockig stag
  • 10.10. Exempel på destruktion
    • 10.10.1. Destructuring returnerade matriser
    • 10.10.2. Destructuring returnerade objekt
    • 10.10.3. Array-destructuring iterable värden
    • 10.10.4. Flera returvärden
  • 10.11. Destruktionsalgoritmen
    • 10.11.1. Algoritmen
    • 10.11.2. Tillämpa algoritmen

10.1 översikt #

Destructuring är ett bekvämt sätt att extrahera flera värden från data lagrade i (eventuellt kapslade) objekt och matriser. Den kan användas på platser som tar emot data (t.ex. den vänstra sidan av en uppgift). Hur man extraherar värdena anges via mönster (läs vidare för exempel).

10.1.1 objekt destructuring #

Destructuring objekt:

const obj = { first: 'Jane', last: 'Doe' };const {first: f, last: l} = obj; // f = 'Jane'; l = 'Doe'// {prop} is short for {prop: prop}const {first, last} = obj; // first = 'Jane'; last = 'Doe'

Destructuring hjälper till med bearbetning av returvärden:

const obj = { foo: 123 };const {writable, configurable} = Object.getOwnPropertyDescriptor(obj, 'foo');console.log(writable, configurable); // true true

10.1.2 Array destructuring #

Array destructuring (fungerar för alla iterabla värden):

const iterable = ;const  = iterable; // x = 'a'; y = 'b'

Destructuring hjälper till med bearbetning av returvärden:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

10.1.3 Var kan destruktion användas? #

Destructuring kan användas på följande platser (jag visar Matrismönster för att demonstrera; objektmönster fungerar lika bra):

// Variable declarations:const  = ;let  = ;var  = ;// Assignments: = ;// Parameter definitions:function f() { ··· }f();

du kan också förstöra i en for-of – slinga:

const arr = ;for (const  of arr.entries()) { console.log(index, element);}// Output:// 0 a// 1 b

10.2 Bakgrund: konstruera data kontra extrahera data #

för att fullt ut förstå vad destruktion är, låt oss först undersöka dess bredare sammanhang.

JavaScript har operationer för att konstruera data, en egenskap i taget:

const obj = {};obj.first = 'Jane';obj.last = 'Doe';

samma syntax kan användas för att extrahera data. Återigen, en fastighet i taget:

const f = obj.first;const l = obj.last;

dessutom finns det syntax för att konstruera flera egenskaper samtidigt, via ett objekt bokstavligt:

const obj = { first: 'Jane', last: 'Doe' };

före ES6 fanns det ingen motsvarande mekanism för att extrahera data. Det är vad destruktion är – det låter dig extrahera flera egenskaper från ett objekt via ett objektmönster. Till exempel på vänster sida av en uppgift:

const { first: f, last: l } = obj;

du kan också förstöra matriser via mönster:

const  = ; // x = 'a'; y = 'b'

10.3 Mönster för destruktion #

följande två parter är involverade i destruktion:

  • Destructuring source: de data som ska destrueras. Till exempel den högra sidan av en destruktionsuppgift.
  • Destructuring target: mönstret som används för destructuring. Till exempel den vänstra sidan av en destruktionsuppgift.

destruktionsmålet är antingen ett av tre mönster:

  • uppdragsmål. Till exempel: x
    • ett tilldelningsmål är vanligtvis en variabel. Men i destructuring uppdrag, du har fler alternativ, som jag ska förklara senare.
  • objekt mönster. Till exempel: { first: "pattern", last: "pattern" }
    • delarna av ett objektmönster är egenskaper, egenskapsvärdena är igen mönster (rekursivt).
  • Array mönster. Till exempel:
    • delarna av ett Matrismönster är element, elementen är igen mönster (rekursivt).

det betyder att du kan bo mönster, godtyckligt djupt:

const obj = { a: , b: true };const { a:  } = obj; // f = 123

10.3.1 Välj vad du behöver #

om du förstör ett objekt nämner du bara de egenskaper du är intresserad av:

const { x: x } = { x: 7, y: 3 }; // x = 7

om du förstör en Array kan du välja att bara extrahera ett prefix:

const  = ; // x='a'; y='b';

10.4 Hur får mönster tillgång till värderingarnas inre? #

i en uppgift pattern = someValue, hur kommer pattern åt vad som finns inuti someValue?

10.4.1 Objektmönster tvingar värden till objekt #

objektmönstret tvingar förstörande källor till objekt innan du öppnar egenskaper. Det betyder att det fungerar med primitiva värden:

const {length : len} = 'abc'; // len = 3const {toString: s} = 123; // s = Number.prototype.toString
10.4.1.1 att misslyckas med att objekt-förstöra ett värde #

tvång till objekt utförs inte via Object(), utan via den interna operationen ToObject(). De två operationerna hanterar undefined och null annorlunda.

Object() konverterar primitiva värden till wrapper-objekt och lämnar objekt orörda:

> typeof Object('abc')'object'> var obj = {};> Object(obj) === objtrue

It also converts undefined and null to empty objects:

> Object(undefined){}> Object(null){}

In contrast, ToObject() throws a TypeError if it encounters undefined or null. Therefore, the following destructurings fail, even before destructuring accesses any properties:

const { prop: x } = undefined; // TypeErrorconst { prop: y } = null; // TypeError

som en konsekvens kan du använda det tomma objektmönstret {} för att kontrollera om ett värde är tvingande för ett objekt. Som vi har sett är bara undefined och null inte:

({} = ); // OK, Arrays are coercible to objects({} = 'abc'); // OK, strings are coercible to objects({} = undefined); // TypeError({} = null); // TypeError

parenteserna runt uttrycken är nödvändiga eftersom uttalanden inte får börja med lockiga hängslen i JavaScript (detaljer förklaras senare).

10.4.2 Array mönster arbeta med iterables #

Array destructuring använder en iterator för att komma till elementen i en källa. Därför kan du Array-destructure något värde som är iterable. Låt oss titta på exempel på iterabla värden.

strängar är iterabla:

const  = 'abc'; // x='a'; y=

glöm inte att iteratorn över strängar returnerar Kodpunkter (”Unicode-tecken”, 21 bitar), inte kodenheter (”JavaScript-tecken”, 16 bitar). (För mer information om Unicode, se kapitlet ” kapitel 24. Unicode och JavaScript ”i”talande JavaScript”.) Till exempel:

const  = 'a\uD83D\uDCA9c'; // x='a'; y='\uD83D\uDCA9'; z='c'

du kan inte komma åt elementen i en uppsättning via index, men du kan göra det via en iterator. Därför fungerar array destructuring för uppsättningar:

const  = new Set(); // x='a'; y='b';

iteratorn Set returnerar alltid element i den ordning de infogades i, varför resultatet av den tidigare förstöringen alltid är detsamma.

10.4.2.1 misslyckas med att array-destructure ett värde #

ett värde är iterabelt om det har en metod vars nyckel är Symbol.iterator som returnerar ett objekt. Array-destructuring kastar en TypeError om värdet som ska destrueras inte är iterabelt:

let x; = ; // OK, Arrays are iterable = 'abc'; // OK, strings are iterable = { * () { yield 1 } }; // OK, iterable = {}; // TypeError, empty objects are not iterable = undefined; // TypeError, not iterable = null; // TypeError, not iterable

TypeError kastas redan innan du öppnar element i iterable, vilket innebär att du kan använda det tomma Matrismönstret för att kontrollera om ett värde är iterabelt:

 = {}; // TypeError, empty objects are not iterable = undefined; // TypeError, not iterable = null; // TypeError, not iterable

10.5 standardvärden #

standardvärden är en valfri funktion i mönster. De ger en reserv om ingenting Finns i källan. Om en del (en objektegenskap eller ett matriselement) inte har någon matchning i källan matchas den mot:

  • dess standardvärde (om det anges; det är valfritt)
  • undefined (annars)

Låt oss titta på ett exempel. I följande destruktion har elementet vid index 0 ingen matchning på höger sida. Därför fortsätter destruktionen genom att matcha x mot 3, vilket leder till att x sätts till 3.

const  = ; // x = 3; y = undefined

du kan också använda standardvärden i objektmönster:

const {foo: x=3, bar: y} = {}; // x = 3; y = undefined

10.5.1 undefined utlöser standardvärden #

standardvärden används också om en del har en matchning och den matchningen är undefined:

const  = ; // x = 1const {prop: y=2} = {prop: undefined}; // y = 2

motiveringen för detta beteende förklaras i nästa kapitel, i avsnittet om parameterns standardvärden.

10.5.2 standardvärden beräknas på begäran #

själva standardvärdena beräknas endast när de behövs. Med andra ord, denna förstörelse:

const {prop: y=someFunc()} = someValue;

motsvarar:

let y;if (someValue.prop === undefined) { y = someFunc();} else { y = someValue.prop;}

du kan observera att om du använder console.log():

> function log(x) { console.log(x); return 'YES' }> const = ;> a'YES'> const = ;> b123

In the second destructuring, the default value is not triggered and log() is not called.

10.5.3 Default values can refer to other variables in the pattern #

A default value can refer to any variable, including other variables in the same pattern:

const  = ; // x=3; y=3const  = ; // x=7; y=7const  = ; // x=7; y=2

orderfrågor: variablerna x och y deklareras från vänster till höger och producerar en ReferenceError om de nås före deklarationerna:

const  = ; // ReferenceError

10.5.4 standardvärden för mönster #

hittills har vi bara sett standardvärden för variabler, men du kan också associera dem med mönster:

const  = ;

vad betyder detta? Återkalla regeln för standardvärden: om en del inte har någon matchning i källan fortsätter förstöringen med standardvärdet.

elementet vid index 0 har ingen matchning, varför destruktionen fortsätter med:

const { prop: x } = {}; // x = undefined

du kan lättare se varför saker fungerar på detta sätt om du ersätter mönstret { prop: x } med variabeln pattern:

const  = ;

10.5.5 mer komplexa standardvärden #

Låt oss vidare undersöka standardvärden för mönster. I följande exempel tilldelar vi ett värde till x via standardvärdet { prop: 123 }:

const  = ;

eftersom Matriselementet vid index 0 inte har någon matchning på höger sida fortsätter destruktionen enligt följande och x är satt till 123.

const { prop: x } = { prop: 123 }; // x = 123

x tilldelas dock inte ett värde på detta sätt om den högra sidan har ett element vid index 0, för då utlöses inte standardvärdet.

const  = ;

i detta fall fortsätter destruktionen med:

const { prop: x } = {}; // x = undefined

om du vill att x ska vara 123 om antingen objektet eller egenskapen saknas måste du ange ett standardvärde för x själv:

const  = ;

här fortsätter destruktionen enligt följande, oberoende av om höger sida är eller .

const { prop: x=123 } = {}; // x = 123

10.6 fler objekt destructuring funktioner #

10.6.1 fastighetsvärde shorthands #

fastighetsvärde shorthands är en funktion av objekt bokstav: Om egenskapsvärdet är en variabel som har samma namn som egenskapsnyckeln kan du utelämna nyckeln. Detta fungerar för destruktion, för:

const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8// Same as:const { x: x, y: y } = { x: 11, y: 8 };

du kan också kombinera fastighetsvärde shorthands med standardvärden:

const { x, y = 1 } = {}; // x = undefined; y = 1

10.6.2 beräknade egenskapsnycklar #

beräknade egenskapsnycklar är en annan bokstavlig funktion för objekt som också fungerar för destruktion. Du kan ange nyckeln till en fastighet via ett uttryck, om du lägger den i hakparenteser:

const FOO = 'foo';const { : f } = { foo: 123 }; // f = 123

med beräknade egenskapsnycklar kan du förstöra egenskaper vars nycklar är symboler:

// Create and destructure a property whose key is a symbolconst KEY = Symbol();const obj = { : 'abc' };const { : x } = obj; // x = 'abc'// Extract Array.prototypeconst { : func } = ;console.log(typeof func); // function

10.7 fler Array destructuring funktioner #

10.7.1 Elision #

Elision låter dig använda syntaxen för Array ”hål” för att hoppa över element under destructuring:

const  = ; // x = 'c'; y = 'd'

10.7.2 Vila operatör (...) #

resten operatören kan du extrahera de återstående elementen i en iterable i en Array. Om den här operatören används i ett Matrismönster måste det komma sist:

const  = ; // x='a'; y=

om operatören inte kan hitta några element matchar den sin operand mot den tomma matrisen. Det betyder att det aldrig producerar undefined eller null. Till exempel:

const  = ; // x='a'; y=undefined; z=

resten operatörens operand behöver inte vara en variabel, du kan också använda mönster:

const ] = ; // x = 'a'; y = 'b'; z = 'c'

resten operatören utlöser följande destruktion:

 =

10.8 Du kan tilldela mer än bara variabler #

om du tilldelar via destruktion kan varje tilldelningsmål vara allt som är tillåtet på vänster sida av en normal tilldelning.

till exempel en hänvisning till en egenskap (obj.prop):

const obj = {};({ foo: obj.prop } = { foo: 123 });console.log(obj); // {prop:123}

eller en hänvisning till ett arrayelement (arr):

const arr = ;({ bar: arr } = { bar: true });console.log(arr); //

du kan också tilldela objektegenskaper och matriselement via operatören rest (...):

const obj = {}; = ; // first = 'a'; obj.prop =

om du deklarerar variabler eller definierar parametrar via destruktion måste du använda enkla identifierare, du kan inte referera till objektegenskaper och arrayelement.

10.9 fallgropar av destructuring #

det finns två saker att vara uppmärksam på när du använder destructuring:

  • du kan inte starta ett uttalande med en lockig stag.
  • under destruktion kan du antingen deklarera variabler eller tilldela dem, men inte båda.

de följande två avsnitten innehåller detaljerna.

10.9.1 Starta inte ett uttalande med en lockig stag #

eftersom kodblock börjar med en lockig stag, får uttalanden inte börja med en. Detta är olyckligt när du använder objektförstöring i en uppgift:

{ a, b } = someObject; // SyntaxError

arbetet är att sätta hela uttrycket inom parentes:

({ a, b } = someObject); // OK

följande syntax fungerar inte:

({ a, b }) = someObject; // SyntaxError

med let, var och const orsakar lockiga hängslen aldrig problem:

const { a, b } = someObject; // OK

10.10 Exempel på destructuring #

Låt oss börja med några mindre exempel.

for-of loop stöder destruktion:

const map = new Map().set(false, 'no').set(true, 'yes');for (const  of map) { console.log(key + ' is ' + value);}

du kan använda destructuring för att byta värden. Det är något som motorer kan optimera, så att ingen Array skulle skapas.

 = ;

du kan använda destructuring för att dela en Array:

const  = ; // first = 'a'; rest =

10.10.1 Destructuring returnerade matriser #

vissa inbyggda JavaScript-operationer returnerar matriser. Destructuring hjälper till att bearbeta dem:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

om du bara är intresserad av grupperna (och inte i hela matchen, all) kan du använda elision för att hoppa över arrayelementet vid index 0:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

exec() returnerar null om det reguljära uttrycket inte matchar. Tyvärr kan du inte hantera null via standardvärden, varför du måste använda or-operatören (||) i det här fallet:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec(someStr) || ;

Array.prototype.split() returnerar en Array. Därför är destruktion användbar om du är intresserad av elementen, inte matrisen:

const cells = 'Jane\tDoe\tCTO'const  = cells.split('\t');console.log(firstName, lastName, title);

10.10.2 Destructuring returned objects #

Destructuring är också användbart för att extrahera data från objekt som returneras av funktioner eller metoder. Till exempel returnerar iteratormetoden next() ett objekt med två egenskaper, done och value. Följande kod loggar alla element i Array arr via iteratorn iter. Destruktion används i linje A.

const arr = ;const iter = arr();while (true) { const {done,value} = iter.next(); // (A) if (done) break; console.log(value);}

10.10.3 Array-destructuring iterable values #

Array-destructuring fungerar med alla iterabla värden. Det är ibland användbart:

const  = new Set().add('a').add('b'); // x = 'a'; y = 'b'const  = 'foo'; // a = 'f'; b = 'o'

10.10.4 flera returvärden #

för att se användbarheten av flera returvärden, låt oss implementera en funktion findElement(a, p) som söker efter det första elementet i matrisen a för vilken funktionen p returnerar true. Frågan är: vad ska findElement() återvända? Ibland är man intresserad av själva elementet, ibland i sitt index, ibland i båda. Följande implementering returnerar båda.

function findElement(array, predicate) { for (const  of array.entries()) { // (A) if (predicate(element, index, array)) { // We found an element: return { element, index }; // Same as (property value shorthands): // { element: element, index: index } } } // We couldn't find anything; return failure values: return { element: undefined, index: -1 };}

funktionen itererar över alla element i array, via Arraymetoden entries(), som returnerar en iterabel över par (rad a). Delarna av paren nås via destruktion.

Låt oss använda findElement():

const arr = ;const {element, index} = findElement(arr, x => x % 2 === 0); // element = 8, index = 1

flera ECMAScript 6 funktioner tillät oss att skriva mer kortfattad kod: återuppringningen är en pilfunktion; returvärdet förstörs via ett objektmönster med fastighetsvärde stenografi.

på grund av index och element hänvisar också till egenskapsnycklar, den ordning som vi nämner dem spelar ingen roll. Vi kan byta dem och ingenting förändras:

const {index, element} = findElement(···);

vi har framgångsrikt hanterat fallet med att behöva både index och element. Vad händer om vi bara är intresserade av en av dem? Det visar sig att tack vare ECMAScript 6 kan vår implementering också ta hand om det. Och den syntaktiska overhead jämfört med funktioner med enstaka returvärden är minimal.

const a = ;const {element} = findElement(a, x => x % 2 === 0); // element = 8const {index} = findElement(a, x => x % 2 === 0); // index = 1

varje gång extraherar vi bara värdet av den enda egenskapen som vi behöver.

10.11 destructuring algorithm #

detta avsnitt tittar på destructuring från en annan vinkel: som en rekursiv mönstermatchningsalgoritm.

i slutet använder jag algoritmen för att förklara skillnaden mellan följande två funktionsdeklarationer.

function move({x=0, y=0} = {}) { ··· }function move({x, y} = { x: 0, y: 0 }) { ··· }

10.11.1 algoritmen #

en destruktionsuppgift ser ut så här:

"pattern" = "value"

vi vill använda pattern för att extrahera data från value. Jag ska nu beskriva en algoritm för att göra det, vilket är känt i funktionell programmering som mönstermatchning (kort: matchning). Algoritmen anger operatören ← (”matcha mot”) för destruktionstilldelning som matchar en pattern mot en value och tilldelar variabler medan du gör det:

"pattern" ← "value"

algoritmen specificeras via rekursiva regler som tar isär båda operanderna för operatören ←. Den deklarativa notationen kan ta lite att vänja sig, men det gör specifikationen av algoritmen mer kortfattad. Varje regel har två delar:

  • huvudet (första raden) beskriver villkoret som utlöser regeln.
  • kroppen (återstående rader) beskriver vad som händer om regeln utlöses.

Låt oss titta på ett exempel:

  • (2c) {key: "pattern", "properties"} ← obj
     "pattern" ← obj.key {"properties"} ← obj
  • (2e) {} ← obj( inga egenskaper kvar)
     // Nothing to do

i regel (2c) betyder huvudet att denna regel exekveras om det finns ett objektmönster med minst en egenskap och noll eller flera återstående egenskaper. Detta mönster matchas mot ett värde obj. Effekten av denna regel är att exekveringen fortsätter med att egenskapsvärdesmönstret matchas mot obj.keyoch de återstående egenskaperna matchas mot obj.

i regel (2e) betyder huvudet att denna regel exekveras om det tomma objektmönstret {} matchas mot ett värde obj. Då finns det inget att göra.

när algoritmen anropas kontrolleras reglerna uppifrån och ned och endast den första regeln som är tillämplig exekveras.

jag visar bara algoritmen för destruktionstilldelning. Destructuring variable declarations och destructuring parameterdefinitioner fungerar på samma sätt.

jag täcker inte avancerade funktioner (beräknade egenskapsnycklar; fastighetsvärde stenografi; objektegenskaper och matriselement som tilldelningsmål), antingen. Bara grunderna.

10.11.1.1 mönster #

ett mönster är antingen:

  • en variabel: x
  • ett objektmönster: {"properties"}
  • ett Matrismönster:

var och en av följande avsnitt beskriver ett av dessa tre fall.

följande tre avsnitt anger hur dessa tre fall ska hanteras. Varje avsnitt innehåller en eller flera numrerade regler.

10.11.1.2 variabel #
  • (1) x ← value (inklusive undefined och null)
     x = value
10.11.1.3 objekt mönster #
  • (2a) {"properties"} ← undefined
     throw new TypeError();
  • (2b) {"properties"} ← null
     throw new TypeError();
  • (2c) {key: "pattern", "properties"} ← obj
     "pattern" ← obj.key {"properties"} ← obj
  • (2d) {key: "pattern" = default_value, "properties"} ← obj
     const tmp = obj.key; if (tmp !== undefined) { "pattern" ← tmp } else { "pattern" ← default_value } {"properties"} ← obj
  • (2e) {} ← obj( inga egenskaper kvar)
     // Nothing to do
10.11.1.4 Array mönster #

Array mönster och iterable. Algoritmen för Array destructuring börjar med ett Arraymönster och en iterabel:

  • (3a) ← non_iterable
    assert(!isIterable(non_iterable))
     throw new TypeError();
  • (3b) ← iterable
    assert(isIterable(iterable))
     const iterator = iterable(); "elements" ← iterator

Hjälparfunktion:

function isIterable(value) { return (value !== null && typeof value === 'object' && typeof value === 'function');}

Array element och iterator. Algoritmen fortsätter med elementen i mönstret (vänster sida av pilen) och iteratorn som erhölls från den iterabla (höger sida av pilen).

  • (3c) "pattern", "elements" ← iterator
     "pattern" ← getNext(iterator) // undefined after last item "elements" ← iterator
  • (3d) "pattern" = default_value, "elements" ← iterator
     const tmp = getNext(iterator); // undefined after last item if (tmp !== undefined) { "pattern" ← tmp } else { "pattern" ← default_value } "elements" ← iterator
  • (3e) , "elements" ← iterator(hål, elision)
     getNext(iterator); // skip "elements" ← iterator
  • (3f) ..."pattern" ← iterator( alltid sista delen!)
     const tmp = ; for (const elem of iterator) { tmp.push(elem); } "pattern" ← tmp
  • (3g) ← iterator( inga element kvar)
     // Nothing to do

Hjälparfunktion:

function getNext(iterator) { const {done,value} = iterator.next(); return (done ? undefined : value);}

10.11.2 genom att använda algoritmen #

i ECMAScript 6 kan du simulera namngivna parametrar om den som ringer använder ett objekt bokstavligt och callee använder destruktion. Denna simulering förklaras i detalj i kapitlet om parameterhantering. Följande kod visar ett exempel: funktion move1() har två namngivna parametrar, x och y:

function move1({x=0, y=0} = {}) { // (A) return ;}move1({x: 3, y: 8}); // move1({x: 3}); // move1({}); // move1(); //

det finns tre standardvärden i rad A:

  • de två första standardvärdena låter dig utelämna x och y.
  • det tredje standardvärdet låter dig ringa move1() utan parametrar (som i sista raden).

men varför skulle du definiera parametrarna som i föregående kodavsnitt? Varför inte enligt följande-vilket också är helt lagligt ES6-kod?

function move2({x, y} = { x: 0, y: 0 }) { return ;}

för att se varför move1() är korrekt, låt oss använda båda funktionerna för två exempel. Innan vi gör det, låt oss se hur överföringen av parametrar kan förklaras via matchning.

10.11.2.1 Bakgrund: passande parametrar via matchning #

för funktionssamtal matchas formella parametrar (inuti funktionsdefinitioner) mot faktiska parametrar (inuti funktionssamtal). Ta till exempel följande funktionsdefinition och följande funktionsanrop.

function func(a=0, b=0) { ··· }func(1, 2);

parametrarna a och b ställs in på samma sätt som följande destruktion.

 ←
10.11.2.2 använda move2() #

Låt oss undersöka hur destruktion fungerar för move2().

exempel 1. move2() leder till denna förstörelse:

 ←

det enda Matriselementet på vänster sida har ingen matchning på höger sida, varför {x,y} matchas mot standardvärdet och inte mot data från höger sida (regler 3b, 3d):

{x, y} ← { x: 0, y: 0 }

den vänstra sidan innehåller fastighetsvärde shorthands, det är en förkortning för:

{x: x, y: y} ← { x: 0, y: 0 }

denna destruktion leder till följande två uppdrag (regler 2C, 1):

x = 0;y = 0;

exempel 2. Låt oss undersöka funktionsanropet move2({z:3}) vilket leder till följande förstöring:

 ←

det finns ett arrayelement vid index 0 på höger sida. Därför ignoreras standardvärdet och nästa steg är (regel 3d):

{x, y} ← { z: 3 }

det leder till att både x och y sätts till undefined, vilket inte är vad vi vill ha.

10.11.2.3 användning move1() #

låt oss försöka move1().

exempel 1: move1()

 ←

vi har inte ett arrayelement vid index 0 på höger sida och använder standardvärdet (regel 3d):

{x=0, y=0} ← {}

den vänstra sidan innehåller fastighetsvärde shorthands, vilket innebär att denna destruktion motsvarar:

{x: x=0, y: y=0} ← {}

varken egendom x eller egendom y har en matchning på höger sida. Därför används standardvärdena och följande destruktioner utförs nästa (regel 2d):

x ← 0y ← 0

det leder till följande uppdrag (regel 1):

x = 0y = 0

exempel 2: move1({z:3})

 ←

det första elementet i Matrismönstret har en matchning på höger sida och den matchen används för att fortsätta förstöra (regel 3d):

{x=0, y=0} ← {z:3}

som i Exempel 1 finns det inga egenskaper x och y på höger sida och standardvärdena används:

x = 0y = 0
10.11.2.4 slutsats #

exemplen visar att standardvärden är en egenskap hos mönsterdelar (objektegenskaper eller arrayelement). Om en del inte har någon matchning eller matchas mot undefined används standardvärdet. Det vill säga mönstret matchas mot standardvärdet istället.