Сокращения (независимо от того, на каком языке мы работаем) всегда помогают сделать ваш код короче, оптимизированным и намного чище. Здесь я хочу вспомнить некоторые полезные методы сокращенного кодирования в Javascript, которые наверняка вам очень помогут.
- Тернарный оператор
Мы можем использовать «условный тернарный оператор» вместо оператора 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. Логический оператор короткого замыкания
// Longhandif (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; }
// Shorthandconst 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
Надеюсь, вы научились сокращать!