배열 상태는 iOS 12 Safari에서 캐시됩니다. 버그입니까 아니면 기능입니까?
2018.10.31에 업데이트
이 버그는 iOS 12.1에서 수정되었습니다. 좋은 하루 되세요 ~
새로 출시 된 iOS 12 Safari에서 Array의 값 상태에 문제가 있음을 발견했습니다 (예 : 다음과 같은 코드).
<!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>
페이지를 새로 고친 후에도 여전히 배열 값이 반대로 바뀝니다. 이것은 새로운 Safari의 버그입니까?
여기 데모 페이지가 있습니다. iOS 12 Safari에서 사용하십시오 : https://abelyao.github.io/others/ios12-safari-bug.html
확실히 버그입니다! 그리고 그것은 매우 심각한 버그입니다.
버그는 모든 값이 기본 리터럴 인 배열 이니셜 라이저의 최적화 때문입니다. 예를 들어 다음과 같은 기능이 주어집니다.
function buildArray() {
return [1, null, 'x'];
}
호출에서 반환 된 모든 배열 참조 buildArray()는 동일한 메모리에 연결되며 toString()결과 와 같은 일부 메서드 는 캐시됩니다. 일반적으로 일관성을 유지하기 위해 최적화 된 어레이에서 변경 가능한 조작은 데이터를 별도의 메모리 공간에 복사하여 링크합니다. 이 패턴이라고 기록 중 복사 짧게, 또는 소.
이 reverse()메소드는 배열을 변경하므로 기록 중 복사를 트리거해야합니다. 그러나 원래의 구현 자 (Apple의 Keith Miller)는 reverse()많은 테스트 사례를 작성했지만 사례를 놓 쳤기 때문에 그렇지 않습니다 .
이 버그는 8 월 21 일 Apple에보고되었습니다 .이 수정 프로그램 은 8 월 27 일 WebKit 저장소 에 제공되어 2018 년 10 월 30 일 Safari 12.0.1 및 iOS 12.1에 제공되었습니다.
버그를 해결하기 위해 lib를 작성했습니다. https://www.npmjs.com/package/array-reverse-polyfill
(function() {
function buggy() {
var a = [1, 2];
return String(a) === String(a.reverse());
}
if(!buggy()) return;
var r = Array.prototype.reverse;
Array.prototype.reverse = function reverse() {
if (Array.isArray(this)) this.length = this.length;
return r.call(this);
}
})();이것은 웹킷 의 버그입니다 . 이것은 최종적으로 해결되었지만 아직 iOS GM 릴리스와 함께 제공되지는 않았습니다. 이 문제에 대한 해결책 중 하나 :
(function() {
function getReverseStr() {
return [1, 2].reverse();
}
var n1 = getReverseStr()[0];
var n2 = getReverseStr()[0];
// check if there is an issue
if(n1 != n2) {
var origReverseFunction = Array.prototype.reverse;
Array.prototype.reverse = function() {
var newArr = this.slice();
// use original reverse function so that edge cases are taken care of
origReverseFunction.apply(newArr, arguments);
var that = this;
// copy reversed array
newArr.forEach(function(value, index) {
that[index] = value;
});
return this;
}
}
})();
요소 수가 변경되면 캐시되지 않는 것 같습니다.
나는 이것을 이렇게 피할 수 있었다.
<!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];
arr.push('');
arr.pop();
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>도와주세요.
'development' 카테고리의 다른 글
| C #에서 예외를 다시 발생시키는 올바른 방법은 무엇입니까? (0) | 2020.02.18 |
|---|---|
| Mac OS X에서 adb 설정 (0) | 2020.02.18 |
| Java 8 Iterable.forEach () 대 foreach 루프 (0) | 2020.02.18 |
| 명령 행에서 R 스크립트 실행 (0) | 2020.02.18 |
| UnicodeDecodeError : 'charmap'코덱은 Y 위치에서 바이트 X를 디코딩 할 수 없습니다. (0) | 2020.02.18 |