Javascript очень крут с точки зрения свободы стиля программирования. Это может быть плохо, поскольку позволяет разработчикам создавать очень хакерский и трудный для чтения код.
С другой стороны, опытный разработчик знает, как выполнять свои задачи с минимальным количеством строк кода.
В этом посте я перечислю 10 наиболее эффективных трюков, концепций и методов Javascript, которые позволят вам писать меньше кода для достижения тех же результатов.
Наслаждаться! 😁
1. Стрелочные функции
Первый прием Javascript в этом списке — стрелочные функции.
Стрелочные функции были представлены в ES6 и представляют собой классную возможность избавиться от ключевого слова function.
Давайте посмотрим на обычную функцию JavaScript старой школы.
function simpleFunction() {
return 'hello'
}
А теперь давайте сравним это со стрелочной функцией, которая делает то же самое.
const simpleFunction = () => 'hello'
Как видите, с помощью стрелочных функций можно сэкономить много ненужных строк кода.
2. Условный оператор
Условный оператор — это полезный трюк javascript, который можно использовать, чтобы избежать операторов if.
Многие (вложенные) операторы if считаются плохой практикой и ухудшают читабельность вашего кода. Помните, что хорошая читабельность экономит ваше время и деньги.
Давайте посмотрим на пример.
result = isNumber ? 2 : 'Hello';
А теперь давайте посмотрим, как можно написать тот же код с операторами if.
if(isNumber) {
result = 2;
}else {
result = 'Hello';
}
3. Оператор спреда
Это моя любимая функция версии Javascript для ES6. Это также один из самых крутых трюков с Javascript.
Он называется оператором распространения и может быть удобен для самых разных целей.
Например, для копирования массивов.
const array = [1, 2, 3]; const copy = [...array];
Без оператора распространения это можно было бы сделать так. На мой взгляд, спред-решение намного красивее!
const array = [1, 2, 3]; const copy1 = [].concat(array); const copy2 = Array.from(array);
Как вы могли видеть в этом примере с массивом, мы не будем сохранять строки. Но мы получим более эстетичный код.
Но есть и другой, гораздо более крутой вариант использования операторов распространения: назначение объектам!
const foo = { message: 'hello', value: 2 };
const fooBye = {...foo, message: 'bye' };
В этом примере создается копия объекта foo и даже присваивается новое значение свойству «msg», перезаписывая ранее скопированное.
И все это в одной строке без использования Object.assign().
4. Деструктурирование объектов
Взгляните на этот объект.
const foo = {
test: {
veryVeryLongKey: {
value1: 1;
value2: 2;
}
}
}
Представьте, что мы хотим получить доступ к value1 и value2 несколько раз в одной и той же области.
Это будет выглядеть как беспорядок:
const calculation = (foo.test.veryVeryLongKey.value1 + foo.test.veryVeryLongKey.valu2) * foo.test.veryVeryLongKey.value2;
Далее мы будем использовать деструктуризацию объекта, чтобы немного очистить это:
const { value1 , value2 } = foo.test.veryVeryLongKey;
const calculation = (value1 + value2) * value2;
Опять же, мы не сохраняем ни одной строки, но резко повышаем читаемость кода. Что опять же экономит ваше время и деньги.
5. Асинхронный / Ожидание
С относительно новыми ключевыми словами async и await вы можете избавиться от традиционного синтаксиса промисов для асинхронного кода.
Давайте сначала определим обещание, которое будет использоваться в обоих следующих примерах.
const promise = new Promise((resolve, reject) => {
// Wait for 1 second and then resolve the promise
setTimeout(() => resolve('hello'), 1000);
if(somethingHappened){
reject('Something went wrong!');
}
})
Теперь мы определили обещание, которое будет ждать 1 секунду и выполнять обещание. Если что-то пойдет не так в течение этого периода, оно будет отклонено.
Давайте посмотрим, как бы мы справились с этим обещанием традиционным способом.
function printHelloAsync() {
promise.then((success) => {
console.log(success);
}).catch((error) => {
console.log(error);
});
}
Как видите, для традиционного пути нам потребовалось довольно много строк и вложенного кода.
Теперь давайте попробуем добиться того же результата, используя await.
function printHelloAsync() {
console.log(await promise);
}
6. Встроенные неопределенные проверки
Прежде чем вы сможете безопасно использовать свойства объекта, не рискуя досадными ошибками, вы должны проверить их на «неопределенность».
Вы можете обернуть код, который обращается к свойству, в оператор if, например:
const foo = {
message: undefined;
}
if(foo.message) {
console.log(foo.message);
}
Или вы можете добиться того же с помощью логического оператора и и выполнить встроенную проверку undefined:
foo.message && console.log(foo.message);
7. для в, для из
Стандартные циклы for и while — не единственные способы перебора коллекций.
Вот как выглядит обычный цикл for в Javascript.
// Regular for loop to iterate over an array
for(let i = 0; i<array.length; i++){
const item = array[i];
console.log('Item: ' + item);
}
// Regular for loop to iterate over the properties of an object
const keys = Object.keys(foo);
for(let i = 0; i < keys.length; i++){
const key = keys[i];
console.log('Key: ' + key);
}
Существуют также циклы for of и for in, которые являются очень полезными приемами javascript для различных случаев использования.
Позвольте мне быстро объяснить эти три разных цикла, прежде чем мы перейдем к примерам кода.
- for of — используется для перебора элементов массива.
- for in — используется для перебора ключей объекта.
Приведенный выше пример итерации массива можно легко заменить циклом for of.
for(let item of array){
console.log('Item: ' + item);
}
Для циклов избегайте использования индекса (который используется в обычных циклах). Это может помочь улучшить читаемость.
И теперь, наконец, я покажу вам цикл for in. Итерация по свойствам объекта с циклом for in может быть выполнена следующим образом:
for(let key in foo) {
console.log('Key: ' + key);
}
Таким образом, оба варианта цикла для in и for of очень полезны, чтобы избавить вас от ненужных проблем с индексами и улучшить читаемость вашего кода.
8. Один из очевидных приемов Javascript — использование функций
С помощью функций вы можете и определенно должны инкапсулировать общий код.
Представьте, что у вас есть один и тот же код, написанный в двух разных местах вашего проекта.
Это время, когда вы должны передать этот код в функцию, которую затем можно будет вызывать из любого места.
С хорошими привычками инкапсуляции вы можете значительно уменьшить количество повторяющегося кода в своих проектах.
9. Используйте параметры по умолчанию в функциях
Этот трюк с JS тоже очень очевиден. Параметры функции по умолчанию — отличный способ избежать уродливых проверок if в каждой вашей функции.
Позвольте мне продемонстрировать это. Сначала я покажу вам функцию без параметров по умолчанию.
function(a, b) {
if(!a){
a = 5;
}
if(!b){
b = 3;
}
console.log(a+b);
}
Большая часть кода этой функции только проверяет параметры.
Этого можно избежать с помощью параметров по умолчанию.
function(a=5, b=3){
console.log(a+b);
}
Очень полезно, не так ли? 😃
10. Не изобретайте велосипед
Это не особый трюк с javascript, поскольку он применим к разработке программного обеспечения в целом.
Есть большая вероятность, что какой-то другой разработчик уже решил вашу проблему и что на Github или NPM есть библиотека, которую вы можете свободно использовать в своем проекте.
При использовании сторонних библиотек вы можете сэкономить огромное количество времени на разработку.
Выбирать библиотеку следует очень осторожно, поскольку она может содержать ошибки или проблемы с безопасностью.
Следующие цифры могут быть хорошими индикаторами того, безопасно ли использовать стороннюю библиотеку:
- Звезды/загрузки за неделю — эти цифры показывают, насколько популярна библиотека.
- Проблемы/запросы на вытягивание. Эти цифры являются хорошим индикатором состояния разработки библиотеки. Чем выше, тем лучше. Большое количество проблем также может означать, что в нем много ошибок. с
