Техники сокращенного кодирования в JavaScript — Часть первая

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

В этой статье мы рассмотрим некоторые интересные приемы стенографии JavaScript. Мне нравится называть это «делать больше с меньшим количеством JavaScript».

В этой статье мы рассмотрим как длинную, так и сокращенную версии.

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

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

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

От руки

const age = 20;
let result;
if (age > 18) {
    result = "Can stay for the night concert";
} else {
    result = "Go home!";
}

Строка

result = (age > 18) ? "Can stay for the night concert" : "Go home!";

Если вы хотите вложить цикл if,

const result = a > 18 ? "Can stay for the night concert" : a < 5? "Babies are not allowed" : "Go home!";

Так как это выглядит круто, давайте перейдем к нашей следующей технике.

2. Оценка короткого замыкания

Оценка короткого замыкания — это условие, при котором используется логический оператор. Он определяет, должен ли оператор принимать возвращаемое значение раньше (короткое замыкание). Это позволяет предотвратить ненужное выполнение кода.

В JavaScript есть три логических оператора:

• Логическое И&&
• Логическое ИЛИ||
• Логично НЕ!

От руки

if (array1 !== null || array1 !== undefined || array1 !== '') {
     let array2 = array1;
}

Строка

const array2 = array1  || 'new';

Давайте посмотрим на другой классный пример

От руки

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

Строка

const dbHost = process.env.DB_HOST || 'localhost';

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

Переменные обычно объявляются в верхней части функций, что, кстати, является хорошей практикой.

От руки

let node = head;
let prev = head.next;
let last = prev.next;

сокращенно

let node= head, prev= head.next, last= prev.next;

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

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

От руки

