解密 ES6 const 解构声明答案

【问题标题】：Decypher ES6 const destructuring declaration解密 ES6 const 解构声明
【发布时间】：2016-11-14 02:25:34
【问题描述】：

谁能帮我破译这个 ES6 语句？

const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByReddit[selectedReddit] || {
    isFetching: true,
    items: []
  }

我从 Redux 异步示例中提取了它 - https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js#L81

【问题讨论】：

你了解哪些部分，哪些不了解？

标签： ecmascript-6 redux destructuring

【解决方案1】：

代码只是简单地声明了三个constants，如果对象非空，则从对象上类似命名的属性中获取它们，否则从充当默认值的对象字面量中获取它们。我相信您对对象之类的语法而不是 const 关键字感到困惑。

var|let|const { ... } = ... 是一个对象解构声明。

var|let|const [ ... ] = ... 是一个数组解构声明。

两者都是“分解右侧并分配到左侧”的简写。

Destructuring 可以使用不同的括号在数组或对象上完成。它可以是声明的一部分，也可以作为独立的赋值。

const { isFetching } = obj; // Same as   const isFetching = obj.isFetching
var [ a, b ] = ary;         // Same as   var a = ary[0], b = ary[1]
[ a ] = [ 1 ];              // Same as   a = 1

对于对象解构，您可以指定属性名称。对于数组，您可以通过留下空白逗号来跳过元素。解构也可以形成层次结构和混合。

const { items: posts } = obj;        // Same as   const posts = obj.items
var [ , , c ] = ary;                 // Same as   var c = ary[2]
let { foo: [ { bar } ], bas } = obj; // Same as   let bar = obj.foo[0].bar, bas = obj.bas

当解构null 或undefined，或对不可迭代的数组解构时，它会抛出TypeError。否则，如果找不到匹配的部分，则其值为undefined，除非设置了默认值。

let { err1 } = null;                // TypeError
let [ err3 ] = {};                 // TypeError
let [ { err2 } ] = [ undefined ]; // TypeError

let [ no ] = [];                // undefined
let { body } = {};             // undefined
let { here = this } = {};     // here === this

let { valueOf } = 0;        // Surprise! valueOf === Number.prototype.valueOf

数组解构适用于任何“可迭代”对象，例如Map、Set 或NodeList。当然，这些可迭代对象也可以作为对象进行销毁。

const doc = document;
let [ a0, a1, a2 ]  =  doc.querySelectorAll( 'a' ); // Get first three <a> into a0, a1, a2
let { 0: a, length } = doc.querySelectorAll( 'a' ); // Get first <a> and number of <a>

最后，不要忘记解构可以在任何声明中使用，而不仅仅是在函数体中：

function log ({ method = 'log', message }) {
  console[ method ]( message );
}
log({ method: "info", message: "This calls console.info" });
log({ message: "This defaults to console.log" });

for ( let i = 0, list = frames, { length } = frames ; i < length ; i++ ) {
   console.log( list[ i ] ); // Log each frame
}

请注意，由于解构依赖于左侧来指定如何解构右侧，您不能使用解构来分配给对象属性。这也排除了在解构中使用calculated property name。

如您所见，解构是一个简单的速记概念，可以帮助您用更少的代码完成更多工作。在 Chrome、Edge、Firefox、Node.js 和 Safari 中是 well supported，所以你现在就可以开始学习和使用它了！

为了兼容 EcmaScript5 (IE11)，Babel 和 Traceur 转译器可以将大部分 ES6/ES7 代码转成 ES5，包括解构。

如果还不清楚，请随时来StackOverflow JavaScript chatroom。作为 SO 上第二受欢迎的房间，专家 24/7 全天候可用:)

【讨论】：

【解决方案2】：

这是对已经给出的附加响应。解构还支持默认值，这使我们能够简化代码：

const {
  isFetching = true,
  lastUpdated,
  items = []
} = postsByReddit[selectedReddit] || {};

【讨论】：

【解决方案3】：

基本上：

var isFecthing;
var lastUpdated;
var posts;

if (postsByReddit[selectedReddit]) {
  isFecthing = postsByReddit[selectedReddit].isFecthing;
  lastUpdated = postsByReddit[selectedReddit].lastUpdated;
  posts = postsByReddit[selectedReddit].items.posts;
} else {
  isFecthing = true;
  items = [];
}

【讨论】：