10 удивительных сокращений JavaScript

10 удивительных сокращений JavaScript

Привет всем 👋

Сегодня я хотел поделиться с вами 10 потрясающими сокращениями JavaScript, которые увеличат вашу скорость, помогая писать меньше кода и делать больше.

Давайте начнем!

1. Объединить массивы

От руки:

Обычно мы объединяем два массива, используя метод Array concat(). Метод concat() используется для объединения двух или более массивов. Этот метод не изменяет существующие массивы, а вместо этого возвращает новый массив. Вот простой пример:

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇'].concat(apples);
console.log( fruits );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

Сокращение:

Мы можем немного сократить это, используя оператор расширения ES6 (...) следующим образом:

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇', ...apples];  // <-- here
console.log( fruits );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

и мы все еще получаем тот же результат, что и раньше. 😃

2. Объединить массивы (но в начале)

От руки:

Допустим, мы хотим добавить все элементы из массива apples в начало массива fruits, а не в конец, как мы видели в последнем примере. Мы можем сделать это, используя Array.prototype.unshift() следующим образом:

let apples = ['🍎', '🍏'];
let fruits = ['🥭', '🍌', '🍒'];
// Add all items from apples onto fruits at start
Array.prototype.unshift.apply(fruits, apples)
console.log( fruits );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

Теперь два красных и зеленых яблока находятся в начале, а не в конце после слияния.

Сокращение:

Мы можем снова сократить этот длинный код, используя оператор расширения ES6 (...) следующим образом:

let apples = ['🍎', '🍏'];
let fruits = [...apples, '🥭', '🍌', '🍒'];  // <-- here
console.log( fruits );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

3. Массив клонов

От руки:

Мы можем легко клонировать массив, используя метод Array slice() следующим образом:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = fruits.slice();
console.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

Сокращение:

Используя оператор расширения ES6 (...), мы можем клонировать такой массив:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = [...fruits];  // <-- here
console.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

4. Деструктивное назначение

От руки:

При работе с массивами нам иногда нужно «распаковать» массивы в кучу переменных, например:

let apples = ['🍎', '🍏'];
let redApple = apples[0];
let greenApple = apples[1];
console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏

Сокращение:

Мы можем добиться того же результата в одной строке, используя Деструктурирование присваивания следующим образом:

let apples = ['🍎', '🍏'];
let [redApple, greenApple] = apples;  // <-- here
console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏

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

От руки:

Обычно, когда нам нужно добавить выражение к строке, мы делаем это так:

// Display name in between two strings
let name = 'xdwolf';
console.log('Hello, ' + name + '!');
//=> Hello, xdwolf!
// Add & Subtract two numbers
let num1 = 20;
let num2 = 10;
console.log('Sum = ' + (num1 + num2) + ' and Subtract = ' + (num1 - num2));
//=> Sum = 30 and Subtract = 10

Сокращение:

С шаблонными литералами мы можем использовать обратные кавычки (`), которые позволяют нам вставлять любое выражение в строку, заключая его в ${...} следующим образом:

// Display name in between two strings
let name = 'xdwolf';
console.log(`Hello, ${name}!`);  // <-- No need to use + var + anymore
//=> Hello, xdwolf!
// Add two numbers
let num1 = 20;
let num2 = 10;
console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`);
//=> Sum = 30 and Subtract = 10

6. Для цикла

От руки:

Используя цикл for, мы можем пройтись по массиву следующим образом:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
// Loop through each fruit
for (let index = 0; index < fruits.length; index++) { 
  console.log( fruits[index] );  // <-- get the fruit at current index
}
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Сокращение:

Мы можем добиться того же результата, используя оператор for...of, но с очень небольшим количеством кода:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
// Using for...of statement 
for (let fruit of fruits) {
  console.log( fruit );
}
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

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

От руки:

Для перебора массива мы также можем использовать метод Array forEach(). Но нам нужно написать немного больше кода, меньше, чем самый распространенный цикл for, который мы видели выше, но все же немного больше, чем оператор for...of:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
// Using forEach method
fruits.forEach(function(fruit){
  console.log( fruit );
});
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Сокращение:

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

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(fruit => console.log( fruit ));  // <-- Magic ✨
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

В основном я использую цикл forEach со стрелочными функциями, но я хотел показать вам оба сокращения цикла: оператор for...of и цикл forEach. Так что вы можете использовать любой код, который вам нравится, исходя из ваших предпочтений. 😃

8. Найдите объект в массиве

От руки:

Чтобы найти объект в массиве объектов по одному из его свойств, мы обычно используем цикл for следующим образом:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples', quantity: 10},
  {name: 'Grapes', quantity: 2}
];
// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
  for (let index = 0; index < arr.length; index++) {
// Check the value of this object property `name` is same as 'Apples'
    if (arr[index].name === 'Apples') {  //=> 🍎
// A match was found, return this object
      return arr[index];
    }
  }
}
let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }

Сокращение:

Ух ты! Мы должны написать так много ранее, чтобы реализовать эту логику. Но с помощью метода Array find() и стрелочной функции => мы можем легко добиться этого в одной строке, например:

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
  return arr.find(obj => obj.name === 'Apples');  // <-- here
}
let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }

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

От руки:

Функция parseInt() используется для разбора строки и возврата целого числа:

let num = parseInt("10")
console.log( num )         //=> 10
console.log( typeof num )  //=> "number"

Сокращение:

Мы можем добиться того же результата, добавив префикс + перед строкой следующим образом:

let num = +"10";
console.log( num )           //=> 10
console.log( typeof num )    //=> "number"
console.log( +"10" === 10 )  //=> true

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

От руки:

В основном оператор if-else используется, если нам нужно установить значение на основе другого значения, не являющегося ложным значением, например:

function getUserRole(role) {
  let userRole;
// If role is not falsy value
  // set `userRole` as passed `role` value
  if (role) {
    userRole = role;
  } else {
// else set the `userRole` as USER
    userRole = 'USER';
  }
return userRole;
}
console.log( getUserRole() )         //=> "USER"
console.log( getUserRole('ADMIN') )  //=> "ADMIN"

Сокращение:

Но, используя оценку короткого замыкания (||), мы можем сделать это в одной строке, например так:

function getUserRole(role) {
  return role || 'USER';  // <-- here
}
console.log( getUserRole() )         //=> "USER"
console.log( getUserRole('ADMIN') )  //=> "ADMIN"

По сути, expression1 || expression2 оценивается как короткое замыкание до истинного выражения. Таким образом, это все равно, что сказать, что если первая часть истинна, не беспокойтесь о вычислении остальной части выражения.

Наконец, я хотел бы закончить эту статью цитатой Джеффа Этвуда:

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