js - - - - - 可选链操作符报错？可选链操作符 && lodash

可选链操作符报错？

关于可选链操作符，之前写过一篇文章，【关于可选链操作符(?.)】，如今旧项目又遇到新问题！

究其根本，要么是因为浏览器缓存、版本问题，要么是因为各种依赖的版本不支持es7新语法问题。

那么有没有一个不会出现这种问题的操作方式呢？ - - - - 答案就是：Lodash

可选链操作符 & Lodash.get

安装

yarn add lodash

引入lodash

import * as _ from “lodash”;

1. 数据结构存在:

      unknown_parameter: {
        first_floor: {
          second_floor: {
            secret: "he secret is hidden deep"
          }
        }
      }

分别使用两种方式进行获取secret

    console.log("方式1 使用可选链操作符: ", 
    	this.unknown_parameter?.first_floor?.second_floor?.secret || "He has no secrets"  );
    console.log( "方式2 使用lodash.get: ",  
    	_.get(this.unknown_parameter, "first_floor.second_floor.secret") ||  "He has no secrets" );

打印结果如下：

---

2. 数据结构不存在:

      unknown_parameter: {
        first_floor: {
          // second_floor: {
          //   secret: "he secret is hidden deep"
          // }
        }
      }

分别使用两种方式进行获取secret

    console.log("方式1 使用可选链操作符: ", 
    	this.unknown_parameter?.first_floor?.second_floor?.secret || "He has no secrets"  );
    console.log( "方式2 使用lodash.get: ",  
    	_.get(this.unknown_parameter, "first_floor.second_floor.secret") ||  "He has no secrets" );

打印结果如下：

参考文章: JavaScript里如何避免使用可能为null对象的属性