JavaScript
Zadanie dotyczące restrukturyzacji

Wprowadzenie

Składnia

• niech [x, y] = [1, 2]
• niech [pierwszy, ... odpoczynek] = [1, 2, 3, 4]
• niech [jeden, trzy] = [1, 2, 3]
• let [val = „wartość domyślna”] = []
• niech {a, b} = {a: x, b: y}
• let {a: {c}} = {a: {c: 'nested'}, b: y}
• niech {b = „wartość domyślna”} = {a: 0}

Uwagi

Argumenty funkcji destrukcyjnej

Wyciągnij właściwości z obiektu przekazanego do funkcji. Ten wzorzec symuluje nazwane parametry zamiast polegać na pozycji argumentu.

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

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

greeting(user)

Działa to również w przypadku tablic:

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

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

Zmiana nazw zmiennych podczas destrukcji

Destrukturyzacja pozwala nam odnosić się do jednego klucza w obiekcie, ale deklarować go jako zmienną o innej nazwie. Składnia wygląda jak składnia klucz-wartość dla normalnego obiektu JavaScript.

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

Tablice destrukcyjne

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

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

Możemy ustawić wartość domyślną w tablicy destrukcyjnej, patrz przykład Wartość domyślna podczas destrukcji .

Za pomocą tablicy destrukcyjnej możemy łatwo zamieniać wartości 2 zmiennych:

var a = 1;
var b = 3;

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

Możemy określić puste miejsca, aby pominąć niepotrzebne wartości:

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

Destrukturyzacja obiektów

Destrukturyzacja to wygodny sposób na wydobycie właściwości z obiektów na zmienne.

Podstawowa składnia:

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

let { name, age } = person;

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

Restrukturyzacja i zmiana nazwy:

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

let { name: firstName } = person;

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

Restrukturyzacja z wartościami domyślnymi:

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'

Restrukturyzacja i zmiana nazwy na wartości domyślne

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'

Restrukturyzacja wewnątrz zmiennych

Oprócz przekształcania obiektów w argumenty funkcji, można ich używać w deklaracjach zmiennych w następujący sposób:

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

Jak widać, utworzono trzy nowe zmienne: name , age i location a ich wartości zostały pobrane od person obiektu person jeśli pasowały do nazw kluczy.

Używanie parametrów odpoczynku do utworzenia tablicy argumentów

Jeśli kiedykolwiek potrzebujesz tablicy składającej się z dodatkowych argumentów, które możesz, ale nie musisz, oprócz tych, które konkretnie zadeklarowałeś, możesz użyć parametru rest tablicy w deklaracji argumentów w następujący sposób:

Przykład 1, opcjonalne argumenty w tablicy:

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

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

Przykład 2, wszystkie argumenty są teraz tablicą:

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

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

Konsola wydrukowała wartość true, ponieważ myArguments jest również myArguments , a także ...myArguments w deklaracji argumentów parametrów konwertuje listę wartości uzyskanych przez funkcję (parametry) oddzielone przecinkami na w pełni funkcjonalną tablicę (a nie obiekt podobny do tablicy jak natywny obiekt argumentów).

Wartość domyślna podczas destrukcji

Często spotykamy sytuację, w której nieruchomość próbujemy ekstraktu nie istnieje w obiekcie / na tablicy, w wyniku TypeError (podczas demontażu struktury obiektów zagnieżdżonych) lub jako zestaw do undefined . Podczas destrukcji możemy ustawić wartość domyślną, do której nastąpi powrót, w przypadku gdy nie zostanie ona znaleziona w obiekcie.

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

Zagnieżdżona destrukcja

Nie jesteśmy ograniczeni do restrukturyzacji obiektu / tablicy, możemy zniszczyć zagnieżdżony obiekt / tablicę.

Niszczenie obiektów zagnieżdżonych

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

Destrukturyzacja macierzy zagnieżdżonych

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

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

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

Destrukturyzacja nie ogranicza się tylko do jednego wzorca, możemy mieć w niej tablice z n-poziomami zagnieżdżenia. Podobnie możemy zniszczyć tablice za pomocą obiektów i odwrotnie.

Tablice w obiekcie

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

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

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

Obiekty w tablicach

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

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

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