Alexey Hog

Как получить строки таблицы:

// если гарантируется отсутствие thead и tfoot, или их содержимое также должно учитываться
const { rows } = table;

// если tbody один
const [ { rows } ] = table.tBodies;

// если tbody несколько
const rows = Array.prototype.flatMap.call(table.tBodies, n => [...n.rows]);
// или
const rows = [].concat(...Array.from(table.tBodies, n => [...n.children]));
// или
const rows = table.querySelectorAll('tbody tr');

Как получить средний элемент:

const middle = arr => arr[arr.length >> 1];
// или
const middle = arr => arr[Math.floor(arr.length / 2)];
// или
const middle = arr => arr[Math.round(~-arr.length / 2)];
// или
const middle = arr => arr[(arr.length - arr.length % 2) / 2];

Всё, можно доставать ячейку:

const cell = middle(middle(rows).cells);
// или
const cell = middle([].reduce.call(rows, (acc, n) => (acc.push(...n.children), acc), []));
// или, без получения строк
const cell = middle(table.querySelectorAll('tbody td'));

Строки сложить в массив. Завести два индекса - текущей строки и её последнего отображаемого символа. Если при увеличении количества отображаемых символов выходим за границу строки - переключаемся на следующую строку и сбрасываем счётчик символов.

Куда, что и с какой задержкой будем печатать:

const el = document.querySelector('p');
const strings = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
const delay = 100;

Печатаем:

function Typewriter(el, strings, delay) {
  let i = 0;
  let length = 0;

  return setInterval(() => {
    if (++length > strings[i].length) {
      i = -~i % strings.length;
      length = 0;
    }

    el.textContent = strings[i].slice(0, length);
  }, delay);
}


const intervalId = Typewriter(el, strings, delay);
// хотим остановить, делаем так: clearInterval(intervalId);

или

function Typewriter(el, strings, delay) {
  let timeoutId = null;

  (function step(i, length) {
    length = -~length % -~strings[i].length;
    i = (i + !length) % strings.length;
    el.innerText = strings[i].substring(0, length);
    timeoutId = setTimeout(step, delay, i, length);
  })(0, 0);

  return () => clearTimeout(timeoutId);
}


const stop = Typewriter(el, strings, delay);
// хотим остановить, делаем так: stop();

Вы берёте childNodes, куда входят не только элементы, но и текстовые узлы между элементами (переводы строк).

// [object NodeList] (7)
[#text,<div/>,#text,<div/>,#text,<div/>,#text]

Так вот у этих текстовых узлов нет параметра offsetWidth, соответственно вы складываете undefined, получая NaN.

- let box = document.querySelector(".box").childNodes;
+ let box = document.querySelector(".box").children;
- box.forEach((item) => {
+ for (let item of box) {
- })
+ }

как-то так

function getCombinations($arr, $keys = [], $vals = []) {
  return ($n = $arr[count($keys)] ?? null)
    ? array_merge(...array_map(
        fn($k) => getCombinations(
          $arr,
          [ ...$keys, $k ],
          [ ...$vals, ...$n[$k] ]
        ),
        array_keys($n)
      ))
    : [ implode('_', $keys) => $vals ];
}

Вы неверно понимаете суть О-нотации. Почитайте книги Дональда Кнута про это.
O(3) - это то же самое, что O(1). Нет разницы. O(N), O(N+1000), O(10*N) - это тоже одно и то же.
В таких случаях речь всегда идёт не про конкретный кейс, а про обобщенный. Вы не знаете в каком порядке элементы вашего массива, где находится искомый, сколько всего элементов будет в конкретных кейсах, поэтому определяется ряд случаев: средний (по вероятности, если входные данные рандомные), худший (чтобы понимать границы и сколько может "висеть" алгоритм теоретически). Лучшие варианты обычно никого не интересуют, потому что и вероятность их мала, и смысла никакого нет в столь малых величинах.

У вас типичный случай компромисса в реализации структуры данных. Вы всегда балансируете между памятью и скоростью. Больших семь шапок из овцы не выкроить никак.
То есть, вы можете сделать такую структуру данных, которая "под капотом" будет держать древовидный индекс с данными или отсортированную по ключу карту значений для бинарного поиска. Хотя эти варианты - суть одно и то же.
Если не рассматривается вариант размена производительности на память, то в этой задаче у вас будет только O(N) без вариантов.
Если усложнить структуру данных, то можно добиться и O(logN) при поиске, и даже O(1). Почитайте как устроен словарь в питоне.

Да, помимо сложности поиска у вас будет сложность вставки в структуру новых элементов. И тут опять трейд-офф. Ну а что вы хотели?

const blocks = ref(Array.from({ length: 5 }, (_, i) => (-~i) ** 2));
const active = ref(0);

function next() {
  active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}

let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));

