时间戳

首页 > 解决方案 > 如何将多个数组方法链接到箭头函数

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

问题描述

在我的箭头函数中，我尝试使用 .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');

标签： javascriptforeachmapping

解决方案

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

该行cards.forEach(card)正在寻找一个名为 card 的函数。您可能正在尝试的是在 foreach 中注入一个 fatarrow 函数，它应该看起来像这样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'));

在您尝试的选项中，只有 map 返回一个数组，这意味着您在 map 上拥有更高阶的数组函数。

推荐阅读