关于实现Vue中对json数据进行查询

最近在学Vue和javascript感觉js的好多方法都不太清楚，找了个朋友的代码，做一下模糊查询，在这里记录一下

目录

一、代码案例 

二、涉及到的知识点

三、知识点解析

（一）、Vue中的computed计算属性

(二)、箭头函数

(三)、filter() 方法

 (四)、Object.keys() 

（五）、可枚举属性

(六)、some()

(七)、String()

(八)、toLowerCase()

(九)、IndexOf()

---

一、代码案例 

  computed: { //计算，数据缓存更改一次，数据刷新一次  
// 模糊搜索
    tables () {
      const search = this.search
      if (search) {
        return this.dormitory.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.dormitory
    }
  },

1、内字符解释：

//search在上面input标签中做了双向绑定<input v-model="search">

//在table中的数据进行绑定，使用的是element-UI中的table    ：data=tables

data{

search:' '

dormitory:[{},{},.......]    json对象数组若干 

                }

2、代码解读

        filter()会创建一个新数组（返回的数组、显示到页面中的数组），先遍历this.dormitory，data是当前遍历的元素

        Object.keys(data) 将遍历得到的当前元素data   (内部是个json对象) 中的可枚举属性创建一个数组   也是通过遍历得到新数组，但是因为条件已经运行完（只有一个data）所以还没有运行some()，已经将Object.keys()全部运行完毕

        some() 判断条件是否满足  根据Object.keys(data)产生的数组内部元素有几个就搜索几次，当前产生的数组是['1','2','3','4']，那就some()的搜索会执行4次，但因为方法中的条件返回值就是true或者false 那么覆盖掉了原本要判断Object.keys(data)产生的数组内容，所以some()在这里更多的作用是作为循环

        String(data[key])  key是some()中箭头函数的参数  作为名称使用，key 等于 Object.keys(data)中产生的可枚举属性的数组中的元素名(以下称为O.k属性数组)，所以在这some()就是将当前data (json对象)中的每一个属性的值转换为字符串型

        toLowerCase()将转化为字符串的属性值转化为小写

        indexOf(search)