数据处理之两个数组通过相同元素的匹配，筛选出满足条件的数据，并返回这个满足条件的数组

需求描述：

本地有一个数组，项目是通过本地数据全部展示的，但是今天后台说，要根据后台数据展示数据，后台接口返给我一个数组，通过后台接口返回的数据，去匹配本地的数据，展示本地的数据中包含后台接口数据的部分。

解决方案：

<script>
    // 本地数据
    var date1 = [
        {
            id:1,
            name:'测试1'
        },
        {
            id:2,
            name:'测试2'
        },
        {
            id:3,
            name:'测试3'
        },
        {
            id:4,
            name:'测试4'
        },
    ]
    // 接口数据
    var date2 = ['测试1','测试3']
    // 需求：通过接口数据去匹配本地数据，返回本地数据中有接口数据的数据
    // 方法一：
    var newDate1 = date1.map(item=>{ // map遍历本地数据
        if(date2.find(val=>val==item.name)){ // 如果在接口数据中包含本地数据，则返回这条本地数据
            return item
        }
    })
    console.log(newDate1);// 打印的结果中会将满足条件的返回，但是不满足条件的也会返回，且返回值为undefined
    var newDate1 = newDate1.filter(val=>!!val) // 通过过滤掉没有值的，可以返回完整的数据
    console.log(newDate1);
    // 方法二：
    var newDate11 = date1.filter(item=>date2.includes(item.name))  // 直接过滤掉在接口数据中包括本地数据的值，并返回
    console.log(newDate11);
</script>

注意：当使用map过滤数据的时候，因为map不能返回跟原数组长度不一致的数组，所以就算find找不到，也会返回undefined，所以那个if判断，就算进去了也会返回undefined，导致map返回的数组有undefined存在