Полезные JavaScript-хаки для веб-разработки

5 (100%) 5 vote[s]

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

Быстрый способ для условных выражений

JavaScript позволяет использовать более короткие способы реализации, что сделает код проще для глаз. В некоторых простых случаях вместо  if и else можно использовать логические операторы  && and ||.

Давайте посмотрим на оператор &&  в действии.

Пример фрагмента:

// вместо
if (accessible) {
console.log(“It’s open!”);
}
// можно использовать
accessible && console.log(“It’s open!”);

Оператор  || работает как «или». Иногда использовать этот оператор немного сложнее, так как он может помешать выполнение приложения. Однако мы можем добавить условие, чтобы обойти это:

//  вместо
if (price.data) {
return price.data;
} else {
return 'Getting the price’';
}
// используем
return (price.data || 'Getting the price');

Как преобразовать в целое с помощью оператора ~~

Удаление десятичных знаков для возврата целого с использованием  math.floor или math.round требует ресурсов. Более эффективный способ — использовать оператор ~~ :

// вместо
math.round(math.random*50)
// можно использовать
~~(math.random*50)
//Вы также можете использовать оператор «~~» для преобразования чего-либо в числовое значение (если строка может быть явно приведена к числу) 
let str = 123;
console.log(typeof(str))//string
let num = Number(str);
let num2 = +str;
let num3 = ~~(str);
console.log(typeof(num))//number
console.log(typeof(num2))//number
console.log(typeof(num3))//number
//Example snippet:
~~('whitedress') //  0
~~(NaN) //  0

Изменение размера или очистка массива с помощью array.length

Иногда вам нужно отрегулировать размер вашего массива или очистить его. Самый эффективный способ сделать это — использовать  array.length:

