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

1. Фильтр уникальных значений

Тип объекта Set был введен в ES6, и вместе с ..., оператором «распространения», мы можем использовать его для создания нового массива с только уникальными значениями.

const myArray = [1, 1, 1, 5, 3, 5]
const uniqArray = [...new Set(my_array)]
uniqArray; // => [1, 5, 3]

2. Разрушение console.logs

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

const someVar = 'Hello World'
console.log(someVar, '- This is the someVar variable') 
   => Hello World - This is the someVar variable

Хотя это отлично работает в меньшем масштабе, по мере того, как ваш код становится более сложным, это становится все более неустойчивым. Чтобы выровнять код и упростить журналы, попробуйте что-нибудь вроде этого:

const someVar = 'Hello World'
console.log( {someVar} ) // => {someVar: "Hello World"}

3. Разрушающие аргументы в определениях функций

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

function getFullName( {first, middle, last} ) {
   return `${first} ${middle} ${last}`
}
const first = 'John'
const middle = 'M'
const last = 'Doe'
getFullName({last, first, middle}) // => John M Doe

4. Оценка короткого замыкания с оператором &&

Это мой личный фаворит, поскольку он чрезвычайно прост, практичен и весьма полезен. Короткое замыкание означает, что при оценке выражения И (&&), если первый операнд ложен, JavaScript выполнит короткое замыкание и даже не посмотрит на второй операнд.

expr && doSomething()
// Instead of this:
if (expr) {
   doSomething()
}

5. Удалите ложные значения из массива

Чтобы отфильтровать все значения falsy из массива, вы можете передать конструктор Boolean методу filter(). Это работает, поскольку конструктор Boolean возвращает false при любом ложном значении и наоборот.

const arr = [ 0, 1, '', undefined, false, 2, undefined, null, , 3, NaN ]
const filtered = arr.filter(Boolean)
filtered; // => [1, 2, 3]

6. Обмен значениями с деструктуризацией массива

Зная, как деструктурировать массив, легко использовать его для замены переменных. Давайте поменяем местами переменные a и b, используя деструктурирующее присваивание:

const a = 1;
const b = 2;

[a, b] = [b, a];
a; // => 2
b; // => 1

На первом этапе справа от деструктуризации создается временный массив [b, a] (который оценивается как [2, 1]).

Затем происходит деструктуризация временного массива: [a, b] = [2, 1]. Переменной a присваивается 2, а b 1. Произведена замена a и b.

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

7. Преобразовать в логическое значение с помощью двойного взрыва (!!)

Как !! работает - первое! приводит значение к логическому и инвертирует его. В этом случае! Value вернет false. Итак, чтобы вернуть его обратно к истине, мы поставили другое! в теме. Отсюда двойной взрыв !!

const array = [1,2]
!!array[0]; // => true
!!array[1]; // => true
!!array[2]; // => false
const obj = {
  value: 5,
  node: null
}
!!obj.value; // => true
!!obj.node;  // => false

8. console.table

console.table () позволяет отображать данные в консоли в красивом табличном формате. Это очень удобно при визуализации сложных массивов или объектов. Он может отображать табличные данные для массивов или объектов. В этом примере я обращаюсь к поддельной конечной точке JSON API, чтобы вернуть фиктивные данные пользователя. Ведение журнала - это нормально, но для лучшего визуального представления данных мы можем использовать console.table.

fetch('https://jsonplaceholder.typicode.com/users')
   .then(resp => resp.json()
   .then(console.table)

9. console.assert

Иногда вы хотите регистрировать ТОЛЬКО, когда условие является ложным - это называется утверждением. console.assert () записывает сообщение об ошибке в консоль тогда и только тогда, когда утверждение ложно. Он сохраняет ваш код кратким, устраняя необходимость в операторах if.

// verbose
if (loggedIn) {
    console.error('user is logged in assertion failed');
}

// much better
console.assert(loggedIn, 'user is logged in');

10. Усечение массива

Если вы хотите деструктивно удалить значения из конца массива, есть более быстрые альтернативы, чем использование splice().

Например, если вы знаете размер исходного массива, вы можете переопределить его свойство длины, например:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4
console.log(array); // => [0, 1, 2, 3]

Надеюсь, вы нашли эти советы такими же полезными, как и я, когда я впервые их обнаружил. Есть какие-нибудь уловки с JavaScript?