前端开发总结

本周总结

Vue如何打断循环

跳出for循环

可以用continue或者return跳出本次循环，或者使用break跳出整个循环。

跳出forEach

1、forEach循环和普通循环是不一样的，本身无法跳出循环，必须遍历所有数据才能结束。
2、只有一种办法能跳出循环：就是通过try…catch…去包裹这个循环，当要跳出整个循环时可以抛出错误来中断。eg：

let a = [1, 2, 3]
try {
    a.forEach(ele => {
        if (ele === 2) {
            throw new Error('end')
        } else {
            console.log(ele)
        }
    })
} catch (e) {
    if (e.message === 'end') {
        // 跳出循环后操作...
        console.log(e.message)
    } else {
        console.log(e.message)
    }
}
// 1   end

3、也可以通过替换forEach循环的其他循环来解决问题，比如some()、every()等，通过return true来跳出循环。

总结：

forEach的优势一个是它的回调函数形成了一个作用域，它的curItem和i不会像for循环一样污染全局变量，再一个是更容易写出来函数式的代码，和map、filter、reduce这些高阶函数是一脉相承的。

Vue的beforeRouterEnter、beforeRouterLeave无法被触发问题

1、第一次碰到这个问题是要对路由跳转做限制，给beforeRouterEnter函数打上断点发现没进去。陆续给这个页面的生命周期函数打上console发现生命周期执行顺序混乱，或者没执行。
2、后来检查才发现是由于该vue页面层级太深了（第四层），导致这个问题的。为什么会这样呢？
3、解决办法也很简单，在不那么深的父节点上进行判断就没有这个问题。

关于路由参数有特殊字符

1、本周遇到一个bug，通过decodeUrlComponent加密过的特殊字符关键词作为路由参数跳转时不能跳转到相应搜索页面，而是跳转到404。

2、初步想法是既然URIComponent解码解密出问题，那就换一种方法，于是通过加密为base64编码赋值给地址栏进行跳转，成功。但由于用的是Window.btoa()和window.atob()方法。但你的关键词是中文时，回报一下错误：
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
解决办法有两个：
1、一个是通过借助 encodeURIComponent 和 decodeURIComponent 转义非中文字符
由于 btoa 仅支持 ASCII 字符序列，如果通过 encodeURIComponent 将中文字符编码成ASCII字符序列，再通过 btoa 进行 base64 编码。
但这个方法有点绕。 encodeURIComponent 和 decodeURIComponent已经达到了转义控制字符的目的，使用 atob 和 btoa 感觉是多此一举。
2、第二个方法是通过第三方 Base64 工具来支持unicode 编码的字符串。