function welcomeMessage (name) {
  console.log('Welcome', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 3000);
list.forEach(function(item) {
  console.log(item);
});

Строка

welcomeMessage = name => console.log('Welcome', name);
setTimeout(() => console.log('Loaded'), 3000);
list.forEach(item => console.log(item));

5. Сокращение неявного возврата

Возврат — это ключевое слово, которое мы часто используем для возврата конечного результата функции.

От руки

const func = () => { return 'something'; }

Стенография

const func = () => 'something';

6. Сокращение оператора распространения

Оператор спреда позволяет расширять итерируемый объект там, где есть ноль или более аргументов. Это работает для элементов массива, парключ-значение для объектов.

От руки

const array1 = [a, b, c, d];
const array2 = [w, x, y, z];
function(array1, array2) {    
     for (const value of array2) {        
         array1.push(value);      
     }
}

Строка

const array1 = [a, b, c, d];
const array2 = [w, x, y, z];
function(array1, array2) return [ ...array1, ...array2 ];

7. Для сокращения цикла

Цикл For позволяет вам и перебирать элементы, работающие с ними по одному за раз.

От руки

const cars = ['Audi', 'Hyundai', 'Honda'];
for (let i = 0; i < cars.length; i++){
...}

сокращенно

const cars = ['Audi', 'Hyundai', 'Honda'];
for(let car of cars){...}

Если бы мы хотели получить доступ к машине по определенному индексу, то это было бы так:

for (let index of cars){...}

8. Сокращение свойств объекта

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

От руки

const x = start, y = end;
const obj = { x:x, y:y };

Строка

const obj = { x, y };

9. Сокращение присвоения свойств объекта

Объединение двух переменных может быть немного сложным. Рассмотрим код ниже

let fname = { firstName : 'John' };
let lname = { lastName : 'Doe'}

Чтобы объединить эти два оператора, в Es6 была введена функция Object.assign, которая создает новый объект без изменения существующих объектов.

let full_names = Object.assign(fname, lname);

Вы также можете использовать нотацию уничтожения объекта, введенную в ES8:

let full_names = {...fname, ...lname};

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

10. Сокращение оператора побитового НЕ

Функция indexOf() используется для получения позиции искомого элемента при проверке существования значения в строке или массиве.

Если значение не найдено, возвращается значение -1. В JavaScript 0 считается «ложным», а числа больше или меньше 0 считаются «истинными».

От руки

const array = [0, 1, 2, 3, 4];
if (array.indexOf(3) > -1) {
     return 'exists';  
} 
else {
      return 'does not exist';
  }

стенография

const array = [0, 1, 2, 3, 4];
if (~array.indexOf(4)) // true

Побитовый (~) оператор вернет истинное значение для всего, кроме -1. Этот более простой синтаксис может быть достигнут Array.prototype.find и Array.prototype.includes

if (array.includes(3)) // true
if (array.find(val => val === 2)) //true

На этом завершается первая часть техник стенографии JavaScript.

Я надеюсь, что вы найдете эту статью очень полезной, и если да, поддержите меня! Также подписывайтесь на меня в Twitter, LinkedIn, Github, Facebook.

Я бы также попросил вас проверить микроверсию, чтобы получить опыт, который изменит вашу жизнь.

Удачного кодирования!

Техники сокращенного кодирования JavaScript — часть первая

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

В этой статье мы рассмотрим некоторые интересные приемы стенографии JavaScript. Мне нравится называть это «делать больше с меньшим количеством JavaScript».

В этой статье мы рассмотрим как длинную, так и сокращенную версии.

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

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

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

От руки

const age = 20;
let result;
if (age > 18) {
    result = "Can stay for the night concert";
} else {
    result = "Go home!";
}

Строка

result = (age > 18) ? "Can stay for the night concert" : "Go home!";

Если вы хотите вложить цикл if,

const result = a > 18 ? "Can stay for the night concert" : a < 5? "Babies are not allowed" : "Go home!";

Так как это выглядит круто, давайте перейдем к нашей следующей технике.

2. Оценка короткого замыкания

Оценка короткого замыкания — это условие, при котором используется логический оператор. Он определяет, должен ли оператор принимать возвращаемое значение раньше (короткое замыкание). Это позволяет предотвратить ненужное выполнение кода.

В JavaScript есть три логических оператора:

• Логическое И&&
• Логическое ИЛИ||
• Логично НЕ!

От руки

if (array1 !== null || array1 !== undefined || array1 !== '') {
     let array2 = array1;
}

Строка

const array2 = array1  || 'new';

Давайте посмотрим на другой классный пример

От руки

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

Строка

const dbHost = process.env.DB_HOST || 'localhost';

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

Переменные обычно объявляются в верхней части функций, что, кстати, является хорошей практикой.

От руки

let node = head;
let prev = head.next;
let last = prev.next;

сокращенно

let node= head, prev= head.next, last= prev.next;

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

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

От руки

function welcomeMessage (name) {
  console.log('Welcome', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 3000);
list.forEach(function(item) {
  console.log(item);
});

Строка

welcomeMessage = name => console.log('Welcome', name);
setTimeout(() => console.log('Loaded'), 3000);
list.forEach(item => console.log(item));

5. Сокращение неявного возврата

Возврат — это ключевое слово, которое мы часто используем для возврата конечного результата функции.

От руки

const func = () => { return 'something'; }

Стенография

const func = () => 'something';

6. Сокращение оператора распространения

Оператор спреда позволяет расширять итерируемый объект там, где есть ноль или более аргументов. Это работает для элементов массива, парключ-значение для объектов.

От руки

const array1 = [a, b, c, d];
const array2 = [w, x, y, z];
function(array1, array2) {    
     for (const value of array2) {        
         array1.push(value);      
     }
}

Строка

const array1 = [a, b, c, d];
const array2 = [w, x, y, z];
function(array1, array2) return [ ...array1, ...array2 ];

7. Для сокращения цикла

Цикл For позволяет вам и перебирать элементы, работающие с ними по одному за раз.

От руки

const cars = ['Audi', 'Hyundai', 'Honda'];
for (let i = 0; i < cars.length; i++){
...}

сокращенно

const cars = ['Audi', 'Hyundai', 'Honda'];
for(let car of cars){...}

Если бы мы хотели получить доступ к машине по определенному индексу, то это было бы так:

for (let index of cars){...}

8. Сокращение свойств объекта

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

От руки

const x = start, y = end;
const obj = { x:x, y:y };

Строка

const obj = { x, y };

9. Сокращение присвоения свойств объекта

Объединение двух переменных может быть немного сложным. Рассмотрим код ниже

let fname = { firstName : 'John' };
let lname = { lastName : 'Doe'}

Чтобы объединить эти два оператора, в Es6 была введена функция Object.assign, которая создает новый объект без изменения существующих объектов.

let full_names = Object.assign(fname, lname);

Вы также можете использовать нотацию уничтожения объекта, представленную в ES8:

let full_names = {...fname, ...lname};

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

10. Сокращение оператора побитового НЕ

Функция indexOf() используется для получения позиции искомого элемента при проверке существования значения в строке или массиве.

Если значение не найдено, возвращается значение -1. В JavaScript 0 считается «ложным», а числа больше или меньше 0 считаются «истинными».

От руки

const array = [0, 1, 2, 3, 4];
if (array.indexOf(3) > -1) {
     return 'exists';  
} 
else {
      return 'does not exist';
  }

стенография

const array = [0, 1, 2, 3, 4];
if (~array.indexOf(4)) // true

Побитовый (~) оператор вернет истинное значение для всего, кроме -1. Этот более простой синтаксис может быть достигнут Array.prototype.find и Array.prototype.includes

if (array.includes(3)) // true
if (array.find(val => val === 2)) //true

На этом завершается первая часть техник стенографии JavaScript.

Я надеюсь, что вы найдете эту статью очень полезной, и если да, поддержите меня! Также подписывайтесь на меня в Twitter, LinkedIn, Github, Facebook.

Я бы также попросил вас проверить микроверсию, чтобы получить опыт, который изменит вашу жизнь.

Удачного кодирования!