起因

折腾了几天，客户的需求终于敲定下来了，今天高高兴兴地在撸代码(Bug)，突然遇到一个奇怪的问题，自从考试后已经很久没撸代码了，遇到这个问题还一时摸不着头脑

具体是这样的：

需求是要根据我所处的不同menu来获取对应的导航bar，我查了半天决定用动态路由来解决这个需求，做法是事先定义好一张路由表，再从后端传来的值从路由表里找对应的路由进行渲染。于是就先写了路由表和这么一个方法：

然后再调用，因为有多个菜单，每个菜单可能含有相同的bar，为了避免组件名重复，又多加了一句：

1
2
3
let data = findRouterMap(topBar.name)
data.name = data.name + "_" + name // 避免组件名重复
router.push(...[data]); // 将data(变为数组)添加到router里边

诶，写完心情还美滋滋，准备运行测试的时候，问题就出现了QAQ

发展

仔细看这个报错，发现是data.name = data.name + "_" + name 这句的位置报错了，console.log(data)一下，发现这个data一开始还是正常的，到后面竟然undefined了！

一开始还以为是我哪里写错了，但是看了半天，查找——赋值给data——修改data.name——添加，没毛病呀！

转折

emmm，在我愁眉不展的时候，突然想起，这个undefined…好像查找不到对应的name就会返回undefined

那我康康他到底找到了个啥，于是我在find()里边加了句console.log

1
2
3
4
5
6
function findRouterMap(name){
  return topRouterMap.find((item) => {
    console.log(item.name)
    return name === item.name
  });
}

….卧槽，好像找到问题所在了！

啊这这，原来当我修改“复制”过来的data的name值的时候，也把原先路由表里对应的name值给修改了！

let data = findRouterMap(topBar.name)

这里的等于号并不是我理解的复制，而是直接引用了路由表的路由，导致我修改data的值反而也把路由表的值给修改了…

那么问题找到了，但怎样才能解决这个问题呢？

我想了两种办法：

  1. find判断是否相等改为判断是否包含

    1
    2
    3
    4
    5
    function findRouterMap(name){
      return topRouterMap.find((item) => {
        return item.name.includes(name)
      })
    }

  2. 将引用改为拷贝，参考

    1
    let data = JSON.parse(JSON.stringify(findRouterMap(topBar.name)))

我用了第2种

总结

当初老师说得没错，想要学好一个东西仅仅关注它的实现是完全不够的，更多的是要知道它的底层是怎么回事，比如这次的引用，就是很细节的东西，项目中往往是细节的错误导致整个项目出现这的那的问题。不说了，我先去啃一遍ES6了！！