Decypher ES6 const 解构声明

Question

谁能帮我破译这个 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

Answer 1

基本上：

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 = [];
}

Answer 2

代码只是声明了三个 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, or 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
}

Note that because destructuring depends on left hand side to specify how to destructre right hand side, you cannot use destructring to assign to object properties. This also excludes the usage of calculated property name in destructuring.

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

For EcmaScript5 (IE11) compatibility, Babel and Traceur transpilers can turn most ES6/ES7 code into ES5, including destructuring.

If still unclear, feel free to come to Whosebug JavaScript chatroom. As the second most popular room on SO, experts are available 24/7 :)

Answer 3

这是对已经给出的回复的补充。解构也支持默认值，这使我们能够简化代码：

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

Decypher ES6 const 解构声明

Decypher ES6 const destructuring declaration

destructuring

ecmascript-6

redux