前端小技巧：JavaScript 编码规范

前端小技巧：JavaScript 编码规范

1. 类型

1.1【可选】 基本类型: 当你访问一个基本类型时，直接操作它的值。

string
number
boolean
null
undefined
symbol

符号（Symbols）不能完全的被 polyfill，因此在不能原生支持symbol类型的浏览器或环境中，不应该使用symbol类型。

1.2 【可选】 复杂类型: 当你访问一个复杂类型时，直接操作其值的引用。

object
array
function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

2. 引用

2.1 【必须】 使用 

const

定义你的所有引用；避免使用

var

原因? 这样能够确保你不能重新赋值你的引用，否则可能导致错误或者产生难以理解的代码。

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

2.2 【必须】 如果你必须重新赋值你的引用， 使用 

let

代替

var

原因? let 是块级作用域，而不像 var 是函数作用域

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

2.3 【可选】 注意，let 和 const 都是块级作用域。

// const 和 let 只存在于他们定义的块级作用域中。
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

3. 对象

3.1 【必须】 使用字面量语法创建对象。

// bad
const item = new Object();

// good
const item = {};

3.2 【推荐】 在创建具有动态属性名称的对象时使用计算属性名。原因? 它允许你在一个地方定义对象的所有属性。

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 【推荐】 用对象方法简写。

// bad
const value = 1;
const atom = {
  value: value,
  addValue: function (newValue) {
    return atom.value + newValue;
  },
};

// good
const value = 1;
const atom = {
  value,
  addValue(newValue) {
    return atom.value + newValue;
  },
};

3.4 【推荐】 用属性值简写。

const ScreenBody = 'Screen Body';

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

// good
const obj = {
  ScreenBody,
};

3.5 【推荐】 声明对象时，将简写的属性放在前面。原因? 这样更容易的判断哪些属性使用的简写。

const ScreenBody = 'Screen Body';
const ModalText = 'Modal Text';

// bad
const obj = {
  One: 1,
  two: 2,
  ScreenBody,
  Three: 3,
  Fourth: 4,
  ModalText,
};

// good
const obj = {
  ScreenBody,
  ModalText,
  One: 1,
  two: 2,
  Three: 3,
  Fourth: 4,
};

3.6 【必须】 只使用引号标注无效标识符的属性。

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

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

3.7 【推荐】 不能直接调用 

Object.prototype的方法，如： hasOwnProperty，propertyIsEnumerable，isPrototypeOf 

原因? 这些方法可能被有问题的对象上的属性覆盖 - 如 { 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; // 在模块范围内的缓存中查找一次
console.log(has.call(object, key));

/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));

3.8 【推荐】 使用对象扩展操作符（spread operator）浅拷贝对象，而不是用 Object.assign方法。 使用对象的剩余操作符（rest operator）来获得一个新对象，该对象省略了某些属性。

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 变异的 `original` ಠ_ಠ
delete copy.a; // 这....

// 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 }

4. 数组

4.1 【必须】 使用字面量语法创建数组。

// bad
const items = new Array();

// good
const items = [];

 

 

 

标签：编码,good,const,前端,JavaScript,Object,bad,copy,ScreenBody
来源： https://www.cnblogs.com/bore/p/15878465.html