深入學習jquery原始碼之map()
阿新 • • 發佈:2018-12-24
概述
將一組元素轉換成其他陣列(不論是否是元素陣列)
你可以用這個函式來建立一個列表,不論是值、屬性還是CSS樣式,或者其他特別形式。這都可以用'$.map()'來方便的建立。
引數
callback,給每個元素執行的函式
把form中的每個input元素的值建立一個列表。
<p><b>Values: </b></p> <form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form>
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
結果
[ <p>John, password, http://ejohn.org/</p> ]
map也可以遍歷陣列, 用法與 forEach 相似,實際效率還比不上foreach:
arr.map(function(value,index,array){
//code
})
jquery的map()原始碼
(function (global, factory) { if (typeof module === "object" && typeof module.exports === "object") { module.exports = global.document ? factory(global, true) : function (w) { if (!w.document) { throw new Error("jQuery requires a window with a document"); } return factory(w); }; } else { factory(global); } // Pass this if window is not defined yet }(typeof window !== "undefined" ? window : this, function (window, noGlobal) { var version = "1.11.3", jQuery = function (selector, context) { return new jQuery.fn.init(selector, context); }, // Support: Android<4.1, IE<9 // Make sure we trim BOM and NBSP rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, // Matches dashed string for camelizing rmsPrefix = /^-ms-/, rdashAlpha = /-([\da-z])/gi, // Used by jQuery.camelCase as callback to replace() fcamelCase = function (all, letter) { return letter.toUpperCase(); }; jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, // Start with an empty selector selector: "", // The default length of a jQuery object is 0 length: 0, // Take an array of elements and push it onto the stack // (returning the new matched element set) pushStack: function (elems) { // Build a new jQuery matched element set var ret = jQuery.merge(this.constructor(), elems); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; // Return the newly-formed element set return ret; }, map: function (callback) { return this.pushStack(jQuery.map(this, function (elem, i) { return callback.call(elem, i, elem); })); } }: jQuery.extend({ // arg is for internal usage only map: function (elems, callback, arg) { var value, i = 0, length = elems.length, isArray = isArraylike(elems), ret = []; // Go through the array, translating each of the items to their new values if (isArray) { for (; i < length; i++) { value = callback(elems[i], i, arg); if (value != null) { ret.push(value); } } // Go through every key on the object, } else { for (i in elems) { value = callback(elems[i], i, arg); if (value != null) { ret.push(value); } } } // Flatten any nested arrays return concat.apply([], ret); } }); function isArraylike(obj) { // Support: iOS 8.2 (not reproducible in simulator) // `in` check used to prevent JIT error (gh-2145) // hasOwn isn't used here due to false negatives // regarding Nodelist length in IE var length = "length" in obj && obj.length, type = jQuery.type(obj); if (type === "function" || jQuery.isWindow(obj)) { return false; } if (obj.nodeType === 1 && length) { return true; } return type === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj; } jQuery.noConflict = function (deep) { if (window.$ === jQuery) { window.$ = _$; } if (deep && window.jQuery === jQuery) { window.jQuery = _jQuery; } return jQuery; }; if (typeof noGlobal === strundefined) { window.jQuery = window.$ = jQuery; } return jQuery; }));