数组和数组对象的交集

数组和数组对象的交集

顾名思义，即多个数组中相同数据的集合成为交集，话不多说，上代码：

1、使用filter和new Set()获取数组交集

注解： new Set()的数据，具有添加add/清除clear/删除delete/是否包含has等方法,has方法判断该数据中是否包含某指定元素，包含返回true，不包含返回false

// new Set的使用示例：
const a = new Set([1,2,3,4,5])
const num1 = a.has('a')
const num2 = a.has(1)
const num3 = a.has('1')
console.log(num1) // false a数据中不包含字符串a
console.log(num2) // true a数据中包含数字1
console.log(num3) // false a数据中不包含字符串1

const arr1 = [1,2,3,4,5]
const arr2 = [3,4,5,6,7]
const arr3 = arr1.filter(x => new Set(arr2).has(x))
console.log(arr3) // [3, 4, 5] 解析如下： 
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件new Set(arr2).has(x)的x元素push到arr3中 
// arr2使用has开始搜索arr1中传过来的x 
// 当arr2中包含x时，返回true,此时arr1的filter捕获到true时，便会将x元素push到arr3中，不包含则返回false，继续向下检索

// 数组对象:求arr1和arr2中id相同的集合(数组对象借助map方法，将id单独提出来)
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.map(item=>item.id)
const arr4 = arr2.filter(x => new Set(arr3).has(x.id))
console.log(arr4) // [{id: 1, name: '张三'},{id: 2, name: '李四'}] 解析如下： 
// arr1通过map方法，将每一项的id存储到arr3中
// arr2使用filter开始循环，每一项为x，并将arr2中满足条件new Set(arr3).has(item.id)的x元素push到arr4中 
// arr3使用has开始检索arr2中传过来的x 
// 当arr3中包含x.id时，返回true,此时arr2的filter捕获到true时，便会将x元素push到arr4中，不包含则返回false，继续向下检索

2、使用filter和some获取数组的交集

知识点：some用于检测数组中的元素是否满足指定条件，并返回一个布尔值,如果有一个元素满足条件，则返回true , 剩余的元素不会再执行检测;如果没有满足条件的元素，则返回false,继续循环检测下一项元素是否满足指定的条件，直至为true或至最后一个元素，示例如下：

// 数组
const arr1 = [1,2,3,4]
const arr2 = [2,3,4,5]
const arr3 = arr1.filter(x => arr2.some(y => x==y))
console.log(arr3) // [2,3,4] 解析如下：
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件arr2.some(y => x==y)的x元素push到arr3中，
// arr2使用some开始循环，每一项为y，当x===y时，arr2终止循环，返回布尔值true，此时arr1的filter捕获到true时，便会将x元素push到arr3中
// 数组对象
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.filter(x => arr2.some(y => y.id === x.id))
console.log(arr3) // [{id: 1, name: '张三'},{id: 2, name: '李四'}]

3、使用filter和find获取数组的交集

find，用于找出第一个符合条件的数组成员。如果匹配到，则返回该成员，如果没有找到匹配的则返回 undefined。我们在这也可以理解为返回值不等于undefined，就说明该数组中包含其指定的内容，示例如：

// find的使用示例：
const a = [1,2,3,4,5]
const num1 = a.find(value => {
  return value == 1;
})
const num2 = a.find(value => {
  return value == 9;
})
console.log(num1) // 1 1在数组a中，返回该成员1
console.log(num2) // undefined 9在数组a中不存在，所以返回值是undefined

// filter和find求两个数组的交集
const arr1 = [1,2,3,4,5]
const arr2 = [3,4,5,6,7]
const arr3 = arr1.filter(x => arr2.find(y => { return x == y }) !== undefined)
console.log(arr3) // [3, 4, 5] 解析如下： 
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件arr2.find(y => { return x == y }) !== undefined 的x元素push到arr3中 
// arr2使用find开始搜索arr1中传过来的x 
// 当arr2中包含x时，返回该成员,且!== undefined为true，此时arr1的filter捕获到true时，便会将x元素push到arr3中

// 数组对象:求arr1和arr2中id相同的集合
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.filter(x => arr2.find(y => { return x.id == y.id }) !== undefined)
console.log(arr3) // [{id: 1, name: '张三'},{id: 2, name: '李四'}]

4、filter和findLast获取数组交集

findLast跟find类似，是从最后开始循环，用于找出第一个符合条件的数组成员。如果匹配到，则返回该成员，如果没有找到匹配的则返回 undefined。我们在这也可以理解为返回值不等于undefined，就说明该数组中包含其指定的内容，示例如：

