新版语法 可选链操作符( ?. ) 编译失败

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

原因分析

babel版本(6.x)过低

解决方案

升级babel

  1. 升级babel版本至最新(7.x)
npm i @babel/core

npm install babel-upgrade -g 
babel-upgrade --write
  1. 删除node_modules文件夹

  2. 升级babel相关组件

    img

缺陷:服务器你可能没有权限

重构函数nestedProperty

var array = [
  { a: 0, b: 1, c: 2 },
  { a: 10, b: 11, c: 12 },
  { a: 20, b: 21, c: 22 }
]
var obj = {
  a: {
    b: {
      c: {
        d: 5,
        arr: array
      }
    }
  }
};
let pop = []
console.log(nestedProperty.get(pop, "length"));
//因`?.`不能使用
console.log(nestedProperty.get(obj, "a.b.c.arr.+.c"));
// # 错误
console.log(nestedProperty.get(obj,'+.c')); //undefined
console.log(nestedProperty.get(obj, "a.d.c")); //undefined
console.log(nestedProperty.get(obj)); //原值
posted @ 2021-10-13 16:09  千年轮回  阅读(1198)  评论(0编辑  收藏  举报