A szerkezetátalakítás hozzárendelése jó tulajdonság, amely az ES6-mal együtt jött. A szerkezetátalakítás egy olyan JavaScript kifejezés, amely lehetővé teszi tömbökből származó értékek vagy objektumok tulajdonságainak kicsomagolását különböző változókká. Vagyis kinyerhetünk adatokat tömbökből és objektumokból, és azokat változókhoz rendelhetjük.
Miért van erre szükség?
Képzelje el, hogy egy tömbből szeretnénk adatokat kinyerni. Korábban hogyan lehetne ezt megtenni?
let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" Láthatjuk, hogy amikor adatokat akarunk kinyerni egy tömbből, újra és újra ugyanazt kell tennünk.
Az ES6 strukturáló hozzárendelés megkönnyíti ezen adatok kinyerését. Hogy van ez? Először a tömbökkel tárgyaljuk a romboló feladatot. Ezután áttérünk az objektumok rombolására.
Kezdjük el.
Alap tömbstrukturálás
Ha tömbökből szeretnénk adatokat kinyerni, akkor ez a destrukturáló hozzárendelés segítségével nagyon egyszerű.
Nézzük meg a tömbök első példáját. Ahelyett, hogy végigvinnénk ezt az ismétlődő folyamatot, ezt tennénk:
let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" Megtehetjük ezt is ugyanazzal az eredménnyel.
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"A változók deklarálása a hozzárendelés előtt
A változókat a következő hozzárendelés előtt deklarálhatjuk:
let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" Vegye figyelembe, hogy a változók balról jobbra vannak állítva. Tehát az első változó megkapja az első elemet a tömbben, a második változó megkapja a második változót a tömbben, és így tovább.
Az elemek átugrása egy tömbben
Mi van, ha az első és az utolsó elemet szeretnénk megszerezni a tömbön az első és a második elem helyett, és csak két változót akarunk hozzárendelni? Ezt meg is lehet tenni. Nézze meg az alábbi példát:
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" Mi történt?
Nézze meg a változó hozzárendelésének bal oldalán található tömböt. Figyelje meg, hogy ahelyett, hogy csak egy vessző lenne, hárman vannak. A vessző elválasztó egy tömb értékeinek kihagyására szolgál. Tehát, ha el akar ugrani egy elemet egy tömbben, csak vesszőt használjon.
Csináljunk még egyet. Hagyjuk ki a lista első és harmadik elemét. Hogyan tennénk ezt?
let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" Tehát a vessző elválasztó varázsolja el. Tehát ha minden elemet át akarunk hagyni, akkor ezt tesszük:
let [,,,,] = ["Hello", "I" , "am", "Sarah"]; A tömb többi részének hozzárendelése
Mi van, ha a tömb egy részét a változókhoz akarjuk rendelni, a tömb többi elemét pedig egy adott változóhoz? Ebben az esetben ezt tennénk:
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] Ezzel a mintával kicsomagolhatja és hozzárendelheti a tömb fennmaradó részét egy változóhoz.
Feladat átalakítása függvényekkel
Egy függvényből visszakapott tömbből is kinyerhetünk adatokat. Tegyük fel, hogy van egy olyan függvényünk, amely egy tömböt ad vissza, mint az alábbi példa:
function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" Ugyanezeket az eredményeket kapjuk.
Alapértelmezett értékek használata
Alapértelmezett értékek rendelhetők a változókhoz, csak abban az esetben, ha a tömbből kivont érték undefined:
let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" Tehát namevisszaesik "Sarah" -ra, mert ez nincs meghatározva a tömbben.
Értékek cseréje a szerkezetátalakítási hozzárendelés segítségével
Még egy dolog. Használhatjuk a destrukturáló hozzárendelést a változók értékeinek felcserélésére:
let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 Ezután térjünk át az Object Destructure-re.
Objektum szerkezetátalakítása
Először nézzük meg, miért van szükség tárgyak roncsolására.
Tegyük fel, hogy adatokat akarunk kinyerni egy objektumból és új változókhoz rendelni. Az ES6 előtt hogyan lehetne ezt megtenni?
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" Nézze meg, milyen unalmas az összes adat kinyerése. Ismételten meg kell tennünk ugyanazt. Az ES6 szerkezetátalakítása valóban megmenti a napot. Ugorjunk bele rögtön.
Alapvető objektum-szerkezetátalakítás
Ismételjük meg a fenti példát az ES6-tal. Az egyes értékek hozzárendelése helyett a bal oldali objektumot használhatjuk az adatok kinyerésére:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" Ugyanezeket az eredményeket fogja elérni. Változók hozzárendelése olyan objektumhoz is, amely nincs deklarálva:
let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" A hozzárendelés előtt deklarált változók
Az objektumok változói deklarálhatók, mielőtt hozzárendelésre kerülnének szerkezetátalakítással. Próbáljuk ki:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" Fontos megjegyezni azt is, hogy ennek a szintaxisnak a használatakor ()pontosvesszővel kell szerepelnie. Ellenkező esetben előfordulhat, hogy az előző sorból függvényt hajt végre.
Vegye figyelembe, hogy a bal oldali objektum változóinak meg kell egyezniük az objektum tulajdonságkulcsának nevével person. Ha a nevek eltérnek, a következőket kapjuk undefined:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined De ha új változónevet akarunk használni, akkor igen.
Új változónév használata
Ha egy objektum értékeit szeretnénk hozzárendelni egy új változóhoz, ahelyett, hogy a tulajdonság nevét használnánk, akkor ezt megtehetjük:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" Tehát a kivont értékeket átadják az új változóknak fooés bar.
Alapértelmezett értékek használata
Az alapértelmezett értékeket az objektum roncsolásakor is fel lehet használni, csak abban az esetben, ha egy változó undefinedegy objektumban van, akkor adatokat szeretne kinyerni:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" Tehát, ha az érték nincs meghatározva, akkor a változó az objektumból kivont értéket tárolja, mint a name. Egyébként az alapértelmezett értéket használta, mint korábban friend.
Alapértelmezett értékeket is beállíthatunk, amikor értékeket rendelünk egy új változóhoz:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" Tehát namekivonták personés hozzárendelték egy másik változóhoz. friend, Másrészt, volt undefineda person, tehát az új változó bar volt rendelve az alapértelmezett értéket.
Számított tulajdonság neve
A kiszámított tulajdonságnév egy másik objektum szó szerinti jellemző, amely szintén szerkezetátalakításra képes. A tulajdonság nevét megadhatja kifejezéssel, ha szögletes zárójelbe teszi:
let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" Tömbök kombinálása objektumokkal
A tömbök objektumokkal is használhatók objektum roncsolás közben:
let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] Fészkelés az objektum szerkezetátalakításában
Az objektumok egymásba ágyazódhatnak a szerkezet átalakításakor is:
let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" Pihenjen az objektum szerkezetátalakításában
The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:
let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.
One last thing – let's see how Object Destructing can be used in functions.
Object Destructuring and Functions
Object Destructuring can be used to assign parameters to functions:
function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.
We can also assign default values to the parameters:
function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" We can do a whole lot of things with Array and Object Destructuring as we have seen in the examples above.
Thank you for reading. :)