JS002. map( ) 和 filter( ) 的区别和实际应用场景（递归函数、深度优先搜索DFS）

在开发过程中难免会碰到省市区级联的操作，一般后端人员是不愿意将中文储存在数据库的。

由于应用页面较多，我们在通过区域Code写查字典函数时应该注意函数的 时间复杂度 / 空间复杂度。

如果用三层for循环遍历省市区列表，很容易就把函数的复杂度堆上立方阶或者指数阶。

addressFilter(res) {
　　var shippingAddress = []
　　let province, city, area
　　for (province of cityList) {
　　　　if (res.provinceCode && res.provinceCode === province.code) {
　　　　　　shippingAddress.push(province.name)
　　　　　　for (city of province.children) {
　　　　　　　　if (res.cityCode && res.cityCode === city.code) {
　　　　　　　　shippingAddress.push(city.name)
　　　　　　　　　　if (res.areaCode && res.areaCode) {
　　　　　　　　　　　　for (area of city.children) {
　　　　　　　　　　　　　　if (res.areaCode === area.code) {
　　　　　　　　　　　　　　　　shippingAddress.push(area.name)
　　　　　　　　　　　　　　　　break
                    　　}
　　　　　　　　　　　　}
　　　　　　　　　　} else break
　　　　　　　　　　break
　　　　　　　　}
　　　　　　}
　　　　　　break
　　　　}
　　}
　　res.shippingAddress = shippingAddress.join(' / ')
　　console.log('shippingAddress', res.shippingAddress)  // '输出: shippingddress福建省/厦门市/思明区'
　　return res
}

u1s1，虽然是应急方法我也被自己恶心到了。为了痛彻前非，趁现在闲下来，我决定把这段代码改了。

当初不使用  map( )  而使用  for···of  的第一个原因是 map( ) 有返回值，这个可以通过使用  filter( )  来解决，第二个原因是 map ( ) 和 filter( ) 不能  break  ，这个就很重要了。

我们生活中查字典时都是查到想要的就合上，没有终止语句的函数即使查到了想要的单词仍然会继续查完整本字典再合上，这无非大大增加了运算时间。

map( )方法

语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数

描述

function(currentValue, index,arr)

必须。函数，数组中的每个元素都会执行这个函数
函数参数:

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

filter( )方法

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

参数

描述

function(currentValue, index,arr)

必须。函数，数组中的每个元素都会执行这个函数
函数参数:

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

map( ) 和 filter( )的区别

map( ) 方法当条件不符合时仍会返回undefined，而 filter( ) 方法是返回一个新的数组，将符合条件的item推入这个数组。

但它们都有同一个缺点就是必需遍历完全才算执行结束，可以理解成它们是等同于数组长度个数的小的函数，break只能终止其中一个，所以是无法终止整个方法的。

由此可知，它们的应用场景跟VUE的computed计算属性相似，并且在数据量较为庞大时（不含非常庞大）执行效率大幅优于for循环，呈反抛物线方程轨迹

递归函数

在有规律的js事件中，可以使用递归函数通过动态改变函数的实参调用本身，就可以对结构相同的树结构进行同样的处理，亦或是如以下代码这样遍历查询想要的结果。

searchAddress(codeArr){
　　var res = []

　　function item(codeArr,cityJson){
　　　　if(codeArr.length){
　　　　　 const a = cityJson.filter(item=>{
　　　　　　　　return item.code === codeArr[0]
　　　　　　})
　　　　　　console.log('searchAddress',a)
　　　　　　res.push(a[0].name)
　　　　　　codeArr.shift()
　　　　　　if(codeArr.length){
　　　　　　　　item(codeArr,a[0].children)
　　　　　　}
　　　　}
　　}
　　item(codeArr, cityList)
　　console.log('xxxxxxxxxxxxxres:' ,res)
　　return res
},

深度优先搜索（DFS & 递归）

深度优先搜索（DFS），言简意骸就是有子查子，否则查兄弟，下图访问顺序应为： A  →  B  →  C  →  D  →  E  →  H  →  I  →  J  →  F  →  G  。

• 如果条件相匹配，将它的子树传给函数做实参再执行递归函数

• 如果条件不匹配，通过索引拿到它的下一个兄弟结点，再次执行

/* 递归省市区json */
addressFun(inputArr) {
　　var outputArr = []
　　let index = 0
　　let status = false
　　function dfs(node) {
　　　　if(status) {
　　　　　　index = 0
　　　　　　status = !status
　　　　}
　　　　if (node[index] && node[index].code === inputArr[0]) {
　　　　　　outputArr.push(node[index].name)
　　　　　　status = !status
　　　　　　inputArr.shift()
　　　　　　if(inputArr.length) {
　　　　　　　　dfs(node[index].children)
　　　　　　} else {
　　　　　　　　return
　　　　　　}
　　　　} else if (node[index]) {
　　　　　　index++
　　　　　　dfs(node)
　　　　} else {
　　　　　　return
　　　　}
　　}
　　dfs(cityList)
　　return outputArr.join(' / ')
}

- END -