Javascript 字典类型的增删改查

定义：

let a = {'k1':1, "k2":2}
console.log(a)

{k1: 1, k2: 2}
k1: 1
k2: 2

---

增：

let a = {'k1':1, "k2":2}
a["k3"] = 3
console.log(a)

{k1: 1, k2: 2, k3: 3}
k1: 1
k2: 2
k3: 3

---

删：

let a = {‘k1’:1, “k2”:2}
delete a[“k2”]
console.log(a)

{k1: 1}
k1: 1

---

改：

let a = {'k1':1, "k2":2}
a["k2"] = 999
console.log(a)

{k1: 1, k2: 999}
k1: 1
k2: 999

---

查：

let a = {'k1':1, "k2":2}
console.log(a["k2"])

2

---

遍历：

let a = { k1: 1, k2: 2, k3: "hello world" };

for (let i in a) {
	console.log("键=", i, "值=", a[i]);
}

键= k1 值= 1
键= k2 值= 2
键= k3 值= hello world

以变量作 “键” (用中括号将变量括起)：

let myKey = 'foo';

let myObj = {
  [myKey]: 'bar'
};

console.log(myObj); // Output: { foo: 'bar' }

---

在Vue中的应用：

<template>
<div>
   <div v-for="(v, k) in a">
     键 = {{ k }} </BR>
     值 = {{ v }}  </BR>
     <hr></hr>
   </div>
</div>
</template>
<script>
export default {
 name: "test",
 data() {
   return {
     a: {
       k1: 1,
       k2: 2,
       k3: "hello world",
     },
   };
 },
};
</script>

以上代码生成网页：

---

Vue中使用字典的注意事项：

<template>
<div>
   <div v-for="(v, k) in a">
     键 = {{ k }} </BR>
     值 = {{ v }}  </BR>
     <hr></hr>
   </div>
</div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      a: {},
    };
  },
  methods: {
    init: function () {
      this.a = {
        k1: 1,
        k2: 2,
        k3: "hello world",
      };
    },
  },
  mounted: function () {
    this.init();
  },
};
</script>

以上代码与前一个没有本质区别，只是将a的定义放进了一个函数，程序运作正常，但是，下面我们改一下init函数的写法，变成这样：

    init: function () {
      this.a['k1'] = 1
      this.a['k2'] = 2
      this.a['k3'] = 'Hello world'
    },

其实就是定义a的方法改变了一下，前者在定义的时候直接填充数据，而后者是动态添加进去的，这时候，我们如果在控制台观察 console.log(a) 的结果，发现并没有本质区别。

但实际上，Vue页面却不能正常显示了（空白一片），这种时候，我们只需要将字典序列化一次再反序列化成字典问题就能解决：

    init: function () {
      this.a['k1'] = 1
      this.a['k2'] = 2
      this.a['k3'] = 'Hello world'
      this.a = JSON.parse(JSON.stringify(this.a))
    },

首先用JSON.stringify将字典a变成json字符串（序列化），然后再将json字符串还原成字典（反序列化），乍看上去好像多此一举，实则这个步骤必不可少。

进一步探索：

关于这个问题的源头，是 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化 所致，具体细节可以参考这篇Vue的官方文档，在此就不赘述了：

VUE文档：深入响应式原理

当然，我们也可以采用官网推荐的方法来解决：
现在，将 this.a = JSON.parse(JSON.stringify(this.a)) 这行代码替换为：

this.a = Object.assign({}, this.a);

两者的效果是完全一样的，都解决了Vue视图不更新的问题。