JS 문자열 연결 [성능 비교]_javascript 기술

1. ECMAScript 문자열은 불변입니다. 즉, 값을 변경할 수 없습니다. 그렇다면 다음 코드를 작성하면 어떻게 될까요?
Js 코드

코드 복사 코드는 다음과 같습니다.

var str = " Hello ";
str = "world";

수행 단계는 다음과 같습니다.
"Hello"를 저장할 문자열 생성
"를 저장할 문자열 생성 world"
저장소 생성 결과 문자열 연결
str의 현재 내용을 결과에 복사
"world"를 결과에 복사
결과를 ​​가리키도록 str 업데이트
문자열 연결이 완료될 때마다 실행됩니다. 2~6단계에서는 이 작업을 매우 리소스 집약적으로 만듭니다. 이 과정을 수백 번, 심지어 수천 번 반복한다고 상상해 보세요. 성능은 어떨까요?
2. 그러면 이 딜레마를 해결하기 위해 다음 코드를 보세요
Js 코드

코드 복사 코드는 다음과 같습니다.

var arr = new Array;
arr[0] = "Hello ";
arr[1] = "world"; var str = arr.join("");

수행 단계는 다음과 같습니다.
결과를 저장할 문자열 만들기
각 문자열을 결과의 적절한 위치에 복사합니다
이렇게 하면 배열에 몇 개의 문자열이 추가되어도 문제가 되지 않습니다. 왜냐하면 Join() 메서드가 호출될 때만 연결 작업이 발생하기 때문입니다.

3. 수술이 복잡하다고 생각하시나요? 코드가 의도를 정확히 반영하지 않나요? 따라서 이해하기 쉽도록 개체 솔루션을 사용하고 StringBuffer 클래스를 사용하여 이 함수를 캡슐화해 보겠습니다. Js 코드

코드 복사 코드는 다음과 같습니다.

function StringBuffer() {
this._strs = new Array;
}
StringBuffer.prototype.append = function(str ) {
this._strs.push(str);
};
StringBuffer.prototype.toString = function() {
this._strs.join("");


자, 이제 문자열을 어떻게 작동하는지 감을 잡겠습니다.

Js 코드

코드 복사 코드는 다음과 같습니다.

var sb = new StringBuffer() ;

sb.append("Hello ");
sb.append("world")
var result = sb.toString()
넷, 맛있어 보일 것 같은데 먹으면 어떤 효과가 있나요?

Js 코드

코드 복사

코드는 다음과 같습니다.var tStart = new Date(); var str = ""; for(var i=0;i<10000;i )

{

str = "text"
}
var tEnd = new Date();
document.write("10000개의 문자열을 연결하는 원래 방법은 시간이 걸립니다:" (tEnd.getTime()-tStart.getTime()) "초"); >var oSB = new StringBuffer();
tStart = new Date()
for(var i=0;i<10000;i )
{
oSB.append("text") ;
}
var sRst = oSB.toString();
tEnd = new Date();
document.write("
StringBuffer 10000개의 문자열을 연결하는 데 시간이 걸립니다. " ( tEnd.getTime()-tStart.getTime()) "초");


StringBuffer가 더 빠르다고 짐작하셨을 것입니다. 얼마나 더 빠릅니까? 내 테스트 결과:
Js 코드
FF3.0.10
원래 방식의 더하기 기호는 10,000개의 문자열을 연결하는 데 시간이 걸립니다: 3밀리초
StringBuffer는 10,000개의 문자열을 연결하는 데 시간이 걸립니다: 8밀리초

IE7
원래 방식의 더하기 기호는 10000개의 문자열을 연결하는 데 걸리는 시간: 15밀리초
StringBuffer 10000개의 문자열을 연결하는 데 걸리는 시간: 16밀리초
IE8
원래 방식의 더하기 기호 10,000개의 문자열을 연결하는 데 걸리는 시간 문자열: 15밀리초
StringBuffer 10,000개의 문자열을 연결하는 데 걸리는 시간: 16밀리초
Chrome1.0.154.46
원래 방법에 10,000개의 문자열을 연결하는 데 걸리는 시간: 1밀리초
StringBuffer 10,000개의 문자열을 연결하는 데 걸리는 시간: 2밀리초

5. 무슨 일이 일어나고 있나요?

어? 시력이 좋나요? 아니면 테스트 결과가 잘못 게시된 걸까요? 아직……?
아무것도 아니야!
2006년 11월에 출간된 "JavaScript Advanced 프로그래밍"이라는 책이 84~85페이지에 있는데, 위에서 말씀드린 내용과 완전히 반대되는 내용입니다.
교훈인 것 같아요! 심오한 교훈! 이 글을 읽으시는 분들은 어떻게 생각하실지 모르겠습니다.