Javascript 在JS中使用filter方法，某些键丢失/未定义

我尝试按键长度过滤JSON对象，即如果键长度超过70个字符，则添加到新数组中，稍后在react中呈现。下面是我的第一次尝试

// First attempt:
const longJokes = jokesData.filter(x => x.question.length > 60 ) 

我遇到的问题是，有些对象没有键，有些对象的x.question没有定义。我提出的解决方案是先过滤JSON对象，然后再过滤长度，但现在我错过了一些只有笑话的笑话

// Second attempt:
const longJokes = jokesData.filter(x => x.question).filter(x => x.question.length > 60 ) 

我的问题是：有没有更好的方法来处理丢失的钥匙？在现实世界中，JSON对象中的对象是否经常具有不同/缺失的键？我觉得有更好的方法来处理这个问题，但我不知道我在做什么。
也许我应该单独过滤并将缺少的笑话添加到

const longJokes

下面是完整的代码和单独的JSON对象：

import React from "react"

import Joke from "./Joke"
import jokesData from "./jokesData"

function App() {
    const jokeComponents = jokesData.map(
        joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
        )
      
    const longJokes = jokesData.filter(x => x.question).filter(
        x => x.question.length > 60 ).map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
        )
    
    console.log(jokesData[0].punchLine)
    console.log(longJokes)
    
    return (
        <div>
            {jokeComponents}
            {longJokes}            
        </div>
    )
}

export default App

---

首先，感谢解决您的

过滤器问题：

const longJokes = jokesData.filter(x => x.question !== undefined && x.question.length > 60 ) 

接下来，您可以
在一次
迭代中映射
所有笑话：

const jokes = jokesData.map(joke => {
  if (joke.question !== undefined) {
    <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
  } else {
    <Joke key={joke.id} punchLine={joke.punchLine} />
  }
});

const笑话=jokesData.map（笑话=>{
if（笑话.问题！==未定义）{
}否则{
}
});
您可以使用可选的链接操作符？。在这种情况下，你不知道钥匙

const jokesData = [
   {
       id: 1,
       punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."
   },
   {
       id: 2,
       question: "What's the best thing about Switzerland?",
       punchLine: "I don't know, but the flag is a big plus!"
   },
   {
       id: 3,
       question: "Did you hear about the mathematician who's afraid of negative numbers?",
       punchLine: "He'll stop at nothing to avoid them!"
   },
   {
       id: 4,
       question: "Hear about the new restaurant called Karma?",
       punchLine: "There’s no menu: You get what you deserve."
   },
   {
       id: 5,
       question: "Did you hear about the actor who fell through the floorboards?",
       punchLine: "He was just going through a stage."
   },
   {
       id: 6,
       question: "Did you hear about the claustrophobic astronaut?",
       punchLine: "He just needed a little space."
   }
]

const longJokes = jokesData.filter(x => x.question?.length > 60 ) 
console.log(longJokes.length)

这也可以通过单个过滤器实现。只有定义了
问题
时，才能检查长度

const longJokes = jokesData.filter(x => {
    if (x.question){
        return x.question.length > 60
    }
});

有了@John和@Shuvo的回答和帮助，这就是我想出的解决方案。多谢各位

const longJokes = jokesData
  .filter(x => x.question !== undefined && x.question.length > 60 ||
      x.punchLine.length > 60
  )
  .map((joke) => (
    <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
  ));

const longJokes=jokesData
.filter（x=>x.question！==undefined&&x.question.length>60||
x、 punchLine.length>60
)
.map（（笑话）=>(
));
您好，谢谢您的回复。&&很好，而且很短。当使用地图代码时，一个未定义的对象数组出现在笑话中，我不知道为什么
const longJokes = jokesData
  .filter(x => x.question !== undefined && x.question.length > 60 ||
      x.punchLine.length > 60
  )
  .map((joke) => (
    <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
  ));