Serials Javascript Style Guide – Objects

Objects

3.1 No new

Sử dụng cú pháp nguyên thủy khi tạo mới 1 object. eslint: no-new-object

// bad
const item = new Object();

// good
const item = {};

3.2 Computed properties

Sử dụng computed property names khi tạo mới object với tên thuộc tính động.

Tại sao ư? Tập trung định nghĩa các thuộc tính của object vào 1 chỗ.

function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

3.3 Object shorthand

Hãy sử dụng shorhand cho các medthod của Object. eslint: object-shorthand

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3.4 Object concise

Sử dụng shorhand cho thuộc tính. eslint: object-shorthand

Tại sao ư? Nó ngắn hơn và gợi tả hơn.

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

3.5 Grouped shorthand

Nhóm các thuộc tính shorthand khi bắt đầu khai báo object.

Tại sao ư? Đơn giản vì dễ dàng thấy được các thuộc tính nào sử dụng shorthand thôi.

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

3.6 Quoted props

Chỉ nên quote những thuộc tính không valid. eslint: quote-props

Tại sao ư? Vì tính dễ đọc, syntax highlight và dễ dàng được tối ưu bởi nhiều engines JS khác.

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

3.7 Prototype builtins

Không gọi trực tiếp phương thức Object.prototype như hasOwnProperty, propertyIsEnumerable, và isPrototypeOf. eslint: no-prototype-builtins

Tại sao ư? Những phương thức này có thể bị che khuất bởi các thuộc tính trên object trong question - consider { hasOwnProperty: false } - hoặc, object có thể là null object (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.
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));

3.8 Rest spread

Nên sử dụng toán tử spread hơn là Object.assign để copy object. Sử dụng toán tử rest để lấy object mới với các thuộc tính được bỏ qua.

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
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 }