20 сокращений JavaScript, которые сэкономят ваше время

Question

20 сокращений JavaScript, которые сэкономят ваше время

В любом языке программирования сокращения помогают написать более чистый и оптимизированный код и выполнить задачи, использовав кротчайший синтаксис. Разберём способы сокращения в JavaScript.

1. Объявление переменных

// Обычная запись

let x; 

let y = 20;



// Короткая запись 

let x, y = 20;

2. Множественное объявление переменных

Мы можем присвоить значение нескольким переменным, записав их в одну строчку с помощью деструктуризации массива.

// Обычная запись

let a, b, c; 

a = 5; 

b = 8; 

c = 12;



// Короткая запись 

let [a, b, c] = [5, 8, 12];

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

С помощью тернарного (условного) оператора можно сэкономить 5 строк в коде.

// Обычная запись

let marks = 26; 

let result; 

if (marks >= 30){

    result = 'Pass'; 

}

else{ 

    result = 'Fail'; 

}



// Короткая запись 

let result = marks >= 30 ? 'Pass' : 'Fail';

4. Присваивание значения по умолчанию

Используя оценку короткого замыкания OR(||), можно задать переменной значение по умолчанию в случае, когда ожидаемое значение — false.

// Обычная запись

let imagePath; 

let path = getImagePath(); 

if (path !== null && path !== undefined && path !== ''){ 

    imagePath = path; 

}

else{ 

    imagePath = 'default.jpg'; 

} 



// Короткая запись 

let imagePath = getImagePath() || 'default.jpg';

5. Оценка короткого замыкания `AND(&&)`

Если функция вызывается только с переменной со значением true, то можно применить оценку короткого замыкания AND(&&) как альтернативный вариант.

// Обычная запись

if (isLoggedin){

    goToHomepage(); 

}



// Короткая запись 

isLoggedin && goToHomepage();

При отрисовке компонентов по условию в React использовать оценку короткого замыкания AND(&&) еще удобнее. Например:

<div> { this.state.isLoading && <Loading /> } </div>

6. Смена значения двух переменных

Чтобы поменять значение двух переменных, мы зачастую задействуем третью переменную. Однако это можно сделать, используя деструктуризацию массива.

let x = 'Hello', y = 55; 



// Обычная запись 

const temp = x; 

x = y; 

y = temp; 



// Короткая запись 

[x, y] = [y, x];

7. Стрелочные функции

// Обычная запись 

function add(num1, num2){ 

    return num1 + num2; 

} 

// Короткая запись 

const add = (num1, num2) => num1 + num2;

Здесь можно найти более подробную информацию о стрелочных функциях.

8. Шаблонные литералы

Обычно мы используем оператор плюс +, чтобы объединять строки с переменными. Однако с помощью шаблонных литералов ES6 это можно сделать гораздо проще.

// Обычная запись

console.log('You got a missed call from ' + number + ' at ' + time);



// Короткая запись

console.log(`You got a missed call from ${number} at ${time}`);

9. Многострочная строка (String)

