Heim > Web-Frontend > js-Tutorial > Beispiel für eine Erweiterungsfunktion eines Array-Array-Objekts in einem JavaScript-Programm

Beispiel für eine Erweiterungsfunktion eines Array-Array-Objekts in einem JavaScript-Programm

高洛峰
Freigeben: 2016-11-28 13:45:29
Original
1217 Leute haben es durchsucht

Wir fügen den Prototypen von String, Function und Array oft benutzerdefinierte Erweiterungsfunktionen hinzu, wie z. B. das Entfernen von String-Leerzeichen, das Sortieren von Arrays usw.

Heute konzentrieren wir uns auf die Erweiterung des Array-Objekts

1. Erweitern Sie direkt auf Array.prototype

2. Verwenden Sie Ihre eigene Methode, um das Array-Objekt zu erweitern

Erweitern Sie es direkt auf Array.prototype und können Sie es nicht direkt auf DOM-Objekten verwenden ( wie zum Beispiel: document .getElementsByTagName('div') learned nodeList);

Es zerstört auch die ursprüngliche ökologische Umgebung für Schüler mit Mysophobie: )

Sehen wir uns zunächst einige Methoden zum Betreiben von Arrays an Yui, hier habe ich einfach den Quellcode entfernt und geändert

(function(){
var YArray;

YArray = function(o,idx,arraylike){
var t = (arraylike) ? 2 : YArray.test(o),
l, a, start = idx || 0;
if (t) {
try {
return Array.prototype.slice .call(o, start); //Native Array-Methode verwenden, um Atome in ein JS-Array umzuwandeln
} 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 == 'object' | |typeof o == 'function')) {
if (Object.prototype.toString.call(o) === "[object Array]") {
r = 1;
} else {
versuchen Sie {
if (('length' in o) && !o.tagName && !o.alert && !o.apply) {
r = 2;
}
} zu fangen (e) {}
}
}
return r;
}

YArray.each = (Array.prototype.forEach) ? //Überprüfen Sie zunächst, ob der Browser unterstützt wird , falls verfügbar, rufen Sie die native
function (a, f, o) {
Array.prototype.forEach.call(a || [], f, o || Y);
return YArray;
} :
Funktion (a, f, o) {
var l = (a && a.length) || 0, i;
für (i = 0; i < l; 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; iif (k[i]) {
o[k[i]] = (vl && vl > i) ? v[i] : true;
}
}

return o;
};

YArray.indexOf = (Array.prototype.indexOf) ?
function(a, val) {
return Array. Prototyp.indexOf.call(a, val);
} :
function(a, val) {
for (var i=0; iif (a[i] === val) {
return i;
}
}
return -1; //Kann die Situation nicht finden
};

YArray.numericSort = function(a, b) {
return (a - b); //Sortieren von klein nach groß, return (b - a); Von groß nach klein
};

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

}) ();

Andere Methoden zum Konvertieren von Atomen in JS-Arrays mithilfe der nativen Array-Methode (Dom-Objekte sind nicht zulässig, nur Traversierung)


Array.apply (null,arguments);
[].slice.call(arguments,0);
[].splice.call(arguments,0,arguments.length);
[].concat.apply( [],arguments);
...


Die YArray-Funktion kann nicht nur auf Array-Objekten, sondern auch auf nodeList-Objekten angewendet werden
YArray(document.getElementsByTagName ( "div"));
Durchlaufen Sie das Dom-Objekt und setzen Sie es wieder zu einem Array zusammen: )


a = [];
l = o.length ;
for (; starta.push(o[start]);
}
return a;


YArray .each
durchläuft das Array, wenn eine Funktion übergeben wird, Rückruf


YArray.each([1,2,3],function(item ){
alert(item);// 3-mal ausgeführt, 1,2,3
});


YArray.hash
Array Assembling Schlüssel-Wert-Paare können als JSON-Objekt verstanden werden
YArray.hash(["a", "b"], [1,2]);

YArray.indexOf
return (think Um den gleichen Wert zu finden, liegt der Wert am Indexwert des Arrays

YArray.indexOf([1,2],1)
YArray.numericSort
Sortieren Sie das Array von klein nach large
[3, 1, 2].sort(YArray.numericSort);
YArray.some
Haben irgendwelche Elemente im Array die CallBack-Verarbeitung bestanden? Wenn dies der Fall ist, wird sofort true zurückgegeben. Wenn keine vorhanden ist, wird false zurückgegeben


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


Sehen wir uns die Javascript 1.6 -1.8-Erweiterungen für Arrays an und erfahren, wie man die gleiche Funktionalität erreicht
jeder
filter
forEach
indexOf
lastIndexOf
map
some
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();
var thisp = arguments[1];
for ( var i = 0; i < len; i++)
{
if (i in this &&
!fun.call(thisp, this[i], i, this))
return false ;
}
turn true;
};
}


Wurde jedes Element im Array von CallBack verarbeitet? Wenn dies der Fall ist, wird true zurückgegeben. Wenn dies nicht der Fall ist, wird sofort false zurückgegeben
Dies ist einigen der gerade erwähnten YUI-Funktionen sehr ähnlich:) Die Funktion ist genau das Gegenteil

Array .prototype.filter


Array.prototype.filter = function (block /*, thisp */) { //Filter, einfach hinzuzufügen, zur Beurteilung und Filterung
var value ​​= [] ;
var thisp = arguments[1];
for (var i = 0; i < this.length; i++)
if (block.call(thisp, this[i]))
values.push(this[i]);
Rückgabewerte;
};


Nutzung


var val= zahlen.filter(funktion(t){
return t < 5 ;
})
alert(val);


forEach, indexOf und einige können auf den obigen Yui-Code verweisen und werden nicht noch einmal wiederholt
lastIndexOf und indexOf haben ähnliche Codes, werden aber vom Ende aus durchlaufen >

Lassen Sie uns über „Karte“ sprechen


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 = arguments [1];
for (var i = 0; i < ; len; i++) {
if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}
return res;
};


Durchlaufen Sie das Array, führen Sie die Funktion aus, iterieren Sie das Array, jedes Element ist Wird als Parameter zum Ausführen der CallBack-Methode verwendet, verarbeitet die CallBack-Methode jedes Element und kehrt schließlich zur Verarbeitung zurück. Ein Array nach

var zahlen = [1, 4, 9];
var root = zahlen.map(Funktion (a){return a * 2});

Array.prototype. Reduce


Array.prototype.reduce = function(fun /*, initial */) {

var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
if (len = = 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[1 ];
} else {
do {
if (i in this ) {
rv = this[i++];
break;
}
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;
};


Lassen Sie die Array-Elemente die angegebene Funktion nacheinander aufrufen und schließlich einen Wert, mit anderen Worten, die angegebene Funktion zurückgeben. Stellen Sie sicher, dass Sie den Rückgabewert

Array.prototype.reduceRight

als verwenden Name impliziert, von rechts nach links


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

var len = this.length > >> 0;
if (typeof fun != "function")
throw new TypeError();
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len - 1;
if (arguments.length >= 2) {
var rv = arguments[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;
} ;


Zusätzlich zu diesen: any Die Methode, die Sie verwenden möchten, kann zu Array.prototype

hinzugefügt werden, z. B. der häufig verwendete toString


Array.prototype.toString = function () {

return this.join('');
};


Okay Zu Json, Uniq, Compact, Reverse usw. hinzufügen


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage