refactor: ♻️ refactoring array methods

scripts/build-modules.js

@@ -1,17 +1,17 @@
 /* eslint-disable no-shadow */
-import fs from 'fs';
-import { rollup } from 'rollup';
+import { babel } from '@rollup/plugin-babel';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import { babel } from '@rollup/plugin-babel';
-import elapsed from 'elapsed-time-logger';
 import chalk from 'chalk';
-import getElementStyles from './utils/get-element-styles.js';
+import elapsed from 'elapsed-time-logger';
+import fs from 'fs';
+import { rollup } from 'rollup';
 import { modules as configModules } from './build-config.js';
-import { capitalizeString } from './utils/helper.js';
-import minify from './utils/minify.js';
 import { banner } from './utils/banner.js';
+import getElementStyles from './utils/get-element-styles.js';
+import { capitalizeString } from './utils/helper.js';
 import isProd from './utils/isProd.js';
+import minify from './utils/minify.js';
 
 export default async function buildModules() {
   elapsed.start('modules');
@@ -80,7 +80,7 @@
     fs.mkdirSync(`./dist/modules`);
   }
   files.forEach((fileName) => {
-    const folderName = fileName.split('.mjs')[0];
+    const [folderName] = fileName.split('.mjs');
     if (fs.existsSync(`./src/modules/${folderName}`)) {
       fs.copyFileSync(`./dist/tmp/${fileName}`, `./dist/modules/${fileName}`);
       fs.unlinkSync(`./dist/tmp/${fileName}`);
@@ -144,10 +144,10 @@
       const bannerName = f.includes('react')
         ? 'React'
         : f.includes('vue')
-        ? 'Vue'
-        : f.includes('element')
-        ? 'Custom Element'
-        : '';
+          ? 'Vue'
+          : f.includes('element')
+            ? 'Custom Element'
+            : '';
 
       fs.writeFileSync(`./dist/${f}`, `${banner(bannerName)}\n${content}`);
     });
@@ -241,10 +241,10 @@
         const bannerName = f.includes('react')
           ? 'React'
           : f.includes('vue')
-          ? 'Vue'
-          : f.includes('element')
-          ? 'Custom Element'
-          : '';
+            ? 'Vue'
+            : f.includes('element')
+              ? 'Custom Element'
+              : '';
         return minify(f, `./dist/${f}`, bannerName);
       }),
     // IIFE

src/components-shared/get-element-params.mjs

@@ -1,6 +1,6 @@
-import { attrToProp, extend, isObject } from './utils.mjs';
-import { paramsList } from './params-list.mjs';
 import defaults from '../core/defaults.mjs';
