jQuery 많은 수의 속성 추가 (extend)
extend
두 개 이상의 개체의 내용을 첫 번째 개체로 병합합니다.
제이쿼리의 extend()는 다수의 객체를 하나의 객체로 합치는 merge기능을 수행할 수 있습니다.
만약 두 개 이상의 객체를 하나로 합치려는 경우 extend()를 사용하여 새로운 객체로 만들 수 있죠.
아래는 extend()를 사용하는 간단한 방법 및 문법은 아래와 같습니다.
|
$.extend(대상, 객체1, 객체2, ... , 객체n)
|
cs |
이 메서드는 인수로 전달받은 첫 번째 객체에 두 번째 객체의 모든 프로퍼티를 추가합니다.
그리고서 첫 번째 객체에 세 번째 객체의 모든 프로퍼티를 추가합니다.
이와 같은 순서대로 인수로 전달받은 모든 객체의 프로퍼티를 첫 번째 객체에 모두 추가합니다.
| jQuery.extend (target, object1 [, objectN]) | |
| target | 개체. 새 속성을 받을 개체입니다. 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체입니다. |
| object1 | 개체. 병합 할 추가 속성이 포함된 개체입니다. |
| objectN | 개체. 병합 할 속성이 포함된 추가 개체입니다. |
| jQuery.extend ([deep], target, object1 [, objectN]) | |
| deep | Boolean. 참이면 병합이 재귀 적이됩니다 (일명 깊은 복사). false이 인수에 대한 전달 은 지원되지 않습니다. |
| target | 개체. 확장할 개체로 새 속성을 받습니다. 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체 |
| object1 | 개체. 병합 할 추가 속성이 포함된 개체입니다. |
| objectN | 개체. 병합 할 속성이 포함된 추가 개체입니다. |
| jQuery.extend (객체) | |
| 유형 | 개체 |
| 설명 | jQuery 네임 스페이스에 병합 할 개체입니다. |
JQuery.extend() 함수는 복수의 오브젝트를 합쳐서(merge) 되돌려 주는 함수입니다.
만약 $.extend() 함수에 사용된 인자가 하나라면, target 인자가 생략되었다는 의미입니다. 이런 경우, jQuery 객체는 target를 자체적으로 판단하게 됩니다. 이렇게 되면, jQuery 네임스페이스에 새로운 함수를 추가할 수 있게 됩니다. 이것은 새로운 함수를 jQuery에 추가해야 할 경우가 많은 plugin 제작 시 유용하게 사용할 수 있습니다.
|
$. extend()
|
함수의 합침(merge) 기능은 유연하게 동작하지 않습니다.
만약 첫번째 객체에 있는 키와 합쳐질 두 번째 객체에 있는 키가 동일할 경우, 첫 번째 객체의 값이 덮어써져 버립니다. values는 합쳐지지 않습니다. 이것은 아래 예제들의 banana에 대한 내용을 확인하면 알 수 있습니다.
하지만, 첫번째 인자에 true라고 설정하면 유연하게 동작하게 됩니다. (false는 사용할 수 없습니다.)
두 개의 객체를 합치는 예제입니다. 첫 번째 객체 값이 수정됩니다.
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
사과: 0,
바나나: { weight: 52, 값: 100 },
체리: 97
};
var object2 = {
바나나: { 값: 200 },
두리안: 100
};
// 개체2를 개체1로 재귀적으로 병합
$.extend( true, object1, object2 );
// JSON.stringify - IE<8에서 사용할 수 없다고 가정함
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
|
cs |
extend() 사용시 중복된 값의 결정
만약 merge 대상인 객체가 동일한 프로퍼티를 가지게 되는 경우... 즉 프로퍼티가 중복되는 경우 그 값은 어떻게 될까요?
결과부터 얘기하면 기본적으로는 나중에 덮어 써지는 값이 최종 값으로 남게 됩니다.
즉 둘 다 남는게 아닌 새로운 값으로 덮어씌워지는 결과가 나타나죠.
아래와 같은 두 개의 객체를 extend()를 통해 merge 하는 경우를 참고 바랍니다.
|
objA = { a: 1, b: 2 }
objB = { b: 3, c: 4 }
objC = $.extend({}, objA, objB);
//출력결과
objC['a'] = 1
objC['b'] = 3
objC['c'] = 4
|
cs |