Как сократите код javascript

2. Облегчаем доступ к глубоким свойствам объекта

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

if(obj && obj.address && obj.address.postalCode)

Укоротим эту кучу кода с помощью оператора опциональной последовательности ?. (optional chaining).

console.log(obj?.address?.postalCode); 

Он делает то же самое, но гораздо элегантнее.

3. Убираем проверки на null, undefined и пустую строку

JavaScript имеет мощную систему преобразования типов, фактически он может преобразовать любой тип в любой другой. Если речь идет о логических проверках, то все значения можно разделить на falsy (лживые), которые преобразуются в false , и truthy (правдивые), которые преобразуются в true .

if (first !== null || first !== undefined || first !== '')

Благодаря этому механизму нет нужды проверять на null , undefined и пустую строку отдельно – каждое из этих значений falsy, то есть преобразуется в false .

Вместо этого можно просто воспользоваться оператором логического сложения || . Он вернет левое значение, если оно истинно, или правое в ином случае. Другими словами, правая часть выражения является значением по умолчанию.

4. Упрощаем конструкцию switch

Оператор switch очень напоминает пример №1, с большим количеством условий.

Однако здесь недостаточно проверки на равенство, нужно еще вернуть определенное значение. Поэтому вместо массива мы можем использовать объект (map).

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

5. Сокращаем однострочные функции

Некоторые функции содержат очень мало кода, но тем не менее из-за особенностей синтаксиса JavaScript занимают не меньше трех строчек.

Стрелочные функции позволяют ужать их до одной строки:

const doubleOf = (value) => 2 * value 

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

6. Выбираем функцию для выполнения

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

function area() < console.log('area'); >function volume() < console.log('volume'); >if(type === 'square') < area(); >else

Вместо конструкции if вы можете смело использовать тернарный оператор:

(type === 'square' ? area : volume)() 

Важно: этот трюк не сработает, если вы вызываете методы объекта, которые работают с ключевым словом this . После выполнения выражения внутри круглых скобок (выбор нужного метода) контекст вызова будет потерян и this перестанет ссылаться на нужный объект.

7. Устанавливаем дефолтное значение переменной

Иногда мы принципиально не хотим, чтобы переменная оставалось неинициализированной или содержала значение null .

if(amount === null) < amount = 0; >if(value === undefined) < value = 0; >console.log(amount); //0 console.log(value); //0 

Для такой проверки так же отлично подойдет оператор логического сложения ( || ).

console.log(amount || 0); //0 console.log(value || 0); //0 

Если левая часть выражения является falsy-значением и приводится к false , оператор ИЛИ вернет правую (дефолтную) часть.

8. Избавляемся от конструкции if-else

Конструкция if-else привычна и всем знакома.

Если логика, которую она реализует, не является очень сложной, мы можем без проблем заменить if-else на более краткий и читабельный тернарный оператор.

const value = num > 0 ? 'positive' : 'negative'; 

9. Меняем взгляд на перебор элементов массива

Императивный цикл for появился на заре программирования и долгое время адекватной замены ему не было.

