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

---

在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视图不更新的问题。