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. Перемешать элементы из массива

   Every day I’m shufflin’ 🙂

   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 — это классно, но стоит убедиться в том, что ваше веб-приложение работает правильно на всех браузерах и на всех устройствах. Обязательно позаботьтесь об этом.