> 웹 프론트엔드 > JS 튜토리얼 > javascript Array array object_javascript 기술의 확장 기능 코드

javascript Array array object_javascript 기술의 확장 기능 코드

WBOY
풀어 주다: 2016-05-16 18:26:30
원래의
1079명이 탐색했습니다.

오늘은 Array 객체

를 확장하는 방법에 중점을 둘 것입니다. 1. Array.prototype에서

을 직접 확장합니다. 2. 자신만의 메서드를 사용하여 Array.prototype에서

을 직접 확장합니다. 프로토타입에서 확장된 배열은 DOM 객체(예: document.getElementsByTagName('div')에서 얻은 nodeList)에서 직접 사용할 수 없습니다.

또한 결벽증이 있는 학생들을 위한 원래 생태 환경을 깨뜨립니다.

먼저 yui 연산 배열의 몇 가지 방법을 살펴보겠습니다. 여기서는 간단히 소스 코드를 제거하고 변경했습니다.

코드 복사 코드는 다음과 같습니다.

(function(){
var YArray;

YArray = function(o,idx,arraylike){
var t = (arraylike) ? 2: YArray.test(o),
l, a, start = idx || 0
if (t) {
return Array .prototype.slice.call(o, start); //Array 네이티브 메소드를 사용하여 Atom을 JS 배열로 변환합니다.
} catch(e) {
a =
l = o.length;
for (; starta.push(o[start])
}
return a
}
} else {
return [o];

}

YArray.test = function(o){
var r = 0
if (o && (typeof o == '객체' |typeof o == '함수')) {
if (Object.prototype.toString.call(o) === "[객체 배열]") {
r = 1; >} else {
try {
if (('length' in o) && !o.tagName && !o.alert && !o.apply) {
r = 2; 🎜>} catch (e) {}
}
}
return r;
}

YArray.each = (Array.prototype.forEach) //먼저 확인하세요. 브라우저가 이를 지원한다면 기본
함수 (a, f, o) {
Array.prototype.forEach.call(a || [], f, o || Y); >return YArray;
} :
함수 (a, f, o) {
var l = (a && a.length) || 0, i
for (i = 0; < i =i 1) {
f.call(o || Y, a[i], i, a)
return YArray
;
YArray.hash = function(k, v) {
var o = {}, l = k.length, vl = v && v.length, i
for (i=0; i< l; i=i 1) {
if (k[i]) {
o[k[i]] = (vl && vl > i) ? v[i] : true;
}

return o;
};

YArray.indexOf = (Array.prototype.indexOf)
function(a, val) {
return Array.prototype.indexOf .call(a, val)
} :
function(a, val) {
for (var i=0; iif ( a[i] === val) {
return i;
}
}
return -1; //상황을 찾을 수 없음

YArray .numericSort = function(a, b) {
return (a - b) //작은 것에서 큰 것으로 정렬, return (b - a)
};

YArray.some = (Array.prototype.some) ?
function (a, f, o) {
return Array.prototype.some.call(a, f, o); 🎜>} :
함수 (a, f, o) {
var l = a.length, i
for (i=0; i if (f.call(o, a[i], i, a)) {
return
}
}
return
}; })() ;




객체를 JS 배열로 변환하려면 Array 기본 메서드를 사용하세요(Dom 객체는 탐색할 수 없으며 탐색만 가능)




코드 복사


코드는 다음과 같습니다.


Array.apply(null,arguments)
[].slice.call(arguments ,0) ;
[].splice.call(arguments,0,arguments.length)
[].concat.apply([],arguments); >
YArray 함수는 배열 객체뿐만 아니라 nodeList 객체에서도 작동할 수 있습니다.YArray(document.getElementsByTagName("div")) dom 객체를 탐색하여 배열로 재조립합니다. : )
코드 복사


코드는 다음과 같습니다.


a = []
l = o.length;
for (; starta.push(o[start])
return a; 🎜>YArray.each
배열 통과, 함수가 전달되면 통과할 때마다 콜백이 실행됩니다.

코드 복사 코드는 다음과 같습니다.
YArray.each([1,2,3],function(item){
alert(item); // 3번 실행, 1,2,3
});


YArray.hash
배열은 키-값 쌍으로 구성되며 json 객체로 이해될 수 있습니다.
YArray.hash( ["a","b"],[1,2]);

YArray.indexOf
(찾고 싶은 값) 배열의 동일한 인덱스 값을 반환합니다.
YArray.indexOf([1,2],1) YArray.numericSort 작은 것부터 큰 것 순으로 배열 정렬[3, 1, 2].sort(YArray.numericSort) YArray.some 배열의 요소 중 콜백 처리를 통과한 요소가 있습니까? 있으면 바로 true, 없으면 false를 반환


코드복사

코드는 다음과 같습니다 :

YArray.some([3, 1, 2],function(el){
el < 4;
}을 반환


Let 배열에 대한 JavaScript 1.6 -1.8 확장을 살펴보고 동일한 기능을
모든
필터
forEach
indexOf
lastIndexOf
map
일부
구현하는 방법을 알아봅니다. Reduce
reduceRight

Array.prototype.every
코드 복사 코드는 다음과 같습니다.

if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisp*/)
{
var len = this .length > ;>> 0; if (typeof fun != "function")
throw new TypeError()
for (var i = 0; i < len i )
{
if (i &&
!fun.call(thisp, this[i], i, this))
false를 반환합니다. 🎜>}
return true;
};
}


배열의 각 요소가 콜백으로 처리되었나요? 만약 그렇다면 true를 반환하고, 그렇지 않으면 즉시 false를 반환합니다
이것은 방금 언급한 일부 YUI 함수와 매우 유사합니다. :) 함수는 정반대입니다

배열 .prototype.filter



코드 복사 코드는 다음과 같습니다. Array.prototype.filter = function (block /*, thisp */) { //필터, 추가하기 쉬움, 판단 필터링
var 값 ​​= []
var thisp = 인수[1]
for ( var i = 0; i < this.length; i )
if (block.call(thisp, this[i]))
values.push(this[i]);
};


사용법



코드 복사
코드는 다음과 같습니다. var val=number.filter(function(t){ return t < 5 ;
})
alert(val)


forEach 그리고 indexOf와 일부는 위의 yui 코드를 참조할 수 있습니다. 다시 말씀드리자면
lastIndexOf와 indexOf 코드는 비슷합니다. 끝에서 트래버스하세요.
이제 'map'에 대해 이야기해 보겠습니다.




코드 복사
코드는 다음과 같습니다. Array.prototype.map = function(fun /*, thisp*/ ) { var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError()
var res = new Array( len);
var thisp = 인수[1];
for ( var i = 0; i < len; i ) {
if (i in this)
res[i] = fun .call(thisp, this[i], i, this);
}
return res;


배열 탐색, 함수 실행, 배열 반복 , 각 요소는 매개 변수로 callBack 메서드를 실행하고, callBack 메서드는 각 요소를 처리한 후 최종적으로 처리된 배열을 반환합니다.
varnumbers = [1, 4, 9]
varroots=number.map(function( a){return a * 2});
Array.prototype .reduce




코드 복사
다음과 같습니다: Array.prototype.reduce = function(fun / *,initial*/) { var len = this.length >>> (typeof fun != "function") throw new TypeError();
if (len == 0 && 인수.length == 1)
throw new TypeError(); 0;
if (arguments.length >= 2) {
var rv = 인수[1]
} else {
do {
if (i 있음) {
rv = this[i ];
break;
}
if ( i >= len)
throw new TypeError();
for (; i < len; i ) {
if (i in this )
rv = fun.call(null, rv, this[i], i, this)
}
return rv;
};


Let array 요소는 주어진 함수를 순차적으로 호출하고 최종적으로 값을 반환합니다. 🎜>
Array.prototype.reduceRight
이름에서 알 수 있듯이 오른쪽에서 왼쪽으로




코드 복사


코드 다음과 같습니다.

Array.prototype.reduceRight = function(fun /*, 초기*/) {
var len = this.length >>>
if (typeof fun != " function")
throw new TypeError();
if (len == 0 && 인수.length == 1)
throw new TypeError();
var i = len - 1;
if (arguments.length >= 2) {
var rv = 인수[1];
} else {
do {
if (i in this) {
rv = this [i--];
break;
}
if (--i
throw new TypeError()
}
for (; i >= 0; i--) {
if (i in this)
rv = fun.call(null, rv, this[i], i, this); >}
return rv;
};


이 외에도 사용하려는 메서드를 Array.prototype에 추가할 수 있습니다.
예를 들어 일반적으로 사용되는 toString


Array.prototype.toString = function() {
return this .join('');
};


Json, uniq, Compact, reverse 등에 추가할 수도 있습니다.
배열 확장은 여전히 ​​매우 유용합니다. 개발을 위해: )
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