Тези методи на JavaScript ще повишат уменията ви само за няколко минути

Повечето приложения, които изграждаме днес, изискват някаква модификация на събирането на данни. Обработката на елементи в колекция е често срещана операция, която най-вероятно ще срещнете. Забравете конвенционалния начин да правите for-loopкато (let i=0; i < value.length; i++).

Бърз хедс-ъп, използване constв for-loopще ви даде грешка. Причината, поради която е така, защото тя отново декларира стойността по време на изпълнението на всяко оттам iсе променя от i++. Така че, когато мислите или да използвате, constили се letзапитайте - ще бъде ли повторно декларирана тази стойност? Ако отговорът е да , продължете let, а ако не , продължете const. Повече информация.

Да предположим, че искате да покажете списък с продукти и да категоризирате, филтрирате, търсите, модифицирате или актуализирате колекция. Или може би искате да извършите бързи изчисления като сума, умножение и т.н. Какъв е оптималният начин да се постигне това?

Може би не харесвате функциите на стрелките , не искате да отделяте твърде много време за учене на нещо ново или те просто не са подходящи за вас. Не се притеснявайте, не сте сами. Ще ви покажа как се прави в ES5 (функционално забавяне) и ES6 (функции със стрелки).

Имайте предвид: Функциите със стрелки и декларациите / изразите на функции не са еквивалентни и не могат да бъдат заменени сляпо. Имайте предвид, че thisключовата дума работи по различен начин между двете.

Методите, които ще разгледаме:

  1. Оператор за разпространение
  2. за ... на итератор
  3. включва()
  4. някои ()
  5. всеки ()
  6. филтър ()
  7. карта ()
  8. намаляване ()
Ако искате да станете по-добър уеб разработчик, да започнете собствен бизнес, да преподавате на други или да подобрите уменията си за разработка, ще публикувам седмични съвети и трикове на най-новите езици за уеб разработка.

1. Разпръскващ оператор

Операторът за разпространение разширява масив в своите елементи. Може да се използва и за обектни литерали.

Защо да го използвам?

  • Това е прост и бърз начин за показване на елементите от масив
  • Работи за масиви и обектни литерали
  • Това е бърз и интуитивен начин за предаване на аргументи
  • Необходими са само три точки ...

Пример:

Да предположим, че искате да покажете списък с любими храни, без да създавате функция на цикъл. Използвайте оператор за разпространение по следния начин:

2. за ... на итератор

Операторът for...ofцикли / итерации през колекцията и ви предоставя възможност да модифицирате конкретни елементи. Той замества конвенционалния начин за правене на for-loop.

Защо да го използвам?

  • Това е лесен начин за добавяне или актуализиране на елемент
  • За извършване на изчисления (сума, умножение и т.н.)
  • Когато използвате условни изрази (ако, докато, превключвате и т.н.)
  • Води до чист и четим код

Пример:

Да приемем, че имате кутия с инструменти и искате да покажете всички инструменти в нея. В for...ofИтераторът го прави лесно.

3. Включва () метод

В includes()метода се използва за проверка дали съществува определен низ в колекция, и се връща trueили false. Имайте предвид, че е чувствителен към малки и големи букви: ако елементът в колекцията е SCHOOLи търсите school, той ще се върне false.

Защо да го използвам?

  • За изграждане на проста функционалност за търсене
  • Това е интуитивен подход за определяне дали съществува низ
  • Той използва условни изрази за модифициране, филтриране и т.н.
  • Води до четим код

Пример:

Да кажем по каквато и да е причина, че не сте наясно какви коли имате в гаража си и ви е необходима система, която да провери дали колата, която искате, съществува или не. includes()на помощ!

4. Някакъв () метод

В some()проверките метод, ако е налице някои от елементите в масив и връща trueили false. Това е донякъде подобно на концепцията на includes()метода, освен че аргументът е функция, а не низ.

Защо да го използвам?

  • Той гарантира, че някои елементи преминават теста
  • Той изпълнява условни изрази с помощта на функции
  • Направете своя код декларативен
  • Някои са достатъчно добри

Пример:

Да приемем, че сте собственик на клуб и не ви интересува кой влиза в клуба. Но някои нямат право да влизат, защото са пили твърде много (най-доброто ми творчество). Вижте разликите между ES5 и ES6 по-долу:

ES5:

ES6:

5. Всеки () метод

В every()примките метод чрез масива, проверки на всекиелемент, и връща trueили false. Същата концепция като some(). Освен че всеки елемент трябва да отговаря на условния оператор, в противен случай той ще се върне false.

Защо да го използвам?

  • Той гарантира, че всеки елемент преминава теста
  • Можете да изпълнявате условни изрази с помощта на функции
  • Направете своя код декларативен

Пример:

Последният път, когато разрешихте на some()непълнолетни ученици да влязат в клуба, някой съобщи за това и полицията ви хвана. Този път няма да позволите това да се случи и ще се уверите, че всички преминават възрастовата граница с every()оператора.

ES5

ES6

6. Метод на филтър ()

В filter()метода се създава нов масив с всички елементи, които преминават теста.

Защо да го използвам?

  • Така че можете да избегнете промяната на основния масив
  • Позволява ви да филтрирате елементи, от които не се нуждаете
  • Дава ви по-четим код

Пример:

Да приемем, че искате да върнете само цени, които са над или равни на 30. Филтрирайте всички тези други цени ...

ES5

ES6

7. Метод Map ()

В map()метод е подобен на filter()метода по отношение на връщането на нов масив. Единствената разлика обаче е, че се използва за модифициране на елементи.

Защо да го използвам?

  • Позволява ви да избягвате да правите промени в основния масив
  • Можете да модифицирате елементите, които искате
  • Дава ви по-четим код

Пример:

Да приемем, че имате списък с продукти с цени. Вашият мениджър се нуждае от списък, за да покаже новите цени, след като те бъдат обложени с 25%. В map()метод може да ви помогне.

ES5

ES6

8. Метод за намаляване ()

В reduce()метод може да се използва за трансформиране на масив в нещо друго, което би могло да бъде цяло число, обект, верига от обещания (последователно изпълнение на обещанията) и др От практическа гледна точка, при прост начин на използване е да обобщя списък с числа . Накратко, той „намалява“ целия масив до една стойност.

Защо да го използвам?

  • Извършете изчисления
  • Изчислете стойност
  • Брой дубликати
  • Групирайте обектите по свойства
  • Изпълнявайте обещанията последователно
  • Това е бърз начин за извършване на изчисления

Пример:

Да предположим, че искате да разберете общите си разходи за една седмица. Използвайте, за reduce()да получите тази стойност.

ES5

ES6

Можете да ме намерите в Developer News, където публикувам всяка седмица. Или можете да ме следвате в Twitter, където публикувам подходящи съвети и трикове за уеб разработка.