1. 程式人生 > >【JQuery】map迴圈與each迴圈的對比學習

【JQuery】map迴圈與each迴圈的對比學習

前言

儘管是這兩個方法是封裝起來的,但是其思想尤為重要,將面向步驟過程操作,變成一個函式式的操作函數語言程式設計是一個流水線生產模式!現在聽著可能有點矇蔽,那就和小編一起來搞定它吧!

1、map方法

$.map() 函式用於使用指定函式處理陣列中的每個元素(或物件的每個屬性),並將處理結果封裝為 新的陣列返回。

語法
$.map( object, callback )前邊的object是物件或者陣列,後邊的callback是一個我們自己定義的函式!用來對我們的物件或者陣列進行操作!

callback的寫法一般為function(v,i)為函式傳入兩個引數:v是當前迭代的元素或屬性值,i是當前迭代項的陣列索引或物件屬性名。 (元素對應的是索引)(屬性值對應的是物件屬性名)接下來分別舉一個遍歷陣列的例子和一個物件的例子!

    var arr1 = [12, 3, 4, 0 - 9];
    var new_arr = $.map(arr1, function (v, i) {
        return v * 2;
    });
    alert(new_arr);
    
//返回的是[24,6,80,-18]


    var o = { name: "李光", age: 19, sex: "男" };
    $.map(o, function (k, v) {
        alert(k + "-----" + v);        
    });
    
    //	返回結果:李光-----name
				19-----age
				男-----sex

2、each方法

each() 方法為每個匹配元素規定要執行的函式。
提示:返回 false 可用於及早停止迴圈。

語法
$.each(object,function(index,element)) 這個同上,不做解釋,下邊的是一個例子!

    var o = { name: "李光", age: 19, sex: "男" };
    $.each(o, function (k, v) {
        alert(k + "-----" + v);            
    });
    //	返回結果:name-----李光
				age-----19
				sex-----男

綜上所述,二者可以實現相同的功能,那麼二者到底有什麼區別呢,接下來用三句話總結一下!

map()方法主要用來遍歷運算元組和物件,each()主要用於遍歷jquery物件。
each()返回的是原來的陣列,並不會新建立一個數組。
map()方法會返回一個新的陣列。如果在沒有必要的情況下使用map,則有可能造成記憶體浪費。