Seven implementations of Javascript-Arraylike

Seven implementations of Javascript-Arraylike
The rise of jQuery makes ArrayLike (class array) shine in javascript, and its appearance provides the foundation for the expansion of behavior (function) of a group of data. Arrays of classes are similar to arrays and have some behavior of arrays, but they can be expanded more freely than arrays. Its existence makes the performance of a group of data no longer limited by arrays, there is no need to pollute the prototype of the array itself-it comes from the mining and extension of javascript objects, rather than javascript itself. Simply put, it comes from arrays and is more suitable for expansion than arrays. This article is original to linkFly and the original article address. This article is mainly divided into the following sections: ArrayLikeArrayLike, which is capable of achieving other ArrayLike. If you already know about ArrayLike, you can skip this section. ArrayLike (class array/pseudo array) is a part of the behavior of an array, which has long been expressed in DOM. The rise of jQuery makes ArrayLike shine in javascript. Just like its translation: it is similar to an array. The ArrayLike object is similar to the javascript native Array, but it is built freely. It comes from developers' extensions to javascript objects, that is, prototype) we can define it freely without polluting the javascript native Array. In the past, the extension for a group of data looked like this: // contaminated Array Implementation extension Array. prototype. demo = function () {// check}; var test = []; test. demo (); the Code above, which you know, has contaminated Array. In collaborative development, this is simply a curse-ArrayLike should be born here. ArrayLike makes your expansion of a group of data no longer limited by the Array itself, but does not affect the Array. To put it bluntly, a group of data must be stored in arrays, however, if you want to expand this set of data, it will affect the array prototype. The appearance of ArrayLike provides an intermediate data bridge. ArrayLike has the array feature, however, the extension of ArrayLike does not affect the native array. For example, mom and dad have a high expectation for you. You have to study hard, but cheyou Kiki taught you to play dota, so you don't have time to read books and study. What is the result, it's just a good job. dota is learning and falling down. But if you split your mind into an ax and let you split your mind into dota, you can still study it yourself, in addition, you can not only beat dota, but also beat wow, sister, and do things you cannot do. Do you think this is not a bunker !!! That's right. ArrayLike is about doing such a bunker. The following are common ArrayLike types. For more information, see "others. Implement (inherit HTMLCollection) HTMLOptionsCollection (inherit HTMLCollection) HTMLAllCollectionDOMTokenListArrayLike implementation first-implement through closure: implement through closure, use an Array internally as the basis, the API is to operate on arrays, poor API implementation. In addition, it does not support accessing elements directly through indexes (array [0]). The determination of instanceof will be lost through closures, and the advantage is light enough.! Function () {// implement var List = function () {var list = [], self = {constructor: List through the closure, // if you want to be more native, to define length as an attribute, you must maintain length: function () {return list. length ;}, add: function (item) {list. push (item) ;}, eq: function (index) {return list [index] ;}; return self ;}; // test console. group ('first-implement through closures '); var demo = new List (); demo. add ('LIST-add () '); console. log ('demo instanceof List: % C' + (demo instanceof List), 'color: red; '); console. log ('demo. constructor === List: % C' + (demo. constructor = List), 'color: Blue'); // you cannot use index demo [0] to access the console. log ('Member: ['+ demo. eq (0) + ',' + demo. eq (1) + ']'); console. log ('length: '+ demo. length (); // check the console of the demo object. log (demo); console. groupEnd ();}();