// findLast的使用示例：
const a = [1,2,3,4,5]
const num1 = a.findLast(value => {
  return value == 1;
})
const num2 = a.findLast(value => {
  return value == 9;
})
console.log(num1) // 1 1在数组a中，返回该成员1
console.log(num2) // undefined 9在数组a中不存在，所以返回值是undefined

// filter和findLast求两个数组的交集
const arr1 = [1,2,3,4,5]
const arr2 = [3,4,5,6,7]
const arr3 = arr1.filter(x => arr2.findLast(y => { return x == y }) !== undefined)
console.log(arr3) // [3, 4, 5] 解析如下： 
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件arr2.findLast(y => { return x == y }) !== undefined 的x元素push到arr3中 
// arr2使用findLast开始搜索arr1中传过来的x 
// 当arr2中包含x时，返回该成员,且!== undefined为true，此时arr1的filter捕获到true时，便会将x元素push到arr3中

// 数组对象:求arr1和arr2中id相同的集合
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.filter(x => arr2.findLast(y => { return x.id == y.id }) !== undefined)
console.log(arr3) // [{id: 1, name: '张三'},{id: 2, name: '李四'}]

5、使用filter和indexOf获取数组的交集

indexOf()方法用于返回某个指定的字符串的值在字符串中首次出现的位置，如果匹配到，则最小返回值为0，如果没有找到匹配的字符串则返回 -1。我们在这也可以理解为返回值只要大于-1，就说明该字符串中包含其指定的字符串，示例如下：

// indexOf的使用示例：
const a = '12345'
const b = [1,2,3,4,5]
const num1 = a.indexOf('1') // ’12345‘中包含字符串1，返回1在字符串’12345‘的位置，即返回 0
const num2 = a.indexOf('9') // 不包含9，返回 -1
const num3 = b.indexOf(2)   // 返回 1

const arr1 = [1,2,3,4]
const arr2 = [2,3,4,5]
const arr3 = arr1.filter(x => arr2.indexOf(x) > -1)
console.log(arr3) // [2,3,4] 解析如下：
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件arr2.indexOf(x) > -1的x元素push到arr3中
// arr2使用indexOf开始搜索arr1中传过来的x
// 当arr2中包含x时，返回出现的位置,且>-1为true，此时arr1的filter捕获到true时，便会将x元素push到arr3中

// 数组对象:求arr1和arr2中id相同的集合(数组对象借助map方法，将id单独提出来)
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.map(item=>item.id)
const arr4 = arr2.filter(x => arr3.indexOf(x.id) > -1)
console.log(arr4) // [{id: 1, name: '张三'},{id: 2, name: '李四'}] 解析如下： 
// arr1通过map方法，将每一项的id存储到arr3中
// arr2使用filter开始循环，每一项为x，并将arr2中满足条件arr3.indexOf(x.id) > -1的x元素push到arr4中 
// arr3使用indexOf开始检索arr2中传过来的x.id 
// 当arr3中包含x.id时，返回true,此时arr2的filter捕获到true时，便会将x元素push到arr4中，不包含则返回false，继续向下检索

6、使用filter和findIndex获取数组的交集

findIndex和indexOf的用法相似，返回第一个符合条件的数组成员的位置，如果匹配到，则最小返回值为0，如果没有找到匹配的则返回 -1。我们在这也可以理解为返回值只要大于-1，就说明该数组中包含其指定的内容，示例如：

// findIndex的使用示例：
const a = [1,2,3,4,5]
const num1 = a.findIndex(value => {
  return value == 1;
})
const num2 = a.findIndex(value => {
  return value == 9;
})
console.log(num1) // 0 1在数组a中的位置是0
console.log(num2) // -1 9在数组a中不存在，所以返回值是-1

// filter和findIndex求两个数组的交集
const arr1 = [1,2,3,4,5]
const arr2 = [3,4,5,6,7]
const arr3 = arr1.filter(x => arr2.findIndex(y => { return x == y }) > -1)
console.log(arr3) // [3, 4, 5] 解析如下： 
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件arr2.findIndex(y => { return x == y }) > -1的x元素push到arr3中 
// arr2使用findIndex开始搜索arr1中传过来的x 
// 当arr2中包含x时，返回出现的位置,且>-1为true，此时arr1的filter捕获到true时，便会将x元素push到arr3中

// 数组对象:求arr1和arr2中id相同的集合
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.filter(x => arr2.findIndex(y => { return x.id == y.id }) > -1)
console.log(arr3) // [{id: 1, name: '张三'},{id: 2, name: '李四'}]

7、使用filter和findLastIndex获取数组的交集

