javascript中可選鏈接的最佳選擇

Question

我有以下鏈接運算符

const age = data.student?.age ? data.student.age: '';

這在我的本地機器上運行良好，但在另一台機器上似乎有問題。 在進一步調查中，我可以理解 node js 較低版本（我想版本低於 12）不支持鏈接運算符。 我知道我可以用下面的 if 條件替換它，但想知道關於什么是最好的替代方案的建議。

function checkAge(data){
  if(data && data.student && data.student.age) {
    return data.student.age;
  } else {
   return '';
  }
}


const age  = checkAge(data);

Answer 1

無需更改代碼。 您只需要修改TypeScript 配置中的target選項並將其設置為 ES2019 或更低版本。 然后，您可以在 TypeScript 代碼中使用可選鏈接，編譯器將生成等效代碼。

打字稿代碼

const foo = a?.b?.c;

變成

"use strict";
var _a;
const foo = (_a = a === null || a === void 0 ? void 0 : a.b) === null || _a === void 0 ? void 0 : _a.c;

編譯時： 游樂場鏈接

Answer 2

如果問題是可讀性，您可能會嘗試對象破壞。 所以，你的分配看起來像這樣：

const {
  student: {
    age = ''
  } = {}
} = data

Answer 3

假設將age聲明為const ，而不是用中間變量污染范圍，並且在未定義的情況下甚至為 '0' 和空字符串返回一個數字都是必須的，我想到的更短的選項如下：

const age = (d=>(isNaN(d=(d.student||{}).age)?'':d))(data);

對於不太嚴格的方法，更清潔的解決方案是：

const age = (data.student || {}).age || "";
// In this case, though, numeric 0 would also be returned as empty string.

另一方面，如果您需要多次執行此操作，我建議您實現一個方便的拾取功能，例如：

const pick = (target, path)=>path.split(".")
    .reduce(
        (acc,key)=>acc&&acc[key]
        ,target
    )
;
// And then...
const age = pick(data, 'student.age');

對於挑選方法，減少pick()函數執行的函數調用的數量是值得的。 為了簡潔起見，我只是使用了 reduce。