const arr = [11, 22, 33]; for(let i=0; i

Но сейчас мы можем перебирать массивы в более дружественном декларативном стиле, используя встроенный методы Array.prototype.forEach.

const arr = [11, 22, 33]; arr.forEach((val) => console.log(val)); 

Важно: метод forEach не дает возможности прервать цикл перебора, не дожидаясь его окончания. Но для этого вы можете воспользоваться методом Array.prototype.some.

10. Преобразуем строку в число

Распространенная задача разработки – преобразование строковых значений в числовые.

const num1 = parseInt("100"); const num2 = parseFloat("11.11"); 

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

const num1 = +"100"; const num2 = +"11.11"; 

Мы подобрали 10 must-have сокращений JavaScript. Если вы еще не используете их в своем коде, самое время начать.

Однако помните, что сокращение ради сокращения – это большая ошибка. Между ясностью и краткостью всегда выбирайте ясность!

Источники

Источник

Сокращение кода в JavaScript — 7 приёмов

Компактный формат записи JavaScript кода не только сокращает его объём, но и приводит к более быстрой загрузке страниц. Это один из простейших методов оптимизации кода и профессиональные программисты используют его при любой возможности. Рассмотрим самые интересные и частоприменяемые сокращения.

Числа с большим количество нулей

Если вы регулярно работаете с большими десятичными числами то это сокращение может стать для Вас находкой. Больше не нужно набирать все нули, просто замените их на электронную нотацию. Например, «1e8» означает добавление восьми нулей после цифры «1» и равняется 100000000.

Число после буквы «e» указывает количество нулей, которые идут после цифр до «e». Аналогично, «16e4» является сокращением числа 160000.

/* короткая запись */ var myVar = 1e8; /* обычная запись */ var myVar = 100000000;

Увеличение и уменьшение значения переменной

Сокращенный формат записи увеличения числа на единицу состоит в добавлении после переменной двух знаков «+». Аналогично, уменьшение на единицу состоит из двух знаков «-». Операция используется только для числовых типов данных. Они имеют незаменимую роль в циклах, наиболее часто используются в цикле «for».

/* короткая запись */ i++; j--; /* обычная запись */ i=i+1; j=j-1;

Сложение, вычитание, умножение и деление

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

/* короткая запись */ i+=5; j-=3; k*=10; l/=2; /* обычная запись */ i=i+5; j=j-3; k=k*10; l=l/2;

Использование условного оператора

• условие;
• что произойдет, если условие истинно (true);
• что произойдет, если условие ложно (false).

var age = 17; /* короткая запись */ var message = age >= 18 ? «Разрешено» : «Запрещено»; /* обычная запись */ if( age >= 18) < var message = "Разрешено"; >else

Проверка существования переменной

Часто нужно проверить существует переменная или нет. Оператор «if» помогает сделать это в одну строку. Условие «if (myVar)» не просто проверяет, является значение переменной «false» или нет, но и делает другие проверки. А именно, переменная не может быть равна «undefined», «empty», «null», и «false».

var myVar = 99; /* короткая запись */ if( myVar ) < console.log("Переменная myVar объявлена, не пуста и не равна false."); >/* обычная запись */ if( typeof myVar !== «undefined» && myVar !== «» && myVar !== null && myVar !== 0 && myVar !== false )

Использование шаблонов

Этот способ позволит избежать использование «+» для объединения нескольких переменных в строке. Все что нужно сделать, это использовать обратные кавычки, а переменные обернуть в конструкцию «$<>».

var FirstName = 'Andrew', LastName = 'Simkin'; /* короткая запись */ constant welcome = `Добрый день $ $ !`; /* обычная запись */ constant welcome = 'Добрый день' + FirstName + ' ' + LastName + '!';

Многострочные переменные

А вот как используют обратные кавычки для написания компактного значения многострочной переменной.

/* короткая запись */ constant poem = `Маленький хакер лазал в сети, Бабки халявные жаждал найти. Грязный барак, номерок на спине: Нет жизни хакерам в нашей стране.`; /* обычная запись */ constant poem = 'Маленький хакер лазал в сети,\n\t' + 'Бабки халявные жаждал найти.\n\t' + 'Грязный барак, номерок на спине:\n\t' + 'Нет жизни хакерам в нашей стране.';

Источник

Как сократить JS код

Подскажите, пожалуйста, как можно сократить приведенный ниже JS код. В примере 2 инпута, а если их будет 20, то такой способ записи очень большой.

document.getElementById("shirina").onblur = function() < if (shirina.value < 10) < error1(); document.getElementById("shirina").value = "10"; >else if (shirina.value > 24) < document.getElementById("shirina").value = "24"; error1(); >> document.getElementById("dlina").onblur = function() < if (dlina.value < 5) < error2(); document.getElementById("dlina").value = "5"; >else if (dlina.value > 7) < document.getElementById("dlina").value = "7"; error2(); >> function error1() < let p1 = document.createElement('p'); p1.className = "erorr-m"; p1.innerHTML = "Значение от 10 до 24"; shirina.after(p1); setTimeout(function() < p1.remove(); >, 3000); > function error2() < let p2 = document.createElement('p'); p2.className = "erorr-m"; p2.innerHTML = "Значение от 5 до 7"; dlina.after(p2); setTimeout(function() < p2.remove(); >, 3000); >

3 ответа 3

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

d = < "shirina": < "min": 10, "max": 24 >, "dlina": < "min": 5, "max": 7 >> Object.keys(d).forEach(k => < document.getElementById(k).onblur = function() < if (this.value < d[k]["min"]) < this.value = d[k]["min"] error(this, k); >if (this.value > d[k]["max"]) < this.value = d[k]["max"] error(this, k); >> >) function error(el, k) < let p1 = document.createElement('p'); p1.className = "erorr-m"; p1.innerHTML = `Значение от $до $`; el.after(p1); setTimeout(function() < p1.remove(); >, 3000); >

Можно выбрать все input -ы и назначить каждому слушателя:

const inputs = document.querySelectorAll('div.div input[type="number"]'); inputs.forEach(input => < input.addEventListener('blur', () => < const value = +input.value; const [min, max] = [+input.min, +input.max]; if (!(value < min || value >max)) return; input.value = Math.max(min, Math.min(value, max)); showRangeError(input); >) >) function showRangeError(input) < const error = document.createElement('p'); error.className = "erorr-m"; error.innerHTML = `Значение от $до $`; input.after(error); setTimeout(() => error.remove(), 3000); >

А можно навесить один слушатель на весь div деленирование событий. Но слушать будем не blur , а change :

const inputsDiv = document.querySelector('div.div'); inputsDiv.addEventListener('change', (e) => < const input = e.target; if (input.type !== "number") return; const value = +input.value; const [min, max] = [+input.min, +input.max]; if (!(value < min || value >max)) return; input.value = Math.max(min, Math.min(value, max)); showRangeError(input); >) function showRangeError(input) < const error = document.createElement('p'); error.className = "erorr-m"; error.innerHTML = `Значение от $до $`; input.after(error); setTimeout(() => error.remove(), 3000); >

Источник

vladilenm / 18 способов сократить JS код.js

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

// 1

const num = 42

// let result

//

// if (num > 20)

// result = ‘More than 20’

// > else

// result = ‘Less than 20’

// >

const result = num > 20 ? ‘More than 20’ : ‘Less than 20’

// 2

let variable = ‘variable’ // undefined

let variable2

// if (variable)

// variable2 = variable

// > else

// variable2 = ‘some value’

// >

variable2 = variable || ‘some value’

// console.log(variable2)

// 3

// let x

// let y

// let z = 42

// let x, y, z = 42

// 4

let isSame = true

if ( isSame === true )

if ( isSame )

if ( isSame !== true )

if ( ! isSame )

// 5

const names = [ ‘Igor’ , ‘Elena’ , ‘Olga’ ]

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

// names[i]

>

for ( let name of names )

for ( let index in names )

function logArrayItems ( el , index , array )

console . log ( `names[ $ < index >] = $ < el >` )

>

// names.forEach(logArrayItems)

// 6

// let port

// if (process.env.PORT)

// port = process.env.PORT

// > else

// port = 4200

// >

const port = process . env . PORT || 4200

// 7

// for (let i = 0; i

// for (let i = 0; i

// 8

const a = 1 , b = 2

const myObj =

// 9

// setTimeout(function()

// console.log(‘After 2 seconds’)

// >, 2000)

//

// function tripple(num)

// return num * 3

// >

// setTimeout(() => console.log(‘After 2 seconds’), 2000)

// const tripple = num => num * 3

// 10

// function rgb(r, g, b)

// if (r === undefined)

// r = 0

// >

//

// if (g === undefined)

// g = 255

// >

//

// return `rgb($, $, $)`

// >

const rgb = ( r = 0 , g = 255 , b ) => `rgb( $ < r >, $ < g >, $ < b >)`

// 11

// function createUrl(base, domain)

// return ‘http://’ + base + ‘.’ + domain

// >

function createUrl ( base , domain )

return `http:// $ < base >. $ < domain >`

>

// 12

// const alert = window.alert

// const confirm = window.confirm

// const prompt = window.prompt

// const = window

// 13

const arr = [ 1 , 2 , 3 ]

// const nums = [4, 5, 6].concat(arr)

// const cloned = nums.concat()

const nums = [ 4 , . arr , 5 , 6 ]

const cloned = [ . nums ]

// console.log(nums)

// 14

// console.log(Math.floor(9.7) === 9)

// console.log(~~9.7 === 9)

// 15

// console.log(Math.pow(2, 3))

// console.log(Math.pow(2, 4))

// console.log(Math.pow(4, 3))

//

// console.log(2 ** 3)

// console.log(2 ** 4)

// console.log(4 ** 3)

// 16

// const int = parseInt(’42’)

// const float = parseFloat(‘42.42’)

const int = + ’42’

const float = + ‘42.42’

// console.log(typeof int, typeof float)

// 17

if ( [ 1 , 2 , 3 ] . indexOf ( 3 ) > — 1 )

if ( ~ [ 1 , 2 , 3 ] . indexOf ( 3 ) ) < >// найдено

if ( ! ~ [ 1 , 2 , 3 ] . indexOf ( 3 ) ) < >// не найдено

if ( [ 1 , 2 , 3 ] . includes ( 3 ) )

// 18

const car =

model : ‘Ford’ ,

year : 2019 ,

color : ‘red’

>

console . log ( Object . entries ( car ) )

console . log ( Object . values ( car ) )

console . log ( Object . keys ( car ) )

Источник