Различия

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

--- destrukturizacija [2023/12/16 19:40]
tro [Деструктуризація параметрів]
+++ destrukturizacija [2024/01/11 18:27] (текущий)
tro
@@ Строка 86: / Строка 86: @@
 console.log(bookCoverImage); // "<https://images-na.ssl-images-amazon.com/images/I/51b5YG6Y1rL.jpg>"
 </code>
+===== Часткова дестриктуризація обїекта =====
-====== Деструктурізація масива ======
 <code>
-const fruts = ['apple','banana']
+const user = {
+	name: "Jacob",
+	age: 32,
+	email: "j.cob@mail.com",
+	isOnline: true
+};
-const [fruts1, fruts2] = fruts
+const { name, isOnline, ...otherProps } = user;
-</code>
-====== Деструктурізація при передачі у функцію ======
-<code>
-const userProfile = {
-    name: 'tro',
-    commq: 23,
-    hass: false
-}
-const userInfo = ({name, commq})=>{
+console.log(name); // "Jacob"
-    if (commq>22){
+console.log(isOnline); // true
-        console.log('more that 22')
+console.log(otherProps); // {age: 32, email: "j.cob@mail.com"}
-    }
+</code>
-}
-userInfo(userProfile)
+===== Деструктуризація параметрів =====
-</code>
-====== Деструктуризація параметрів ======
 <code>
 function doStuffWithBook(book) {
@@ Строка 134: / Строка 127: @@
 }); // 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]