jquery 기반 배열 사용

jQuery의 배열 처리는 편리하고 완벽하게 작동합니다. 이는 네이티브 JavaScript 배열이 한 단계로 달성할 수 없는 많은 기능을 캡슐화합니다. 다음은 jQuery 배열의 사용법에 대한 자세한 설명입니다. 필요하신 분들은 참고하시면 됩니다

1. $.each(array, [callback]) traversal [자주 사용하는]

설명: $()와 다릅니다. jQuery 객체를 순회하는 Each() 메서드, 이 메서드는 모든 객체를 순회하는 데 사용할 수 있습니다. 콜백 함수에는 두 개의 매개변수가 있습니다. 첫 번째는 객체의 멤버 또는 배열의 인덱스이고 두 번째는 해당 변수 또는 콘텐츠입니다. 각 루프를 종료해야 하는 경우 콜백 함수가 반환되도록 할 수 있습니다. false이고 다른 반환 값은 무시됩니다.

각 순회는 아마도 여러분에게 익숙할 것입니다. 일반적인 이벤트 처리에서는 for 루프의 변형이지만 for 루프보다 더 강력합니다. 배열에서는 배열 인덱스와 해당 값을 쉽게 캡처할 수 있습니다. 예:

코드는 다음과 같습니다:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同  
$.each(_mozi,function(key,val){  
    //回调函数有两个参数,第一个是元素索引,第二个为当前值  
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);  
});

기본 for..in과 비교하면 각각이 더 강력합니다. for..in도 배열을 순회하여 해당 인덱스를 반환할 수 있지만 값은 arrName[key]를 통해 가져와야 합니다.

2. $.grep(array, callback, [invert]) 필터 배열 [일반적으로 사용됨]

설명: 필터 함수를 사용하여 배열 요소를 필터링합니다. 이 함수는 두 개 이상의 매개변수를 전달합니다(세 번째 매개변수는 true 또는 false입니다). , for 필터 함수의 반환 값이 반전되어 있으므로 개인적으로 별로 유용하지 않다고 생각합니다.): 필터링할 배열과 필터 함수는 요소를 유지하려면 true를 반환하고 요소를 삭제하려면 false를 반환해야 합니다. 또한 필터 기능을 단어 문자열로 설정할 수도 있습니다.

코드는 다음과 같습니다.

$.grep(_mozi,function(val,key){  
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引  
    if(val=='墨子'){  
        alert('数组值为 墨子 的下标是: '+key);  
    }  
});  
var _moziGt1=$.grep(_mozi,function(val,key){  
    return key>1;  
});  
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1);  
var _moziLt1=$.grep(_mozi,function(val,key){  
    return key>1;  
},true);  
//此处传入了第三个可靠参数,对过滤函数中的返回值取反  
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);

3.$.map(array,[callback]) 주어진 조건에 따라 배열을 변환합니다. [일반]

설명: 변환 함수를 매개변수로 호출합니다. 이 변환 함수에는 변환할 요소를 나타내는 인수가 전달됩니다. 변환 함수는 변환된 값, null(배열에서 항목 제거) 또는 값을 포함하는 배열을 원래 배열로 확장하여 반환할 수 있습니다. .

이 방법은 매우 강력하지만 일반적으로 사용되지는 않습니다. 특정 조건에 따라 배열 요소의 값을 업데이트하거나 원래 값을 기반으로 새 복사 요소를 확장할 수 있습니다.

코드는 다음과 같습니다.

var _mapArrA=$.map(_mozi,function(val){  
    return val+'[新加]';  
});  
var _mapArrB=$.map(_mozi,function(val){  
    return val=='墨子' ? '[只给墨子加]'+val : val;  
});  
var _mapArrC=$.map(_mozi,function(val){  
    //为数组元素扩展一个新元素  
    return [val,(val+'[扩展]')];  
});  
alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA);  
alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB);  
alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);

4 .$.inArray(val,array)는 해당 값이 배열에 존재하는지 확인합니다. [자주 사용됨]

설명: 배열에서 첫 번째 매개변수의 위치를 ​​확인하고, 0부터 계산합니다(찾지 못하면 -1을 반환합니다).

