JavaScript — это язык, который уже много лет используется практически в каждом программном стеке.

Меняйте местами значения переменных без использования вспомогательных или временных переменных

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

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a); // 2
coonsole.log(b); // 1

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

Вы можете найти больше информации об этом синтаксисе по следующей ссылке:



Присвоение деструктуризации — JavaScript | MDN
Синтаксис деструктурирующего присваивания — это выражение JavaScript, позволяющее распаковывать значения из массивов или…developer.mozilla.org



Используйте console.table для печати структур данных.

Объект console обеспечивает доступ к консоли отладки, из этого объекта мы обычно используем метод console.log() для отображения его аргументов в консоли отладки.

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

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

console.table({a:1, b:2});

Когда аргументом является массив, консоль выводит что-то похожее на вышеприведенное с той разницей, что в первой колонке таблицы (index) вместо свойств выводятся индексы массива, очень наглядный пример этого показан ниже:

console.table(['car', 'plane', 'bus', 'bike']);

Самое интересное, когда у нас есть структурированный массив таких же простых объектов, как в примере ниже:

console.table(
    [
        {
        id: 1,
        name: 'foo',
        date: new Date('2023'),
        active: true,
    }, {
        id: 2,
        name: 'bar',
        date: new Date('2020'),
        active: false
    },
     {
        id: 3,
        name: 'bran',
        date: new Date('2022'),
        active: true
    }
    ]);

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

Вы можете найти больше информации о методе console.table() по следующей ссылке:



console.table() — веб-API | MDN
Метод console.table() отображает табличные данные в виде таблицы. Эта функция принимает один обязательный аргумент data, который…developer.mozilla.org



Функции генератора

Генераторы — это функции, из которых можно выйти, а затем повторно войти несколько раз, а их контекст (привязки переменных) будет сохранен при повторных входах.

Вызов функции-генератора не приводит к немедленному выполнению ее тела; вместо этого возвращается объект итератор для функции. Когда вызывается метод next() итератора, тело функции-генератора выполняется до первого выражения yield.

Метод next() возвращает объект со свойством value, содержащим полученное значение, и свойством done, которое указывает, выдал ли генератор свое последнее значение, как логическое значение. Вызов метода next() с аргументом возобновит выполнение функции генератора, заменив выражение yield, где выполнение было приостановлено, аргументом из next().

Оператор return в генераторе при выполнении завершит работу генератора (т. е. свойство done возвращаемого им объекта будет установлено на true).

В качестве примера я покажу вам ниже простую функцию генератора идентификаторов с пределом генерации идентификатора, который будет передан в качестве параметра:

function* idGenerator(max) {
  var index = 0;
  while (index <= max)
    yield index++;
    return true;
}

var idGen = idGenerator();

function* idGenerator(max) {
  var index = 0;
  while (index <= max)
    yield index++;
    return;
}
var idGen = idGenerator(2);
console.log(idGen.next().value); // 0
console.log(idGen.next().value); // 1
console.log(idGen.next().value); // 2
console.log(idGen.next().value); // undefined
/* It's the same example as above, but without reading the value directly to show the done property, that is set to true once the generator executes the return statement*/
idGen = idGenerator(2); /* Calling the generator again to reset it in the idGen variable. */
console.log(idGen.next()); // { value: 0, done: false }
console.log(idGen.next()); // { value: 1, done: false }
console.log(idGen.next()); // { value: 2, done: false }
console.log(idGen.next()); // { value: undefined, done: true }

Генераторы в JavaScript — особенно в сочетании с промисами — являются очень мощным инструментом для асинхронного программирования, поскольку они смягчают — если не полностью устраняют — проблемы с обратными вызовами, такие как Callback Hell и Inversion of Control. Однако еще более простое решение этих проблем можно получить с помощью асинхронных функций.

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



Понимание генераторов в ES6 JavaScript с примерами
ES6 представил новый способ работы с функциями и итераторами в виде генераторов (или функций-генераторов). А…codeburst.io





Генераторы
Обычные функции возвращают только одно единственное значение (или ничего). Генераторы могут возвращать («выдавать) несколько значений, одно…javascript.info»





