IT story

(Deep) jQuery를 사용하여 배열 복사

hot-time 2020. 5. 5. 19:36
반응형

(Deep) jQuery를 사용하여 배열 복사


가능한 중복 :
JavaScript 객체를 복제하는 가장 효율적인 방법은 무엇입니까?

객체의 (연관이 아닌 정렬 된) 배열을 복사해야합니다. jQuery를 사용하고 있습니다. 나는 처음에 시도했다

jquery.extend({}, myArray)

그러나 당연히 이것은 배열을 필요로하는 객체를 돌려줍니다 (정말 jquery.extend를 좋아합니다).

그렇다면 배열을 복사하는 가장 좋은 방법은 무엇입니까?


Array.slice ()는 딥 카피를 수행하지 않기 때문에 다차원 배열에는 적합하지 않습니다.

var a =[[1], [2], [3]];
var b = a.slice();

b.shift().shift();
// a is now [[], [2], [3]]

shift().shift()위에서 사용했지만 요점은 b[0][0]a[0][0] 아닌 포인터를 포함하고 있다는 것입니다.

마찬가지로 delete(b[0][0])또한 a[0][0]삭제되고 b[0][0]=99값이 a[0][0]99로 변경 됩니다 .

jQuery의 extend메소드 실제 값이 초기 인수로 전달 될 때 딥 카피를 수행합니다.

var a =[[1], [2], [3]];
var b = $.extend(true, [], a);

b.shift().shift();
// a is still [[1], [2], [3]]

$.extend(true, [], [['a', ['c']], 'b'])

그렇게해야합니다.


배열의 "심층"복사본을 찾고 있다는 것을 알고 있지만 단일 수준 배열 만 있으면 다음을 사용할 수 있습니다.

기본 JS 배열을 복사하는 것은 쉽습니다. 사용 Array.slice () 의 모든 어레이 / 부분의 사본을 작성하는 방법.

var foo = ['a','b','c','d','e'];
var bar = foo.slice();

이제 foo와 bar는 'a', 'b', 'c', 'd', 'e'의 5 개 멤버 배열입니다.

물론 bar는 참조가 아닌 사본입니다. 그래서 다음에 이렇게하면 ...

bar.push('f');
alert('foo:' + foo.join(', '));
alert('bar:' + bar.join(', '));

이제 얻을 것이다 :

foo:a, b, c, d, e
bar:a, b, c, d, e, f

JavaScript의 모든 것은 참조로 전달되므로 배열의 객체를 실제로 깊게 복사하려면 전체 배열을 JSON으로 직렬화 한 다음 다시 직렬화 해제하는 것이 가장 좋습니다.


순수한 JavaScript를 사용하려면 다음을 시도하십시오.

 var arr=["apple","ball","cat","dog"];
 var narr=[];

 for(var i=0;i<arr.length;i++){
     narr.push(arr[i]);
 }
 alert(narr); //output: apple,ball,vat,dog
 narr.push("elephant");
 alert(arr); // output: apple,ball,vat,dog
 alert(narr); // apple,ball,vat,dog,elephant

복잡한 유형은 어떻습니까? 배열에 객체가 포함 된 경우 ...

내 변형 :

Object.prototype.copy = function(){
    var v_newObj = {};
    for(v_i in this)
        v_newObj[v_i] = (typeof this[v_i]).contains(/^(array|object)$/) ? this[v_i].copy() : this[v_i];
    return v_newObj;
}

Array.prototype.copy = function(){
    var v_newArr = [];
    this.each(function(v_i){
        v_newArr.push((typeof v_i).contains(/^(array|object)$/) ? v_i.copy() : v_i);
    });
    return v_newArr;
}

최종 버전이 아니라 아이디어 일뿐입니다.

추신 : 각각의 방법과 프로토 타입도 포함되어 있습니다.


값으로 객체를 복제하는 데 유용한이 "심층 객체 복사"기능을 발견했습니다. jQuery를 사용하지 않지만 확실히 깊습니다.

http://www.overset.com/2007/07/11/javascript-recursive-object-copy-deep-object-copy-pass-by-value/


다음 버전의 jPaq 에서이 코드를 릴리스 할 계획 이지만, 그 때까지는 배열의 딥 카피를 수행 하려는 경우이 코드를 사용할 수 있습니다.

Array.prototype.clone = function(doDeepCopy) {
    if(doDeepCopy) {
        var encountered = [{
            a : this,
            b : []
        }];

        var item,
            levels = [{a:this, b:encountered[0].b, i:0}],
            level = 0,
            i = 0,
            len = this.length;

        while(i < len) {
            item = levels[level].a[i];
            if(Object.prototype.toString.call(item) === "[object Array]") {
                for(var j = encountered.length - 1; j >= 0; j--) {
                    if(encountered[j].a === item) {
                        levels[level].b.push(encountered[j].b);
                        break;
                    }
                }
                if(j < 0) {
                    encountered.push(j = {
                        a : item,
                        b : []
                    });
                    levels[level].b.push(j.b);
                    levels[level].i = i + 1;
                    levels[++level] = {a:item, b:j.b, i:0};
                    i = -1;
                    len = item.length;
                }
            }
            else {
                levels[level].b.push(item);
            }

            if(++i == len && level > 0) {
                levels.pop();
                i = levels[--level].i;
                len = levels[level].a.length;
            }
        }

        return encountered[0].b;
    }
    else {
        return this.slice(0);
    }
};

다음은 재귀 배열의 딥 카피를 수행하기 위해이 함수를 호출하는 방법의 예입니다.

// Create a recursive array to prove that the cloning function can handle it.
var arrOriginal = [1,2,3];
arrOriginal.push(arrOriginal);

// Make a shallow copy of the recursive array.
var arrShallowCopy = arrOriginal.clone();

// Prove that the shallow copy isn't the same as a deep copy by showing that
// arrShallowCopy contains arrOriginal.
alert("It is " + (arrShallowCopy[3] === arrOriginal)
    + " that arrShallowCopy contains arrOriginal.");

// Make a deep copy of the recursive array.
var arrDeepCopy = arrOriginal.clone(true);

// Prove that the deep copy really works by showing that the original array is
// not the fourth item in arrDeepCopy but that this new array is.
alert("It is "
    + (arrDeepCopy[3] !== arrOriginal && arrDeepCopy === arrDeepCopy[3])
    + " that arrDeepCopy contains itself and not arrOriginal.");

JS Bin 에서이 코드를 가지고 놀 수 있습니다 .

참고URL : https://stackoverflow.com/questions/565430/deep-copying-an-array-using-jquery

반응형