다음은 JavaScript 배열 사용에 대한 몇 가지 팁에 대한 간단한 기사입니다. 우리는 서로 다른 방법을 사용하여 두 JS 배열을 결합/병합하고 각 방법의 장점/단점을 논의합니다.
다음 상황을 먼저 고려해 봅시다.
코드 사본은 다음과 같습니다.
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun"]];
분명히 가장 간단한 조합 결과는 다음과 같습니다.
코드 사본은 다음과 같습니다.
[의 뜻
1, 2, 2, 3, 4, 5, 6, 7, 8, 9,
"foo", "bar", "baz", "bam" "bun", "fun"
]]
CONCAT (..)
이것은 가장 일반적인 관행입니다.
코드 사본은 다음과 같습니다.
var c = a.concat (b);
에이; // [1,2,3,4,5,6,7,8,9]
비; // [ "foo", "bar", "baz", "bam", "bun", "fun"]]]]
기음; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
보시다시피, C는 두 배열 A와 B의 조합을 나타내는 새로운 배열이며 A와 B는 변하지 않습니다. 단순한?
그러나 A가 10,000 개의 요소를 가지고 있고 B가 10,000 개의 요소를 가지고 있다면? C에는 20,000 개의 요소가 있으므로 A와 B의 메모리 사용량이 두 배가됩니다.
"괜찮아요!" 당신은 말했습니다. 쓰레기를 수집하고 A와 B를 NULL로 설정하십시오. 문제가 해결됩니다!
코드 사본은 다음과 같습니다.
a = b = null; // 'a'및 'b'는 재활용됩니다
헤헤. 요소가 몇 개있는 작은 배열의 경우 괜찮습니다. 그러나 큰 배열 또는 메모리가 제한된 시스템의 경우이 프로세스를 자주 반복해야하므로 실제로 많은 개선이 있습니다.
루프 삽입
좋아, 한 배열의 내용을 다른 배열에 복사하여 : 배열#push (..)
코드 사본은 다음과 같습니다.
//`b`는`a`에
for (var i = 0; i <b.length; i ++) {
A.push (b [i]);
}
에이; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
b = null;
이제 배열 A는 배열의 내용을 가지고 있습니다. b.
더 나은 메모리 발자국이있는 것 같습니다.
그러나 배열 A가 더 작은 경우 어떻게해야합니까? 메모리와 속도의 이유로 B 앞에 A를 더 작은 A에 넣을 수 있습니다. 문제 없음, 푸시 (..)을 unshift로 변경합니다 (..) :
코드 사본은 다음과 같습니다.
//`a in in`b` :
for (var i = a.length-1; i> = 0; i-) {
B. 시프트 (A [I]);
}
비; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
기능적 기술
그러나 For 루프는 실제로 추악하고 유지하기가 어렵습니다. 우리가 더 잘 할 수 있습니까?
이것은 배열#감소를 사용하는 첫 번째 시도입니다.
코드 사본은 다음과 같습니다.
//`b` on`a` :
a = b.reduce (function (coll, item) {
coll.push (항목);
Coll 리턴;
}, a);
에이; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
// 또는`a` in in`b` :
b = a.reduceright (function (coll, item) {
coll.unshift (항목);
Coll 리턴;
}, b);
비; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
배열#reting (..) 및 배열#reduceRight (..)는 좋지만 약간 서투른 것입니다. ES6 =>의 화살표 함수는 코드의 양을 줄이지 만 여전히 함수가 필요하며 각 요소는 한 번 호출해야하며 완벽하지 않습니다.
그래서 이것은 어떻습니까 :
코드 사본은 다음과 같습니다.
//`b` on`a` :
A.push.Apply (a, b);
에이; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
// 또는`a` in in`b` :
b.unshift.apply (b, a);
비; // [1,2,3,4,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]]]]
이것이 훨씬 더 나은 곳입니까? 특히 Unshift (..) 메소드는 이전 역 정렬에 대해 걱정할 필요가 없기 때문입니다. ES6의 음성 작업은 더 아름답습니다 : A.Push (... B) 또는 B.unshift (... A
배열의 최대 길이 제한
첫 번째 주요 문제는 메모리 사용이 복식 (물론 임시!)이 기본적으로 기능 호출을 통해 스택에 요소를 복사한다는 것입니다. 또한, 다른 JS 엔진은 복사 데이터의 길이에 제한이 있습니다.
따라서 배열에 백만 개의 요소가있는 경우 푸시 (...) 또는 Unshift (...)가 호출 스택을 허용하는 한계를 넘어선 것입니다. 아아, 수천 개의 요소를 처리하는 데 큰 도움이되지만 합리적인 길이 제한을 초과하지 않도록주의해야합니다.
참고 : Push (...) 및 Unshift (...)와 같은이 문제가있는 스플 라이스 (...)를 시도 할 수 있습니다.
이 최대 길이 제한을 피하는 방법이 있습니다.
코드 사본은 다음과 같습니다.
함수 combineInto (a, b) {
var len = a.length;
for (var i = 0; i <len; i = i+5000) {
b.unshift.apply (b, a.slice (i, i+5000));
}
}
잠깐, 우리의 가독성은 거꾸로 갔다. 그게 다야, 악화되고 악화 될 수있다, 하하.