indexOf() 메서드를 기억하시나요? indexOf()는 문자열이 처음 나타나는 위치를 반환하고, $.inArray()는 배열에서 들어오는 매개변수의 위치를 ​​반환합니다. 마찬가지로 발견되면 A 값을 반환합니다. 0보다 크거나 같으면 -1을 반환합니다. 이제 이를 사용하는 방법을 알았으니 배열에 값이 있는지 확인하는 것이 쉬워졌습니다.

코드는 다음과 같습니다:

var _exist=$.inArray('墨子',_mozi);  
var _inexistence=$.inArray('卫鞅',_mozi)  
if(_exist>=0){  
    alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist);  
}  
if(_inexistence<0){  
    alert(&#39;卫鞅 不存在于数组_mozi中!,返回值为: &#39;+_inexistence+&#39;!&#39;);  
}

5 .$.merge(first,second)는 두 개의 배열을 병합합니다. [일반]

설명: 반환된 결과는 첫 번째 배열의 내용, 즉 첫 번째 배열의 요소를 수정합니다. 배열 그 뒤에는 두 번째 배열의 요소가 옵니다. 이 메서드는 jQuery의 메서드를 사용하여 기본 concat() 메서드를 대체하지만 해당 기능은 여러 배열을 동시에 병합할 수 있는 concat()만큼 강력하지 않습니다.

코드는 다음과 같습니다.

//原生concat()可能比它还简洁点  
_moziNew=$.merge(_mozi,['鬼谷子','商鞅','孙膑','庞涓','苏秦','张仪'])  
alert('合并后新数组长度为: '+_moziNew.length+'. 其值为: '+_moziNew);

6 .$.unique(array)는 배열의 중복 요소를 필터링합니다. [일반적으로 사용되지 않음]

설명: 배열의 중복 요소를 삭제합니다. DOM 요소 배열의 삭제만 처리합니다. 하지만 문자열이나 숫자형 배열은 처리할 수 없습니다.

이 방법은 처음 봤네요. 정말 편리한 방법인 것 같아요. 하지만 자세히 살펴보면 DOM 요소만 처리할 수 있고 기능도 20% 할인된 것을 알 수 있습니다. 따라서 일반적으로 사용되지 않는 요소로 정의했습니다. 적어도 jQuery를 사용하기 시작한 이후로는 사용하지 않았습니다.

코드는 다음과 같습니다.

var _h2Arr=$.makeArray(h2obj);  
//将数组_h2Arr重复一次  
_h2Arr=$.merge(_h2Arr,_h2Arr);  
var _curLen=_h2Arr.length;  
_h2Arr=$.unique(_h2Arr);  
var _newLen=_h2Arr.length;  
alert('数组_h2Arr原长度值为: '+_curLen+' ,过滤后为: '+_newLen  
      +' .共过滤 '+(_curLen-_newLen)+'个重复元素')

7.$.makeArray(obj) 배열형 객체를 배열로 변환[일반적으로 사용되지 않음]

설명: 배열형 객체를 배열형 객체로 변환합니다. 객체에는 길이 속성이 있으며 해당 멤버는 0에서 길이-1까지 색인이 지정됩니다.
이것은 중복되는 방법입니다. 강력한 $에는 이미 이 기능이 포함되어 있습니다. jQuery 공식 웹사이트의 설명은 매우 모호합니다. 실제로 배열과 유사한 개체(예: getElementsByTagName로 얻은 요소 개체 모음)를 배열 개체로 변환합니다.
코드는 다음과 같습니다:

var _makeArr=$.makeArray(h2obj);  
alert('h2元素对象集合的数据
类型转换
为: '+_makeArr.constructor.name);//输出Array

8. $(dom).toArray()는 모든 DOM 요소를 배열로 복원합니다[일반적으로 사용되지 않음]

설명: jQuery 컬렉션의 모든 DOM 요소를 배열로 복원합니다. . 일반적으로 사용되는 방법은 아니지만 개인적으로는 $.makeArray만큼 중복된다고 생각하기도 합니다.
코드는 다음과 같습니다.

var _toArr=$('h2').toArray();  
alert('h2元素集合恢复后的
数据类型
是: '+_toArr.constructor.name);

위 내용은 jquery 기반 배열 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!