Как правило, для многострочной записи мы применяем оператор плюс + вместе с символом перехода на новую строку . Но еще проще будет — использовать обратные кавычки `.

// Обычная запись 

console.log('JavaScript, often abbreviated as JS, is a
' +             'programming language that conforms to the 
' + 

'ECMAScript specification. JavaScript is high-level,
' + 

'often just-in-time compiled, and multi-paradigm.');



// Короткая запись

console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

10. Проверка нескольких условий

Для сопоставления нескольких условий можно записать их все в массив и использовать метод indexOf() или includes().

// Обычная запись

if(value === 1 || value === 'one' || value === 2 || value === 'two'){ 

     // выполнить код

} 

// Короткая запись №1

if([1, 'one', 2, 'two'].indexOf(value) >= 0){ 

    // выполнить код

}

// Короткая запись №2

if([1, 'one', 2, 'two'].includes(value)){ 

    // выполнить код 

}

11. Присвоение значения свойству объекта

Если имя переменной и ключа объекта схожи, то можно указать лишь имя переменной в объектных литералах вместо ключа и значения. JavaScript автоматически выдает ключ и значение такими же, как и в переменной.

let firstname = 'Amitav'; 

let lastname = 'Mishra'; 



// Обычная запись

let obj = {firstname: firstname, lastname: lastname};



// Короткая запись

let obj = {firstname, lastname};

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

Для преобразования строки в число существуют такие методы, как parseInt и parseFloat. Однако для этого можно также использовать унарный оператор +, поставив его перед значением строки.

// Обычная запись 

let total = parseInt('453'); 

let average = parseFloat('42.6');



// Короткая запись

let total = +'453'; 

let average = +'42.6';

13. Многократное повторение строки

Если вам нужно повторить строку определённое количество раз, можно применить цикл for. Но с помощью метода repeat() можно сделать это в одну строку.

// Обычная запись

let str = ''; 

for(let i = 0; i < 5; i ++){ 

    str += 'Hello '; 

} 

console.log(str); // Привет Привет Привет Привет Привет



// Короткая запись

'Hello '.repeat(5);

Совет: Хотите попросить у кого-нибудь прощение, написав «извини» 100 раз? Попробуйте метод repeat(). А если вам нужно, чтобы каждый повтор был на новой строке, добавьте к строке.

‘sorry
’.repeat(100);

14. Возведение в степень

Чтобы найти степень какого-либо числа, можно применить метод Math.pow(). Или использовать синтаксис покороче, применив двойные звездочки **.

// Обычная запись 

const power = Math.pow(4, 3); // 64



// Короткая запись 

const power = 4**3; // 64

15. Двойное побитовое отрицание (~~)

С помощью двойного побитового отрицания можно заменить метод Math.floor().

// Обычная запись

const floor = Math.floor(6.8); // 6



// Короткая запись

const floor = ~~6.8; // 6

Примечание: Способ двойного побитового отрицания (NOT) работает только для 32-битных целых чисел, т.е. до (2**31)-1 = 2147483647. Поэтому для любого числа больше 2147483647, этот оператор будет выдавать неверные результаты. В таких случаях лучше использовать Math.floor().

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

Можно применить цикл for для перебора каждого значения массива и найти максимальное или минимальное значение. Или же использовать метод Array.reduce() и найти эти числа в массиве.

Но можно сделать это в одну строчку с помощью оператора расширения.

// Короткая запись

const arr = [2, 8, 15, 4]; 

Math.max(...arr); // 15 

Math.min(...arr); // 2

17. Цикл for

Обычно для перебора массива используется традиционный цикл for. Для выполнения итерации по массивам можно воспользоваться циклом for…of. А для того, чтобы найти индекс каждого значения, применяется for…in.

let arr = [10, 20, 30, 40]; 



// Обычная запись

for(let i = 0; i < arr.length; i++){ 

    console.log(arr[i]); 

}



// Короткая запись

// цикл for of 

for(const val of arr){ 

    console.log(val); 

}



// Цикл for in

for(const index in arr){ 

    console.log(arr[index]); 

}

Также цикл for…in можно использовать для перебора свойства объекта.

let obj = {x: 20, y: 50}; 

for(const key in obj){ 

    console.log(obj[key]); 

}

18. Объединение массивов

let arr1 = [20, 30]; 



// Обычная запись 

let arr2 = arr1.concat([60, 80]); 

// [20, 30, 60, 80]



// Короткая запись

let arr2 = [...arr1, 60, 80]; 

// [20, 30, 60, 80]

19. Глубокое копирование объектов

Для глубокого копирования объектов можно совершить итерацию по каждому свойству и проверить, содержит ли текущее свойство какой-либо объект. Если да, то выполняется рекурсивный вызов той же самой функции, пропуская значение текущего свойства (т.е. вложенный объект).

Также при отсутствии функций, значений undefined, NaN или Date в объекте можно совершить глубокое копирование с помощью JSON.stringify() и JSON.parse().

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

let obj = {x: 20, y: {z: 30}}; 



// Обычная запись 

const makeDeepClone = (obj) => { 

    let newObject = {}; 

    Object.keys(obj).map(key => { 

        if(typeof obj[key] === 'object'){ 

            newObject[key] = makeDeepClone(obj[key]); 

        } 

        else{ 

            newObject[key] = obj[key]; 

        } 

    }); 

    return newObject; 

}



const cloneObj = makeDeepClone(obj); 



// Короткая запись 

const cloneObj = JSON.parse(JSON.stringify(obj));



// Короткая запись для одноуровневого объекта

let obj = {x: 20, y: 'hello'};

const cloneObj = {...obj};

Примечание: Это способ сокращения JSON.parse(JSON.stringify(obj)) не работает, если свойство объекта содержит функции, значения undefined, NaN или Date, потому что в таком случае они удаляются из объекта. Поэтому используйте этот способ, только когда объект содержит строки и числа.

20. Получение символов из строки

let str = 'jscurious.com'; 



// Обычная запись 

str.charAt(2); // c



// Короткая запись

str[2]; // c

Некоторые из этих приемов могут и не быть актуальными в проекте, но всегда хорошо знать дополнительные способы сокращения. Веселого кодирования!

676 0

полезное

javascript

Comments

Ничего не найдено.

20 сокращений JavaScript, которые сэкономят ваше время

1. Объявление переменных

2. Множественное объявление переменных

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

4. Присваивание значения по умолчанию

5. Оценка короткого замыкания AND(&&)

6. Смена значения двух переменных

7. Стрелочные функции

8. Шаблонные литералы

9. Многострочная строка (String)

10. Проверка нескольких условий

11. Присвоение значения свойству объекта

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

13. Многократное повторение строки

14. Возведение в степень

15. Двойное побитовое отрицание (~~)

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

17. Цикл for

18. Объединение массивов

19. Глубокое копирование объектов

20. Получение символов из строки

Comments

5. Оценка короткого замыкания `AND(&&)`