функция* - JavaScript | MDN
Объявление (ключевое слово function, за которым следует звездочка) определяет функцию-генератор, которая возвращает объект. Вы…developer.mozilla.org





доход* - JavaScript | MDN
Выражение yield* используется для делегирования другому или повторяемому объекту. выражение Выражение, которое возвращает…developer.mozilla.org





доход — JavaScript | MDN
Определяет значение, возвращаемое функцией генератора через протокол итератора. Если опущено, возвращается undefined…developer.mozilla.org



Параметры покоя

В JavaScript последний параметр функции может иметь префикс «...», чтобы поместить в него все остальные параметры в виде массива.

Синтаксис остального параметра позволяет функции принимать неопределенное количество аргументов в виде массива, обеспечивая способ представления функций с переменным числом аргументов в JavaScript.

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

const print = (first,...rest)=>{
    console.log(first);
    console.table(rest)
}
print(1,2,3,4,5,6);
/*
1
| (index) | Values |
|---------|--------|
| 0       | 2      |
| 1       | 3      |
| 2       | 4      |
| 3       | 5      |
| 4       | 6      |
*/
print(1,2);
/*
1
| (index) | Values |
|---------|--------|
| 0       | 2      |
*/

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

Дополнительную информацию и примеры параметров Rest можно найти по следующей ссылке:



Остальные параметры — JavaScript | MDN
Синтаксис остальных параметров позволяет функции принимать неопределенное количество аргументов в виде массива, обеспечивая путь к…developer.mozilla.org



Найдите максимальное или минимальное значение в массиве

Это простой и легкий совет, который заключается в использовании синтаксиса распространения для вызова методов Math.hypot(), Math.max()иMath.min(). Таким образом, мы можем напрямую передавать массивы в качестве аргументов этим методам для выполнения их операций с массивом, как в следующих примерах, чтобы найти максимальное и минимальное значение массива:

var array = [2, 8, 15, 4]
console.log(Math.max(...array)); // 15 
console.log(Math.min(...array)); // 2

Мы можем использовать Math.hypot()квадратный корень из суммы квадратов массивов векторов, как в примере ниже:

const vector = [5, 3, 2, 1];
console.log(Math.hypot(...vector)); // 6.244997998398398

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



Синтаксис распространения (...) - JavaScript | MDN
Синтаксис расширения (...) позволяет расширять итерируемый объект, такой как выражение массива или строка, в местах, где ноль или…developer.mozilla.org





Математика — JavaScript | MDN
Math — это встроенный объект со свойствами и методами для математических констант и функций. Это не функция…developer.mozilla.org



Сокращенное присвоение свойств объекта

Начиная с ECMAScript 2015 появились новые нотации инициализатора, такие как Shorthand property names и Shorthand method names, которые недостаточно известны, хотя их использование делает код более чистым, читабельным и понятным.

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

var name = 'bran';
console.log({bran}); // { name: 'bran' }

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

const displayAsObject = (name, color, active) => {
    console.log({name,color,active})
}
displayAsObject('bran','red',true); /* { name: 'bran', color: 'red', active: true } */

Это довольно простой и тривиальный пример, но, несмотря на это, вы можете увидеть потенциал, который могут иметь эти обозначения. В моем случае это то, что я очень часто использую в формах, при создании тела POST-запросов, отладке переменных и особенно при программировании на React или React Native.

Вы можете увидеть больше информации и примеров об этом по ссылкам ниже:



Инициализатор объекта — JavaScript | MDN
Объекты можно инициализировать с помощью new Object(), Object.create() или литеральной записи (нотация инициализатора)…developer.mozilla.org



Это все для этого поста, я еще знаю некоторые другие приемы, которые со временем опубликую. Но прежде всего я надеюсь, что они помогут вам писать более качественный код в целом (чистый, разборчивый, понятный и быстрый). В любом случае, если у вас есть какие-либо предложения или сомнения, вы можете оставить комментарий здесь без каких-либо проблем, я отвечу вам как можно скорее 😃👍

Привет!

Ссылки и информация об этом посте: