JavaScript-如果另一个数组中不存在该数组中的值

2019-11-18 04:36:56 阅读：124 来源： 互联网

我有两个数组：

//list elements from html
var list = document.querySelectorAll('#pres-list-ul li');
//list of retrieved objects from api
var objects = self.retrievedItems;

列表的内容保存在html文件中,以提高效率(除非刷新,否则无需重新渲染相同的数据)

我想从html中删除列表项,如果它在检索到的对象中不再存在.

我知道它在下面的代码行中,但是我无法解决.

//I need to compare the id? For that another loop - which will run hundreds and thousands of time?
for(var j = 0; j < objects.length; j++) {
  if(objects.indexOf(list[i]) === -1) {
    //false
  } else {
    //true
  }
}

场景：

list:  57 //local
objects:  56 //online

在列表中找到该额外值并将其删除.

清单：

<li id="item-5756" data-category="" data-group="" data-created="" data-author=""></li>

宾语：

0: {
  id: //
  title: //
  description //
  // ...
}

1: {
  //...
}

解决方法:

首先,您必须以某种方式对齐数据.我建议您摆脱这些物品的id =“ item-5756”.请改用data-id =“ 5756”.在获得本地和远程的ID列表之后,您可以使用indexOf进行建议的操作,只隐藏不在远程中的本地元素.

在这里查看：https://jsfiddle.net/jrwyopvs/

var remote_data = {
    5756: {
        id: 5756,
        title: '',
        description: '',
    },
    5757: {
        id: 5757,
        title: '',
        description: '',
    },
    5758: {
        id: 5758,
        title: '',
        description: '',
    },
}

$(document).on('click', '.filter', filter_local)

function filter_local () {
    var local_ids = $('#pres-list-ul li').toArray().map(function (element) { return $(element).data('id') })
    var remote_ids = []
    for (remote_index in remote_data) {
        remote_ids.push(remote_data[remote_index].id)
    }
    console.log(local_ids, remote_ids)

    for (local_id in local_ids) {
        if (remote_ids.indexOf(local_ids[local_id]) == -1) {
            $('#pres-list-ul li[data-id="' + local_ids[local_id] + '"]').hide()
        }
    }
}

请注意,有几种改进方法：

更好的过滤算法：我建议的效率很差.可以一次性对ID进行排序和过滤.使用[data =“ 5678”]的查找也相当慢.

使用数据绑定：考虑使用angular或其他mvc框架使您的项目可维护.这样,您可以只跟踪一个元素列表,并让角度确定重新渲染.

标签：loops,arrays,javascript
来源： https://codeday.me/bug/20191118/2025416.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-如果另一个数组中不存在该数组中的值