js学习note1 返回2个数组之间的差异*

        想通过某个途径记录下JavaScript学习点滴,注册,开启前端小白皮皮M的JavaScript学习之旅,决心共同蜕变进步 !(๑╹ヮ╹๑)ノ Studying makes me happy ,有点菜,大神们勿喷 ~(ㄒoㄒ)~

js学习note1 返回2个数组之间的差异*_第1张图片
js这道坎要跨过去

比较2个数组然后返回1个新的数组,这个数组是这2个数组之间的差异。如[1, 2, 3], [1, 2, 3, 4]应该返回[4]。

皮皮M:那把2个数组拼成1个,[1, 2, 3, 1, 2, 3, 4],把里面有重复的值删掉,最后返回[4]。(其实,刚开始这种思路是错的T^T,于是出现下面的代码。)

js学习note1 返回2个数组之间的差异*_第2张图片
错误!没返回[4]

给你捋捋需求哈,比较2个数组,找出他们的差异,比如数组1用forEach去遍历,拿第1个数组的值和第2个数组的值去比较,把2个数组相同的值去掉,剩下的就是有差异的值。(思路是正确的,不过问题出现在不应该直接splice数组,这样会导致数组的长度发生变化,从而计算错误 罒ω罒)

js学习note1 返回2个数组之间的差异*_第3张图片
错误!直接splice改变数组长度

我们可以拷贝一个数组出来解决这个问题。

js学习note1 返回2个数组之间的差异*_第4张图片
终于得出正确解答!

皮皮M:2个数组进行比较,其中相同的值等于undefined,再把2个数组concat()合并成1个新的数组,去掉undefined,为啥最开始要把2个数组拷贝出来?cloneArr1 = arr1.concat() 和cloneArr1 = arr1,2个返回的值都是一样的。

cloneArr1 = arr1 他们用的都是同一个对象,所以会相互影响。例如:

js学习note1 返回2个数组之间的差异*_第5张图片
相互影响,值相同!
js学习note1 返回2个数组之间的差异*_第6张图片
concat()数组拷贝!不相互影响,值不同!  

还可以用filter方法,filter方法返回一个新的数组,对里面每一个item进行操作,如果是true就保留,false就删除。

小记:filter为“过滤”、“筛选”之意。指数组filter后,返回过滤后的新数组。filter的callback函数需要返回布尔值true或false. 如果为true则表示,恭喜你,通过啦!如果为false, 只能高歌“我只能无情地将你抛弃……”。

js学习note1 返回2个数组之间的差异*_第7张图片
filter方法返回 2个数组之间的差异

        继续努力♪(^∀^●)ノ,Jay的歌单列表循环起来~

        2018/05/10

你可能感兴趣的:(js学习note1 返回2个数组之间的差异*)