是否可以在不使用對象的情況下在 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'},
...

鍵可以是任意字符串。 如果鍵包含空格或其他非字母數字字符，則可以使用括號表示法訪問它。 由於它是基本的 JS 特性，它在 Vue 模板中得到支持：

{{links['My Dashboard']}}

普通對象的問題在於規范不保證鍵的順序，盡管它在所有當前實現中事實上都保留了。

保證順序的現代替代方案是 ES6 Map 。 它目前在 Vue 中是非響應式的，並且只能用普通對象替換靜態數據：

...
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']);