Javascript ES6+：同时解构和使用数组方法？答案

【问题标题】：Javascript ES6+: Destructuring and using an array method at the same time?Javascript ES6+：同时解构和使用数组方法？
【发布时间】：2018-03-30 09:39:36
【问题描述】：

我想知道是否有办法同时破坏和使用数组方法？如果是，使用它是否有用，还是会大大降低代码的可读性，以至于不值得？

我当前的代码是这样的：

const { props: { title, ingredients: ing } } = this;
const ingredients = ing.map(
  (ing, index) => <li key={index}>{ing}</li>
);

但我正在尝试找到这样一种更短的方法：

const { props: { title, ingredients: ingredients.map(
  (ing, index) => <li key={index}>{ing}</li>
); } } = this;

此代码不起作用。任何提示将不胜感激！ :)

【问题讨论】：

最后一个问题非常主观；我会说是的，它确实会显着降低可读性。 Keep it simple, stupid.
添加到@deceze 的评论中，嵌套解构在这种情况下往往会散发出“太聪明”的感觉。 const { title, ingredients } = this.props 可能看起来更好，然后可能将下一个变量命名为 const ingredientElements。当然，这是你的代码，但以后可能有人需要阅读和理解它，包括你未来的自己????
不，这是不可能的。当你使用解构对象时，字面量的 value 部分必须是一个可以赋值的变量，或者另一个用于进一步解构的字面量，它不能是一个表达式。

标签： javascript reactjs ecmascript-6 destructuring ecmascript-next

【解决方案1】：

不，这是不可能的。解构就是这样做的，它将属性分配给目标表达式。赋值语法没有任何用于改变赋值的修饰符（默认初始化器已经是一个延伸）。

正如@kingdaro 建议的那样，使用

const { title, ingredients } = this.props;
const ingredientElements = ingredients.map((ing, index) => <li key={index}>{ing}</li>);

【讨论】：

【解决方案2】：

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="rebelclause" data-slug-hash="GVQNOQ" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
  data-pen-title="Map object keys to vars and populate from values">
  <span>See the Pen <a href="https://codepen.io/rebelclause/pen/GVQNOQ/">
      Map object keys to vars and populate from values</a> by Tim Pozza (<a href="https://codepen.io/rebelclause">@rebelclause</a>)
      on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

soapand = [{
    name: 'far',
    email: 'quad'
  },
  {
    name: 'car',
    email: 'squad'
  }
]

// let {name: `${'wingedAngel'}`, email} = soapand
// global[`wingedAngel`] = `${}`
refreshed = soapand.map((item, idx) => {
  // console.log(item)
  window[`wingedAngel`] = `${item.name}`
  mad = ['holyWater']
  window[`${mad[0]}`] = item.email
  // window['holyWater'] = item.email
  return wingedAngel + ' ' + holyWater
})
// window[`wingedAngel`] = `${soapand[0].name}`
// window['holyWater'] = soapand.email
console.log(refreshed)
console.log(wingedAngel)
console.log(holyWater)

This might help as well, since it distracts on a corner case, namely, being able to use a variable on the left hand side to describe the symbol to which you want to assign a value. When I found this around documentation on String.Raw``, the browser window
object, and node's global object, the corollary to window on the server-side, I felt pretty good about recognizing it. I hope these bits actually address the question as you've asked it. Sorry to those who don't think so. Having this sort of moment seems
to be rare. I hope you'll take the answer in the spirit it is offered, as a chance to share personal discovery where others may have already re-seeded the scene I think is so fresh and new.

【讨论】：