Please enable JavaScript.
Coggle requires JavaScript to display documents.
Optional chaining, Деструктуризация - Coggle Diagram
Optional chaining
К чему может применяться optional chaining
К свойствам объекта
К вызову методов объекта
К элементам массива
синтаксис JavaScript, который позволяет безопасно получать доступ к вложенным свойствам объекта, проверяя наличие каждого уровня вложенности.
Если свойство или метод существует, JavaScript возвращает его значение.
Если значение отсутствует (undefined или null), JavaScript вернет undefined, вместо того чтобы выбрасывать ошибку.
const array = [10, 20, 30]; console.log(array[1]); // 20 console.log(array[5]?.toString()); // undefined, так как элемента с индексом 5 нет
const user = { profile: { name: 'Alice', } }; console.log(user.profile?.name); // 'Alice' console.log(user.profile?.age); // undefined, так как age не существует console.log(user.address?.city); // undefined, так как address не существует
const user = { greet() { return 'Hello!'; } }; console.log(user.greet?.()); // 'Hello!' console.log(user.sayBye?.()); // undefined, так как метода sayBye нет
Что делает следующий код?
const obj = {};
obj.randomFunction?.()
Деструктуризация
Оператор Rest (...)
Rest в массиве:
const arr = [1, 2, 3, 4]; const [first, ...rest] = arr; console.log(rest); // [2, 3, 4]
Rest в объекте:
const obj = { a: 1, b: 2, c: 3 }; const { a, ...rest } = obj; console.log(rest); // { b: 2, c: 3 }
Rest в параметрах функции:
function logAll(first, ...rest) { console.log(rest); } logAll(1, 2, 3, 4); // [2, 3, 4]
Оператор Spread (...)
Оператор spread (...) позволяет разворачивать элементы массива, объекта или строки в место, где они могут быть использованы по отдельности, например, в новом массиве, объекте или в аргументах функции.
Cпособ извлечения значений из массива или объекта и присваивания их переменным по порядку.
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5]
const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 }
function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6
Простая деструктуризация:
const arr = [10, 20, 30]; const [a, b] = arr; console.log(a); // 10 console.log(b); // 20
Пропуск значений:
const arr = [10, 20, 30, 40]; const [, , third] = arr; console.log(third); // 30
Использование оператора rest в деструктуризации массива:
const arr = [10, 20, 30, 40]; const [first, ...rest] = arr; console.log(first); // 10 console.log(rest); // [20, 30, 40]
Простая деструктуризация объекта:
const obj = { name: "Alice", age: 25 }; const { name, age } = obj; console.log(name); // Alice console.log(age); // 25
Значения по умолчанию:
const obj = { name: "Alice" }; const { name, age = 18 } = obj; console.log(age); // 18
Использование оператора rest в деструктуризации объекта:
const obj = { name: "Alice", age: 25, city: "New York" }; const { name, ...otherProps } = obj; console.log(name); // Alice console.log(otherProps); // { age: 25, city: "New York" }