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

Question

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

我目前的代码是这样的：

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;

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

Answer 1

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

按照@kingdaro 的建议，使用

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

Answer 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.

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

Javascript ES6+: Destructuring and using an array method at the same time?

javascript

reactjs

ecmascript-6

destructuring

ecmascript-next