Различия

Показаны различия между двумя версиями страницы.

--- destrukturizacija [2023/12/16 19:35]
tro
+++ destrukturizacija [2024/01/11 18:27] (текущий)
tro
@@ Строка 68: / Строка 68: @@
 </code>
 ==== Значення за замовчуванням для переіменованнії змінної ====
-Для цього після нового імені ставимо дорівнює = і вказуємо її значення за замовчуванням.
+Для цього після нового імені ставимо дорівнює = і вказуємо її значення за замовчуванням. Якщо така властивість існує в об'єкті, у змінну буде присвоєно її значення.
+В іншому випадку змінній буде присвоєно значення за замовчуванням.
 <code>
 const book = {
@@ Строка 84: / Строка 86: @@
 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>
@@ Строка 91: / Строка 157: @@
 const [fruts1, fruts2] = fruts
 </code>
-====== Деструктурізація при передачі у функцію ======
+===== Значення за замовчанням для масива =====
+Якщо змінних оголошено більше, ніж елементів масиву, їм буде присвоєно **undefined**. Щоб запобігти цьому, можна вказувати значення за замовчуванням.
 <code>
-const userProfile = {
+const color = [200, 100, 255];
-    name: 'tro',
+const [ red, green, blue, alfa = 0.3 ] = color;
-    commq: 23,
-    hass: false
-}
-const userInfo = ({name, commq})=>{
+console.log(rgba(${red}, ${green}, ${blue}, ${alfa})); // “rgba(200, 255, 100, 0.3)"
-    if (commq>22){
+</code>
-        console.log('more that 22')
+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;
-userInfo(userProfile)
+console.log(`Blue: ${blue}`); // "Blue: 255"
 </code>
+===== Обмін місцями значень у змінних =====
+[x,y]=[y,x]