destrukturizacija [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
**одночасне створення нових змінних та призначеня їм значень з іньшого обїекта**
====== Деструктурізація обїекта ======
<code>
const userProfile = {
    name: 'tro',
    commq: 23,
    hass: false
}

const {name, commq, hass} = userProfile

console.log(name); // tro
console.log(commq); // 23
</code>

<code>
const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  isPublic: true,
  rating: 8.38,
};

// Деструктуризуємо
const { title, author, isPublic, rating } = book;

// Використовуємо
const accessType = isPublic ? "pulbic" : "private";
const message = `Book ${title} by author ${author} with rating ${rating} is in ${accessType} access!`;
</code>
==== Встановлення значень за замовчанням при деструктуризації ====

З метою уникнення присвоєння undefined під час деструктуризації неіснуючих властивостей, можна задати змінним значення за замовчуванням, використовуючи знак =. Це значення буде присвоєно тільки у випадку, коли в об'єкті відсутня властивість із таким ім'ям.
<code>
const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
};

// Додамо зображення обкладинки, якщо вона відсутня в об'єкті книги
const {
  title,
  author,
  coverImage = "<https://via.placeholder.com/640/480>"
} = book;

console.log(title); // "The Last Kingdom"
console.log(author); // "Bernard Cornwell"
console.log(coverImage); // "<https://via.placeholder.com/640/480>"
</code>
==== Перейменування змінної при деструктуризації ====
<code>
const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  isPublic: true,
  rating: 8.38,
};

// Деструктуризуємо
const { title, author: bookAuthor, isPublic, rating: bookRating } = book;
console.log(title); // "The Last Kingdom"
console.log(bookAuthor); // "Bernard Cornwell"
console.log(isPublic); // true
console.log(bookRating); // 8.38
</code>
==== Значення за замовчуванням для переіменованнії змінної ====
Для цього після нового імені ставимо дорівнює = і вказуємо її значення за замовчуванням. Якщо така властивість існує в об'єкті, у змінну буде присвоєно її значення.

В іншому випадку змінній буде присвоєно значення за замовчуванням.
<code>
const book = {
  title: "The Last Kingdom",
  coverImage:
    "<https://images-na.ssl-images-amazon.com/images/I/51b5YG6Y1rL.jpg>",
};

const {
  title,
  coverImage: bookCoverImage = "<https://via.placeholder.com/640/480>",
} = book;

console.log(title); // "The Last Kingdom"
console.log(bookCoverImage); // "<https://images-na.ssl-images-amazon.com/images/I/51b5YG6Y1rL.jpg>"
</code>
===== Часткова дестриктуризація обїекта =====
<code>
const user = {
	name: "Jacob",
	age: 32,
	email: "j.cob@mail.com",
	isOnline: true
};

const { name, isOnline, ...otherProps } = user;

console.log(name); // "Jacob"
console.log(isOnline); // true
console.log(otherProps); // {age: 32, email: "j.cob@mail.com"}
</code>

===== Деструктуризація параметрів =====
<code>
function doStuffWithBook(book) {
  const { title, pages, downloads, rating, isPublic } = book;
  console.log(title);
  console.log(pages);
}
</code>
<code>
function doStuffWithBook({ title, pages, downloads, rating, isPublic }) {
  console.log(title);
  console.log(pages);
}
</code>
<code>
function printUserInfo({ name, age, hobby }) {
  console.log(`Name: ${name}, Age: ${age}, Hobby: ${hobby}`);
}

printUserInfo({ 
	name: "Alice", 
	age: 25, 
	hobby: "dancing" 
}); // Name: Alice, Age: 25, Hobby: dancing
</code>
===== Глибока деструктуризація =====
<code>
const user = {
  name: "Jacques Gluke",
  tag: "jgluke",
  stats: {
    followers: 5603,
    views: 4827,
    likes: 1308,
  },
};

const {
  name,
  tag,
  stats: { followers, views, likes },
} = user;

console.log(name); // Jacques Gluke
console.log(tag); // jgluke
console.log(followers); // 5603
console.log(views); // 4827
console.log(likes); // 1308
</code>
====== Деструктурізація масива ======
<code>
const fruts = ['apple','banana']

const [fruts1, fruts2] = fruts
</code>
===== Значення за замовчанням для масива =====
Якщо змінних оголошено більше, ніж елементів масиву, їм буде присвоєно **undefined**. Щоб запобігти цьому, можна вказувати значення за замовчуванням.
<code>
const color = [200, 100, 255];
const [ red, green, blue, alfa = 0.3 ] = color;

console.log(rgba(${red}, ${green}, ${blue}, ${alfa})); // “rgba(200, 255, 100, 0.3)"
</code>
serProfile)
</code>
===== Часткова деструктуризація масива =====
Деструктуризуючи масив, можна розпакувати перші необхідні елементи і присвоїти іншу частину елементів масиву змінній, використовуючи операцію ...rest.
<code>
const color = [200, 255, 100];

const [ red, ...otherColors ] = color;

console.log(red); // 200
console.log(otherColors); // [255, 100]
</code>
===== Пропуск значень при дестриктуризації масива =====
<code>
const rgb = [200, 100, 255];

const [, , blue] = rgb;

console.log(`Blue: ${blue}`); // "Blue: 255"
</code>
===== Обмін місцями значень у змінних =====
[x,y]=[y,x]