<div
  v-for="(n, i) in blocks"
  v-text="n"
  :class="[ 'box-item', { active: i === active } ]"
></div>

Конечно, зашивать в стили цвета блоков и их количество - все эти :nth-child - не круто. Лучше сделать компонент, принимающий массив цветов и создающий блоки на его основе. Соответственно, вместо класса будет назначаться цвет фона напрямую, как-то так:

<div
  v-for="(n, i) in colors"
  :style="{ backgroundColor: i === active ? n : '' }"
  ...

clip-path. Как раз есть пример с анимацией:

Вариант с градиентами - сложный для анимирования. Рисование линий со stroke-dasharray - это стандартный выбор. Но dash array может быть длинным, им можно описать самые разные последовательности линий и пробелов, так что если вам не нужны разные цвета, то можно сделать одну линию:

Рекурсия есть:

const toString = (val, keys = []) =>
  val instanceof Object
    ? Object.entries(val).map(([ k, v ]) => {
        keys.push(k);
        const result = toString(v, keys);
        keys.pop();
        return result;
      }).join('&')
    : `${keys.join('.')}=${val}`;

Рекурсии нет:

function toString(val) {
  const result = [];

  for (const stack = [ [ val, [] ] ]; stack.length;) {
    const [ n, keys ] = stack.pop();
    if (n instanceof Object) {
      stack.push(...Object.entries(n).map(([ k, v ]) => [ v, [ ...keys, k ] ]).reverse());
    } else {
      result.push(`${keys.join('.')}=${n}`);
    }
  }

  return result.join('&');
}

function createTree($data, $params = []) {
  extract($params + [
    'levelKey' => 'level',
    'childrenKey' => 'children',
  ]);

  $root = [];

  foreach ($data as $n) {
    $arr = &$root;

    for (
      $level = $data[0][$levelKey];
      $level++ < $n[$levelKey];
      $arr = &$arr[count($arr) - 1][$childrenKey]
    ) ;

    $arr[] = $n + [ $childrenKey => [] ];
  }

  return $root;
}


$tree = createTree($arMenu, [ 'levelKey' => 'LEVEL' ]);

или

function createTree($data, $params = []) {
  $levelKey = $params['levelKey'] ?? 'level';
  $childrenKey = $params['childrenKey'] ?? 'children';

  $root = [];
  $stack = [ [ $data[0][$levelKey], &$root ] ];

  foreach ($data as $n) {
    $end = end($stack);
    $level = $n[$levelKey];

    if ($level > $end[0]) {
      $stack[] = [ $level, &$end[1][count($end[1]) - 1][$childrenKey] ];
    } else while ($level < end($stack)[0]) {
      array_pop($stack);
    }

    end($stack)[1][] = array_merge($n, [ $childrenKey => [] ]);
  }

  return $root;
}

function shortNumber(val) {
  const degree = Math.floor(Math.log10(val) / 3);
  const suffix = ['', ' тыс.', ' млн', ' млрд'][degree];
  const num = val / (10 ** (degree * 3));
  return `${num.toFixed(num >= 10 ? 0 : 1)}${suffix}`;
}
shortNumber(123); // "123"
shortNumber(12345); // "12 тыс."
shortNumber(1234567); // "1.2 млн"

Здесь, собственно, весь код на выброс.

-    $i = 0;
-    $coll = '';
-    $mask = '';
-    foreach ($params as $key => $value) {
-        if ($i === 0) {
-            $coll = $coll . "$key";
-            $mask = $mask . "'" . "$value" . "'";
-        } else {
-            $coll = $coll . ", $key";
-            $mask = $mask . ", '" . "$value" . "'";
-        }
-        $i++;
-    }
+    $coll = implode(',', array_keys($params));
+    $mask = ':' . implode(',:', array_keys($params));

public function category(Request $request, $code) {
        //Получаю все товары данной катигории следующим образом: $category->products
        $category = Category::where('code', $code)->firstOrFail();
        //А пагинация строится в отдельном запросе к таблице Товаров
        $products = $category->products()
         ->when(($request->get('price_min'), function(Builder $query, $price_min){
            return $query->where('price', '>=', $price_min);
        })->when(($request->get('price_max'), function(Builder $query, $price_max){
            return $query->where('price', '<=', $price_max);
        })->paginate(4);

        return view('category', compact('category', 'products'));
    }

Спасибо, что указал, что это ВордПресс и мы сразу имеем понятие, какое условие тебе нужно - have_rows('faq')

printf('%0.2f', $num);?

number_format($number, 2, '.', '');