Изучая 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?