数组中filter过滤器的妙用-模糊搜索

 

let array = [
	{id:'1111',name:'第一条数据',key_dict:'是',data:[{a:"a1"},{a:"a1"}]},
	{id:'2222',name:'第二条数据',key_dict:'是',data:[{a:"aa2"},{a:"aa2"}]},
	{id:'3333',name:'第三条数据',key_dict:'否',data:[{a:"aaa3"},{a:"aaa3"}]},
	{id:'4444',name:'第四条数据',key_dict:'否',data:[{a:"aaa4"},{a:"aaa4"}]},
	{id:'5555',name:'第五条数据',key_dict:'是',data:[{a:"aa"},{a:"aa5"}]}
]

var new_array = array.filter((item) => {
	return item.key_dict == '否' & item.name == '第三条数据' 
})



console.log("过滤出来的array", new_array);
console.log("new_array[0].data.a:", new_array[0].data[0].a);

备注：filter 每一次的新增都可以过滤数据用&组合，这样就可以拿到同数组内含有key_dict:'否'并且name：'第三条的数据' 的数组（- 过滤后出来的数组 -）

2.在vue中的使用，模糊搜索 - 场景1：树形 场景2：菜单搜索

data(){
  retrun {
    search:'',  // 模糊查询 - input
    items:[
      name: '1团'
      children:[
        {
          name: '1团-1'
          children:[
             name:'1团-1-1'
          ]
        },
        {
          name: '1团-2'
          children:[
            name:'1团-2-1'
          ]
        },
      ]
    ]
  }
}  
computed: {
        getItems() {
          let items;
            if (this.search == '') {
                items = this.items
            }
            else {
                items = this.items.filter(item =>
                    item.title.indexOf(this.search) != -1 ||
                    item.children && item.children.find(child => 
                    child.title.indexOf(this.search) != -1)
                )
            }
          return items
        },
 }

备注：vue2在响应中map与foreach区别