ДИ @babichdev
Showing posts older than #56 · Back to latest
let arr = ['one', , 'three'];
// ['one', empty, 'three'];
arr[100] = 'value';
// ['one', empty, 'three', empty × 97, 'value']
['one', ,'three'], у обʼєктному записі виглядатиме так:{ 0: 'one', 2: 'three' }[1, , 3] та порахуємо квадрати його значень:[1, , 3].map(x => x * x) // [1, empty, 9]
[1, undefined, 3].map(x => x * x) // [1, NaN, 9]
const arr = ['one', , 'three'];
1 in arr; // false
І якщо було цікаво — не забудьте поширити допис або кинути лінк колезі.
{ a: 1, b: 2, ...{ b: 3 } } // { a: 1, b: 3 }
{ ...{ b: 3 }, a: 1, b: 2 } // { a: 1, b: 2 }{ ...undefined } // {}
[...undefined] // 💥 TypeError[...{ a: 1 }] // 💥 TypeError: object is not iterable
{ ...[1, 2] } // { 0: 1, 1: 2 }const a = [1, , , , 5]; // [1, empty × 3, 5]
const b = [...a]; // [1, undefined, undefined, undefined, 5]
console.log(1 in a); // false
console.log(1 in b); // true
...a вони ущільнюються: JavaScript вставляє на їхнє місце undefined, і ці індекси стають реально присутніми в структурі масиву.... скопіює посилання на них, а не зробить клоновані копії.const original = {
value: 1,
nested: { deep: true },
};
const copy = { ...original };
copy.nested.deep = false;
console.log(original.nested.deep); // false... копіює виключно перший видимий рівень. Тобто прототип, неперелічувані властивості, символи — усе піде під ніж, і ви отримаєте стерильну копію.
.container {
display: grid;
grid-template-columns: min-content 1fr;
}
.card {
display: grid;
grid-template-columns: subgrid;
}:where(.wrapper-1, .wrapper-2, …, .wrapper-n, .card) {
display: grid;
grid-template-columns: subgrid;
}.card {
height: max-content;
}
Element.matches, який просто перевіряє елемент, на якому він викликаний, на предмет відповідності селектору:<div class="container">
<div class="my-element"></div>
</div>
<script>
el.matches('.container .my-element'); // true
</script>
el.matches('.container'); // falseПоки ми тут, не забудьте поставити вподобайку та поширити допис ;)
:not(.container:first-child):hover .my-element
.container:not(:first-child):hover .my-element
inert, який відображає однойменну властивість DOM-елемента:<main id="my-content" inert>
<p>Щось неважливе</p>
</main>
document.getElementById('my-content').inert = true;І ви не будьте інертними — ставте вподобайки та поширюйте допис.
.fade {
view-transition-name: fade;
}
::view-transition-old(fade) {
animation: fade-out 0.3s ease;
}
::view-transition-new(fade) {
animation: fade-in 0.3s ease;
}document.startViewTransition(() => {
// оновлення DOM
});import { unstable_ViewTransition as ViewTransition } from 'react';
<ViewTransition>
<div>...</div>
</ViewTransition>За вподобайки й поширення окремо нагадати, чи самі все знаєте?
