uni-app 模板中表达形式为 JSON.parse(obj) && JSON.parse(obj).prop 时，无论obj中是否有prop，都会显示undefined

uni-app 模板中表达形式为 JSON.parse(obj) && JSON.parse(obj).prop 时，无论obj中是否有prop，都会显示undefined

开发环境 版本号 项目创建方式
Windows 版本1809 HBuilderX
HBuilderX 3.4.7
第三方开发者工具 1.05.2204250
基础库 2.19.1

bug描述：

模板中表达形式为 JSON.parse(obj) && JSON.parse(obj).prop 时，无论obj中是否有prop，都会显示undefined

结果显示

示例代码：

<template>  
  <view>  
    <view style="color: green;">  
      <view class="">
        正确的：{{obj.value && JSON.parse(obj.value).a}}
      </view>  
    </view>    
    <view style="color: red;">  
      <view class="">
        错误的：{{obj.value && JSON.parse(obj.value) && JSON.parse(obj.value).a}}
      </view>  
    </view>   
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      obj: {  
        key: 1,  
        value: `{"a":1,"b":2}`  
      }  
    };  
  },  
  onLoad() {  
    console.warn(this.obj.value && JSON.parse(this.obj.value) && JSON.parse(this.obj.value).a);  
  }  
};  
</script>  

<style lang="scss"></style>  
`

更多关于uni-app 模板中表达形式为 JSON.parse(obj) && JSON.parse(obj).prop 时，无论obj中是否有prop，都会显示undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

alpha版本已解决此问题！

更多关于uni-app 模板中表达形式为 JSON.parse(obj) && JSON.parse(obj).prop 时，无论obj中是否有prop，都会显示undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 模板中，当你使用 JSON.parse(obj) && JSON.parse(obj).prop 这种表达形式时，如果 obj 是一个有效的 JSON 字符串，JSON.parse(obj) 会将其解析为一个 JavaScript 对象。然后，JSON.parse(obj).prop 会尝试访问该对象的 prop 属性。

如果 obj 中不存在 prop 属性，或者 obj 不是一个有效的 JSON 字符串，JSON.parse(obj).prop 会返回 undefined。因此，无论 obj 中是否有 prop，如果 prop 不存在，最终结果都会是 undefined。

解决方法

为了避免这种情况，你可以使用可选链操作符 ?. 来安全地访问对象的属性。可选链操作符会在属性不存在时返回 undefined，而不会抛出错误。

const parsedObj = JSON.parse(obj);
const propValue = parsedObj?.prop;

或者，如果你想要在一行中完成：

const propValue = JSON.parse(obj)?.prop;

示例

假设 obj 是一个 JSON 字符串：

const obj = '{"name": "John", "age": 30}';
const propValue = JSON.parse(obj)?.prop; // propValue 将会是 undefined

如果 obj 中包含 prop 属性：

const obj = '{"name": "John", "age": 30, "prop": "value"}';
const propValue = JSON.parse(obj)?.prop; // propValue 将会是 "value"
回到顶部