javascript 에서 문자열 연결 성능

ECMAScript 에서 가장 흔히 볼 수 있 는 문 제 는 문자열 연결 의 성능 입 니 다.다른 언어 와 유사 하 게 ECMAScript 의 문자열 은 값 을 바 꿀 수 없습니다.다음 코드 를 고려 하 십시오:

var str = "hello ";
str += "world";

실제로 이 코드 가 막후 에서 실행 되 는 절 차 는 다음 과 같다.

"hello" 를 저장 하 는 문자열 을 만 듭 니 다.

"World" 를 저장 하 는 문자열 을 만 듭 니 다.

연결 결 과 를 저장 하 는 문자열 을 만 듭 니 다.

str 의 현재 내용 을 결과 에 복사 합 니 다.

'World' 를 결과 에 복사 합 니 다.

str 를 업데이트 하여 결 과 를 가리 키 도록 합 니 다.

문자열 연결 이 완 료 될 때마다 2 ~ 6 절 차 를 실행 하여 자원 을 소모 합 니 다.이 과정 을 수백 번, 심지어 수천 번 반복 하면 성능 문제 가 생 길 수 있다.해결 방법 은 Array 대상 으로 문자열 을 저장 한 다음 join () 방법 (매개 변 수 는 빈 문자열) 으로 마지막 문자열 을 만 드 는 것 입 니 다.앞의 코드 대신 아래 코드 를 사용 하 는 것 을 상상 하 세 요:

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

이렇게 하면 배열 에 얼마나 많은 문자열 을 도입 하 든 문제 가 되 지 않 습 니 다. join () 방법 을 호출 할 때 만 연결 작업 이 발생 하기 때 문 입 니 다.이때 실행 절 차 는 다음 과 같다.

결 과 를 저장 하 는 문자열 만 들 기

모든 문자열 을 결과 의 적당 한 위치 로 복사 합 니 다

이런 해결 방안 은 좋 지만 더 좋 은 방법 이 있다.문 제 는 이 코드 가 의 도 를 정확히 반영 하지 못 한 다 는 점 이다.이 기능 을 쉽게 이해 하려 면 StringBuffer 클래스 로 포장 할 수 있 습 니 다.

function StringBuffer () {
  this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
  this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
  return this._strings_.join("");
};

이 코드 는 먼저 strings 속성 을 주의해 야 합 니 다. 본 의 는 개인 속성 입 니 다.그것 은 append () 와 toString () 방법 두 가지 밖 에 없다.append () 방법 은 문자열 배열 에 이 인 자 를 추가 합 니 다. toString () 방법 은 배열 의 join 방법 을 호출 하여 실제 연 결 된 문자열 을 되 돌려 줍 니 다.StringBuffer 대상 으로 문자열 을 연결 하려 면 다음 코드 를 사용 하 십시오.

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

TIY
아래 코드 로 StringBuffer 대상 과 전통 적 인 문자열 연결 방법의 성능 을 테스트 할 수 있 습 니 다.

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str += "text";
}
var d2 = new Date();

document.write("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
    buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();

document.write("<br />Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

TIY
이 코드 는 문자열 연결 을 두 번 테스트 합 니 다. 첫 번 째 는 플러스 를 사용 하고 두 번 째 는 StringBuffer 류 를 사용 합 니 다.모든 작업 은 10000 개의 문자열 을 연결 합 니 다.날짜 값 d1 과 d2 는 작업 완료 에 필요 한 시간 을 판단 하 는 데 사 용 됩 니 다.Date 대상 을 만 들 때 인자 가 없 으 면 현재 날짜 와 시간 을 부여 합 니 다.연결 작업 이 얼마나 걸 렸 는 지 계산 하려 면 날짜 의 밀리초 를 (getTime () 방법의 반환 값 으로) 줄 이면 됩 니 다.이것 은 자 바스 크 립 트 의 성능 을 평가 하 는 흔 한 방법 이다.이 테스트 결 과 는 StringBuffer 클래스 를 사용 하 는 것 이 플러스 번 호 를 사용 하 는 것 보다 50% - 66% 의 시간 을 절약 했다 는 것 을 설명 해 야 한다.