算法 | Diff Tow Arrs

Diff Tow Arrs
将题目换成大白话讲就是：找到每个数组中独有的元素，将其组成新的数组。

eg:
["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] => ["pink wool"]
[1, "calf", 3, "piglet"], [1, "calf", 3, 4] => ["piglet", 4]

1. 分析入参

两个数组，每个数组中含有若干数字元素。
需不需要对参数进行统一化处理？两者格式统一，此处不需要。

2. 思路

思路是拿着 arr1 中的每个数字去 arr2 中比对，如果没有找到相同的就将该数字放到结果数组中，完成后 arr1 和 arr2 身份互换。
问题被转化成了如何确定一个数组中是否包含某个元素？或者说某个元素是否在数组中？有没有种把字句换成被字句的感觉？

3. 如何确定一个数组中是否包含某个元素

方法很多，这里比较三种，分别是大而全的 forin ，简练的 includes 和有点啰嗦的 indexOf。

3.1 forin方法

function isHave(arr, item) {
    for (let i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return "arr 包含 item"
        }
    }
    return "没有找到与之匹配的"
}
const result = isHave([1, 3, 4], 3)
console.log(result)

3.2 includes方法

上面是使用 for in 实现的你心里是否有我的功能函数，
写起来有点繁琐，有没有一步到位的高阶函数可以使用？

function isHave(arr, item) {
    const result = arr.includes(item)
    console.log(result)
}
isHave([1, 3, 4], 3)

3.3 indexOf方法

includes() 方法用来看你心里是否有我，结果为 true 或者 false，还有个类似的方法 indexOf ，不但能确定数组中是否包含某元素，还可以找到对应的索引值。

function isHave(arr, item) {
    const result = arr.indexOf(item)
    console.log(result)
}
isHave([1, 3, 4], 3)

和 includes 相比，indexOf 就有点话多了，不但告诉你有没有，还告诉你在哪里。
需要注意的是，indexOf 只返回第一次找到的索引，且找不到时返回的是-1，如果检测数组中是否包含某元素在条件判断时需要转化一下。

3.4 选哪种方法

综上三种方案，还是 includes 好使。

function diffArr(arr1, arr2) {
    const result = []
    // 先将arr1设为待检测数组，遍历arr2
    arr2.forEach(item => {
        if(!arr1.includes(item)) {
            // 在数组arr1中查无此数
            result.push(item)
        }
    })
    arr1.forEach(item => {
    if(!arr2.includes(item)) {
        // 在数组arr1中查无此数
        result.push(item)
    })
    console.log(result)
    return result
}
diffArr([1, 2, 3, 9, 5], [1, 2, 3, 4, 5])

4. 优化

上面的代码是可以完成功能的，但有两处地方有重复，不妨抽成一个函数。

function getDiffFromArr1(arr1, arr2) {
    // 找到arr1中独有的元素
    let arr = []
    arr1.forEach(item => {
        if(!arr2.includes(item)) {
            arr.push(item)
        }
    })
    return arr
}
function diffArr(arr1, arr2) {
    const result1 = getDiffFromArr1(arr1, arr2)
    const result2 = getDiffFromArr1(arr2, arr1)
    // result1 中放着arr1中独有元素
    // result2 中存放着arr2中独有的元素
    // 我们需要两者的结合
    // 问题变成如何讲两个数组合成一个，高阶函数concat
    const result = result1.concat(result2)
    console.log('....', result)
    return result
}

diffArr([1, 2, 3], [3, 4, 5])

5. 总结：

这其实是道名为你心里是否有我的情感题。
首先，在入参这里就是两个拥有若干数字元素的数组，不需要对其进行统一化操作。
问题的核心是，如何确定数组中是否包含某个元素，比较了for in | includes | indexOf等方法，includes 更加适合这样的问题。
接着对两个数组依次进行遍历，没有使用 for in 而是使用了 forEach 这种更加简洁的方式。
而后发现，两数组在身份互换时，代码有重复的地方，于是将此项任务抽成了函数。
最后需要对结果进行汇总，使用了高阶函数 concat。

复习到高阶函数：

• includes
• indexOf
• forEach
• concat