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

代码只是声明三个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或数组destructure时，它将抛出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
}

请注意，因为解构取决于左侧指定如何破坏右侧，您不能使用destructring分配给对象属性。这也排除了calculated property name在解构中的用法。

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

对于EcmaScript5（IE11）兼容性，Babel和Traceur转换器   可以将大多数ES6 / ES7代码转换为ES5，包括解构。

如果仍不清楚，请随时来StackOverflow JavaScript chatroom。   作为SO上第二个最受欢迎的会议室，专家可全天候提供服务：）

Answer 2

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

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

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

Decypher ES6 const解构宣言

3 个答案: