Полезные приёмы для JavaScript-разработчиков

От /

Перевод статьи Super Useful Tips & Tricks for JavaScript Developers от Yogesh Chavan.

Быстрый способ создать маску для числа методами slice и padStart (последний появился в версии ES8)

const creditCard = "4111111111114321"; // номер кредитной карты из 16 цифр
const lastFourDigits = creditCard.slice(-4); // получить последние 4 цифры

// добавить * к lastFourDigits, чтобы длина тоже была равна 16
const maskedNumber = lastFourDigits.padStart(creditCard.length, '*');

console.log(lastFourDigits); // 4321
console.log(maskedNumber); // ************4321

Выполнить обработчик событий только один раз

document.getElementById("btn").addEventListener("click",
  function () {
    console.log("Button clicked!");
  },
  { once: true }
);

Обновить пропсы объекта с помощью оператора spread

const user = {
  name: 'David',
  age: 30,
  city: 'NY'
};

const newAge = 40;

const updatedUser = {
  ...user,
  age: newAge
};

console.log(user); // { name: 'David', age: 30, city: 'NY'}
console.log(updatedUser); // { name: 'David', age: 40, city: 'NY'}

Найти количество пропсов в объекте

const user = {
  name: 'David',
  age: 30, 
  city: 'NY'
};

console.log(Object.keys(user).length); // 3

Взять последние элементы из массива

const numbers = [10, 20, 30, 40, 50];
const last = numbers.slice(-1);
console.log(last); // [50]

const secondLast = numbers.slice(-2);
console.log(secondLast); // [40, 50]

Обратите внимание: метод slice доступен для массива так же, как и для строки.

Три способа проверить, является ли объект массивом

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

const arr = [1, 2, 3, 4];
  1. arr.constructor.toString().indexOf("Array") > -1
  2. arr instanceof Array
  3. Array.isArray(arr)

Получить временную метку (timestamp)

const date = new Date();
console.log(date.getTime()); // 1621708197268

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

// old way
function getPairs(key, value) {
  var object = {};

  object[key] = value

  return object;
}

console.log(getPairs('name', 'Mike')); // { name: 'Mike'}
console.log(getPairs('age', '40')); // { age: 40}

// new ES6 way
function getPairs(key, value) {
  const object = {
    [key]: value
  };

  return object;
}

console.log(getPairs('name', 'Mike')); // { name: 'Mike'}
console.log(getPairs('age', '40')); // { age: 40}

Деструктуризация объектов

const user = {
 name: 'David',
 age: 30
};

// деструктуризовать пропсы и использовать `status` со значением `Married`, если этого свойства нет
const {name, age, status = 'Married' } = user;
console.log(name, age, status) // David 30 Married

const person = {
 age: 30
};

// деструктуризуем объект `person`, переименуем `name` в `username`, назначим по умолчанию значение `Anonymous`, если такого свойства в `person` нет
const {name: username = 'Anonymous', age } = person;

console.log(username, age); // Anonymous 30

Деструктуризация массивов

const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

const [firstDay, secondDay] = days;

console.log(firstDay); // sunday
console.log(secondDay); // monday

Использование шаблонных литералов (ES6)

Подробнее о шаблонных литералах — здесь.

const user = {
 name: 'David',
 age: 30,
 address: 'NY'
};

// было: Hi, I'm David with age 30 and living in NY
console.log("Hi, I'm " + user.name + " with age " + user.age + " and living in " + user.address);

// стало: Hi, I'm David with age 30 and living in NY

console.log(`Hi, I'm ${user.name} with age ${user.age} and living in ${user.address}`);

Это также можно упростить следующим образом:

const user = {
 name: 'David',
 age: 30,
 address: 'NY'
};

const { name, age, address } = user;
console.log(`Hi, I'm ${name} with age ${age} and living in ${address}`);

Передача числовых переменных в качестве аргументов в функцию

Оператор rest (версия ES6) конвертирует разделённые запятой значения в массив, таким образом параметр numbers в функции add становится массивом.

function add(...numbers) {
 return numbers.reduce((acc, value) => {
   return acc + value;
 }, 0);
}

const sum = add(1, 2, 3, 4, 5); 
console.log(sum); // 15

Создать новый массив с помощью spread-оператора (троеточие)

