innerHTML
на каждой итерации — плохо (медленно). Лучше один раз собрать весь HTML в строку, и один раз заменить innerHTML
.const html = new Array(12)
.fill()
.map((_, i) => {
const parallax = `./src/img/parallax/${i & 1 ? 2 : 1}.jpg`;
const hero = './src/img/home/hero.jpg';
const title = `Code №${i + 1}`;
const codepen = `Codepen-${i + 1}`;
return `
<div class="portfolio__codepen">
<div class="portfolio__codepen-background"></div>
<img class="portfolio__codepen-image" src="${parallax}">
<div class="portfolio__codepen-down">
<img src="${hero}" class="codepen-down__hero">
<div class="codepen-down__text">
<h4>${title}</h4>
<h5>${codepen}</h5>
</div>
<a href="#codepen" class="codepen-down__link">Source</a>
</div>
</div>
`;
})
.join('\n');
item.innerHTML = html;
const A = class { constructor() { this.name = 'I am A';} };
const B = class { constructor() { this.name = 'I am Bee';} };
const allClasses = { A, B };
const className = 'A';
const instance = new allClasses[className]();
console.log(instance.name); // I am A
getState()
и рано или поздно меняет состояние через dispatch()
.async
функции возвратить Promise.reject()
— то же, что бросить Exception в обычном синхронном коде. Подробнее. const a = { x: 1, y: 2}; // главные свойства
const b = { y: 3, z: 5}; // второй товар для сравнения с главным
const comparison = {
// каждому из свойств A подставляем значения из B или прочерк если нет
...Object.keys(a).reduce((acc, c) => (acc[c] = b[c] ?? '-', acc), {}),
// дописываем поверх свойства B
...b
}
// получилось:
{ x: "-", y: 3, z: 5 }
access_token
.const colorSelect = document.querySelector('.hasCustomSelect[name="features[13]"]');
const plugSelect = document.querySelector('.hasCustomSelect[name="features[12]"]');
const onChange = () => {
const colorValue = colorSelect.value;
const plugValue = plugSelect.value;
if (colorValue === '1' && plugValue === '42') {
console.log('Оба, на', { colorValue, plugValue });
} else {
console.log('Всё не то..', { colorValue, plugValue });
}
};
[colorSelect, plugSelect].forEach(el => el.addEventListener('input', onChange));
querySelector()
поискать нужный тег:const code = `
<li class="search__list-item">
<div class="search__img-wrap">
<img class="search__img search__img_indents" src="search.svg" alt="Иконка">
</div>
<strong>поиск</strong>
текста
</li>
`;
const parser = new DOMParser();
const doc = parser.parseFromString(code, 'text/html');
if (doc.querySelector('strong')) {
console.log('Есть!');
}
storage
умеет хранить только строки текста. Поэтому - sessionStorage.setItem('user', {level: '1'})
+ sessionStorage.setItem('user', JSON.stringify({level: '1'}));
и- console.log(Object.keys(sessionStorage.getItem('user'))
+ console.log(Object.keys(JSON.parse(sessionStorage.getItem('user')))
function func(mixedData) {
const id = mixedData?.target?.id ?? mixedData;
console.log(id);
}
func(123) // 123
func({target: {id: 456}}) // 456
?.
— optional chaining??
— Nullish coalescing operatorresult
накапливает строку, и потом функция её возвращает.let result = '';
// ""
result = `${result}${i}`;
// "1"
// ...
// "1"
result = `${result}${i}`;
// "12"
// ...
// "123"
// "1234"
// "12345"
return result;
Поэтому если присвоить переменной результат выполнения этой функции, получится что-то типа:let digits = joinNumbersFromRange(0, 9);
// в переменной digits теперь "0123456789"