JavaScriptの拡張関数コード配列配列 object_javascriptスキル-jsチュートリアル-php.cn

今日は、配列オブジェクト

を拡張する方法に焦点を当てます。 1.

を Array.prototype で直接拡張します。 2. 独自のメソッドを使用して、配列オブジェクト

を直接拡張します。配列。プロトタイプで拡張されているため、DOM オブジェクトで直接使用することはできません (document.getElementsByTagName('div') によって取得されるノードリストなど)。

また、潔癖症の生徒にとって元の生態環境が破壊されます。)

まず、配列を操作する yui のメソッドをいくつか見てみましょう。ここではソースコードを削除して変更しただけです

コードをコピーしますコードは次のとおりです:

 
(function(){ 
var YArray; 

YArray = function(o,idx,arraylike){ 
var t = (配列のような) ? 2: YArray.test(o), 
l, a, start = idx 0; 
if (t) { 
return Array .prototype.slice. call(o, start); // Array ネイティブ メソッドを使用してアトムを JS 配列に変換します。 
a = [] = 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; 
} : 
function (a, f, o) { 
var l = (a && a.length) || 
for (i = 0; i < l =i 1) { 
f.call(o || Y, a[i], i, a) 
return 
; 
YArray.hash = function(k, v) { 
var o = {}, l = k.length, vl = v && v.length, i; l; i=i 1) { 
if (k[i]) { 
o[k[i]] = (vl && vl > i) : true; 
} 

return o; 

YArray.indexOf = (Array.prototype.indexOf) { 
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); //大きいものから小さいものへ並べ替えます
}; 

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


 

Array ネイティブ メソッドを使用してオブジェクトを JS 配列に変換します (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 

配列内の要素に callBack 処理が渡されましたか?存在する場合はすぐに true を返し、存在しない場合は false を返します

コードをコピーコードは次のとおりです:

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

Let配列に対する JavaScript 1.6 ～ 1.8 の拡張機能を見て、同じ機能
すべての
フィルタ
forEach
indexOf
lastIndexOf
map
some
を実装する方法を学びます。 reduce
reduceRight

Array.prototype.every

コードをコピーコードは次のとおりです:

 
if (!Array.prototype.every) 
{ 
Array.prototype.every = function(fun /*, thisp*/) 
{ 
var len = this .length > ;>> 
if (typeof fun != "function") 
var thisp = argument[1]; = 0; i < len i ) 
{ 
if (i in this && 
!fun.call(thisp, this[i], i, this)) 
return 
} 
return true; 
} 

 
配列内の各要素は callBack によって処理されましたか?一致する場合は、true を返します。いずれかが一致しない場合は、すぐに false を返します。
これは、先ほど説明したいくつかの YUI 関数と非常によく似ています:) この関数は、

配列の逆です。 .prototype.filter

コードをコピーコードは次のとおりです。 Array.prototype.filter = function (block /*, thisp */) { //フィルター、追加が簡単、判定フィルター用

var 値 = [];

var thisp = argument[1]; var i = 0; i 
if (thisp, this[i]) 
values(this[i]); 
}; 

 
使用法

コードをコピー

コードは次のとおりです: var val=number.filter (function(t){ return t < 5 ; })

alert(val);

 
forEach繰り返しますが、
lastIndexOf とindexOf コードは似ており、単に端からたどるだけです 

次に、'map' について話しましょう 

コードをコピー

コードは次のとおりです。 Array.prototype.map = function(fun /*, thisp*/ ) { var len = this.length >>> 0; if (typeof fun != "function")

throw new TypeError(); len);

var thisp = argument[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 メソッドは各要素を処理し、最終的に処理された配列を返します。 a){return a * 2}); 

Array.prototype .reduce 

コードをコピー

コードは次のとおりです。次のように:

Array.prototype.reduce = function(fun / *,Initial*/) { var len = this.length >>> if (typeof fun != "function") throw new TypeError(); if (len == 0 && argument.length == 1) throw new TypeError(); 0; if (arguments.length >= 2) {

var rv = argument[1];

} else {
do {
if (i in this) {
rv = this[i ];
}
if ( i >= len)
throw new TypeError(); while (true);
for (; i < len; i ) {
if (i in this )
rv = fun.call(null, rv, this[i], i, this);
return rv;
};

Let 配列要素は指定された関数を順番に呼び出し、最終的に値を返します。つまり、指定された関数は戻り値 < を使用する必要があります。 🎜>
Array.prototype.reduceRight
名前のとおり、右から左に

コードをコピー

コードは次のとおりです:

 
Array.prototype.reduceRight = function(fun /*,Initial*/) { 
var len = this.length >>> 
if (typeof fun != " function") 
throw new TypeError(); 
if (len == 0 && argument.length == 1) 
throw new TypeError(); 
var i = len - 1; 
if (arguments.length >= 2) { 
var rv = argument[1]; 
} else { 
do { 
if (i in this) { 
rv = this [i--]; 
break; 
} 
if (--i < 0) 
throw new TypeError(); while (true); 🎜>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('');

};

 
toJson、uniq、compact、reverse などを追加することもできます。
配列拡張は依然として非常に役立ちます開発用:)

JavaScriptの拡張関数コード 配列 配列 object_javascriptスキル

JavaScriptの拡張関数コード配列配列 object_javascriptスキル