const first = ["two", "three", "four"];
const second = [ "six", "seven", "eight"];

const combined = ["one", ...first, "five", ...second]
console.log(combined); // ["one", "two", "three", "four", "five", "six", "seven", "eight"]

Заполнить массив определённым значением

const array = Array(5).fill(false); // [false, false, false, false, false]
const array = [...Array(5).keys()] // [0, 1, 2, 3, 4, 5]

Удалить из массива повторяющиеся элементы

С помощью Set:

const array = [1, 2, 2, 3, 1, 5];

const unique = [...new Set(array)];

console.log(unique); // [1, 2, 3, 5];

С помощью метода массива filter:

const array = [1, 2, 2, 3, 1, 5];

const unique = array.filter((value, index) => {
    return array.indexOf(value) === index;
});

console.log(unique); // [1, 2, 3, 5]

Сгенерировать случайное число в определённом диапазоне

Случайное число от 0 до 100:

Math.floor(Math.random() * 100)

Случайное число от 1 до 100:

Math.floor(Math.random() * 100) + 1

Случайное число между минимальным (включительно) и максимальным значением (не включая):

function getRandom(min, max) { 
  return Math.floor(Math.random() * (max - min) ) + min;
}

console.log(getRandom(10, 35)); // случайное число в диапазоне >= 10 и < 35

Случайное число между и максимальным значением (включая оба значения):

function getRandom(min, max) { 
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

console.log(getRandom(10, 35)); // случайное число в диапазоне >= 10 и <= 35

Вывести JSON в отформатированном виде

const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};
console.log(JSON.stringify(book, null, 2)) // разделение - 2 пробела
const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};
console.log(JSON.stringify(book, null, '\t')) // разделение - tab

Реализовать плавный переход в верх страницы

window.scrollTo({ top: 0, left: 0, behavior: "smooth" });

Преобразовать любое значение в Boolean

Это будет особенно полезно, если вы не хотите послать в бэкенд значение null или undefined.

let number1;
console.log(!!number1); // false

const number2 = 10;
console.log(!!number2); // true

const name1 = 'Tim';
console.log(!!name1); // true

const name2 = '';
console.log(!!name2); // false

const nullValue = null;
console.log(!!nullValue); // false

Быстро преобразовать строку в число

const number = "20";
const converted = +number;

console.log(converted); // 20

Преобразовать строку в массив

const name = "Mike johnson";
console.log(name.split("")); // ["M", "i", "k", "e", " ", "j", "o", "h", "n", "s", "o", "n"]

const chars = "a,b,c,d,e,f";
console.log(chars.split(",")); // ["a", "b", "c", "d", "e", "f"]

Отобразить число с точностью до двух знаков после запятой

const number = 100.32222;
console.log(number.toFixed(2)); // 100.32

Проверить вхождение определённого значения в массив

const numbers = [1, 2 ,3, 10, 50];

// old way
console.log(numbers.indexOf(3) > -1); // true, т.к. проверяется, есть ли в массиве 3

// new way
console.log(numbers.includes(3)); // true

Метод includes также полезен, если требуется сравнить несколько значений сразу.

const day = "monday";
if(day === "monday" || day === "tuesday" || day === "wednesday" || day === "thursday") {
  // сделать что-то
}

// фрагменты кода сверху и снизу эквивалентны

const day = "monday";
if(["monday", "tuesday", "wednesday", "thursday"].includes(day)) {
  // сделать что-то
}

Использование оператора опциональной последовательности (optional chaining operator)

const user = {
  name: 'David',
  location: {
    street: {
      number: 20,
      name: '11 wall street'
    }
  }
};

// было
const streetName = user.location && user.location.street && user.location.street.name;
console.log(streetName); // 11 wall street

// стало
const streetName = user?.location?.street?.name;
console.log(streetName); // 11 wall street

Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street.

const user = {
  name: 'David'  
};

const streetName = user.location.street.name; // Uncaught TypeError: Cannot read property 'street' of undefined

Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null.

const user = {
  name: 'David'  
};

const streetName = user?.location?.street?.name;
console.log(streetName); // undefined

Так что использование этого оператора сократит ваш код и сделает его более понятным.

Спасибо за внимание!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Похожие записи

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх