DevGang
Авторизоваться

Лучшие практики JavaScript - модули, массивы и объекты 

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

В этой статье мы рассмотрим, как лучше всего работать с модулями, массивами и объектами.

Если у нас есть один экспорт, тогда мы должны использовать экспорт по умолчанию

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

Это более читабельно и удобно.

Например, вместо написания:

export const foo = () => {};

Мы пишем:

const foo = () => {}
export default foo;

Поместите весь импорт выше заявлений, не связанных с импортом

Размещение всех imports вышеупомянутых операторов, не связанных с импортом, упрощает их чтение.

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

import { foo } from "./foo";
foo();

Многострочный импорт должен иметь отступ, как многострочные массивы и литералы объектов

Если у нас много импортов, мы не должны писать:

import {foo, bar, baz, qux, longName} from 'foo';

Вместо этого мы должны написать:

import {
  foo,
  bar,
  baz,
  qux,
  longName
} from "foo";

Не используйте синтаксис загрузчика Webpack в выражениях импорта

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

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

Вместо того, чтобы писать:

import barSass from 'css!sass!bar.scss';

Мы пишем:

import barCss from 'bar.css';

Не добавляйте расширение файла JavaScript к импорту

Нам не нужно добавлять расширение файла JavaScript для импорта.

Это также создает проблемы, когда мы меняем расширение, следовательно, мы не должны включать его.

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

import { bar } from './foo.js';

Вместо этого мы пишем:

import { bar } from './foo';

Итераторы и генераторы

Итераторы и генераторы - это новые функции JavaScript в ES6, которые позволяют нам возвращать элементы последовательно.

Не используйте итераторы для управления массивами

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

Например, вместо написания:

let arr = [1, 2, 3];
let result = [];
for (const a of arr) {
  result.push(a ** a);
}

Мы пишем:

const arr = [1, 2, 3];
const result = arr.map(a => a ** a);

Другая причина в том, что мы не хотим изменять записи массива.

Например, если мы напишем:

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] ** arr[i];
}

Затем мы изменяем каждую запись arr в цикле.

Если мы можем избежать мутации, мы должны это сделать.

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

  1. map - сопоставить записи друг с другом и вернуть массив с сопоставленными записями
  2. every - проверяет, соответствует ли каждая запись массива какому-либо условию
  3. find - возвращает первую запись чего-либо, удовлетворяющего некоторому условию
  4. findIndex - возвращает индекс первой записи чего-либо, удовлетворяющего некоторому условию
  5. reduce - объединить записи массива в одно значение и вернуть его
  6. some - проверить, соответствуют ли некоторые записи массива заданному условию

Мы также можем получить ключи и значения объекта с помощью следующих методов:

  1. Object.keys - получает собственные строковые ключи объектов
  2. Object.values - получает собственные значения объектов
  3. Object.entries - получает собственные пары ключ-значение объектов

Не используйте генераторы

Если мы ориентируемся на ES5 в наших сборках, то нам не следует использовать генераторы, поскольку они плохо переносятся.

Правильные определения пространственных генераторов

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

function* foo() {
  // ...
}

Свойства объекта

При доступе к свойствам объекта следует помнить о нескольких вещах.

Использовать точечную нотацию при доступе к свойствам

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

Например, вместо написания:

const bar = foo['bar'];

Мы пишем:

const bar = foo.bar;

Вывод

У нас должен быть экспорт по умолчанию, если мы экспортируем только один член модуля.

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

Если нам нужно манипулировать ключами и значениями объекта, мы можем получить их с помощью некоторых статических методов Object.

Кроме того, максимально используйте точечную нотацию для доступа к свойствам объекта.

Источник:

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить