# 变量

13.1 用const或let声明变量。不这样做会导致全局变量。我们想要避免污染全局命名空间。 eslint: no-undef (opens new window) prefer-const (opens new window)
```
// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();
```

13.2 每个变量都用一个 const 或 let。 eslint: one-var (opens new window)

Why? 这种方式很容易去声明新的变量，你不用去考虑把;调换成,，或者引入一个只有标点的不同的变化。这种做法也可以是你在调试的时候单步每个声明语句，而不是一下跳过所有声明。

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

13.3 const放一起，let放一起

Why? 在你需要分配一个新的变量，而这个变量依赖之前分配过的变量的时候，这种做法是有帮助的

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

13.4 在你需要的地方声明变量，但是要放在合理的位置

Why? let 和 const 都是块级作用域而不是函数级作用域

// bad - unnecessary function call
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  // 在需要的时候分配
  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

13.5 不要使用链接变量分配。 eslint: no-multi-assign (opens new window)

Why? 链接变量分配创建隐式全局变量。

// bad
(function example() {
  // JavaScript 将这一段解释为
  // let a = ( b = ( c = 1 ) );
  // let 只对变量 a 起作用; 变量 b 和 c 都变成了全局变量
  let a = b = c = 1;
}());

console.log(a); // undefined
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined

// `const` 也是如此

13.7 在赋值的时候避免在 = 前/后换行。如果你的赋值语句超出 max-len (opens new window)，那就用小括号把这个值包起来再换行。 eslint operator-linebreak (opens new window).

Why? 在 = 附近换行容易混淆这个赋值语句。

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';

13.8 不允许有未使用的变量。 eslint: no-unused-vars (opens new window)

Why? 一个声明了但未使用的变量更像是由于重构未完成产生的错误。这种在代码中出现的变量会使阅读者迷惑。

// bad

var some_unused_var = 42;

// 写了没用
var y = 10;
y = 5;

// 变量改了自己的值，也没有用这个变量
var z = 0;
z = z + 1;

// 参数定义了但未使用
function getX(x, y) {
    return x;
}

// good
function getXPlusY(x, y) {
  return x + y;
}

let x = 1;
let y = a + 2;

alert(getXPlusY(x, y));

// 'type' 即使没有使用也不可以被忽略， 因为这个有一个 rest 取值的属性。
// 这是从对象中抽取一个忽略特殊字段的对象的一种形式
const { type, ...coords } = data;
// 'coords' 现在就是一个没有 'type' 属性的 'data' 对象

回到顶部

← 属性提升 →