Полезные советы по JavaScript - метки времени, объединение значений и вызов функций

Как и любые другие приложения, приложения на JavaScript также должны быть хорошо написаны.

В противном случае позже мы столкнемся с самыми разными проблемами.

В этой статье мы рассмотрим несколько советов, которым следует следовать, чтобы писать код JavaScript быстрее и лучше.

Извлечение меток времени UNIX в JavaScript

Мы можем получить временную метку UNIX экземпляра Date с помощью оператора +.

Например, мы можем написать:

+new Date(2020, 0, 1)

Тогда получаем 1577865600000.

Кроме того, мы можем использовать метод getTime, чтобы сделать то же самое:

new Date(2020, 0, 1).getTime()

Затем мы получаем то же самое.

Дата также может быть проанализирована, если она указана в формате ГГГГ-ММ-ДД.

Итак, мы можем написать:

new Date('2020-01-01').getTime()

И мы тоже получаем то же самое.

Отметка времени указывается в миллисекундах с 1 января 1970 г., 12:00 по всемирному координированному времени.

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

Объединение значений массива в одно

Мы можем использовать метод reduce, чтобы свести элементы массива к одному результату.

Например, если у нас есть:

const cart = [{price: 10}, {price: 40}, {price: 20}];

Тогда мы можем получить общую цену от cart, написав:

const reducer = (total, item) => total + item.price;const total = cart.reduce(reducer, 0);

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

Определить, готов ли документ

Мы можем определить, полностью ли загружена страница, с помощью свойства document.readyState.

Например, мы можем написать:

if (document.readyState === 'complete') {
  //...
}

чтобы определить, полностью ли загружена страница, а затем что-нибудь сделать.

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

let stateCheck = setInterval(() => {
  if (document.readyState === 'complete') {
    clearInterval(stateCheck);
    // document ready
  }
}, 100);

Затем мы можем проверять состояние загрузки страницы каждые 100 миллисекунд, пока она не будет готова.

В блоке if мы вызываем clearInterval, чтобы завершить таймер, чтобы мы перестали проверять readyState.

Кроме того, мы можем прослушивать событие readystatechange с помощью:

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    // document ready
  }
}

Это лучше, чем создавать таймер и запускать его до тех пор, пока состояние готовности не изменится.

Вычислить максимальное или минимальное значение массива

Мы можем передать столько значений в методы Math.max или Math.min, чтобы проверить максимальное или минимальное значение массива.

Например, мы можем написать:

const max = Math.max(1, 2, 3);

чтобы вернуть максимальное значение или:

const min = Math.min(1, 2, 3);

чтобы вернуть минимальное значение.

Чтобы передать массив, мы можем использовать оператор распространения:

const max = Math.max(...[1, 2, 3]);

or:

const min = Math.min(...[1, 2, 3]);

Или мы можем использовать apply следующим образом:

const max = Math.max.apply(undefined, [1, 2, 3]);

or:

const min = Math.min.apply(undefined, [1, 2, 3]);

apply принимает значение this в качестве первого аргумента, который равен undefined, поскольку Math.max и Math.min являются статическими методами.

Второй аргумент - это массив аргументов, которые мы хотим передать в качестве аргументов в массив.

Деструктуризация функциональных параметров

Мы можем деструктурировать параметры объекта с помощью синтаксиса деструктуризации.

Например, мы можем написать:

const greet = ({ name, lastName }) => {
  console.log(`hi, ${name} ${lastName}`);
};

Мы получаем свойства объекта name и lastName с назначениями деструктуризации.

Затем мы можем вызвать его, позвонив:

greet({ name: 'jane', lastName: 'doe' })

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

Например, мы можем написать:

const greet = ({ name = 'jane', lastName = 'smith' }) => {
  console.log(`hi, ${name} ${lastName}`);
};

Затем, когда мы вызываем это, написав:

greet({})

Тогда name равно 'jane', а lastName равно 'smith', поскольку мы не устанавливали значения ни для одного свойства.

Предотвращение изменения встроенных прототипов

Мы можем вызвать Object.freeze, чтобы предотвратить изменение объектов, в том числе встроенных прототипов.

Итак, мы можем написать:

Object.freeze(Object.prototype);
Object.freeze(Array.prototype);
Object.freeze(Function.prototype);

чтобы предотвратить изменение каких-либо встроенных прототипов.

Заключение

Мы можем предотвратить изменение встроенных прототипов с помощью Object.freeze.

Кроме того, мы можем использовать оператор распространения или apply для вызова функции с массивом аргументов.

Есть также различные способы получить временную метку UNIX.

JavaScript на простом английском языке

Вы знали, что у нас четыре публикации и канал на YouTube? Найдите их все на plainenglish.io и подпишитесь на Decoded, наш канал YouTube!