如果未定义，不要 return 反对吗？

Question

我希望有人能在这里提供帮助，或者为我指明正确的方向。

我正在使用外部 API 来查明哪些航班在哪些日期可用。（响应为 mm_newJson）。
然后我创建一个新对象 obj = {};，store/push 我每天需要的值，（date 和 fare）。
然后，我将 obj.date 与我的日历天匹配，并在有值时插入 fare 值。

有几天，我的对象中没有任何值。因此，returns undefined.

这是我的对象在这种情况下的样子的屏幕截图：

问题：

对象是undefined的地方，（因为没有object.date或object.farekey/values），我不想object.fare是插入我的日历。

在这种情况下，“未定义”出现在我的日历中。

我已经通过用空字符串替换“undefined”来解决这个问题 " " 。但基本上，如果 object.fare 未定义，我根本不想返回它。

我的代码在下面，我尝试在下面的函数中添加我的条件。例如：

if (typeof object === 'object')，或 if (object == 'undefined')，或

但是，我不确定如何解决这个问题。

我只是不想插入未定义的 object.value。由于未定义出现在匹配的日历日上，而我不希望它出现。

window.mm_newJson = [];
window.mm_dailyPrice = [];
window.mm_fullDate = new Date();
window.mm_startDate = String(mm_fullDate.getFullYear()) + '-' + String(mm_fullDate.getMonth()+1) + '-' +  String(mm_fullDate.getDate());

// FETCH DATE AVAILABILITY
const response = await fetch('https://www.MYAPI.COM');
mm_newJson = await response.json();

// Loope through API to find each month
for (let i=0; i < mm_newJson.Months.length; i++) {
  console.log(mm_newJson.Months[i].FlightDates);

  // Find fares which are available in month
  for (let j = 0; j < mm_newJson.Months[i].FlightDates.length; j++) {
    let obj = {};
    // Grab the specific dates
    obj['date'] = String(mm_newJson.Months[i].YearNumber) + '-' + String(('0' + String(mm_newJson.Months[i].MonthNumber)).slice(-2)) + '-' + String(('0' + (mm_newJson.Months[i].FlightDates[j])).slice(-2));
    obj['fare'] = "WW";
    mm_dailyPrice.push(obj);
  };
};

// Search mm_dailyPrice for date
function searchDate(input) {
  let object = mm_dailyPrice.find(el => el.date === input);
  console.log("object", object)
  if (object != undefined) {
    return object.fare;
  } else {
    // Returns undefined, if I do not handle else condition
    return "n/a";
  }
};


// Add AVAILABILITY
let days = document.querySelector('div[data-tab*="Date Calendar Outbound"]').querySelectorAll('.day');
let j = 0;

// For each day in the 12 month calendar, display the "fare" value
for (let i = 0; i < days.length; i++) {
  let date = days[i].dataset.date;
  if (days[i].firstElementChild){
    let fare = searchDate(date);

    // if (fare !== "undefined") {
      console.log("fare", fare);
      let priceSpan = document.createElement('span');
      priceSpan.innerHTML = String(fare);
      priceSpan.setAttribute('class', 'calendar-price-test');
      days[j].appendChild(priceSpan);
      j++;
    // }
  }
};

这是我的日历的外观，如果对象未定义，（但在此屏幕截图中，我用字符串替换了未定义，因此 undefined 不会出现在相关日期。

但说真的，我根本不希望这些天出现任何东西。所以我不希望 object.fare 被识别，如果它是未定义的。 IE - 我不希望它出现在日历中。

如果有帮助，这里还有响应的屏幕截图，在初始提取之后。 FlightDates 中的数字代表一个月中的几天，我只想在其中注入“WW”。

Answer 1

你可以设置一个if块，如果票价不是"n/a"，你可以设置innerHTML。否则，您不会对 innerHTML 做任何事情。

if (fare !== "n/a") {
   priceSpan.innerHTML = String(fare);
}

Answer 2

我没有我需要的所有信息，所以我希望我能帮助你（最好有一个 json 由 [=60=64=] 编辑的数据示例=]).

一个javascript函数可以return这样取消定义：

// Search mm_dailyPrice for date
function searchDate(input) {
  let object = mm_dailyPrice.find(el => el.date === input);
  console.log("object", object)
  if (object != undefined)
    return object.fare;
  
  return;
};

但是当你检查这行代码（当前注释）时：

