[jQuery] 유틸리티 (Utilities) 메소드

 

목차

 

유틸리티 (Utilities) 메소드

jQuery의 유틸리티 메소드를 이용하면 배열 순회, 배열 필터링, 데이터를 배열 형식으로 변경, 배열 복제, 데이터의 공백 제거, XML 및 JSON 파싱 처리 등 효율적인 프로그램 개발이 가능해집니다.

 

 

메소드	설명
jQuery.each(object, function)	배열 및 Map 형태의 반복되는 데이터를 순회하면서 얻어온다. function 내에서 false를 리턴하면 반복 순회를 중지한다.
jQuery.grep(array, function [, inverter])	배열 형식의 데이터를 입력받아서 function에서 필터링 처리 후 다시 배열 형태로 반환한다. inverter 값은 false가 기본값이며, function의 동작 방식을 역으로 동작하고자 할 경우 inverter 값을 true로 설정한다.
jQuery.map(array, function)	입력받은 배열을 가공하여 다시 배열 형태로 반환한다.
jQuery.merge(arr1, arr2)	arr1과 arr2를 병합하여 arr1에 저장한다. 중복된 값은 덮어쓰지 않고 중복으로 처리한다.
jQuery.trim(str)	지정된 문자열의 앞뒤 공백을 제거하여 반환한다.
jQuery.isArray(obj)	지정된 obj가 배열인지 boolean 값으로 반환한다.
jQuery.isNumeric(value)	지정된 value가 숫자인지 판별하여 boolean 값으로 반환한다.
jQuery.parseXML(data)	지정한 data를 XML문서로 파싱 처리한다. 처리된 데이터는 jQuery의 탐색 및 조작 기능을 사용할 수 있다.
jQuery.parseJSON(json)	지정한 json 문자열을 JavaScript 객체인 JSON 객체로 반환한다. 만약 json 문자열이 JSON 문법에 위배되면 에러가 발생한다.
.each(function(idx, element))	선택된 요소들을 반복 처리한다. idx는 반복 처리시 index 값이고 element는 요소이다.
.get([index])	선택된 요소에서 지정된 index 값에 해당하는 DOM 요소를 반환한다. 만약 index 값이 생략되면 모든 DOM 요소가 반환된다.

 

 

jQuery.each(object, function)

배열 및 Map 형태의 반복되는 데이터를 순회하면서 얻어옵니다. function 내에서 false를 리턴하면 반복 순회를 중지합니다. function의 매개변수는 idx, object 순서입니다.

//일반 for문
var s = ["A", "B", "C", "D", "E"];
for (var i = 0; i < s.length; i++) {
	console.log(s[i]);
}

 

//jQuery each (모두 동일한 결과)
jQuery.each(s, function (idx, obj) {//인덱스, 값
	console.log(idx, obj);
});
$.each(s, function (idx, data) {
	console.log(idx, data);
});
$(s).each(function (idx, data) {//배열을 jquery객체로 변경 후 each함수 호출
	console.log(idx, data);
});

 

$.each(s, function (idx, data) {
	console.log(idx, data);
	return data != "C"; //return false인 경우 break기능
	//A,B까지 return true,  C인 경우 return false,  C까지 나오고 중단됨 
});

 

//Json 객체
var s2 = { "one":100, "two":200, "three":300 };
$.each(s2, function (key, data) {
	console.log(key, data);
});

 

 

jQuery.grep(array, function [, inverter])

배열 형식의 데이터를 입력받아서 function에서 필터링 처리 후 다시 배열 형태로 반환합니다. inverter 값은 false가 기본값이며, function의 동작 방식을 역으로 동작하고자 할 경우 inverter 값을 true로 설정합니다. 즉, false는 필터링 결과가 true인 것만 리턴하고, true는 필터링 결과가 true인 것을 제외한 것만 리턴합니다. function의 매개변수는 object, idx 순서입니다.

var s = ["A", "B", "C", "D"];

var arr = $.grep(s, function (data, idx) {//순서 주의
	return data == "B"; //B만 리턴 
});
console.log(arr); //['B']

var arr2 = $.grep(s, function (data, idx) {
	return data == "B"; //B만 리턴 
}, false);
console.log(arr2); //['B']

var arr3 = $.grep(s, function (data, idx) {
	return data == "B"; //B 제외 리턴 
}, true); 
console.log(arr3); //['A', 'C', 'D']

 

 

jQuery.map(array, function)

입력받은 배열을 가공하여 다시 배열 형태로 반환합니다. function의 매개변수는 object, idx 순서입니다.

var s = ["January", "February", "March"];
var arr = $.map(s, function (data, idx) {//순서 주의
	console.log(data, idx);
	return data.substring(0,3); //각 배열방 순회하며 문자열을 변경함 
});
console.log(arr); //['Jan', 'Feb', 'Mar']

 

 

jQuery.merge(arr1, arr2)

arr1과 arr2를 병합하여 arr1에 저장합니다. 중복된 값은 덮어쓰지 않고 중복으로 처리합니다.

var s = ["a", "b", "c", 1];
var s1 = [1,2,3];
var arr = $.merge(s, s1);
console.log(arr);  //['a', 'b', 'c', 1, 1, 2, 3]
console.log(arr.join(",")); //a,b,c,1,1,2,3

 

 

jQuery.trim(str)

지정된 문자열의 앞뒤 공백을 제거하여 반환합니다.

var s = "     Hello     ";
console.log(s.length); //15
console.log($.trim(s).length); //5

 

 

jQuery.parseJSON(json)

지정한 json 문자열을 JavaScript 객체인 JSON 객체로 반환합니다. 만약 json 문자열이 JSON 문법에 위배되면 에러가 발생합니다.

var jsonString = '{"name":"홍길동", "age":20, "address":"서울"}'; //문자열
var name = jsonString.name;
console.log(name); //undefined

//문자열을 json객체로 바꾸는 두가지 방법 
//(1)jquery의 jQuery.parseJSON 함수
var jsonObj = $.parseJSON(jsonString); //문자열 => json객체로 변환 
var name = jsonObj.name;
var age = jsonObj.age;
var address = jsonObj.address;
console.log(name, age, address); //홍길동 20 서울

//(2)javascript의 JSON 객체 이용 .parse 함수 
var jsonObj2 = JSON.parse(jsonString); //문자열 => json객체로 변환 
console.log(jsonObj2.name); //홍길동 
var str = JSON.stringify(jsonObj2); //json객체 => 문자열로 변환
console.log(str); //{"name":"홍길동","age":20,"address":"서울"}
console.log(str.name); //undefined

 

 

참고

https://api.jquery.com/