Как бы выглядел этот код если реализовать его с помощью методов массива, на подобии forEach или что-то такого?

Question

[nathan111777]

Как бы выглядел этот код если реализовать его с помощью методов массива, на подобии forEach или что-то такого? Тоесть чтобы был декларативный (функциональный подход) в реализации кода.
Вот код:
https://codepen.io/nathan111777/pen/ExYpydo
Код реализует слайдер изображений.

Answer 1

[Сергей Соколов]

Comments

[nathan111777]

спасибо) а что такое "3e3"?

[Сергей Соколов]

nathan111777, это "экспоненциальная" запись, значит 3 * 10^3
Число после е это степень десятки, на которую умножить. Проще говоря, число нулей.

Answer 2

[Станислав Силин]

С
document.getElementsByClassName("mySlides");

forEach не получится.

Comments

[edward_freedom]

по твоей же ссылке, есть примеры

"use strict";

Array.from(document.getElementsByClassName("events")).forEach(function(item) {
   console.log(item.id);
});

var list= document.getElementsByClassName("events");
[].forEach.call(list, function(el) {
    console.log(el.id);
});

[Станислав Силин]

edward_freedom, да, но это ужасно...

[edward_freedom]

Станислав Силин, ничего не мешает написать свою функцию, для получения dom элементов и преобразования их в обычный массив, но это уже будет jq, проще сразу его использовать

[abberati]

Станислав Силин,
[...document.querySelectorAll(...)].forEach

[Станислав Силин]

abberati, Вы же понимаете что делает этот код? Сначала вы достаете масив через

querySelectorAll

, а потом создаете новый массив на базе предыдущего. И зачем все это? Для того чтобы иметь возможность вызвать функцию forEach? Неужели это и правда оправдано выделять допольнительную память и копировать участок памяти только ради вызова красивой функции? Как по мне это не очень хорошо.

[edward_freedom]

Станислав Силин, по идее же, массив, который вернет querySelectorAll, после преобразования в обычный массив, удалится системой и в итоге будет 1 массив

[Станислав Силин]

edward_freedom, все так, но время затраченое на создание одного масива, а потом второго и его копирование никто вам не вернет. Тем более в данном случаи, когда сее действо будет происходить на каждое изменение картинки. Тем более когда это в браузере, где есть только один потом и если его занять UI будет тупить.

[Станислав Силин]

edward_freedom, а потом еще будет сборка мусора и ей нужно будет сделать вдвое больше роботы. Неужели все эти расходы стоят вызова красивой функции?

[abberati]

Станислав Силин, да, понимаю. Этот код в декларативном виде обходит список узлов. И код делает это без переменной-счётчика, без прибавления единички на каждой итерации.

В этом коде написано «возьми все элементы по селектору и на каждом вызови функцию-коллбэк». Если нужно, этот список можно сначала отфильтровать и преобразовать, что займёт две строчки и будет понятно.
Понятность кода почти всегда важнее производительности. Кроме случаев, когда, например, на вояджере нужно апдейт накатить, а железо поменять ему нельзя.

Это и правда оправдывает необходимость занимать память, потом копировать её, потом очищать и вот это всё. Только я не уверен, что jit-компилятор не оптимизирует этот кусок.

[Станислав Силин]

abberati, для понятности for можно заменить на foreach

for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
//  --------
  for (let slide of slides) {
      slide.style.display = "none";  
  }

[edward_freedom]

Станислав Силин, но ведь jquery так и делает и ничего не тормозит и все пользуются

[abberati]

Станислав Силин, ну да, можно.

Вы ответили, что с forEach не получится, вам три раза показали, что получится. Куда вы упираетесь? Зачем? О чем спорите?

Посмотрите, кстати, как for of выглядит изнутри.
https://babeljs.io/en/repl#?babili=false&browsers=...

Оно того стоит?!?!