if (fare !== "undefined") {

您必须测试 undefined 而不是 "undefined"，或者您可以使用 typeof:

测试后者

if (fare !== undefined) {

或

if (typeof fare !== "undefined") {

我个人更喜欢前者，另一个可能会造成混淆。

如您所见，您的代码运行正常。

window.mm_newJson = [];
window.mm_dailyPrice = [];
window.mm_fullDate = new Date();
window.mm_startDate = String(mm_fullDate.getFullYear()) + '-' + String(mm_fullDate.getMonth()+1) + '-' +  String(mm_fullDate.getDate());

mm_newJson = {
    Months: [
        {MonthNumber: 8, YearNumber: 2021, FlightDates: [4, 6, 15, 18, 20, 22]},
        {MonthNumber: 9, YearNumber: 2021, FlightDates: [4, 5, 6, 8, 12, 13, 15, 16, 14, 19, 20, 22]},
        {MonthNumber: 10, YearNumber: 2021, FlightDates: [3, 5, 6, 8, 12, 13, 15, 16, 14, 19, 20, 22]},
        {MonthNumber: 11, YearNumber: 2021, FlightDates: [3, 6, 8, 13, 16, 18, 20, 22]},
        {MonthNumber: 12, YearNumber: 2021, FlightDates: [3, 5, 6, 8, 12, 13, 15, 16, 18, 19, 20, 22]},
        {MonthNumber: 1, YearNumber: 2022, FlightDates: [2, 5, 6, 8, 12, 13, 15, 16, 18, 19, 20, 22]},
        {MonthNumber: 2, YearNumber: 2022, FlightDates: [2, 5, 6, 8, 12, 13, 16, 18, 17, 24]},
        {MonthNumber: 3, YearNumber: 2022, FlightDates: [2, 5, 6, 8, 11, 13, 15, 18, 17, 24]},
        {MonthNumber: 4, YearNumber: 2022, FlightDates: [1, 5, 6, 8, 11, 13, 15, 16, 17, 25]},
        {MonthNumber: 5, YearNumber: 2022, FlightDates: [1, 5, 6, 8, 10, 13, 15, 16, 18, 25]},
        {MonthNumber: 6, YearNumber: 2022, FlightDates: [1, 5, 6, 8, 10, 13, 15, 16, 18, 25]},
        {MonthNumber: 7, YearNumber: 2022, FlightDates: [1, 5, 6, 8, 10, 13, 15, 16, 18]},
        {MonthNumber: 8, YearNumber: 2022, FlightDates: [1, 5, 6, 8, 18, 19, 20, 22]},
        {MonthNumber: 9, YearNumber: 2022, FlightDates: [1, 5, 6, 8, 13, 16, 19, 22]}
    ]
};

// Loope through API to find each month
for (let i=0; i < mm_newJson.Months.length; i++) {
  // Find fares which are available in month
  for (let j = 0; j < mm_newJson.Months[i].FlightDates.length; j++) {
    let obj = {};
    // Grab the specific dates
    obj['date'] = String(mm_newJson.Months[i].YearNumber) + '-' + String(('0' + String(mm_newJson.Months[i].MonthNumber)).slice(-2)) + '-' + String(('0' + (mm_newJson.Months[i].FlightDates[j])).slice(-2));
    obj['fare'] = "WW";
    mm_dailyPrice.push(obj);
  }
}

// Search mm_dailyPrice for date
function searchDate(input) {
  let object = mm_dailyPrice.find(el => el.date === input);

  if (object !== undefined)
    return object.fare;

    return false;
}


// Add AVAILABILITY
//let days = document.querySelector('div[data-tab*="Date Calendar Outbound"]').querySelectorAll('.day');
let days = [
    {dataset: {date: "2022-08-01"}},
    {dataset: {date: "2022-08-02"}},
    {dataset: {date: "2022-08-03"}},
    {dataset: {date: "2022-08-04"}},
    {dataset: {date: "2022-08-05"}},
    {dataset: {date: "2022-08-06"}},
    {dataset: {date: "2022-08-07"}},
    {dataset: {date: "2022-08-08"}},
    {dataset: {date: "2022-08-09"}},
    {dataset: {date: "2022-08-10"}},
    {dataset: {date: "2022-08-11"}},
    {dataset: {date: "2022-08-12"}},
    {dataset: {date: "2022-08-13"}},
    {dataset: {date: "2022-08-14"}},
    {dataset: {date: "2022-08-15"}},
    {dataset: {date: "2022-08-16"}},
    {dataset: {date: "2022-08-17"}},
    {dataset: {date: "2022-08-18"}},
    {dataset: {date: "2022-08-19"}},
    {dataset: {date: "2022-08-20"}},
    {dataset: {date: "2022-08-21"}},
    {dataset: {date: "2022-08-22"}},
    {dataset: {date: "2022-08-23"}},
    {dataset: {date: "2022-08-24"}},
    {dataset: {date: "2022-08-25"}},
    {dataset: {date: "2022-08-26"}},
    {dataset: {date: "2022-08-27"}},
    {dataset: {date: "2022-08-28"}},
    {dataset: {date: "2022-08-29"}},
    {dataset: {date: "2022-08-30"}}
];

let j = 0;

let list = document.querySelector(".list");
console.log(mm_newJson.Months[12]);

// For each day in the 12 month calendar, display the "fare" value
for (let i = 0; i < days.length; i++) {
  let date = days[i].dataset.date;
  //if (days[i].firstElementChild){
    let fare = searchDate(date);

    if (fare !== false) {
      let priceSpan = document.createElement('span');
      priceSpan.innerHTML = "date " + date + ", fare " + String(fare);
      priceSpan.setAttribute('class', 'calendar-price-test');
      //days[j].appendChild(priceSpan);
      
      let item = document.createElement('li');
      item.appendChild(priceSpan);
      list.appendChild(item);
      
      //j++;
      console.log(j, "date", date, "fare", fare);
    }
  //}
}

<ul class="list"></ul>

相反，错误在于演示文稿，使用两个不同的索引 i 和 j 来指定从哪个日历日读取参考日期 (i) 以及在哪个日历日插入 span (j).

由于 j 仅在 searchDate 不 return 时递增 undefined 您将始终连续看到所有带有 WW 的日期。

附带说明，我建议您修改 mm_dailyPrice 数组的结构，以便更快、更轻松地访问数据。

您可以使用对象（字典）而不是数组，并将 UTC 日期 (YYYY-MM) 或 YYYY-MM-01 的第一部分指定为键，并将包含日期的数组指定为值return 月份已经被 API（以及您可能需要的其他可选数据）编辑，而无需每次都扫描 mm_dailyPrice。

我不能给你写一个例子，因为我不知道你将如何使用 fare 属性.

Answer 3

我成功了！！！谢谢大家的帮助！！！

按照 Marco 的建议并声明 (fare !== undefined) 更新 searchDate 功能后，票价仍然在所有日期出现，而不仅仅是特定的日期。

我意识到我没有将 fare 日期与日历日期正确匹配。这就是为什么“WW”或“n/a”被注入所有日期，而不是我需要的特定日期。

所以我将 searchDate 更新为 return 整个对象。然后检查反对日期，匹配日历月日期，我想注入。这似乎奏效了！ :)

我可能会整理一下，但我只是想让你知道。

谢谢大家的帮助！这仍然帮助我形成了最终的解决方案:)

window.mm_newJson = [];
window.mm_dailyPrice = [];
window.mm_fullDate = new Date();
window.mm_startDate = String(mm_fullDate.getFullYear()) + '-' + String(mm_fullDate.getMonth()+1) + '-' +  String(mm_fullDate.getDate());

// FETCH DATE AVAILABILITY
const response = await fetch('www.MYAPI.com');
mm_newJson = await response.json();

// Loope through API to find each month
for (let i=0; i < mm_newJson.Months.length; i++) {
  // Find fares which are available in month
  for (let j = 0; j < mm_newJson.Months[i].FlightDates.length; j++) {
    let obj = {};
    obj['date'] = String(mm_newJson.Months[i].YearNumber) + '-' + String(('0' + String(mm_newJson.Months[i].MonthNumber)).slice(-2)) + '-' + String(('0' + (mm_newJson.Months[i].FlightDates[j])).slice(-2));
    obj['fare'] = "WW";
    mm_dailyPrice.push(obj);
  };
};

// Search mm_dailyPrice for price
function searchDate(date) {
  let object = mm_dailyPrice.find(el => el.date === date);
  if (object != undefined) {
    return object;
  }
  return;
};

// Add AVAILABILITY
let days = document.querySelector('div[data-tab*="Date Calendar Outbound"]').querySelectorAll('.day');
let j = 0;

// For each day in the 12 month calendar, display the "fare" value
for (let i = 0; i < days.length; i++) {
  console.log("days", days[i].dataset); // DOMStringMap {date: "2021-08-01"}

  let date = days[i].dataset.date;
  console.log("date", date); // date 2021-08-02

  if (days[i].firstElementChild){
    let objFinal = searchDate(date);

    if (objFinal !== undefined) {
      if (days[i].attributes[1].value === objFinal.date) {
        console.log("days[i].attributes[1].value", days[i].attributes[1].value); //the matching days are returned
        let priceSpan = document.createElement('span');
        priceSpan.innerHTML = String(objFinal.fare);
        priceSpan.setAttribute('class', 'calendar-price-test');
        days[i].appendChild(priceSpan);
      }
    }
  }
};

如果未定义，不要 return 反对吗？

Don't return object if undefined?

javascript

api

object

find

undefined