是否可以在 Vue.js 中有一个关联数组而不使用对象？

Question

我正在尝试获取关联数组，但此语法会产生一个错误，如 lamda 符号。我该怎么做？我想避免使用对象，因为键必须是包含大写字母和空格的字符串。

<script>
export default {
    name: 'VueHeader',
    data() {
        return {
            links : ['Dashboard' => '/dashboard', 'Account' => '/account'],
        }
    }
}
</script>

Answer 1

<script>
export default {
  name: 'VueHeader',
  data() {
    return {
      links : {'Dashboard': '/dashboard', 'Account': '/account'},
    };
  }
}
</script>

JS 对象可以使用字符串作为键。这些将满足您的需求，因为 'Foo' !== 'foo'。举个例子：

> x = {"foo": 10, "Foo": 20, "foo bar": 15}
{ foo: 10, Foo: 20, 'foo bar': 15 }
> x['Foo']
20
> x['foo']
10
> x['foo bar']
15

Answer 2

正如另一个答案正确指出的那样，普通对象在 JavaScript 中充当关联数组：

...
links : {'My Dashboard': '/dashboard', 'My Account': '/account'},
...

键可以是任意字符串。如果键包含空格或其他非字母数字字符，则可以使用 bracket notation 访问它。由于它是基本的 JS 功能，因此在 Vue 模板中得到支持：

{{links['My Dashboard']}}

普通对象的问题是规范不保证键的顺序，尽管它实际上在所有当前实现中都得到了保留。

保证顺序的现代替代方案是 ES6 Map。它在 Vue 中是 currently non-reactive，只能用普通对象替换静态数据：

...
links : new Map([['My Dashboard', '/dashboard'], ['My Account': '/account']]),
...

Answer 3

由于 javascript 中没有关联数组这样的东西，数组必须始终具有递增顺序的整数索引。

取而代之的是，您可以只创建一个对象并访问数组表示法中的属性：

const obj = { 'Dashboard': '/dashboard', 'Account': '/account' };

console.log(obj['dashboard']);
console.log(obj['Account']);

是否可以在 Vue.js 中有一个关联数组而不使用对象？

Is it possible to have an associative array in Vue.js without using an object?

javascript

associative-array

vue.js