function xxx(arr, val) {
let index = -1;
return () => val * arr[index = (index + 1) % arr.length];
}
const f = xxx([ 5, 6, 9 ], 2);
console.log([...Array(10)].map(f)) // [10, 12, 18, 10, 12, 18, 10, 12, 18, 10]
код до вложенной функции менять нельзя
function xxx(num) {
let a = 5;
let b = 6;
let c = 9;
return function() {
[ a, b, c ] = [ b, c, a ];
return num * c;
};
}
data: () => ({
info: null,
columns: [
{ title: 'title', key: 'title' },
{ title: 'old price', key: 'gsx$oldprice' },
{ title: 'new price', key: 'gsx$newprice' },
],
}),
mounted() {
axios
.get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
.then(r => this.info = r.data.feed.entry);
},
<table>
<thead>
<tr>
<th v-for="col in columns">{{ col.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in info">
<td v-for="col in columns">{{ item[col.key].$t }}</td>
</tr>
</tbody>
</table>
const itemSelector = 'селектор блока';
const buttonSelector = 'селектор кнопки';
$(document).on('click', buttonSelector, function() {
$(this)
.closest(itemSelector)
.prev()
.find(buttonSelector)
.prop('disabled', false);
});
// или
document.addEventListener('click', ({ target: t }) => {
const prev = t.matches(buttonSelector) && t
.closest(itemSelector)
.previousElementSibling
?.querySelector(buttonSelector);
if (prev) {
prev.disabled = false;
}
});
const getNestedProp = (data, key) => Object
.entries(data instanceof Object ? data : {})
.reduce((acc, [ k, v ]) => (
(k === key) && acc.push(v),
acc.push(...getNestedProp(v, key)),
acc
), []);
const ids = getNestedProp(data.flatMap(n => n.children), 'id');
function getNestedProp(data, key) {
const result = [];
for (const stack = [ data ]; stack.length;) {
const n = stack.pop();
if (n instanceof Object) {
if (n.hasOwnProperty(key)) {
result.push(n[key]);
}
stack.push(...Object.values(n).reverse());
}
}
return result;
}
// или
function getNestedProp(data, key) {
const result = [];
const stack = [];
for (let i = 0, arr = [ data ]; i < arr.length || stack.length; i++) {
if (i === arr.length) {
[ i, arr ] = stack.pop();
} else if (arr[i] instanceof Object) {
if (arr[i].hasOwnProperty(key)) {
result.push(arr[i][key]);
}
stack.push([ i, arr ]);
[ i, arr ] = [ -1, Object.values(arr[i]) ];
}
}
return result;
}
const createItem = obj => ({ key: `${obj.name}-${obj.id}`, title: obj.name });
const result = Object.values(columnList.reduce((acc, n) => {
(acc[n.table.id] ??= {
...createItem(n.table),
children: [],
}).children.push(createItem(n));
return acc;
}, {}));
const getPrimitives = data =>
data instanceof Object
? Object.values(data).flatMap(getPrimitives)
: [ data ];
function getPrimitives(data) {
const result = [];
const stack = [];
for (let i = 0, arr = [ data ]; i < arr.length || stack.length; i++) {
if (i === arr.length) {
[ i, arr ] = stack.pop();
} else if (arr[i] instanceof Object) {
stack.push([ i, arr ]);
[ i, arr ] = [ -1, Object.values(arr[i]) ];
} else {
result.push(arr[i]);
}
}
return result;
}
// или
function getPrimitives(data) {
const result = [];
for (const stack = [ data ]; stack.length;) {
const n = stack.pop();
if (n instanceof Object) {
stack.push(...Object.values(n).reverse());
} else {
result.push(n);
}
}
return result;
}
// или
function getPrimitives(data) {
const result = [].concat(data);
for (let i = 0; i < result.length; i++) {
const n = result[i];
if (n instanceof Object) {
result.splice(i--, 1, ...Object.values(n));
}
}
return result;
}
const data = Array
.from(document.querySelectorAll('.input-container'))
.reduce((acc, el, i) => (
acc[`input${i + 1}`] = [
'parameter',
'result',
'select',
'range',
].map(name => el.querySelector(`[name="${name}"]`).value),
acc
), {});
<div class="colorsSelector">
<div class="colorItem" data-color="blue"></div>
<div class="colorItem" data-color="white"></div>
<div class="colorItem" data-color="red"></div>
<div class="colorItem" data-color="black"></div>
<div class="colorItem" data-color="white-pure"></div>
<div class="colorItem" data-color="orange"></div>
<div class="colorItem" data-color="graphite"></div>
</div>
[data-color="blue"] { background-color: #325488; }
[data-color="white"] { background-color: #cfcfcf; }
[data-color="red"] { background-color: #c64040; }
[data-color="black"] { background-color: #08090b; }
[data-color="white-pure"] { background-color: #f0f0f0; }
[data-color="orange"] { background-color: #d87c5a; }
[data-color="graphite"] { background-color: #7f7f7f; }
const container = document.querySelector('.colorsSelector');
const itemSelector = '.colorItem';
const activeClass = 'colorItem--active';
const img = document.querySelector('.imgHolder img');
const src = color => `//webcademy.ru/files/js2020/solaris/${color}.png`;
// делегированный обработчик клика назначается контейнеру с цветами
container.addEventListener('click', ({ target: { dataset: { color } } }) => {
if (color) {
img.src = src(color);
document.querySelectorAll(itemSelector).forEach(n => {
n.classList.toggle(activeClass, color === n.dataset.color);
});
}
});
// или, каждому цвету обработчик клика назначается индивидуально
const items = container.querySelectorAll(itemSelector);
items.forEach(n => n.addEventListener('click', onClick));
function onClick({ target: t }) {
img.src = src(t.dataset.color);
items.forEach(n => n.classList.toggle(activeClass, n === t));
}
Подключаю этот плагин
https://github.com/river-lee/vue-fullpage#options
based on vue@2.x
import { createApp } from 'vue'
const result = arr.reduce((acc, n) => acc * n.values, 1);
const result = eval(arr.map(n => n.values).join('*')) ?? 1;
let result = 1;
for (const { values: n } of arr) {
result *= n;
}
let result = 1;
for (let i = 0; i < arr.length; i++) {
result = result * arr[i].values;
}
const result = (function mul(i) {
return i >= arr.length
? 1
: arr[i].values * mul(-~i);
})(0);
const url = new URL('https://qna.habr.com/?test=123&frukt=yabloko');
console.log(url.searchParams.get('test'));
const str = 'https://qna.habr.com/?test=123&frukt=yabloko';
const usp = new URLSearchParams(str.replace(/^[^?]*\?/, '')); // или str.split('?').pop()
console.log(usp.get('test'));
Обратите внимание: когда изменяете (а не заменяете) объект или массив, старое и новое значения при вызове коллбэка будут совпадать, так как они ссылаются на один и тот же объект или массив. Vue не сохраняет копии объекта на момент, предшествовавший изменениям.
watch: {
'obj.propName'(newValue, oldValue) {
...
},
},
obj.propName = value
, а будет obj = { ...obj, propName: value }
. Ну а дальше можно уже сравнивать свойства в старом и новом объектах, чтобы найти, какое конкретно было изменено. { имя валюты, относительная стоимость }
.[ 5, 8, 10 ].forEach((n, i, a) => $items.slice(a[i - 1], n).wrapAll('<div>'));
const elements = document.querySelectorAll('.wrapper-boxes');
const tag = 'button';
const text = 'click me';
const className = 'xxx';
elements.forEach(n => {
n.after(document.createElement(tag));
n.nextSibling.textContent = text;
n.nextSibling.classList.add(className);
});
for (const { parentNode, nextSibling } of elements) {
const el = document.createElement(tag);
parentNode.insertBefore(el, nextSibling);
el.innerText = text;
el.className = className;
}
for (let i = 0; i < elements.length; i++) {
elements[i].insertAdjacentHTML('afterend', `<${tag} class="${className}">${text}</${tag}>`);
}
(function insert(i, n = elements[i]) {
if (n) {
const el = document.createElement(tag);
el.appendChild(new Text(text));
el.classList.value = className;
n.insertAdjacentElement('afterend', el);
insert(-~i);
}
})(0);