Сокращения (независимо от того, на каком языке мы работаем) всегда помогают сделать ваш код короче, оптимизированным и намного чище. Здесь я хочу вспомнить некоторые полезные методы сокращенного кодирования в Javascript, которые наверняка вам очень помогут.

  1. Тернарный оператор

Мы можем использовать «условный тернарный оператор» вместо оператора if… else и использовать только одну строку кода:

// Longhand
let name = document.querySelector(‘input.name’).value,
    user;
if(name){
  user = name;
} else {
  name = "Anonymous"
}

// Shorthand
const user = name ? name : "Anonymous"

2. Null, Undefined или Empty

Вы можете проверить, является ли переменная нулевой, неопределенной или пустой, с помощью простого сокращения:

// Longhand
if(myVariable !== undefined || myVariable !== "" || myVariable !== null){
  ...
}
// Shorthand
if(myVariable){
  ...
}

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

Очень полезное сокращение, если вы используете какой-нибудь parseInt или parseFloat:

// Longhand
const quantity = parseInt("250")
const price = parseFloat("432.50")
// Shorthand
const quantity = +"250" // converts to int
const price = +"432.50" // converts to float

4. Значения параметров по умолчанию
Назначьте переменным значения по умолчанию:

// Longhand
function yourPet(name, age, type){
  if(type === undefined){
    type = ‘dog;
  }
  return `Your ${type} called ${name} has ${age} years old`
}
// Shorthand
yourPet = (name, age, type = ‘dog’) => (`Your ${type} called ${name} has ${age} years old`)

5. Назначение деструктуризации
Это очень полезный способ сократить код объектами:

const clientsAge = {
    peter : 18,
    claire: 25,
    john: 35,
    mathew: 40	
} 
// Longhand
let peter = clientsAge.peter,
    claire = clientsAge.claire,
    john = clientsAge.john,
    matthew = clientsAge.mathew;
// Shorthand
const { peter, claire, john, matthew } = clientsAge;

6. Объявление переменных
Очень похожее сокращение, как «деструктуризация объектов», но теперь для нескольких переменных:

// Longhand
let a = ‘hello’,
    b = 5,
    c;
// Shorthand
let a = ‘hello’, b = 5, c;

7. Для цикла
Другие способы использования цикла, но с меньшим количеством кода:

const clients = [“peter”, “claire”, “john”, “matthew”]
// Longhand
for ( let index = 0; index < clients.length; index ++ ) {
    console.log(clients[index]);
}
// Shorthand
for ( let client of clients ) {
    console.log(client);
}
for ( let index in clients ) {
    console.log(clients[index]);
}

8. Логический оператор короткого замыкания

// Longhand
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}
// Shorthand
const variable2 = variable1  || 'new';

Другой пример - логическое сокращение:

let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // true

variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // foo

9. Оператор распространения
Мне очень нравится этот способ объединения и клонирования массива. После этого я сделал concat () для объединения двух массивов и slice () для клонирования одного. Но сейчас. Меньше кода!

const clients = [ “peter”, “claire”, “john”, “matthew” ]
// Longhand
// Join arrays
const newClients = [“lola”, “marcos”, “daniel”, “pedro”].concat(clients);
// Clone arrays
const newClients = clients.slice();
// Shorthand
// Join arrays
const newClients = [“lola”, “marcos”, “daniel”, “pedro”, ...clients]
// Clone arrays
const newClients = [...clients]

10. Операторы присваивания
Эти операторы очень полезны для арифметических операций:

// Longhand
a = a + 1;
b = b - 1;
c = c * 50;
// Shorthand
a = a++;
b = b -;
c* = 50;

Но у нас есть еще! Посмотрите эти примеры, думая, что a = 20 и b = 10

a += b // Result a = 30
a -= b // Result a = 10
a *= b // Result a = 200
a /= b // Result a = 2
a %= b // Result a = 0

11. Показатели с десятичным основанием
Это сокращение - способ записывать числа без нулей. Например, 1e5 означает, что за 1 следует 5 нулей (100,000).

// Longhand
for (let index = 0; index < 10000000; index++)
// Shorthand
for (let index = 0; index < 1e7; index++)

12. Object.entries ()
Честно говоря, я выучил это сокращение несколько дней назад и считаю очень важным добавить его в эту статью. Это сокращение, введенное в ES8, позволяет преобразовать буквальный объект в массив пары ключ / значение:

const clients = { client1: ‘Theo’, client2: ‘Vincent’, client3: ‘PK’, client4: ‘Edrei’ };
const arrayClients = Object.entries(clients);
// Result:
[
  [ ‘client1’, ‘Theo’ ],
  [ ‘client2’, ‘Vincent’ ],
  [ ‘client3’, ‘PK’ ],
  [ ‘client4’, ‘Edrei’ ],
]

13. Object.values ​​()
Это сокращение очень похоже на Object.entries (), но без ключа. Это также было введено в ES8.

const clients = { client1: ‘Theo’, client2: ‘Vincent’, client3: ‘PK’, client4: ‘Edrei’ };
const arrayClients = Object.entries(clients);
// Result:
[ ‘Theo’, ‘Vincent’, ‘PK’, ‘Edrei’ ]

14. && (и) короткое замыкание
С помощью этого сокращения можно получить необычный код. Если вы вызываете функцию, только если переменная истинна, вы можете использовать:

// Longhand
if (isClient) {
  sendNewsletter();
}
// Shorthand
isClient && sendNewsletter();

15. ~~ (двойной, а не побитовый оператор)
Это сокращение заменяет метод Math.floor ():

// Longhand
const size = Math.floor(10.25); // Result 10
// Shorthand
const size = ~~10.25; // 10

16. Найти максимальное / минимальное число в массиве
Мы можем использовать цикл, чтобы найти максимальное и минимальное значение в массиве, но вы также можете использовать Math.max () и Math.min () и удалите несколько строк кода:

const arrayNumbers = [ 1, 50, 28, 32 ];
// Longhand (one way to resolve that)
function findMaxMin(array, maxmin) {
  if (maxmin === "maximum") {
	var max = array[0];
	for (var i = 1; i < array.length; i++) {
		if (array[i] > max) {
			max = array[i];
		}
	}
	return max;
  }
  else if (maxmin === "minimum") {
	var min = array[0];
	for (var j = 1; j < array.length; j++) {
		if (array[j] < array[j-1]) {
			min = array[j];
		}
	}
	return min;
  }
}
            
console.log(findMaxMin(arrayNumbers, "maximum")); // 50
console.log(findMaxMin(arrayNumbers, "minimum")); // 1
// Shorthand
Math.max.apply( Math, arrayNumbers ); // 50
Math.min.apply( Math, arrayNumbers ); // 1

Но, как мы видели, мы можем добавить оператор распространения и создать новое сокращение:

// Shorthand
Math.max(...arrayNumbers); // 50
Math.min(...arrayNumbers); // 1

Надеюсь, вы научились сокращать!