W tym samouczku za pomocą przykładów dowiesz się o przypisywaniu destrukcji JavaScript.
Destrukturyzacja JavaScript
Przypisanie destrukturyzujące wprowadzone w ES6 ułatwia przypisywanie wartości tablic i właściwości obiektów do różnych zmiennych. Na przykład
przed 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
Z ES6:
// 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
Uwaga : kolejność nazwy nie ma znaczenia przy niszczeniu obiektów.
Na przykład, możesz napisać powyższy program jako:
let ( age, gender, name ) = person; console.log(name); // Sara
Uwaga : Podczas niszczenia obiektów należy użyć tej samej nazwy zmiennej, co odpowiadający jej klucz obiektu.
Na przykład,
let (name1, age, gender) = person; console.log(name1); // undefined
Jeśli chcesz przypisać różne nazwy zmiennych do klucza obiektu, możesz użyć:
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
Zniszczenie macierzy
W podobny sposób można również przeprowadzić destrukturyzację tablic. Na przykład,
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
Przypisz wartości domyślne
Podczas używania destrukturyzacji można przypisać wartości domyślne dla zmiennych. Na przykład,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
W powyższym programie arrValue ma tylko jeden element. W związku z tym,
- zmienna x będzie wynosić 10
- zmienna y przyjmuje wartość domyślną 7
W przypadku destrukturyzacji obiektów w podobny sposób można przekazywać wartości domyślne. Na przykład,
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
Zamiana zmiennych
W tym przykładzie dwie zmienne są zamieniane przy użyciu składni przypisania destrukturyzacji.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Pomiń elementy
Możesz pominąć niechciane elementy w tablicy bez przypisywania ich do zmiennych lokalnych. Na przykład,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
W powyższym programie drugi element jest pomijany za pomocą separatora przecinków ,.
Przypisz pozostałe elementy do jednej zmiennej
Możesz przypisać pozostałe elementy tablicy do zmiennej, korzystając ze składni rozkładów … . Na przykład,
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")
Tutaj onejest przypisany do zmiennej x. Pozostałe elementy tablicy są przypisane do zmiennej y.
Możesz również przypisać pozostałe właściwości obiektu do jednej zmiennej. Na przykład,
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")
Uwaga : zmienna ze składnią spreadu nie może mieć końcowego przecinka ,. Powinieneś użyć tego elementu resztowego (zmiennej ze składnią spreadu) jako ostatniej zmiennej.
Na przykład,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Zagnieżdżone zadanie zniszczenia
Możesz przeprowadzić zagnieżdżoną destrukturyzację dla elementów tablicy. Na przykład,
// 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
Tutaj zmienne y i z mają przypisane elementy zagnieżdżone twoi three.
Aby wykonać zagnieżdżone przypisanie destrukturyzacji, musisz zamknąć zmienne w strukturze tablicy (poprzez zamknięcie wewnątrz ()).
Możesz także przeprowadzić zagnieżdżoną destrukturyzację dla właściwości obiektów. Na przykład,
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
Aby wykonać zagnieżdżone przypisanie destrukturyzacyjne dla obiektów, musisz zawrzeć zmienne w strukturze obiektu (poprzez zamknięcie wewnątrz ()).
Uwaga : W ES6 wprowadzono funkcję niszczenia przydziałów . Niektóre przeglądarki mogą nie obsługiwać przypisania destrukcji. Odwiedź stronę wsparcia niszczenia JavaScript, aby dowiedzieć się więcej.
