对象某个属性不存时候判断 · 前端知识 -- 学习整理

[TOC] >[success] # 对象某个属性不存在的判断 ~~~ 1.cannot read property of undefined 报错处理方式 ~~~ >[danger] ##### 使用&& 断路运算符处理 ~~~ const obj = { user:{ name:"w", } }; // 通过短路运算符进行访问行嗅探实现代码 obj && obj.user && obj.user.name ~~~ >[danger] ##### 通过||单元设置默认保底值 ~~~ const obj = { user:{ name:"w", } }; ((obj||{}).user||{}).name ~~~ >[danger] ##### 使用try catch 捕获异常 ~~~ const obj = { user:{ name:"w", } }; let res; try{ res = obj.user.name }catch(e){ res = undefined; } ~~~ >[info] ## 可选链 ?. [参考链接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining) ~~~ 1.当对象某个属性不存时候，不会引起错误，该表达式短路返回值是、 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined 2.'obj.name?.age' 以这个案例说明，可选链保证的是'obj.name'这个值既不是undefined 也不是null 的情况下才能调用name，如果是的话就返回 undefined· 3.'可选链与函数使用'，函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常，但是如果存在却不是一个函数会报错 let result = someInterface.customMethod?.(); 4.可选链不能进行赋值操作 let object = {}; object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment 5.'断路计算'下面的例子如果左面操作是null 或者undefined 就形成断路后面的属性也不会进行计算 let potentiallyNullObj = null; let x = 0; let prop = potentiallyNullObj?.[x++]; console.log(x); // x 将不会被递增，依旧输出 0 6.语法 obj?.prop obj?.[expr] arr?.[index] func?.(args) ~~~ ~~~ const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // undefined console.log(adventurer.someNonExistentMethod?.()); // undefined function fn(callback){ return callback?.() // callback && callback() } ~~~ * 使用空值合并操作符 ~~~ let customer = { name: "Carl", details: { age: 82 } }; let customerCity = customer?.city ?? "暗之城"; console.log(customerCity); // “暗之城” ~~~ >[danger] ##### 对空值合并一个说明解释 ~~~ 1.空值合并操作符'??' 和 "逻辑操作符||"的区别，空值合并操作符只有当左面操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数，逻辑操作符|| 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（0， ''， NaN， null， undefined）都返回右侧值 ~~~ * 案例 ~~~ 1.可以看出非null 或者 undefined 是不会影响到空值合并操作符的 ~~~ ~~~ let count = 0; let text = ""; let qty = count || 42; let message = text || "hi!"; console.log(qty); // 42 console.log(message); // "hi!" let qty1 = count ?? 42 let message1 = text ?? "hi!" console.log(qty1); // 0 console.log(message1); // 空字符 ~~~ * 案例当返回值是null 或undefined 也会出现短路效果 ~~~ function A() { console.log('函数 A 被调用了'); return undefined; } function B() { console.log('函数 B 被调用了'); return false; } function C() { console.log('函数 C 被调用了'); return "foo"; } console.log( A() ?? C() ); // 依次打印 "函数 A 被调用了"、"函数 C 被调用了"、"foo" // 因为A返回了undefined 所以执行右侧 console.log( B() ?? C() ); // 依次打印 "函数 B 被调用了"、"false" // 因为左侧返回的是非undefined 和 null 因此只执行左侧 ~~~