React Native ES6 编程风格

参考文章：http://es6.ruanyifeng.com/#docs/style

.块级作用域

（1）let 取代var;

（2）全局常量和线程安全：

在let 和const之间，优先建议使用const,尤其是在全局环境，不应该设置变量，只应设置常量。

// bad
var a = 1, b = 2, c = 3;

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

// best
const [a, b, c] = [1, 2, 3];

2.字符串

静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

// bad
const a = "foobar";
const b = 'foo' + a + 'bar';

// acceptable
const c = `foobar`;

// good
const a = 'foobar';
const b = `foo${a}bar`;

3.解构赋值

使用数组成员对变量赋值时，优先使用解构赋值。

const arr = [1,2,3];

//bad 
const first = arr[0];
const second = arr[1];

//good
const [first, second] = arr;

函数的参数如果是对象的成员，优先使用解构赋值。

//bad
function getFullName(user) {
 const firstName = user.firstName;
 const lastName = user.lastName;
}


//good
function getfullName(obj) {
 const {firstName,lastName } = obj;
}

//best
function getFullName({first, lastName}) {
}

如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序/

// bad
function processInput(input) {
  return [left, right, top, bottom];
}

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

4.对象

单行定义的对象，最后一个成员不以逗号结尾，多行定义的对象，最后一个成员以逗号结尾。

// bad
const a = { k1: v1, k2: v2, };
const b = {
  k1: v1,
  k2: v2
};

// good
const a = { k1: v1, k2: v2 };
const b = {
  k1: v1,
  k2: v2,
};

对象尽量静态化，一旦定义，就不得随意添加新的属性，如果添加属性不可避免，要使用Object.assign方法。

//bad 
const a = {};
a.x = 3;

//if reshape unavoidable
const a = {};
Object.assign(a,{x: 3});


//good
const a = {x: null};
a.x = 3;

如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

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

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

上面代码中，对象obj的最后一个属性名，需要计算得到。这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。

另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

var ref = 'some value';

//bad 
const atom = {
  ref: ref,
 
  value: 1,
  

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


//good
const atom = {
  ref,
 
  value: 1,
  

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

React Native ES6 编程风格

猜你喜欢