Лучшие практики 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 в цикле.
Если мы можем избежать мутации, мы должны это сделать.
Ниже приведены некоторые методы работы с массивами, которые мы можем использовать для управления массивами:
map- сопоставить записи друг с другом и вернуть массив с сопоставленными записямиevery- проверяет, соответствует ли каждая запись массива какому-либо условиюfind- возвращает первую запись чего-либо, удовлетворяющего некоторому условиюfindIndex- возвращает индекс первой записи чего-либо, удовлетворяющего некоторому условиюreduce- объединить записи массива в одно значение и вернуть егоsome- проверить, соответствуют ли некоторые записи массива заданному условию
Мы также можем получить ключи и значения объекта с помощью следующих методов:
Object.keys- получает собственные строковые ключи объектовObject.values- получает собственные значения объектовObject.entries- получает собственные пары ключ-значение объектов
Не используйте генераторы
Если мы ориентируемся на ES5 в наших сборках, то нам не следует использовать генераторы, поскольку они плохо переносятся.
Правильные определения пространственных генераторов
Мы должны разместить определение функции следующим образом:
function* foo() {
// ...
}
Свойства объекта
При доступе к свойствам объекта следует помнить о нескольких вещах.
Использовать точечную нотацию при доступе к свойствам
При доступе к свойствам объекта, которые являются действительными идентификаторами JavaScript, следует использовать точечную нотацию.
Например, вместо написания:
const bar = foo['bar'];
Мы пишем:
const bar = foo.bar;
Вывод
У нас должен быть экспорт по умолчанию, если мы экспортируем только один член модуля.
Вместо использования циклов мы должны использовать методы массива для управления массивами.
Если нам нужно манипулировать ключами и значениями объекта, мы можем получить их с помощью некоторых статических методов Object.
Кроме того, максимально используйте точечную нотацию для доступа к свойствам объекта.