findLastIndex和findIndex的用法相似，只是从最后开始循环，返回第一个符合条件的数组成员的位置，如果匹配到，则最小返回值为0，如果没有找到匹配的则返回 -1。我们在这也可以理解为返回值只要大于-1，就说明该数组中包含其指定的内容，示例如：

// findLastIndex的使用示例：
const a = [1,2,3,4,5]
const num1 = a.findLastIndex(value => {
  return value == 1;
})
const num2 = a.findLastIndex(value => {
  return value == 9;
})
console.log(num1) // 0 1在数组a中的位置是0
console.log(num2) // -1 9在数组a中不存在，所以返回值是-1

// filter和findLastIndex求两个数组的交集
const arr1 = [1,2,3,4,5]
const arr2 = [3,4,5,6,7]
const arr3 = arr1.filter(x => arr2.findLastIndex(y => { return x == y }) > -1)
console.log(arr3) // [3, 4, 5] 解析如下： 
// arr1使用filter开始循环，每一项为x，并将arr1中满足条件arr2.findLastIndex(y => { return x == y }) > -1的x元素push到arr3中 
// arr2使用findLastIndex开始搜索arr1中传过来的x 
// 当arr2中包含x时，返回出现的位置,且>-1为true，此时arr1的filter捕获到true时，便会将x元素push到arr3中

// 数组对象:求arr1和arr2中id相同的集合
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.filter(x => arr2.findLastIndex(y => { return x.id == y.id }) > -1)
console.log(arr3) // [{id: 1, name: '张三'},{id: 2, name: '李四'}]

8、使用filter和includes获取数组的交集

filter：对数组进行过滤并创建一新数组，且其元素是通过检查指定数组中符合条件的所有元素。例子如下：

const arr1 = [1,2,3,4,5,6,7,8,9]
// 返回一个新数组，arr2是由arr1中所有大于7的元素所组成的新数组，当item>7为true时，返回item并push到arr2中
const arr2 = arr1.filter(item => item > 7) 
console.log(arr2) // [8, 9]

注意：配合includes求交集，includes不适用于对象，所以不能用于数组对象。示例如下：

const arr1 = [1,2,3,4]
const arr2 = [2,3,4,5]
const arr3 = arr1.filter(item => arr2.includes(item))
console.log(arr3) // [2,3,4]

// 数组对象:求arr1和arr2中id相同的集合(数组对象借助map方法，将id单独提出来)
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = arr1.map(item=>item.id)
const arr4 = arr2.filter(x => arr3.includes(x.id))
console.log(arr4) // [{id: 1, name: '张三'},{id: 2, name: '李四'}] 解析如下： 
// arr1通过map方法，将每一项的id存储到arr3中
// arr2使用filter开始循环，每一项为x，并将arr2中满足条件arr3.includes(x.id)的x元素push到arr4中 
// arr3使用includes开始检索arr2中传过来的x.id 
// 当arr3中包含x.id时，返回true,此时arr2的filter捕获到true时，便会将x元素push到arr4中，不包含则返回false，继续向下检索

9、使用forEach和find获取数组的交集

注解：filter是将满足条件的元素push到一个新数组中，因此，我们可以使用forEach去循环原数组，并提前声明一个空数组，用来存在满足条件的元素，所以filter得到的新数组就等于用forEach循环出来并满足条件的元素依次push到提前定义好的空数组中，所以，以上6种方法都可以使用forEach循环出来并满足条件的元素依次push到提前定义好的空数组中的方式来替换filter，所以8*2，就是16种获取交集的方法了，以下挑选forEach替换filter并结合find的方式求两个数组的交集，示例如下：

// forEach和find求两个数组的交集
const arr1 = [1,2,3,4,5]
const arr2 = [3,4,5,6,7]
const arr3 = []
arr1.forEach(x => {
    arr2.find(y => { return x == y }) !== undefined && arr3.push(x)
})
console.log(arr3) // [3, 4, 5] 解析如下： 
// arr1使用forEach开始循环，每一项为x，并将arr1中满足条件arr2.find(y => { return x == y }) !== undefined 的x元素push到arr3中 
// arr2使用find开始搜索arr1中传过来的x 
// 当arr2中包含x时，返回该成员,且!== undefined为true，此时arr1的filter捕获到true时，便会将x元素push到arr3中

// 数组对象:求arr1和arr2中id相同的集合
const arr1 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
const arr2 = [{id:1, name: '张三'},{id:2,name:'李四'},{id:4,name:'孟六'}]
const arr3 = []
arr1.forEach(x => {
    arr2.find(y => { return x.id == y.id }) !== undefined && arr3.push(x)
})
console.log(arr3) // [{id: 1, name: '张三'},{id: 2, name: '李四'}]