ES6解构以从内部数组获取第n个项目

Question

我的React项目中的状态中有一个数组。像这样：

state = {
   cats : [
      {cid : 1 , value : 1}
      {cid : 2 , value : 3}
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

现在，我想要做的是获得具有破坏性的数组nth item的{​​{1}}。我尝试过

cats

或

const { cat : {cats[id]} } = this.state;

Answer 1

您可以使用computed object property with destructuring获取第n个数组项并将其分配给变量：

const state = {
   cats : [
      {cid : 1 , value : 1},
      {cid : 2 , value : 3},
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

const n = 2;

const { cats: { [n]: nthCat} } = state;

console.log(nthCat)

或者，如果n很小，并且您已经事先知道，则可以ignore the values，您不需要：

const state = {
   cats : [
      {cid : 1 , value : 1},
      {cid : 2 , value : 3},
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

const { cats: [,,thirdCat] } = state;

console.log(thirdCat)

Answer 2

您可以解构索引并采用重命名的值。

var state = { cats: [{ cid: 1, value: 1 }, { cid: 2, value: 3 }, { cid: 3, value: 4 }], curpage: 3 },
    index = 2,
    { cats: { [index]: item } } = state;

console.log(item);

Answer 3

  

让nthID = 1;让{cats} = state;让nthChild = cats [nthID];