var array = ['a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
console.log(array.length); // получаем исходную длину массива 10
array.length = 4;
console.log(array.length); // теперь длина массива 4
console.log(array); // в массиве 3 элемента “a,b,c,d”

Соответственно, можно использовать  array.length  для удаления всех значений из указанного массива:

var array = ['a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
console.log(array.length); // получаем исходную длину массива 10
array.length = 0;
console.log(array.length); // теперь длина массива 0
console.log(array); // в массиве 0 элементов []

Также при помощи array.length можно проверить, пустой массив или нет.

Как объединить массивы без перегрузки сервера

При объединении массивов может возникнуть серьезная нагрузка на сервер, особенно если вы имеете дело с большими наборами данных. Чтобы упростить задачу и поддерживать высокий уровень производительности, используйте функции  array.concat()  и array.push.apply(arr1, arr2) .

Использование любой из этих функций зависит от размера массивов.

Давайте посмотрим, как работать с небольшими массивами:

var list1 = [a, b, c, d, e];
var list2 = [f, g, h, i, j];
console.log(list1.concat(list2)); // возвращает объединенные значения обоих массивов (a, b, c, d, e,f, g, h, i, j)

При использовании функции  array.concat() для больших наборов данных она будет потреблять много памяти при создании нового массива. Чтобы обойти падение производительности, используйте  array.push.apply(arr1, arr2), который объединяет второй массив в первый без создания нового массива:

var list1 = [a, b, c, d, e];
var list2 = [f, g, h, i, j];
console.log(list1.push.apply(list1, list2)); //  возвращает объединенные значения обоих массивов (a, b, c, d, e,f, g, h, i, j)

Как использовать фильтры с массивами

Фильтрация массива полезна, когда вы работаете с несколькими столбцами соответствующих данных. В этом случае вы можете включать и исключать данные на основе любой характеристики, описывающей группу в вашем массиве. Чтобы отфильтровать массив, используйте функцию  filter():

const cars = [
{ make: 'Opel', class: 'Regular' },
{ make: 'Bugatti', class: 'Supercar' },
{ make: 'Ferrari', class: 'Supercar' },
{ make: 'Ford', class: 'Regular' },
{ make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(h => h.class === 'Supercar');
console.table(supercar); // возвращает данные класса supercars в виде таблицы
JavaScript-хаки filters array

Вы также можете использовать filter()  вместе с  Boolean , чтобы вернуть все значения null или undefined из массива:

cars.filter(Boolean)

Как получить уникальные значения из массива

Предположим, у вас есть набор данных с повторяющимися значениями, и вам нужно создать уникальные значения из этого набора. Вы можете сделать это с помощью комбинации синтаксиса распространения  ...  и типа объекта  Set. Этот подход работает как со словами, так и с числами:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
var unrepeated_cars = [...new Set(cars)];
console.log(unrepeated_cars); // возвращает значения Opel, Bugatti, Ferrari

Быстрая запись функции replace

Вы должны быть знакомы с функцией  string.replace(). Однако он заменяет строку указанной строкой только один раз и останавливается оттуда. Предположим, у вас большой набор данных, и вам нужно ввести эту функцию несколько раз.

Чтобы упростить себе жизнь, вы можете добавить  /g  в конце регулярного выражения, чтобы функция запускалась и заменяла все соответствующие условия, не останавливаясь на первом:

var grammar = "антоним синоним антоним синоним";
console.log(grammar.replace(/сино/, "анто")); // возвратит "антоним антоним антоним синоним"
console.log(grammar.replace(/сино/g, "анто")); // возвратит "антоним антоним антоним антоним"

Как проверить, есть ли у объекта значения

Когда вы работаете с несколькими объектами, становится сложно отследить, какие из них содержат фактические значения, а какие можно удалить.

Вот как можно с помощью функции Object.keys() проверить, является ли объект пустым или имеет значение:

Object.keys(objectName).length // если он возвращает 0, то объект пуст, в противном случае он отображает количество значений

Форматирование даты

Часто приходится работать с датой. Вывод даты в нужном формате можно задать, создав предварительно объект с опциями:

//Сщздаем объект со значениями, которые будем выводить
var options = {  
		  year: 'numeric',
		  month: 'long',
		  day: 'numeric',
		  weekday: 'long',
		  timezone: 'UTC',
		  hour: 'numeric',
		  minute: 'numeric',
		  second: 'numeric'
      };
setDate();	  
function setDate() {
	var d = new Date();
	var now =  d.toLocaleString("ru", options); 
   console.log(now);//ДЕНЬ НЕДЕЛИ, ЧИСЛО МЕСЯЦ ГОД г., ВРЕМЯ В ФОРМАТЕ 00:00:00
}

Вот полный код этого примера в виде таймера с использованием метода setInterval():

<div id="dat"></div>
<script>
var options = {  
		  year: 'numeric',
		  month: 'long',
		  day: 'numeric',
		  weekday: 'long',
		  timezone: 'UTC',
		  hour: 'numeric',
		  minute: 'numeric',
		  second: 'numeric'
      };
setInterval(function(){
	var d = new Date();
  //Поменяем первую прописную букву на заглавную
	var now =  d.toLocaleString("ru", options); 
 let neNow = now[0].toUpperCase() + now.slice(1);
   document.getElementById('dat').innerHTML = neNow;
},1000);
</script>

Можно создать несколько вариантов объектов options1, options2 и т.д., в которых можно менять порядок и количество элементов и их значения.

Найти минимальное и максимальное значение в линейном массиве

Используя цикл for можно перебором найти наименьшее и наибольшее значение в массиве:

let arr = [1,2,5,100,2,9,8,7,2,1,10,5,2,21,88];
 min = arr[0];
 max = min;
  for (i = 1; i < arr.length; ++i) {
      if (arr[i] > max) max = arr[i];
      if (arr[i] < min) min = arr[i];
  }
console.log(max);//100  
console.log(min); //1 

Конкатенация строк через шаблонизатор

Склеивание строк с использованием + раздражает. Вместо этого можно использовать шаблонизаторы:

var str = {
           1:'Джек',
           2:'Билл',
           3:'Иван',
           4:'Петя',
           5:'Осьмомысл'
          };
var str1 = {
            1:'Воробей',
            2:'Ган',
            3:'Иванов',
            4:'Петров',
            5:'Дваждыдум'
           };

var shablon = 'Привет, меня зовут {str}, моя фамилия - {str1}.';
let txt = shablon.replace('{str}', str[5]).replace('{str1}', str1[5]);
console.log(txt);//Привет, меня зовут Осьмомысл, моя фамилия - Дваждыдум.
            

Как используются эти и другие JavaScript-хаки можно посмотреть в коде «Приложение прогноз погоды с выбором города».

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 303

Популярные записи