問題描述
iOS12發(fā)布之后，在測試中發(fā)現(xiàn)一個關(guān)于Array.reverse的問題，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>iOS 12 Safari bugs</title>
<script type="text/javascript">
window.addEventListener("load", function ()
{
let arr = [1, 2, 3, 4, 5];
alert(arr.join());
document.querySelector("button").addEventListener("click", function ()
{
arr.reverse();
});
});
</script>
</head>
<body>
<button>Array.reverse()</button>
<p style="color:red;">test: click button and refresh page, code:</p>
</body>
</html>
問題描述：第一次進入刷新alert:1,2,3,4，第二次刷新就一直為alert4,3,2,1。
demo演示
修復(fù)方法
原理就是判斷是否為iOS12版本，重寫Array.prototype.reverse方法，代碼如下：
(function(){
var ua = navigator.userAgent;
if (!ua.match(/(iPhone|iPad|iPod)/)) return;
var matched = ua.match(/OS ([\d_\.]+) like Mac OS X/);
if (!matched || !matched[1]) return;
if (matched[1].indexOf('12') !== 0) return;
//以上判斷是否為iOS12版本
//以下為修復(fù)代碼
Array.prototype._reverse = Array.prototype.reverse;
//重寫reverse方法
Array.prototype.reverse = function reverse() {
//重新設(shè)置數(shù)組長度 從而避免reverse方法改變數(shù)據(jù)后被緩存
if (Array.isArray(this)) this.length = this.length;
return Array.prototype._reverse.call(this);
}
var nonenum = {
enumerable: false
};
//設(shè)置Array原型鏈中的reverse方法不可枚舉
Object.defineProperties(Array.prototype, {
_reverse: nonenum,
reverse: nonenum,
});
})()
希望大家不要遇到該類生產(chǎn)問題咯！(否則你都不知道哪里出錯了~~)
