修改對象的Javascript遞歸函數不起作用

Question

我的應用程序的所有文本都在一個 .json 文件中，用於翻譯目的。 我需要一個函數來根據所選語言獲取相應的文本。

我認為這應該是一件容易的事，但我沒有看到解決方案。

我有以下對象：

{
  section1: {
    btn: { en: "English", es: "Español" },
    title: {
      en: "Web Frontend Developer",
      es: "Desarrollador Web de Frontend"
    },
    card: {
      title: { en: "Hello!", es: "Hola!" },
      btn: { en: "Get started", es: "Empecemos" },
    }
  }
}

該對象應該作為第一個參數傳遞給函數，第二個參數應該是語言（在本例中為“en”或“es”）。 我想要這樣的東西： filterObjByLanguage(obj, "es")

它應該返回：

{
  section1: {
    btn: "Español",
    title: "Desarrollador Web de Frontend",
    card: {
      title: "Hola!",
      btn: "Empecemos"
    }
  }
}

基本上，它遍歷對象的每個部分，只要有{ en:"text", es: "texto" } ，它就會根據第二個參數選擇其中一個。

這是我的嘗試，但只有對象的第一層正確返回，其余未定義。

const filterObjByLanguage= (obj: any, lang: string): any => {
  const output = Object.assign(obj, {});

  const loop = (obj: any, isRoot: boolean = true): any => {
    for (var k in obj) {
      const value = output[k];
      const valueAtSelected = value?.[lang];

      if (typeof value === "string") {
        continue;
      } else if (valueAtSelected) {
        if (isRoot) output[k] = valueAtSelected;
        else return valueAtSelected;
      } else {
        if (isRoot) output[k] = loop(value, false);
        else return loop(value, false);
      }
    }
  };

  loop(output);

  return output;
};

Answer 1

這里有一個困難：知道哪些對象是語言值，哪些是它們的集合。 在這個解決方案中，我使用'en'屬性的存在作為信號。 一旦我們有了它，它主要是使用Object.entries和Object.fromEntries拆分和重建對象的問題。 在普通的 JS 中（我會把 Typescript 留給那些欣賞它的人！），它可能看起來像這樣：

 const filterObjByLanguage = (lang) => (o) => Object (o) === o ? 'en' in o ? o [lang] || '' : Object .fromEntries ( Object .entries (o) .map (([k, v]) => [k, filterObjByLanguage (lang) (v)]) ) : o const i18n = {section1: {btn: {en: "English", es: "Español"}, title: {en: "Web Frontend Developer", es: "Desarrollador Web de Frontend"}, card: {title: {en: "Hello!", es: "Hola!"}, btn: {en: "Get started", es: "Empecemos"}}}} console .log ('English', filterObjByLanguage ('en') (i18n)) console .log ('Español', filterObjByLanguage ('es') (i18n)) console .log ('Français', filterObjByLanguage ('fr') (i18n))

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

這也使得缺少的語言值只是空字符串的決定。 如果您更喜歡undefined ，那么您可以刪除|| '' || '' 。 如果需要，我們可以通過簡單的修改將其擴展到數組：

const filterObjByLanguage = (lang) => (o) =>
  Array .isArray (o) 
    ? o .map (filterObjByLanguage (lang)) 
  : Object (o) === o
    ? 'en' in o
      ? o [lang] || ''
      : Object .fromEntries (
          Object .entries (o) .map (([k, v]) => [k, filterObjByLanguage (lang) (v)])
        )
  : o