JavaScriptプログラムにおけるArray配列オブジェクトの拡張関数例

文字列スペースの削除、配列の並べ替えなど、カスタム拡張関数を String、Function、Array のプロトタイプに追加することがよくあります。

今日は Array オブジェクトを拡張する方法に焦点を当てます

1。 .prototype

2. 独自のメソッドを使用して配列オブジェクトを拡張します

Array.prototype で直接展開します。DOM オブジェクト (document.getElementsByTagName('div') によって取得されるノードリストなど) では直接使用できません。

潔癖症の人向け 学生にとっては、元の生態環境も破壊しています: )

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

(function(){

var YArray)。 ;

YArray = function(o,idx,arraylike){

var t = (arraylike) ? 2 : YArray.test(o),
l, a, start = idx ||
if (t) {
try {
return Array .prototype.slice.call(o, start); // Array ネイティブ メソッドを使用してアトムを JS 配列に変換します
} catch(e) {
a = [];
l = o.length;
for (; start< ;l; start++) {
a.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) || 0, i;
for (i = 0; i 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; iif (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 );
} :
function (a, f, o) {
var l = a.length, i;
for (i=0; i if (f.call( o, a[i], i, a)) {
return true;
}
}
return false;
};

})();

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

Returns (検索したいのはvalue) 配列内の値と同じインデックス値

YArray.indexOf([ 1,2],1)

YArray.numericSort
配列を小さい順に並べ替えます
[3, 1, 2].sort(YArray .nu​​mericSort);
YArray.some
配列内の要素が callBack 処理を通過するかどうか?存在する場合はすぐに true を返します。存在しない場合は false を返します

YArray.some([3, 1, 2], function(el){

return el ) })

配列に対する JavaScript 1.6 ～ 1.8 の拡張機能を見て、同じ機能を実装する方法を学びましょう

forEach
indexOf
lastIndexOf
map
some
reduce
reduceRight

配列.プロトタイプ。 Every

if (!Array.prototype.every)
{

Array.prototype.every = function(fun /*, thisp*/)

{
var len = this.length >>> ;
if (typeof fun != "function")
throw new TypeError();
var thisp = argument[1];
for (var i = 0; i {
if (i in this &&
!fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}

配列内のすべての要素が callBack によって処理されましたか?存在する場合は true を返し、そうでない場合はすぐに false を返します。これは、先ほど説明した YUI 関数とよく似ています:) この関数はまったく逆です。
Array.prototype.filter = function (block /*, thisp */) { //追加が簡単な、判定とフィルタリング用のフィルター

varvalues = [];

var thisp = argument[1];

for (var i = 0; i if (block.call(thisp, this[i]))
values.push(this[i]);戻り値;

};




使用法

var val=numbers.filter(function(t){

return t })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 = argument[1];

for (var i = 0; i if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}
return res;
};




配列を走査し、関数を実行し、配列を反復します。各要素は callBack メソッドを実行するためのパラメーターとして使用され、callBack メソッドは各要素を処理し、最後に処理された配列
varnumbers = [1, 4, 9 ];
varroot =numbers.map(function(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();

var i = 0;

if (arguments.length >= 2) {
var rv = argument[1];
} else {
do {
if (i in this) {
rv = this[i++];
break;
}
if (++i >= len)
throw new TypeError();
} while (true);
}
for (; i if (i in this)
rv = fun.call(null, rv, this[i], i, this);
}
return rv;
};




配列要素に指定された関数を順番に呼び出して、最終的に値を返します。つまり、指定された関数は戻り値を使用する必要があります

Array.prototype.reduceRight

右から左に名前を意味します。

Array.prototype.reduceRight = function(fun /*,Initial*/) {

var len = this.length >>> 0;
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 新しい 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 などを追加することもできます