16 лучших приемов Javascript для каждого веб-разработчика

Эти крутые трюки могут сделать ваш код чистым, оптимизированным и эффективным.

В этой статье будут рассмотрены 16 трюков с javascript, которые каждый веб-разработчик может попробовать сделать свой код чистым, оптимизированным и эффективным.

0. Используйте строку шаблона вместо конкатенации строк.

Использование оператора «+» для объединения частей строки может быть очень неприятным, когда у нас есть большая строка с некоторыми динамическими переменными. Это тоже немного старомодно. Вот пример объединения строки с оператором «+».

let name = 'Pranjal';
let city = 'Pilibhit';
let primeCheck = bit => {
  return (bit === 'P' ? 'Prime' : 'Non-Prime');
}

// string concatenation using + operator
let messageConcat = 'Mr. ' + name + ' is from ' + city + '. He is a' + ' ' + primeCheck('P') + ' member.'
console.log(messageConcat);

Лучше использовать строки шаблона. Строки шаблона используют заполнитель для динамических значений. Они отмечены знаком доллара и фигурными скобками ${expression}.

Вот пример строки шаблона:

let name = 'Pranjal';
let city = 'Pilibhit';
let primeCheck = bit => {
  return (bit === 'P' ? 'Prime' : 'Non-Prime');
}

// using template string
let messageTemplateStr = `Mr. ${name} is from ${city}. He is a ${primeCheck('P')} member.`
console.log(messageTemplateStr);

1. Использование isInteger

Нам часто нужно проверить, является ли какое-либо значение строкой или числом. В Javascript есть функция с именем isInteger, которая предоставляется под номером API. isInteger функция может проверять, является ли какой-либо объект строкой числа.

Вот пример использования isInteger.

let numcheck = 1569;
let strNum= "1569";

console.log(`${numcheck} is a number?`, Number.isInteger(numcheck));
console.log(`${strNum} is a number?`, Number.isInteger(strNum));

Выход

1569 is a number? true
1569 is a number? false

2. Использование сокращений с AND

Допустим, мы хотим запустить любую функцию, если выполняется какое-либо условие. Обычно мы используем условие if, чтобы проверить, выполняется ли условие, и на основании этого принимаем определенные решения.

Более эффективный способ - использовать сокращение с помощью оператора AND (&&). Вот как вы можете использовать то же самое.

let isPrime = true;
const startWatching = () => {
    console.log('Started Watching!');
}
isPrime && startWatching();

Сначала он проверит, возвращает ли isPrime истину, и на основании этого вызовет startWatching() функцию .

3. Объединение нескольких объектов

Нам часто требуется объединить несколько объектов в зависимости от требований. В Javascript есть оператор, состоящий из трех точек …. Используя эти три точки, мы можем объединить любое количество объектов. Вот как это можно использовать.

let emp = {
 'id': 'EP01',
 'name': 'Pranjal',
 'age': 24,
 'addr': 'India'
};

let job = {
 'title': 'Data Scientist',
  'location': 'India'
};

Теперь давайте объединим эти два объекта.

// Using spread operator
let merged = {...emp, ...job};
console.log('Final merged', merged);

4. Поменять местами переменные.

Используя концепцию разрушения, мы можем поменять местами две переменные одной строкой кода. Вот как это сделать.

let fire = '🔥';
let fruit = '🍉';

[fruit, fire] = [fire, fruit];
console.log(fire, fruit);

5. Пишите более короткие циклы с помощью методов массива.

Допустим, мы хотим преобразовать каждый элемент нашего массива в число с плавающей запятой. Один из способов - зациклить его и преобразовать каждый элемент массива в число с плавающей запятой. Более эффективный способ - использовать метод map в javascript.

Вот как это сделать.

const prices = ['1.0', '2.15'];
const formattedPrices = prices.map(price => parseFloat(price));
console.log(formattedPrices)

6. Проверьте, есть ли у объекта значения.

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

Допустим, у нас есть объект с именем «obj4», и мы хотим знать, пуст он или нет. В Javascript есть функция с именем Object.keys(), с помощью которой мы можем проверить, есть ли у объекта элемент или нет. Вот как это сделать.

Object.keys(obj4).length

7. isArray функция

Это очень полезно, когда нам нужно проверить, является ли ввод строкой или массивом. Это можно проверить с помощью функции isArray в javascript.

Вот как это сделать.

let emoji_list = ['🌀', '⏲️', '🏆', '🛑'];
console.log(Array.isArray(emoji_list));

8. Присвоение значений нескольким переменным.

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

let var1, var2, var3;
var1 = 1;
var2 = 2;
var3 = 3;

Другой эффективный способ сделать то же самое - товарищи.

let [var1, var2, var3] = [1, 2, 3];

9. Использование функции стрелки

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

function add(a, b) { 
   return a + b; 
}

И, если мы используем функцию стрелки, мы можем сделать это в одной строке кода, как показано ниже.

const add = (a, b) => a + b;

10. Повторите объект несколько раз.

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

Вот старый способ повторить объект.

let test = 'Pranjal '; 
for(let i = 0; i < 5; i ++) { 
  test += 'Pranjal '; 
}
console.log(test);

И вот как мы можем использовать функцию повтора.

let test = 'Pranjal ';
test=test.repeat(5);
console.log(test);

11. Переключитесь на сокращение

Старый способ использования условия переключения - очень утомительный процесс, если количество условий увеличивается. Вот как мы это делали раньше.

switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

И вот новый быстрый способ выполнить ту же задачу.

var data = {
  1: test1,
  2: test2,
  3: test
};

data[something] && data[something]();

12. Нахождение максимального и минимального числа в массиве

Javascript предоставляет метод, использующий объект Math, который может помочь нам найти минимальный и максимальный элемент в массиве с помощью оператора распространения …. Следуйте приведенному ниже коду, чтобы добиться того же.

const numbers = [1, 2, 3];
console.log(Math.max(...numbers));
console.log(Math.min(...numbers));

13. Получите случайное число из определенного диапазона.

Математический объект в javascript может помочь нам в решении той же задачи. Следуйте приведенному ниже фрагменту кода.

let anyNumRange=500;
let v1= Math.floor(Math.random()*anyNumRange);
console.log(v1);

14. Добавить массив в другой массив

Обычно нам нужно объединить элементы двух массивов. Посмотрим, как это сделать с помощью javascript.

var array1 = [12 , "Pranjal" , {name "Joe"} , -569];

var array2 = [555 , 100, "Saxena", 4];
Array.prototype.push.apply(array1, array2);
console.log(array1)

15. Очистите массив.

Допустим, мы хотим очистить все элементы массива. Мы можем сделать это в javascript, установив его длину равной нулю.

var myArray = [12 , 222 , 1000 ]; 
console.log(myArray) 
myArray.length = 0;
console.log(myArray)

Заключение

Это все для этой статьи. Мы обсудили 16 уловок javascript, которые может использовать каждый веб-разработчик, чтобы сделать свой код чистым, оптимизированным и эффективным.

Надеюсь, статья вам понравилась. Спасибо, что прочитали!