document.querySelector('.form').addEventListener('input', e => {
const data = Array.from(
e.currentTarget.children,
n => Array.from(n.querySelectorAll('input'), m => m.value)
);
document.querySelector('.total').innerText = Array
.from(document.querySelectorAll('.row'))
.reduce((acc, n, i) => {
data[i].forEach((m, j) => n.children[j + 1].innerText = m);
return acc + (+data[i].at(-1) || 0);
}, 0);
});const total = document.querySelector('.total');
const form = document.querySelector('.form');
const formRows = form.getElementsByClassName('d-flex');
const tableRows = document.getElementsByClassName('row');
form.addEventListener('input', ({ target: t }) => {
const inputBox = t.closest('.input-box');
const formRow = inputBox.parentNode;
const iRow = Array.prototype.indexOf.call(formRows, formRow);
const iCol = -~Array.prototype.indexOf.call(formRow.children, inputBox);
tableRows[iRow].cells[iCol].textContent = t.value;
if (iCol === formRow.children.length) {
total.textContent = Array.prototype.reduce.call(
formRows,
(acc, n) => acc + (n.lastElementChild.children[0].value | 0),
0
);
}
});const getFromTree = (tree, childrenKey, getter = n => n) =>
Array.isArray(tree)
? tree.flatMap(n => [
getter(n),
...getFromTree(n[childrenKey], childrenKey, getter),
])
: [];
// или
function* flatTree(tree, childrenKey) {
if (
tree instanceof Object &&
tree[Symbol.iterator] instanceof Function
) {
for (const n of tree) {
yield n;
yield* flatTree(n[childrenKey], childrenKey);
}
}
}const getFromTree = function(tree, childrenKey, getter = n => n) {
const result = [];
for (const stack = this(tree); stack.length;) {
const n = stack.pop();
result.push(getter(n));
stack.push(...this(n[childrenKey]));
}
return result;
}.bind(x => x instanceof Array ? [...x].reverse() : []);
// или
const flatTree = function*(tree, childrenKey) {
const stack = [];
for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
if (i === arr.length) {
[ i, arr ] = stack.pop();
} else {
yield arr[i];
stack.push([ i, arr ]);
[ i, arr ] = this(arr[i][childrenKey]);
}
}
}.bind(x => [ -1, x?.constructor === Array ? x : [] ]);// если использовать обычную функцию
const result = getFromTree(tree, 'children', ({ children, ...n }) => n);
// или, генератор
const result = Array.from(flatTree(tree, 'children'), ({ children, ...n }) => n);const obj = new Proxy({}, {
get(target, key) {
const lowerKey = key.toLowerCase();
return target[Object.hasOwn(target, lowerKey) ? lowerKey : key];
},
set(target, key, val) {
target[key.toLowerCase()] = val;
return true;
},
has(target, key) {
return key in target || key.toLowerCase() in target;
},
defineProperty(target, key, descriptor) {
return Object.defineProperty(target, key.toLowerCase(), descriptor);
},
deleteProperty(target, key) {
return delete target[key.toLowerCase()];
},
getOwnPropertyDescriptor(target, key) {
return Object.getOwnPropertyDescriptor(target, key.toLowerCase());
},
});const merge = (key, ...arrs) =>
Object.values(arrs.flat().reduce((acc, n) => (
Object.assign(acc[n[key]] ??= {}, n),
acc
), {}));
const result = merge('id', sum, arr1, arr2);const merge = (key, ...arrs) =>
Array.from(arrs.reduce((acc, arr) => arr.reduce((acc, n) => {
const k = key(n);
return acc.set(k, Object.assign(acc.get(k) ?? {}, n));
}, acc), new Map).values());
const result = merge(n => n.id, sum, arr1, arr2);const result = arr.map(function(n) {
return this[n];
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));
// или
const result = arr.map(Map.prototype.get.bind(new Map(sum.map(n => [ n.id, n.name ]))));
// или
const result = arr.map(n => sum.find(m => m.id === n)?.name);sum отсутствуют некоторые из нужных элементов, а получать undefined внутри массива с результатами не хочется?const names = Object.fromEntries(sum.map(n => [ n.id, n.name ]));
const result = arr.map(n => names[n] ?? `объекта с id=${n} нет`);const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.reduce((acc, n) => ((n = names.get(n)) && acc.push(n), acc), []);const containers = document.querySelectorAll('.parent');
const tag = 'div';
const className = 'child';containers.forEach((n, i) => {
n.insertAdjacentHTML(
'beforeend',
`<${tag} class="${className}">${arr[i]}</${tag}>`
);
});
// или
for (const [ i, n ] of containers.entries()) {
n.append(Object.assign(document.createElement(tag), {
className,
innerText: arr[i],
}));
}
// или
for (let i = 0; i < containers.length; i++) {
const el = document.createElement(tag);
el.classList.add(className);
el.textContent = arr[i];
containers[i].insertAdjacentElement('beforeend', el);
}
// или
(function add(i, n = containers.item(i)) {
if (n) {
n.appendChild(document.createElement(tag));
n.lastChild.setAttribute('class', className);
n.lastChild.insertBefore(new Text(arr[i]), null);
add(-~i);
}
})(0);const createArr = length =>
Array.from({ length }, (_, i) =>
Array.from({ length }, (_, j) =>
(i === j || i === length - j - 1) +
((i <= j && i <= length - j - 1) || (i >= j && i >= length - j - 1))
)
);const newArr = arr.reduce((acc, n) => (
acc.push({ ...n, fractionTotal: n.fraction + (acc.at(-1)?.fractionTotal ?? 0) }),
acc
), []);
// или
const newArr = arr.map(function({ ...n }) {
n.fractionTotal = this[0] += n.fraction;
return n;
}, [ 0 ]);arr.forEach((n, i, a) => n.fractionTotal = n.fraction + (i && a[i - 1].fractionTotal));
// или
arr.reduce((acc, n) => n.fractionTotal = acc + n.fraction, 0);const rows = 8;
const cols = 8;
document.body.innerHTML = Array
.from({ length: rows }, (_, i) => Array
.from({ length: cols }, (_, j) => (i ^ j) & 1)
.join(''))
.join('<br>');const sorted = (data, keys) => Array
.from(data, n => [ n ].concat(keys(n)))
.sort((a, b) => {
let diff = 0;
for (let i = 0; ++i < a.length && !(diff = ((a[i] < b[i]) ? -1 : +(a[i] > b[i])));) ;
return diff;
})
.map(n => n[0]);const sortChildren = (el, keys) =>
el.append(...sorted(el.children, keys));const ul = document.querySelector('ul');
ul.addEventListener('change', e => sortChildren(
e.currentTarget,
el => [
-el.querySelector('input').checked,
el.innerText.trim().toLowerCase(),
]
));
ul.dispatchEvent(new Event('change'));arr.filter(RegExp.prototype.test.bind(/^[рим]*$/i))
// или
arr.filter(n => !n.match(/[^рим]/i))
// или
arr.filter(n => !n.replace(/р|и|м/gi, ''))
// или
arr.filter(n => [...n.toLowerCase()].every(m => 'рим'.includes(m)))const result = Object.values(data.reduce((acc, n) => (
(acc[n.brand] ??= { ...n, price: 0 }).price += n.price,
acc
), {}));function uniqueWithSum(data, key, sumKey) {
const getKey = key instanceof Function ? key : n => n[key];
const unique = new Map;
for (const n of data) {
const k = getKey(n);
unique
.set(k, unique.get(k) ?? (u => (u[sumKey] = 0, u))(structuredClone(n)))
.get(k)[sumKey] += n[sumKey];
}
return [...unique.values()];
}// ваш случай
const result = uniqueWithSum(data, n => n.brand, 'price');
// элементам исходного массива не обязательно быть объектами
uniqueWithSum([
[ 'aaa', 1 ],
[ 'aaa', 10 ],
[ 'aaa', 100 ],
[ 'bbb', 666 ],
], 0, 1) // [ [ 'aaa', 111 ], [ 'bbb', 666 ] ]const itemSelector = '.radio';
const activeClass = 'active';// конечно, вы можете и дальше продолжать ковырять jquery
const $items = $(itemSelector).on('change', function() {
$items.next().removeClass(activeClass);
$(this).next().addClass(activeClass);
});
// но ведь есть и другой путь
const items = document.querySelectorAll(itemSelector);
const onChange = ({ currentTarget: t }) =>
items.forEach(n => n.nextElementSibling.classList.toggle(activeClass, n === t));
items.forEach(n => n.addEventListener('change', onChange));.radio:has(:checked) + .order__form-input {
/* сюда переносим стили, делающие input видимым */
}arr.reduce((acc, n) => (
Object.entries(n.json_build_object).forEach(([ k, v ]) => {
(acc[k] ??= []).find(m => m.id === v.id) || acc[k].push(v);
}),
acc
), {})links.reduce((acc, n) => {
const path = n.url.split('/');
const [ lastFolder ] = path.splice(-2);
(path.reduce((p, c) => p[c] ??= {}, acc)[lastFolder] ??= []).push(n);
return acc;
}, {})links.reduce((acc, n) => (
n.url
.match(/[^\/]+(?=\/)/g)
.reduce((p, c, i, a) => p[c] ??= (-~i < a.length ? {} : []), acc)
.push(n),
acc
), {})#itemInner {
counter-reset: bullshit-counter;
}
.row {
counter-increment: bullshit-counter;
}
.row::before {
content: counter(bullshit-counter) "!!!";
}itemInner.find('.item-num').text(i => i + 1);
const parent = document.querySelector('#questions');
const selector = '#point';const children = [...parent.children];
const index = -~children.findIndex(n => n.matches(selector));
index && parent.replaceChildren(...children.slice(0, index));
// или
for (
const el = parent.querySelector(selector);
el?.nextElementSibling;
el.nextElementSibling.replaceWith()
) ;
// или
parent.querySelectorAll(`${selector} ~ *`).forEach(n => n.remove());document.querySelector('.shopWrapper').addEventListener('mouseover', function() {
const color = `#${Math.random().toString(16).slice(2, 8).padEnd(6, 0)}`;
this.style.setProperty('--random-color', color);
});arr.map(n => {
const ids = Object
.values(n.childrenHash.reduce((acc, m) => ((acc[m.hash] ??= []).push(m.id), acc), {}))
.filter(m => m.length > 1);
return {
...n,
childrenHash: ids.length ? ids : null,
};
})