+import { paramsList } from './params-list.mjs';
+import { attrToProp, extend, isObject } from './utils.mjs';
 
 const formatValue = (val) => {
   if (parseFloat(val) === Number(val)) return Number(val);
@@ -69,9 +69,7 @@ function getParams(element, propName, propValue) {
     attrsList.push({ name: propName, value: isObject(propValue) ? { ...propValue } : propValue });
   }
   attrsList.forEach((attr) => {
-    const moduleParam = modulesParamsList.filter(
-      (mParam) => attr.name.indexOf(`${mParam}-`) === 0,
-    )[0];
+    const moduleParam = modulesParamsList.find((mParam) => attr.name.indexOf(`${mParam}-`) === 0);
     if (moduleParam) {
       const parentObjName = attrToProp(moduleParam);
       const subObjName = attrToProp(attr.name.split(`${moduleParam}-`)[1]);

src/core/core.mjs

@@ -1,36 +1,33 @@
 /* eslint no-param-reassign: "off" */
 import { getDocument } from 'ssr-window';
+import { getBrowser } from '../shared/get-browser.mjs';
+import { getDevice } from '../shared/get-device.mjs';
+import { getSupport } from '../shared/get-support.mjs';
+import { preload, processLazyPreloader } from '../shared/process-lazy-preloader.mjs';
 import {
-  extend,
-  deleteProps,
   createElement,
+  deleteProps,
+  elementChild,
   elementChildren,
-  elementStyle,
   elementIndex,
+  elementStyle,
+  extend,
 } from '../shared/utils.mjs';
-import { getSupport } from '../shared/get-support.mjs';
-import { getDevice } from '../shared/get-device.mjs';
-import { getBrowser } from '../shared/get-browser.mjs';
-
-import Resize from './modules/resize/resize.mjs';
-import Observer from './modules/observer/observer.mjs';
-
-import eventsEmitter from './events-emitter.mjs';
-
-import update from './update/index.mjs';
-import translate from './translate/index.mjs';
-import transition from './transition/index.mjs';
-import slide from './slide/index.mjs';
-import loop from './loop/index.mjs';
-import grabCursor from './grab-cursor/index.mjs';
-import events from './events/index.mjs';
 import breakpoints from './breakpoints/index.mjs';
-import classes from './classes/index.mjs';
 import checkOverflow from './check-overflow/index.mjs';
-
+import classes from './classes/index.mjs';
 import defaults from './defaults.mjs';
+import eventsEmitter from './events-emitter.mjs';
+import events from './events/index.mjs';
+import grabCursor from './grab-cursor/index.mjs';
+import loop from './loop/index.mjs';
 import moduleExtendParams from './moduleExtendParams.mjs';
-import { processLazyPreloader, preload } from '../shared/process-lazy-preloader.mjs';
+import Observer from './modules/observer/observer.mjs';
+import Resize from './modules/resize/resize.mjs';
+import slide from './slide/index.mjs';
+import transition from './transition/index.mjs';
+import translate from './translate/index.mjs';
+import update from './update/index.mjs';
 
 const prototypes = {
   eventsEmitter,
@@ -254,9 +251,7 @@ class Swiper {
 
   getSlideIndexByData(index) {
     return this.getSlideIndex(
-      this.slides.filter(
-        (slideEl) => slideEl.getAttribute('data-swiper-slide-index') * 1 === index,
-      )[0],
+      this.slides.find((slideEl) => slideEl.getAttribute('data-swiper-slide-index') * 1 === index),
     );
   }
 
@@ -522,7 +517,7 @@ class Swiper {
         // Children needs to return slot items
         return res;
       }
-      return elementChildren(el, getWrapperSelector())[0];
+      return elementChild(el, getWrapperSelector());
     };
     // Find Wrapper
     let wrapperEl = getWrapper();

src/core/events/onTouchEnd.mjs

@@ -1,4 +1,4 @@
-import { now, nextTick } from '../../shared/utils.mjs';
+import { nextTick, now } from '../../shared/utils.mjs';
 
 export default function onTouchEnd(event) {
   const swiper = this;
@@ -13,7 +13,7 @@ export default function onTouchEnd(event) {
     if (e.pointerId !== data.pointerId) return;
     targetTouch = e;
   } else {
-    targetTouch = [...e.changedTouches].filter((t) => t.identifier === data.touchId)[0];
+    targetTouch = [...(e.changedTouches || [])].find((t) => t.identifier === data.touchId);
     if (!targetTouch || targetTouch.identifier !== data.touchId) return;
   }
 

src/core/events/onTouchMove.mjs

@@ -20,7 +20,7 @@ export default function onTouchMove(event) {
 
   let targetTouch;
   if (e.type === 'touchmove') {
-    targetTouch = [...e.changedTouches].filter((t) => t.identifier === data.touchId)[0];
+    targetTouch = [...(e.changedTouches || [])].find((t) => t.identifier === data.touchId);
     if (!targetTouch || targetTouch.identifier !== data.touchId) return;
   } else {
     targetTouch = e;

src/core/loop/loopFix.mjs

@@ -68,7 +68,7 @@ export default function loopFix({
 
   if (typeof activeSlideIndex === 'undefined') {
     activeSlideIndex = swiper.getSlideIndex(
-      slides.filter((el) => el.classList.contains(params.slideActiveClass))[0],
+      slides.find((el) => el.classList.contains(params.slideActiveClass)),
     );
   } else {
     activeIndex = activeSlideIndex;

src/core/slide/slideToClickedSlide.mjs

@@ -1,4 +1,4 @@
-import { elementChildren, nextTick } from '../../shared/utils.mjs';
+import { elementChild, nextTick } from '../../shared/utils.mjs';
 
 export default function slideToClickedSlide() {
   const swiper = this;
@@ -20,7 +20,7 @@ export default function slideToClickedSlide() {
       ) {
         swiper.loopFix();
         slideToIndex = swiper.getSlideIndex(
-          elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0],
+          elementChild(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`),
         );
 
         nextTick(() => {
@@ -32,7 +32,7 @@ export default function slideToClickedSlide() {
     } else if (slideToIndex > swiper.slides.length - slidesPerView) {
       swiper.loopFix();
       slideToIndex = swiper.getSlideIndex(
-        elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0],
+        elementChild(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`),
       );
 
       nextTick(() => {

src/core/slide/slideToLoop.mjs

@@ -21,9 +21,9 @@ export default function slideToLoop(index = 0, speed, runCallbacks = true, inter
       let targetSlideIndex;
       if (gridEnabled) {
         const slideIndex = newIndex * swiper.params.grid.rows;
-        targetSlideIndex = swiper.slides.filter(
+        targetSlideIndex = swiper.slides.find(
           (slideEl) => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex,
-        )[0].column;
+        ).column;
       } else {
         targetSlideIndex = swiper.getSlideIndexByData(newIndex);
       }
@@ -57,8 +57,8 @@ export default function slideToLoop(index = 0, speed, runCallbacks = true, inter
             ? 'prev'
             : 'next'
           : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView
-          ? 'next'
-          : 'prev';
+            ? 'next'
+            : 'prev';
         swiper.loopFix({
           direction,
           slideTo: true,
@@ -70,9 +70,9 @@ export default function slideToLoop(index = 0, speed, runCallbacks = true, inter
 
       if (gridEnabled) {
         const slideIndex = newIndex * swiper.params.grid.rows;
-        newIndex = swiper.slides.filter(
+        newIndex = swiper.slides.find(
           (slideEl) => slideEl.getAttribute('data-swiper-slide-index') * 1 === slideIndex,
-        )[0].column;
+        ).column;
       } else {
         newIndex = swiper.getSlideIndexByData(newIndex);
       }

src/core/update/updateActiveIndex.mjs

@@ -86,7 +86,7 @@ export default function updateActiveIndex(newActiveIndex) {
   if (swiper.virtual && params.virtual.enabled && params.loop) {
     realIndex = getVirtualRealIndex(activeIndex);
   } else if (gridEnabled) {
-    const firstSlideInColumn = swiper.slides.filter((slideEl) => slideEl.column === activeIndex)[0];
+    const firstSlideInColumn = swiper.slides.find((slideEl) => slideEl.column === activeIndex);
     let activeSlideIndex = parseInt(firstSlideInColumn.getAttribute('data-swiper-slide-index'), 10);
     if (Number.isNaN(activeSlideIndex)) {
       activeSlideIndex = Math.max(swiper.slides.indexOf(firstSlideInColumn), 0);

src/core/update/updateSlidesClasses.mjs

@@ -1,4 +1,4 @@
-import { elementChildren, elementNextAll, elementPrevAll } from '../../shared/utils.mjs';
+import { elementChild, elementNextAll, elementPrevAll } from '../../shared/utils.mjs';
 
 const toggleSlideClasses = (slideEl, condition, className) => {
   if (condition && !slideEl.classList.contains(className)) {
@@ -16,10 +16,7 @@ export default function updateSlidesClasses() {
   const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
 
   const getFilteredSlide = (selector) => {
-    return elementChildren(
-      slidesEl,
-      `.${params.slideClass}${selector}, swiper-slide${selector}`,
-    )[0];
+    return elementChild(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`);
   };
 
   let activeSlide;
@@ -36,9 +33,9 @@ export default function updateSlidesClasses() {
     }
   } else {
     if (gridEnabled) {
-      activeSlide = slides.filter((slideEl) => slideEl.column === activeIndex)[0];
-      nextSlide = slides.filter((slideEl) => slideEl.column === activeIndex + 1)[0];
-      prevSlide = slides.filter((slideEl) => slideEl.column === activeIndex - 1)[0];
+      activeSlide = slides.find((slideEl) => slideEl.column === activeIndex);
+      nextSlide = slides.find((slideEl) => slideEl.column === activeIndex + 1);
+      prevSlide = slides.find((slideEl) => slideEl.column === activeIndex - 1);
     } else {
       activeSlide = slides[activeIndex];
     }

src/modules/autoplay/autoplay.mjs

@@ -66,9 +66,9 @@ export default function Autoplay({ swiper, extendParams, on, emit, params }) {
   const getSlideDelay = () => {
     let activeSlideEl;
     if (swiper.virtual && swiper.params.virtual.enabled) {
-      activeSlideEl = swiper.slides.filter((slideEl) =>
+      activeSlideEl = swiper.slides.find((slideEl) =>
         slideEl.classList.contains('swiper-slide-active'),
-      )[0];
+      );
     } else {
       activeSlideEl = swiper.slides[swiper.activeIndex];
     }

src/modules/hash-navigation/hash-navigation.mjs

@@ -1,5 +1,5 @@
-import { getWindow, getDocument } from 'ssr-window';
-import { elementChildren } from '../../shared/utils.mjs';
+import { getDocument, getWindow } from 'ssr-window';
+import { elementChild } from '../../shared/utils.mjs';
 
 export default function HashNavigation({ swiper, extendParams, emit, on }) {
   let initialized = false;
@@ -12,18 +12,18 @@ export default function HashNavigation({ swiper, extendParams, emit, on }) {
       watchState: false,
       getSlideIndex(_s, hash) {
         if (swiper.virtual && swiper.params.virtual.enabled) {
-          const slideWithHash = swiper.slides.filter(
+          const slideWithHash = swiper.slides.find(
             (slideEl) => slideEl.getAttribute('data-hash') === hash,
-          )[0];
+          );
           if (!slideWithHash) return 0;
           const index = parseInt(slideWithHash.getAttribute('data-swiper-slide-index'), 10);
           return index;
         }
         return swiper.getSlideIndex(
-          elementChildren(
+          elementChild(
             swiper.slidesEl,
             `.${swiper.params.slideClass}[data-hash="${hash}"], swiper-slide[data-hash="${hash}"]`,
-          )[0],
+          ),
         );
       },
     },

src/modules/pagination/pagination.mjs

@@ -260,8 +260,8 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
       swiper.virtual && swiper.params.virtual.enabled
         ? swiper.virtual.slides.length
         : swiper.grid && swiper.params.grid.rows > 1
-        ? swiper.slides.length / Math.ceil(swiper.params.grid.rows)
-        : swiper.slides.length;
+          ? swiper.slides.length / Math.ceil(swiper.params.grid.rows)
+          : swiper.slides.length;
 
     let el = swiper.pagination.el;
     el = makeElementsArray(el);
@@ -348,10 +348,7 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
       el = [...swiper.el.querySelectorAll(params.el)];
       // check if it belongs to another nested Swiper
       if (el.length > 1) {
-        el = el.filter((subEl) => {
-          if (elementParents(subEl, '.swiper')[0] !== swiper.el) return false;
-          return true;
-        })[0];
+        el = el.find((subEl) => elementParents(subEl, '.swiper')[0] === swiper.el);
       }
     }
     if (Array.isArray(el) && el.length === 1) el = el[0];

src/modules/thumbs/thumbs.mjs

@@ -125,10 +125,9 @@ export default function Thumb({ swiper, extendParams, on }) {
       let newThumbsIndex;
       let direction;
       if (thumbsSwiper.params.loop) {
-        const newThumbsSlide = thumbsSwiper.slides.filter(
+        newThumbsIndex = thumbsSwiper.slides.findIndex(
           (slideEl) => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`,
-        )[0];
-        newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);
+        );
 
         direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
       } else {