JavaScript中访问对象的属性两种方法

使用点操作符（.）：如果你知道属性的名称，在对象上使用点操作符后跟属性名可以直接访问属性方法。例如，如果有一个名为 obj 的对象，并且其中有一个名为 method 的方法，你可以通过 obj.method() 来调用该方法。
使用中括号操作符（[]）：如果你需要以动态或变量的方式访问属性方法，可以使用中括号操作符。在对象上使用中括号操作符，将属性名作为字符串传递给它，然后调用相应的方法。例如，如果有一个名为 obj 的对象和一个存储在变量 methodName 中的属性名，你可以使用 obj[methodName]() 来调用对应的方法。

```const obj = {
    methodA() { console.log('This is method A'); }, 
    methodB() { console.log('This is method B'); } }; 
    // 使用点操作符访问属性方法 
    obj.methodA(); 
    // 输出：This is method A const methodName = 'methodB'; 
    // 使用中括号操作符访问属性方法 obj[methodName](); 
    // 输出：This is method B

```js

3.点操作符和中括号操作符都可以用于访问对象的属性。它们之间的区别主要在于以下几个方面：

语法：点操作符使用.，而中括号操作符使用[]。
属性名：点操作符需要直接指定属性名，而中括号操作符可以使用一个变量或表达式作为属性名。
使用场景：点操作符通常用于访问已知的属性名，而中括号操作符适用于动态地访问属性名。
对象键（key）：点操作符只允许使用合法的标识符作为属性名，而中括号操作符可以接受任意字符串作为属性名，包括包含特殊字符或空格的字符串。

            statusMap: {
                0: '待认证',
                1: '已提交待审核',
                2: '审核成功',
                3: '审核失败',
                4: '资料不全，重新补充'
            }

     <el-select v-model="queryParams.status" placeholder="管家状态" clearable style="width: 200px">
            <el-option v-for="(value, key) in statusMap" :key="key" :value="key" :label="value" />
      </el-select>

:label="value"为显示出的值待认证
:value="key"为选中选项的实际值 0

下面两段代码等价

 <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span>{{ statusMap[scope.row.status] }}</span>
                </template>
  </el-table-column>

使用es6解构

<template slot-scope="{ row }"> 
<span>{{ statusMap[row.status] }}</span>
</template>