本文来自我的博客，欢迎大家去GitHub上star我的博客我们在取值特别是链式取值的时候，常常会遇到Cannot read property ‘xx’ of undefined的错误，如何避免这种情况的发生呢？这里有几种方法以供参考使用成熟的库方法这是最简单的一种手段：只用引入lodash，使用_.get方法；或者引入Ramda，使用R.path方法，我们就能规避出现上述错误的风险尽管这种方法十分奏效且方便，但我还是希望你能看完其他方法巧用&&和||我们知道，在JavaScript中，使用&&或者||操作符，最后返回的值不一定是boolean类型的，比如下面这个例子：console.log(undefined && “a”); //undefinedconsole.log(“a” && “b”); //bconsole.log(undefined || “a”); //aconsole.log(“a” || “b”); //a&&：如果第一项是falsy(虚值，Boolean上下文中已认定可转换为‘假‘的值)，则返回第一项，否则返回第二项||：如果第一项是falsy，返回第二项，否则返回第一项我们可以利用这种规则进行取值我们先拟一个数据const artcle = { authorInfo: { author: “Bowen” }, artcleInfo: { title: “title”, timeInfo: { publishTime: “today” } }};接下来利用&&和||进行安全取值：console.log(artcle.authorInfo && artcle.authorInfo.author); //Bowenconsole.log(artcle.timeInfo && artcle.timeInfo.publishTime); //undefinedconsole.log(artcle.artcleInfo && artcle.artcleInfo.timeInfo && artcle.artcleInfo.timeInfo.publishTime); //todayconsole.log((artcle.authorInfo || {}).author); //Bowenconsole.log((artcle.timeInfo || {}).publishTime); //undefinedconsole.log(((artcle.artcleInfo || {}).timeInfo || {}).publishTime); //today不难看出，这两种方法都不算优雅，只适用短链式取值，一旦嵌套过深，使用&&需要写一长段代码，而使用||需要嵌套很多括号利用解构赋值的默认值我们可以利用es6的解构赋值，给属性一个默认值，避免出现错误。以上文的artcle数据为例，如下：const { authorInfo: { author } = {} } = artcle;console.log(author); //Bowen上面这么做会暴露很多变量出来，我们可以简单地封装一个函数，如下：const getAuthor = ({ authorInfo: { author } = {} } = {}) => author;console.log(getAuthor(artcle)); //Bowen这样做不会将变量暴露出来，同时getAuthor函数也能复用，优雅多了利用try catch既然在取值的过程中会出现错误，那我们自然可以利用try catch提前将错误捕获：let author, publishTime;try { author = artcle.authorInfo.author;} catch (error) { author = null;}try { publishTime = artcle.timeInfo.publishTime;} catch (error) { publishTime = null;}console.log(author); //Bowenconsole.log(publishTime); //null这个方法不好的地方在于：我们无法在一个try catch语句里进行多次取值，因为只要有任一错误，就会进入catch语句中去我们可以写一个通用函数优化这一流程：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); //Bowenconsole.log(publishTime); //undefined利用proxy这是我在网上看到的一个十分有意思的写法，利用了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()); //Bowenconsole.log(proxyArtcle.publishTime()); //undefined原理比较简单，我们可以看到，pointer方法返回的是一个以空函数为代理对象的Proxy实例，而在每次取值的时候会将key保存下来，以proxyArtcle.authorInfo.author为例，它其实等价于pointer(artcle, [“authorInfo”, “author”])。由于是以空函数为代理对象，我们可以将执行它，触发apply。apply中会遍历path数组依次取值，如果发现无法继续取值则break，跳出循环。如果你还没有学习proxy，可以花几分钟了解一下：proxy这种方法在我看来已是比较优雅的解决方法，但由于proxy对浏览器和node版本有所限制，且不可能有polyfill，真正应用起来需要考虑太多optional chaining这是一个新特性，尚在提案阶段，具体可以看tc39/proposal-optional-chaining，不过已经有babel可以使用了：babel-plugin-proposal-optional-chaining我们可以像下面一样使用这个特性：console.log(artcle?.authorInfo?.author); //Bowenconsole.log(artcle?.timeInfo?.publishTime) //undefined这种方法已接近完美，我们可以期待它的真正落实