摘要：由于是以空函數(shù)為代理對(duì)象，我們可以將執(zhí)行它，觸發(fā)。中會(huì)遍歷數(shù)組依次取值，如果發(fā)現(xiàn)無法繼續(xù)取值則，跳出循環(huán)。

本文來自我的博客，歡迎大家去GitHub上star我的博客

我們?cè)谌≈堤貏e是鏈?zhǔn)饺≈档臅r(shí)候，常常會(huì)遇到Cannot read property "xx" of undefined的錯(cuò)誤，如何避免這種情況的發(fā)生呢？這里有幾種方法以供參考

這是最簡(jiǎn)單的一種手段：只用引入lodash，使用_.get方法；或者引入Ramda，使用R.path方法，我們就能規(guī)避出現(xiàn)上述錯(cuò)誤的風(fēng)險(xiǎn)

盡管這種方法十分奏效且方便，但我還是希望你能看完其他方法

我們知道，在JavaScript中，使用&&或者||操作符，最后返回的值不一定是boolean類型的，比如下面這個(gè)例子：

console.log(undefined && "a"); //undefined
console.log("a" && "b"); //b
console.log(undefined || "a"); //a
console.log("a" || "b"); //a

&&：如果第一項(xiàng)是falsy(虛值，Boolean上下文中已認(rèn)定可轉(zhuǎn)換為‘假‘的值)，則返回第一項(xiàng)，否則返回第二項(xiàng)

||：如果第一項(xiàng)是falsy，返回第二項(xiàng)，否則返回第一項(xiàng)

我們可以利用這種規(guī)則進(jìn)行取值

我們先擬一個(gè)數(shù)據(jù)

const artcle = {
    authorInfo: {
        author: "Bowen"
    },
    artcleInfo: {
        title: "title",
        timeInfo: {
            publishTime: "today"
        }
    }
};

接下來利用&&和||進(jìn)行安全取值：

console.log(artcle.authorInfo && artcle.authorInfo.author); //Bowen
console.log(artcle.timeInfo && artcle.timeInfo.publishTime); //undefined
console.log(artcle.artcleInfo &&
        artcle.artcleInfo.timeInfo &&
        artcle.artcleInfo.timeInfo.publishTime
); //today

console.log((artcle.authorInfo || {}).author); //Bowen
console.log((artcle.timeInfo || {}).publishTime); //undefined
console.log(((artcle.artcleInfo || {}).timeInfo || {}).publishTime); //today

不難看出，這兩種方法都不算優(yōu)雅，只適用短鏈?zhǔn)饺≈?，一旦嵌套過深，使用&&需要寫一長(zhǎng)段代碼，而使用||需要嵌套很多括號(hào)

我們可以利用es6的解構(gòu)賦值，給屬性一個(gè)默認(rèn)值，避免出現(xiàn)錯(cuò)誤。以上文的artcle數(shù)據(jù)為例，如下：

const { authorInfo: { author } = {} } = artcle;
console.log(author); //Bowen

上面這么做會(huì)暴露很多變量出來，我們可以簡(jiǎn)單地封裝一個(gè)函數(shù)，如下：

const getAuthor = ({ authorInfo: { author } = {} } = {}) => author;
console.log(getAuthor(artcle)); //Bowen

這樣做不會(huì)將變量暴露出來，同時(shí)getAuthor函數(shù)也能復(fù)用，優(yōu)雅多了

既然在取值的過程中會(huì)出現(xiàn)錯(cuò)誤，那我們自然可以利用try catch提前將錯(cuò)誤捕獲：

let author, publishTime;
try {
    author = artcle.authorInfo.author;
} catch (error) {
    author = null;
}
try {
    publishTime = artcle.timeInfo.publishTime;
} catch (error) {
    publishTime = null;
}
console.log(author); //Bowen
console.log(publishTime); //null

這個(gè)方法不好的地方在于：我們無法在一個(gè)try catch語句里進(jìn)行多次取值，因?yàn)橹灰腥我诲e(cuò)誤，就會(huì)進(jìn)入catch語句中去

我們可以寫一個(gè)通用函數(shù)優(yōu)化這一流程：

const getValue = (fn, defaultVaule) => {
    try {
        return fn();
    } catch (error) {
        return defaultVaule;
    }
};
const author = getValue(() => artcle.authorInfo.author);
const publishTime = getValue(() => artcle.timeInfo.publishTime);
console.log(author); //Bowen
console.log(publishTime); //undefined

這是我在網(wǎng)上看到的一個(gè)十分有意思的寫法，利用了es6中的proxy完成的：

const pointer = function(obj, path = []) {
    return new Proxy(function() {}, {
        get: function(target, key) {
            return pointer(obj, path.concat(key));
        },
        apply: function(target, object, args) {
            let value = obj;
            for (let i = 0; i < path.length; i++) {
                if (value == null) {
                    break;
                }
                value = value[path[i]];
            }
            if (value === undefined) {
                value = args[0];
            }
            return value;
        }
    });
};
const proxyArtcle = pointer(artcle);
console.log(proxyArtcle.authorInfo.author()); //Bowen
console.log(proxyArtcle.publishTime()); //undefined

原理比較簡(jiǎn)單，我們可以看到，pointer方法返回的是一個(gè)以空函數(shù)為代理對(duì)象的Proxy實(shí)例，而在每次取值的時(shí)候會(huì)將key保存下來，以proxyArtcle.authorInfo.author為例，它其實(shí)等價(jià)于pointer(artcle, ["authorInfo", "author"])。由于是以空函數(shù)為代理對(duì)象，我們可以將執(zhí)行它，觸發(fā)apply。apply中會(huì)遍歷path數(shù)組依次取值，如果發(fā)現(xiàn)無法繼續(xù)取值則break，跳出循環(huán)。

如果你還沒有學(xué)習(xí)proxy，可以花幾分鐘了解一下：proxy

這種方法在我看來已是比較優(yōu)雅的解決方法，但由于proxy對(duì)瀏覽器和node版本有所限制，且不可能有polyfill，真正應(yīng)用起來需要考慮太多

這是一個(gè)新特性，尚在提案階段，具體可以看tc39/proposal-optional-chaining，不過已經(jīng)有babel可以使用了：babel-plugin-proposal-optional-chaining

我們可以像下面一樣使用這個(gè)特性：

console.log(artcle?.authorInfo?.author); //Bowen
console.log(artcle?.timeInfo?.publishTime) //undefined

這種方法已接近完美，我們可以期待它的真正落實(shí)