為視口檢查實作Ifelse陳述句的另一種方法？

我正在處理一個簡單的前提，即質疑視口，并基于此我回傳不同的 aspectRatios。現在，由于某種原因，我總是讓 else 回傳為真，然后在幾毫秒后，視口得到驗證。結果是我選擇了 2 個縱橫比，這讓我下載了額外的影像，這是不必要的。我想知道是否有辦法解決它，或者以不同的方式撰寫它？

const getResponsiveAspectRatio = (): {
    s: ValidRatios
    m: ValidRatios
    l: ValidRatios
  } => {
    if (viewport?.isWrapperWidthAndUp) {
      return { s: "4-3", m: "4-3", l: "4-3" }
    } else if (viewport?.isLargeDesktopAndUp) {
      return { s: "1-1", m: "1-1", l: "1-1" }
    } else if (viewport?.isDesktopAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else if (viewport?.isTabletAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else {
      return { s: "1-1", m: "1-1", l: "1-1" }
    }
  }

uj5u.com熱心網友回復：

首先明確檢查視口

const getResponsiveAspectRatio = (): {
    s: ValidRatios
    m: ValidRatios
    l: ValidRatios
  } => {

    if (!viewport) {
      // Viewport is not initialized
      return null; // return null or some value that the calling code can 
                   // handle and will not result in downloading resources
    }
    else if (viewport?.isWrapperWidthAndUp) {
      return { s: "4-3", m: "4-3", l: "4-3" }
    } else if (viewport?.isLargeDesktopAndUp) {
      return { s: "1-1", m: "1-1", l: "1-1" }
    } else if (viewport?.isDesktopAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else if (viewport?.isTabletAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else {
      return { s: "1-1", m: "1-1", l: "1-1" }
    }
  }

uj5u.com熱心網友回復：

一種完全沒有任何if...else陳述句但兩個if's 的方法可以基于 nullishviewport引數（如果需要）的保護、解構分配和默認值以及基于形狀因子的 ratio-config-map 的組合，其中ratio-config-key 是（早期存在的）some任務的結果。

const getResponsiveAspectRatio = (viewport = null) => {
  // guard for a nullish `viewport` parameter.
  if (viewport === null) {  
    return viewport;
  }
  let ratioConfigKey = '0'; // default config key value.

  const {
    isLargeDesktopAndUp = false,
    isDesktopAndUp = false,
    isTabletAndUp = false,
    isWrapperWidthAndUp = false,
  } = viewport;

  [!!isLargeDesktopAndUp, !!isDesktopAndUp, !!isTabletAndUp, !!isWrapperWidthAndUp]
    // take advantage of an early exiting `some`.
    .some((isFormFactor, idx) => {
      if (isFormFactor) {
        ratioConfigKey = String(idx   1);
      }
      return isFormFactor;
    });

  return ({
    '0': { s: "1-1", m: "1-1", l: "1-1" }, // fallback and/or default
    '1': { s: "1-1", m: "1-1", l: "1-1" }, // isLargeDesktopAndUp
    '2': { s: "3-4", m: "3-4", l: "3-4" }, // isDesktopAndUp
    '3': { s: "3-4", m: "3-4", l: "3-4" }, // isTabletAndUp
    '4': { s: "4-3", m: "4-3", l: "4-3" }, // isWrapperWidthAndUp
  })[ratioConfigKey];
}

console.log(
  'getResponsiveAspectRatio() ...',
  getResponsiveAspectRatio()
);
console.log(
  'getResponsiveAspectRatio({}) ...',
  getResponsiveAspectRatio({})
);
console.log(
  'getResponsiveAspectRatio({ isWrapperWidthAndUp: true }) ...',
  getResponsiveAspectRatio({ isWrapperWidthAndUp: true })
);
console.log(
  'getResponsiveAspectRatio({ isDesktopAndUp: true }) ...',
  getResponsiveAspectRatio({ isDesktopAndUp: true })
);
console.log(
  'getResponsiveAspectRatio({ isLargeDesktopAndUp: true }) ...',
  getResponsiveAspectRatio({ isLargeDesktopAndUp: true })
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

uj5u.com熱心網友回復：

對于這種型別的條件陳述句，switch 陳述句將是一個更好的選擇。

請參閱此鏈接https://www.javascripttutorial.net/javascript-switch-case/

標籤：javascriptif 语句默认值

上一篇：如何在onPressed和setState(dart,flutter)中正確使用If條件

下一篇：根據R中的另一個資料框修改帶有條件的資料框