9 очень полезных советов по JavaScript

Приветствую! Представляю вашему вниманию перевод статьи «9 Extremely Powerful JavaScript Hacks» автора Klaus.

Прим. переводчика: в этом новом (от 10 декабря) посте классные приёмы для JavaScript, которые мне как начинающему понравились, но также есть очевидная реклама приложения для тестов. Но я обязан переводить материал целиком, поэтому рекламную часть скрываю в спойлер, хотя она не бесполезная, кстати.

А теперь 9 очень полезных советов по JavaScript.

1. Заменить все

   Мы знаем, что функция string.replace() заменяет только первое вхождение. Вы можете заменить все вхождения, добавив /g в конце регулярного выражения.

   var example = "potato potato";
   console.log(example.replace(/pot/, "tom")); 
   // "tomato potato"
   console.log(example.replace(/pot/g, "tom")); 
   // "tomato tomato"

2. Извлечение уникальных значений

   Мы можем создать новый массив только с уникальными значениями, используя объект Set и оператор Spread.

   var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
   var unique_entries = [...new Set(entries)];
   console.log(unique_entries);
   // [1, 2, 3, 4, 5, 6, 7, 8]

3. Преобразование числа в строку

   Мы просто должны использовать оператор конкатенации с пустым набором кавычек.

   var converted_number = 5 + "";
   console.log(converted_number);
   // 5
   console.log(typeof converted_number); 
   // string

4. Преобразовать строку в число

   Все, что нам нужно, это +оператор.

   Будьте осторожны с этим, так как он работает только с «строковыми числами».

   the_string = "123";
   console.log(+the_string);
   // 123
   
   the_string = "hello";
   console.log(+the_string);
   // NaN

5. Перемешать элементы из массива

   Каждый день я перемешиваю именно так.

   var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   console.log(my_list.sort(function() {
       return Math.random() - 0.5
   })); 
   // [4, 8, 2, 9, 1, 3, 6, 5, 7]

6. Сгладить многомерный массив

   Просто с помощью оператора Spread.

   var entries = [1, [2, 5], [6, 7], 9];
   var flat_entries = [].concat(...entries); 
   // [1, 2, 5, 6, 7, 9]

7. Условия сокращённого вычисления

   Давайте возьмем этот пример:

   if (available) {
       addToCart();
   }

   И можно сократить его, просто используя переменную вместе с функцией:

   available && addToCart()

8. Динамические имена свойств

   Я всегда думал, что сначала мне нужно объявить объект, прежде чем я смогу назначить динамическое свойство.

   const dynamic = 'flavour';
   var item = {
       name: 'Coke',
       [dynamic]: 'Cherry'
   }
   console.log(item); 
   // { name: "Coke", flavour: "Cherry" }

9. Используйте length, чтобы изменить размер/очистить массив

   Мы в основном перезаписываем длину массива.

   Если мы хотим изменить размер массива:

   var entries = [1, 2, 3, 4, 5, 6, 7];  
   console.log(entries.length); 
   // 7  
   entries.length = 4;  
   console.log(entries.length); 
   // 4  
   console.log(entries); 
   // [1, 2, 3, 4]

   Если мы хотим очистить массив:

   var entries = [1, 2, 3, 4, 5, 6, 7]; 
   console.log(entries.length); 
   // 7  
   entries.length = 0;   
   console.log(entries.length); 
   // 0 
   console.log(entries); 
   // []

Полезные советы по JavaScript — это классно, но стоит убедиться в том, что ваше веб-приложение работает правильно на всех браузерах и на всех устройствах. Обязательно позаботьтесь об этом.

Автор: Артем

Источник