0xD34F

const getValues = (obj, count) =>
  count > 0
    ? Object.values(obj).slice(0, count)
    : [];

function getValues(obj, count) {
  const result = [];

  for (const k in obj) {
    if (result.length >= count) {
      break;
    } else if (obj.hasOwnProperty(k)) {
      result.push(obj[k]);
    }
  }

  return result;
}

const groupUnique = (arr, idKey, ...keys) => Object
  .values(arr.reduce((acc, n) => {
    const id = n[idKey];
    acc[id] = acc[id] || keys.reduce((group, k) => (group[k] = [], group), {...n});
    keys.forEach(k => acc[id][k].push(...n[k]));
    return acc;
  }, {}))
  .map(n => (keys.forEach(k => n[k] = [...new Set(n[k])]), n));

const result = groupUnique(arr, 'family', 'variants', 'subsets');

Как лучше удалять весь текст с input полей при клонировании елемента ?

подскажите как избежать удаления последнего элемента

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<div id="BodyForm">
  <div class="form-row form-row-data">
    <div class="form-group col-sm-3">
      <input type="text" class="form-control" placeholder="Name">
    </div>
    <div class="form-group col-sm">
      <input type="text" class="form-control" placeholder="Value">
    </div>
    <div class="form-group col-sm-auto">
      <button type="button" class="btn btn-secondary btn-block" onclick="delRow(this)">
        <em class="fa fa-minus"></em>
      </button>
    </div>
  </div>

  <div class="form-row justify-content-end">
    <div class="col-sm-4">
      <button type="button" class="btn btn-outline-success btn-block pull-right" onclick="addRow()">
        <i class="fa fa-plus"> Add</i>
      </button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-outline-danger btn-block pull-right">
        <i class="fa fa-trash"> Clear all</i>
      </button>
    </div> 
  </div>
</div>

const form = document.querySelector('#BodyForm');
const rows = form.getElementsByClassName('form-row-data');
const row = rows[0].cloneNode(true);
const footer = form.querySelector('.justify-content-end');

const addRow = () => footer.before(row.cloneNode(true));
const delRow = el => rows.length > 1 && el.closest('.form-row-data').remove();

const getCard = num => cards.find(n => n.id === num);
// ...
const card = getCard(cardRandom(1, 51));

const card = cards[Math.random() * cards.length | 0];

const TYPES = {
  1: 'region',
  3: 'area',
  7: 'street',
};

const newItems = items.map(({ parents_names, parents_levels, ...n }) =>
  parents_names.reduce((acc, name, i) => (
    acc[TYPES[parents_levels[i]]] = name,
    acc
  ), n)
);

const className = 'element';
const attrName = 'data-attr';
const attrValue = 'this-element';

const elem = document.querySelector(`.${className}[${attrName}="${attrValue}"]`);

const elems = document.getElementsByClassName(className);

// или

const elems = document.querySelectorAll('.' + className);

const elem = Array.prototype.find.call(
  elems,
  n => n.getAttribute(attrName) === attrValue
);

// или

let elem = null;
for (const n of elems) {
  if ((n.attributes[attrName] || {}).value === attrValue) {
    elem = n;
    break;
  }
}

// или

let elem = null;
for (let i = 0; !elem && i < elems.length; i++) {
  elem = elems[i].matches(`[${attrName}="${attrValue}"]`) ? elems[i] : elem;
}

Подсказали что правильно сделать через атрибут data-*

const key = 'key';
const buttonSelector = `a[data-${key}]`;
const contentSelector = `div[data-${key}]`;

$(document).on('click', buttonSelector, function() {
  $(contentSelector)
    .hide()
    .filter((i, n) => n.dataset[key] === this.dataset[key])
    .show();
});

// или

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    document.querySelectorAll(contentSelector).forEach(n => {
      n.hidden = n.dataset[key] !== t.dataset[key];
      // или (надо будет в стили добавить .hidden { display: none; })
      n.classList.toggle('hidden', n.dataset[key] !== t.dataset[key]);
    });
  }
});

Имеется довольно большая матрица (чем больше- тем лучше).
Как правильно отрисовать её на странице?
Хотелось бы еще и с нормальной частотой, хотя-бы раз в 50 ms.

не будет ли быстрее преобразовывать матрицу в строку через arr.toString()...

Картинка

const index = str.search(/\d\D*$/);

// или

const index = str.replace(/\D*$/, '').length - 1;

// или

const index = [...str].reduce((max, n, i) => +n === +n ? i : max, -1);

// или

const index = +(Object.entries(str).filter(n => !isNaN(n[1])).pop() || [ -1 ])[0];

// или

let index = str.length;
while (--index >= 0 && !'0123456789'.includes(str[index])) ;

// или

const index = (function get(i) {
  return i < 0 || !Object.is(str.charAt(i) * 1, NaN)
    ? i
    : get(~-i);
})(~-str.length);

$('#imgTitle').find('img').remove().end().prepend(...

$('.mod__l').append(function() {
  return ({
    m1: mod__c1,
    m2: mod__c2,
    m3: mod__c3,
  })[$('.mod__input', this).data('mod')];
});

Помогите пожалуйста понять почему следующий код выводит undefined, а не 5

$(document).mouseup(function (e) { 
    var popup = $('#free_moto_lesson');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.overlay').fadeOut();
        $(popup).fadeOut();
    }
    return false;
});

как сделать, чтобы можно было выбрать максимум 5 дней

кстати когда убираю кусок кода, который переводит на русский, все работает

А как в таком случае сбросить начальную и конечную дату, если нужно другие числа выбрать?

const parentSelector = '.menu';
const indices = [ 0, 1, 4, 8 ];

const $elems = $(parentSelector).children().filter(i => indices.includes(i));

// или

const $elems = $(indices.map(n => `> :eq(${n})`).join(', '), parentSelector);

const elems = Array.prototype.filter.call(
  document.querySelector(parentSelector).children,
  (n, i) => indices.includes(i)
);

// или

const elems = document
  .querySelector(parentSelector)
  .querySelectorAll(indices.map(n => `:scope > :nth-child(${n + 1})`));

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let X, Y;

document.addEventListener('mousemove', function(e) {
  X = e.clientX;
  Y = e.clientY;
});

function drawRect(x, y, w, h) {
  const dx = x + w / 2;
  const dy = y + h / 2;
  const angle = Math.atan2(X - dx, Y - dy);

  ctx.save();
  ctx.translate(dx, dy);
  ctx.rotate(-angle);
  ctx.translate(-dx, -dy);
  ctx.strokeRect(x, y, w, h);
  ctx.restore();
}

function draw() {
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  drawRect(50, 50, 50, 50);
  requestAnimationFrame(draw);
}

draw();