如何将多个数组方法链接到箭头函数

Question

在我的箭头函数中，我尝试使用方法 .forEach，然后将 .map 方法链接到它，但我收到 错误消息 "(card).map(card => {"”卡片未定义。

我也尝试过使用 .find 方法 const findCards = cards.find(card => card.symbol === '7' ).map(card => { 错误消息“地图不是函数”

我能够将 .map 方法链接到 .filter 方法。

const filteredCards = cards.filter(card => card.number).map(card => {

我可以在没有 .map 的情况下控制日志 .forEach..所以我有点困惑..

HTML

<div class="container" id="forEach-method"></div>
<div class="container" id="find-method"></div>

JAVASCRIPT

const cards = [
{  symbol: '1', number: true},
{  symbol: '2', number: true},
{  symbol: '3', number: true},
{  symbol: '4', number: true},
{  symbol: '5', number: true},
{  symbol: '6', number: true},
{  symbol: '7', number: true},
{  symbol: '8', number: true},
{  symbol: '9', number: true},
{  symbol: '+', number: false},   
{  symbol: '-', number: false},   
{  symbol: '*', number: false} 
];


//.FOREACH METHOD
const cardsContainerforEach = document.querySelector('#forEach-method');
const forEachCards = cards.forEach(card).map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
cardsContainerforEach.innerHTML = forEachCards.join('\n');


//.FIND METHOD
const cardsContainerFind = document.querySelector('#find-method');
const findCards = cards.find(card => card.symbol === '7' ).map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
cardsContainerFind.innerHTML = findCards.join('\n');

Answer 1

Foreach 不 return 任何东西，这就是为什么你不能链接它，并且发现 return 是单个对象而不是数组，这就是你不能链接它的原因。您可以将 .map 方法链接到 .filter 方法，因为 map return 是一个数组。

第 cards.forEach(card) 行正在寻找名为 card 的函数。您可能正在尝试的是将一个 fatarrow 函数注入到 foreach 中，它应该看起来像这样 cards.forEach(card => /* do something with card */).

const cards = [
{  symbol: '1', number: true},
{  symbol: '2', number: true},
{  symbol: '3', number: true},
{  symbol: '4', number: true},
{  symbol: '5', number: true},
{  symbol: '6', number: true},
{  symbol: '7', number: true},
{  symbol: '8', number: true},
{  symbol: '9', number: true},
{  symbol: '+', number: false},   
{  symbol: '-', number: false},   
{  symbol: '*', number: false} 
];

const foreach = cards.forEach(card => card);
const find = cards.find(card => card.symbol === '-');
const map = cards.map(card => parseInt(card.symbol));

console.log('forEach:', foreach); // Should return undefined.
console.log('find:', find); // Should return a single object.
console.log('map:', map); // Should return an array object.

//.filter() METHOD
const filterCards = cards.filter(card => !card.number ).map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
console.log(filterCards.join('\n'));

在您尝试过的选项中，只有映射 return 是一个数组，这意味着您可以在映射上使用高阶数组函数。

Answer 2

所以我可以在这里看到两个问题。

您的第一个函数不需要 forEach。 map 将遍历数组和 return 一个内容已按您要求更改的新数组。
find return 是一个元素，而不是数组，所以你最好使用 filter，然后映射它，或者只是 return获取查找结果并将其传递给 html.

这是您的代码return通过在过滤器上进行映射来实现您想要的内容（如果您希望案例有多个结果，那很好）...

const cards = [
  {  symbol: '1', number: true},
  {  symbol: '2', number: true},
  {  symbol: '3', number: true},
  {  symbol: '4', number: true},
  {  symbol: '5', number: true},
  {  symbol: '6', number: true},
  {  symbol: '7', number: true},
  {  symbol: '8', number: true},
  {  symbol: '9', number: true},
  {  symbol: '+', number: false},   
  {  symbol: '-', number: false},   
  {  symbol: '*', number: false} 
];

//.FOREACH METHOD
const cardsContainerforEach = document.querySelector('#forEach-method');
const forEachCards = cards.map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
cardsContainerforEach.innerHTML = forEachCards.join('\n');

//.FIND METHOD
const cardsContainerFind = document.querySelector('#find-method');
const findCards = cards.filter(card => card.symbol === '7').map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})

cardsContainerFind.innerHTML = findCards.join('\n');

如何将多个数组方法链接到箭头函数

How to chain multiple array methods to arrow function

javascript

mapping

foreach