1. 程式人生 > >forEach和map和JQuery中的each區別

forEach和map和JQuery中的each區別

首先:forEach和map都是ES5的陣列的方法,而each是jQuery中的方法。(JQuery中他的對於一些方法,他還有對應的函式。下一篇在細寫方法和函式問題。)

/*
* forEach函式列子,以下特性總結:
*   1.不改變原陣列
*   2.forEach不返回原陣列
*   注意:他的函式裡面引數的順序
*/
var arr=[1,3,5,7,9];
//測試之後forEach只能遍歷陣列,他是陣列的一個方法
//他的函式三個引數,第一個必須為value,index,arr 是陣列本身,後兩個為可選,
//forEach本身有兩個引數,第一個就是處理的函式,第二個是上下文,一般預設為全域性,為undefined
var time=new Date(); console.log(time); var a=arr.forEach(function(value,index,arr){ value+=2; console.log("["+index+"]:"+value+" "+arr); },) console.log(new Date()-time); //forEach不返回東西,所以返回為undefined console.log(a); //不改變原來陣列,在執行完函式之後,返回原陣列 console.log(arr);

下面為執行結果:

2018-05-26T08:11:29.481Z
[0]
:3 1,3,5,7,9 [1]:5 1,3,5,7,9 [2]:7 1,3,5,7,9 [3]:9 1,3,5,7,9 [4]:11 1,3,5,7,9 5 undefined [ 1, 3, 5, 7, 9 ]

再看一下map函式

/*
* map方法(和forrEach方法很像)
*   1.不改變原陣列
*   2.map不返回原陣列
*   注意:他的函式裡面引數的順序
*   他兩都是Es5裡面的方法
*   然後測試了一下,map方法和forEach方法的效率,從時間上來說,map更快
*/
var ccc=new Date();
var b=arr.map(function(value,index){
    value*=
2; console.log(value+" "+index); }) console.log(new Date()-ccc); //不返回陣列,[ undefined, undefined, undefined, undefined, undefined ] console.log(b); //不改變陣列 console.log(arr);

下面為執行結果:

2   0
6   1
10   2
14   3
18   4
1
[ undefined, undefined, undefined, undefined, undefined ]
[ 1, 3, 5, 7, 9 ]

再說一下jQuery中的each方法:

/*
*   each
*   1.返回值為陣列本身
*   2.不改變陣列本身
*   3.他回撥函式裡面和forEach不一樣
*
*/
var arr=[1,4,2,5];
var a=$.each(arr,function(index,value){
    value*=2;
    console.log(index+"  "+value);
});
//返回值為陣列本身
console.log(arr);
//不改變原陣列
console.log(a);

執行結果為:

0  2
1  8
2  4
3  10
>Array(4)
0:1
1:4
2:2
3:5
>Array(4)
0:1
1:4
2:2
3:5

所以。。差不多這麼多,還有的話再補充。