Tässä opetusohjelmassa opit JavaScriptiä tuhoavasta tehtävästä esimerkkien avulla.
JavaScriptin uudelleenjärjestely
ES6: ssa käyttöönotettu tuhoava määritys helpottaa matriisiarvojen ja objektiominaisuuksien määrittämistä erillisille muuttujille. Esimerkiksi
ennen ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
ES6: sta:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Huomaa : Nimen järjestyksellä ei ole merkitystä objektien tuhoamisessa.
Voit esimerkiksi kirjoittaa yllä olevan ohjelman seuraavasti:
let ( age, gender, name ) = person; console.log(name); // Sara
Huomaa : Kun esineitä strukturoidaan, sinun on käytettävä muuttujalle samaa nimeä kuin vastaava objektiavain.
Esimerkiksi,
let (name1, age, gender) = person; console.log(name1); // undefined
Jos haluat määrittää eri avaimen muuttujien nimet, voit käyttää:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Taulukon uudelleenjärjestely
Voit myös suorittaa taulukon uudelleenjärjestelyn samalla tavalla. Esimerkiksi,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Määritä oletusarvot
Voit määrittää muuttujien oletusarvot käyttämällä uudelleenjärjestelyä. Esimerkiksi,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Edellä olevassa ohjelmassa arrValueella on vain yksi elementti. Siten,
- x-muuttuja on 10
- muuttuja y ottaa oletusarvon 7
Kohteen tuhoamisessa voit välittää oletusarvot samalla tavalla. Esimerkiksi,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Muuttujien vaihtaminen
Tässä esimerkissä kaksi muuttujaa vaihdetaan käyttämällä uudelleenjärjestelytoimeksiannon syntaksia.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Ohita kohteet
Voit ohittaa ei-toivotut kohteet taulukossa määrittelemättä niitä paikallisiin muuttujiin. Esimerkiksi,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Edellä olevassa ohjelmassa toinen elementti jätetään pois pilkkuerottimella ,.
Määritä jäljellä olevat elementit yhdelle muuttujalle
Voit määrittää muut matriisin muut elementit muuttujalle hajautetun syntaksin avulla … . Esimerkiksi,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Tässä oneosoitetaan x-muuttujalle. Ja loput matriisielementeistä osoitetaan muuttujalle y.
Voit myös määrittää loput kohteen ominaisuuksista yhdelle muuttujalle. Esimerkiksi,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Huomaa : Muuttujalla, jolla on hajasyntaksi, ei voi olla loppupilkkua ,. Käytä tätä lepoelementtiä (muuttuja, jossa on levityssyntaksia) viimeisenä muuttujana.
Esimerkiksi,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Sisäkkäinen uudelleenjärjestelytehtävä
Voit suorittaa sisäkkäisiä uudelleenjärjestelyjä taulukkoelementeille. Esimerkiksi,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Tässä muuttujalle y ja z määritetään sisäkkäiset elementit twoja three.
Sisäkkäisen tuhoamismäärityksen suorittaminen edellyttää, että muuttujat liitetään matriisirakenteeseen (sisällyttämällä sisälle ()).
Voit myös suorittaa sisäkkäisiä uudelleenjärjestelyjä objektiominaisuuksille. Esimerkiksi,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Objektien sisäkkäisen destruktion määrityksen suorittamiseksi sinun on liitettävä muuttujat objektirakenteeseen (sulkemalla sisälle ()).
Huomautus : Tehtävien uudelleenjärjestely otettiin käyttöön ES6: ssa . Jotkin selaimet eivät välttämättä tue tuhoamismäärityksen käyttöä. Käy Javascriptin uudelleenjärjestelytuessa saadaksesi lisätietoja.
