如何优雅的从俩个一个数组中找出相同的项(不使用嵌套循环)

前言:我们在项目中经常会遇到这样的问题,就是以一个数组为基础然后区另一个后台返回的数组里区查找对应项的值,如下俩个数组:

targetArray: [
        {
          id: 123,
          name: 'xiaobo'
        },
        {
          id: 546,
          name: 'xiaowang'
        },
        {
          id: 54688,
          name: 'xiaowang88'
        }
      ],
      sampleArray: [
        {
          id: 123,
          name: 'xiaobo'
        },
        {
          id: 546,
          name: 'xiaowang'
        },
        {
          id: 54600,
          name: 'xiaowang1'
        },
        {
          id: 1154600,
          name: 'xiaowang2'
        }
      ]
  1. 在数组 sampleArray 和 targetArray 中找到 相同的项,我们的思路正常的思路是循环数组 targetArray 然后在循环里嵌套一个循环 targetArray,像这样:
	let result = []
	sampleArray.forEach(item => {
		targetArray.forEach(i => {
			if(item.id === i.id) {
				result.push(i)
			}
		})
	})
  1. 上面这样的思路就是嵌套循环,当我们的数据量比较大 或者 数据结构有多层的时候就需要多层嵌套,执行效率低而且不好理解。我们现在的思路是循环数组targetArray建立一个id为索引的对象mapA,然后再循环数组sampleArray对比mapA就能轻松找出对应的选项,或者取出对应的值,如下:
	  let res = []
      let mapA = {}
      // 第一次循环得到id对应的map对象
      targetArray.forEach(element => {
        mapA[element.id] = element
      });
      // 第二次循环数组sampleArray,对比map对象和B数组的每一项
      sampleArray.forEach(item => {
        if(mapA[item.id]){
          res.push(item)
        }
      })

你可能感兴趣的:(es6,js数组操作)