자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 03:14
jQuery .grep() 함수
jQuery .grep() 함수는 배열 내의 요소를 필터링하여 새로운 배열을 반환하는 함수입니다. 이 함수는 자바스크립트의 Array.prototype.filter() 메서드와 유사하지만, jQuery에서만 사용할 수 있습니다.
기본 사용법
기본적으로 .grep() 함수는 다음과 같이 사용할 수 있습니다.
* `array`: 필터링할 배열
* `callback`: 필터링 조건을 지정하는 함수
* `invert`: 필터링 조건을 반전시키는 옵션 (기본값: false)
예제
소스 코드
jQuery .grep() 함수의 소스 코드는 다음과 같습니다.
소스 코드 분석
jQuery .grep() 함수의 소스 코드는 다음과 같이 분석할 수 있습니다.
1. `elems` 배열과 `callback` 함수를 인자로 받습니다.
2. `elems` 배열이 비어있거나 `callback` 함수가 없으면 빈 배열을 반환합니다.
3. `callback` 함수가 문자열일 때, jQuery.filter() 함수를 사용하여 필터링합니다.
4. `callback` 함수가 함수일 때, invoke 변수에 함수를 저장하고, `elems` 배열을 jQuery.map() 함수를 사용하여 필터링합니다.
5. `callback` 함수가 배열일 때, jQuery.map() 함수를 사용하여 필터링합니다.
6. `callback` 함수가 DOM 요소일 때, jQuery.map() 함수를 사용하여 필터링합니다.
7. `callback` 함수가 null일 때, 빈 함수를 반환합니다.
8. 필터링 결과를 반환합니다.
이러한 소스 코드 분석을 통해 jQuery .grep() 함수의 동작을 이해할 수 있습니다.
jQuery에서 데이터 필터링하기: .grep() 함수 사용
- 나우호스팅 21일 전 2025.02.22 03:14
-
21
0
jquery .grep()jQuery .grep() 함수
jQuery .grep() 함수는 배열 내의 요소를 필터링하여 새로운 배열을 반환하는 함수입니다. 이 함수는 자바스크립트의 Array.prototype.filter() 메서드와 유사하지만, jQuery에서만 사용할 수 있습니다.
기본 사용법
기본적으로 .grep() 함수는 다음과 같이 사용할 수 있습니다.
#hostingforum.kr
javascript
$.grep(array, callback, invert);
* `array`: 필터링할 배열
* `callback`: 필터링 조건을 지정하는 함수
* `invert`: 필터링 조건을 반전시키는 옵션 (기본값: false)
예제
#hostingforum.kr
javascript
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 짝수만 필터링
var evenNumbers = $.grep(numbers, function(value) {
return value % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]
// 홀수만 필터링
var oddNumbers = $.grep(numbers, function(value) {
return value % 2 !== 0;
});
console.log(oddNumbers); // [1, 3, 5, 7, 9]
소스 코드
jQuery .grep() 함수의 소스 코드는 다음과 같습니다.
#hostingforum.kr
javascript
// jQuery 1.12.4 버전 소스 코드
grep: function( elems, callback, inv ) {
var ret = [], invoke;
if (elems.length === 0 || !callback) {
return ret;
}
// callback이 함수일 때
if (typeof callback == "string") {
callback = jQuery.filter(callback, elems);
}
// callback이 함수가 아닐 때
else if (jQuery.isFunction(callback)) {
invoke = callback;
elems = jQuery.map(elems, function(elem, index) {
return invoke.call(elem, index, elem) ? [elem] : [];
});
}
// callback이 배열일 때
else if (callback.nodeType) {
callback = [callback];
}
// callback이 DOM 요소일 때
else if (callback.length && typeof callback !== "string") {
callback = jQuery.map(callback, function(elem) {
return this.test(elem) ? [elem] : [];
}, callback);
}
// callback이 null일 때
else {
callback = function() {};
}
// 필터링 결과를 반환
return ret = jQuery.merge(ret, elems);
},
소스 코드 분석
jQuery .grep() 함수의 소스 코드는 다음과 같이 분석할 수 있습니다.
1. `elems` 배열과 `callback` 함수를 인자로 받습니다.
2. `elems` 배열이 비어있거나 `callback` 함수가 없으면 빈 배열을 반환합니다.
3. `callback` 함수가 문자열일 때, jQuery.filter() 함수를 사용하여 필터링합니다.
4. `callback` 함수가 함수일 때, invoke 변수에 함수를 저장하고, `elems` 배열을 jQuery.map() 함수를 사용하여 필터링합니다.
5. `callback` 함수가 배열일 때, jQuery.map() 함수를 사용하여 필터링합니다.
6. `callback` 함수가 DOM 요소일 때, jQuery.map() 함수를 사용하여 필터링합니다.
7. `callback` 함수가 null일 때, 빈 함수를 반환합니다.
8. 필터링 결과를 반환합니다.
이러한 소스 코드 분석을 통해 jQuery .grep() 함수의 동작을 이해할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.