Это первая часть серии, которую я буду публиковать и которая даст представление о том, как следовать передовым методам работы с JS.
Ссылки в JS
- Используйте
const
для всех ссылок; избегайте использованияvar
.
Есть идеи, почему?
Это гарантирует, что ссылки не будут переназначены, что может привести к дальнейшим ошибкам. - Если требуется переназначение, вместо var следует использовать let, так как let имеет область действия блока.
Объекты
- Используйте вычисляемые имена свойств при создании объектов с динамическими именами свойств, поскольку они позволяют определять все свойства объекта в одном месте.
function getKey(key1) { return `a key named ${key1}`; } // bad const obj = { id: 1, name: 'India', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'India', [getKey('enabled')]: true, };
2. Используйте сокращение метода объекта.
// bad const foo= { value: 1, add: function (value) { return foo.value + value; }, }; // good const foo= { value: 10, add(value) { return foo.value + value; }, };
3. Используйте краткое обозначение значения свойства как более короткое и описательное. Также сгруппируйте свои сокращенные свойства в начале объявления вашего объекта. Почему? Легче сказать, какие свойства используют сокращение.
const name = 'Medium'; //bad const obj = { name: name }; //good const obj = { name }; //Grouping const name= 'Sam'; const age= 35; // bad const obj = { bloodGrp: 'B+', lovesBaseBall: true, name, lovesCricket: true, age }; // good const obj = { name, age, bloodGrp: 'B+', lovesBaseBall: true, lovesCricket: true };
4. Указывайте только те свойства, которые являются недопустимыми идентификаторами. В целом мы считаем его субъективно более легким для чтения. Он улучшает подсветку синтаксиса, а также легче оптимизируется многими движками JS.
// bad const badIdentifier= { 'foo': 3, 'bar': 4, 'data-bad': 5, }; // good const goodIdentifier = { foo: 3, bar: 4, 'data-good': 5, };
5. Поскольку методы объекта, такие как hasOwnProperty, propertyEnumerable и т. д., могут быть затенены свойствами рассматриваемого объекта — рассмотрим { hasOwnProperty: false }
— или объект может быть нулевым объектом (Object.create(null)
).
// bad console.log(object.hasOwnProperty(key)); // good console.log(Object.prototype.hasOwnProperty.call(object, key)); // best const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. console.log(has.call(object, key)); /* or */ import has from 'has'; // https://www.npmjs.com/package/has console.log(has(object, key));
6. Предпочитайте оператор распространения объекта вместо Object.assign
для поверхностного копирования объектов. Используйте оператор остатка объекта, чтобы получить новый объект с опущенными некоторыми свойствами.
// very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // this mutates `original` object which may lead to bug delete copy.a; // so does this // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } // good const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
Массивы
- Предпочитайте литеральный синтаксис для создания массива.
Как упоминалось в es-lint : использование конструктораArray
для создания нового массива обычно не рекомендуется в пользу литеральной записи массива из-за ловушки с одним аргументом и из-за того, что глобальныйArray
может быть переопределен. Исключением является случай, когда конструктор Array используется для преднамеренного создания разреженных массивов заданного размера путем предоставления конструктору одного числового аргумента.
// bad const items = new Array(); // good const items = [];
- Используйте Array#push вместо прямого назначения для добавления элементов в массив.
const arr= []; // bad arr[arr.length] = 'item1'; // good arr.push('item1');
- 4.3 Используйте развороты массивов
...
для копирования массивов.
// bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i += 1) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items];
- 4.4 Чтобы преобразовать итерируемый объект в массив, используйте спреды
...
вместоArray.from
.
const foo = document.querySelectorAll('.foo'); // good const nodes = Array.from(foo); // best const nodes = [...foo];
- 4.5 Используйте
Array.from
для преобразования объекта, подобного массиву, в массив.
const arrCopy= { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 }; // bad const arr = Array.prototype.slice.call(arrCopy); // good const arr = Array.from(arrCopy);
- 4.6 Используйте
Array.from
вместо распространения...
для отображения на итерации, поскольку это позволяет избежать создания промежуточного массива.
// bad const baz = [...foo].map(bar); // good const baz = Array.from(foo, bar);
- 4.7 Используйте операторы возврата в обратных вызовах методов массива. Возврат можно опустить, если тело функции состоит из одного оператора, возвращающего выражение без побочных эффектов, см. eslint:
array-callback-return
// good [1, 2, 3].map((x) => { const y = x + 1; return x * y; }); // good [1, 2, 3].map((x) => x + 1); // bad - no returned value means `acc` becomes undefined after the first iteration [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => { const flatten = acc.concat(item); }); // good [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => { const flatten = acc.concat(item); return flatten; }); // bad inbox.filter((msg) => { const { subject, author } = msg; if (subject === 'Mockingbird') { return author === 'Harper Lee'; } else { return false; } }); // good inbox.filter((msg) => { const { subject, author } = msg; if (subject === 'Mockingbird') { return author === 'Harper Lee'; } return false; });
- 4.8 Использовать разрывы строк после открытия и перед закрытием скобок массива, если массив состоит из нескольких строк
// bad const arr = [ [0, 1], [2, 3], [4, 5], ]; const objectInArray = [{ id: 1, }, { id: 2, }]; const numberInArray = [ 1, 2, ]; // good const arr = [[0, 1], [2, 3], [4, 5]]; const objectInArray = [ { id: 1, }, { id: 2, }, ]; const numberInArray = [ 1, 2, ];