前端JavaScript基础训练系列一百二十六：对象解构 -else if 和可选代码块

从ES6开始，{ … }也可用于“解构赋值”(destructuringassignment，详情请参见本系列的 的“ES6 & Beyond”部分)，特别是对象的解构。例如:

function getData() {
          // ..
          return {
              a: 42,
b: "foo" };
      }
      var { a, b } = getData();
      console.log( a, b ); // 42 "foo"
{ a , b } = .. 就是 ES6 中的解构赋值，相当于下面的代码:
      var res = getData();
      var a = res.a;
      var b = res.b;

{ a, b }实际上是{ a: a, b: b }的简化版本，两者均可，只不过{ a, b } 更简洁。
{ … }还可以用作函数命名参数(namedfunctionargument)的对象解构(objectdestructuring)， 方便隐式地用对象属性赋值:

function foo({ a, b, c }) { // 不再需要这样:
          // var a = obj.a, b = obj.b, c = obj.c
          console.log( a, b, c );
      }
      foo( {
          c: [1,2,3],
a: 42,
          b: "foo"
      } );    // 42 "foo" [1, 2, 3]

在不同的上下文中 { … } 的作用不尽相同，这也是词法和语法的区别所在。掌握这些细节 有助于我们了解 JavaScript 引擎解析代码的方式。

else if 和可选代码块

很多人误以为 JavaScript 中有 else if，因为我们可以这样来写代码:

if (a) { // ..
}
else if (b) {
// .. }
else {
// ..
}

事实上 JavaScript 没有 else
if，但 if 和 else 只包含单条语句的时候可以省略代码块的 { }。下面的代码你一定不会陌生:

if (a) doSomething( a );

很多 JavaScript 代码检查工具建议对单条语句也应该加上 { }，如:

if (a) { doSomething( a ); }

else 也是如此，所以我们经常用到的 else if 实际上是这样的:

if (a) { // ..
}
else {
if (b) { // ..
}
else {
// .. }
}

if (b) { … } else { … } 实际上是跟在 else 后面的一个单独的语句，所以带不带 { } 都
可以。换句话说，else if 不符合前面介绍的编码规范，else 中是一个单独的 if 语句。 else if极为常见，能省掉一层代码缩进，所以很受青睐。但这只是我们自己发明的用法，
切勿想当然地认为这些都属于 JavaScript 语法的范畴。