代码之家 › 专栏 › 技术社区 › J. Hesters

Javascript ES6+:同时解构和使用数组方法?

ecmascript-next destructuring ecmascript-6 reactjs javascript

J. Hesters · 技术社区 · 6 年前

我想知道是否有一种方法可以同时销毁和使用数组方法?如果是的话,使用它有用吗,或者它会严重降低代码的可读性,以至于不值得?

我当前的代码是:

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;

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

2 回复 | 直到 6 年前

Bergi 6 年前

不,这是不可能的。解构就是这样做的,它将属性分配给目标表达式。赋值语法没有用于更改赋值的任何修饰符(默认初始值设定项已经是一个扩展)。

正如@kingdaro所建议的,使用

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

Tim Pozza 5 年前

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