1. 程式人生 > >map, foreach, for的用法區別

map, foreach, for的用法區別

array.forEach(callback[, thisObject]);

下面是引數的詳細資訊:

   1、 callback : 函式測試陣列的每個元素。

   2、thisObject : 物件作為該執行回撥時使用.

forEach是ECMA5中Array新方法中最基本的一個,就是遍歷,迴圈。

Array在ES5新增的方法中,引數都是function型別,預設有傳參,forEach方法中的function回撥支援3個引數,第1個是遍歷的陣列內容;第2個是對應的陣列索引,第3個是陣列本身。

[].forEach(function(value, index, array) {
// ... }); $.each([], function(index, value, array) { // ... }); 這裡的map不是“地圖”的意思,而是指“對映”。[].map(); 基本用法跟forEach方法類似
array.map(callback,[ thisObject]);
[].map(function(value, index, array) { // ... });map方法的作用不難理解,“對映”嘛,也就是原陣列被“對映”成對應新陣列。 var data=[1,3,4] var Squares=data.map(function(val,index,arr){
console.log(arr[index]==val);  // ==> true return val*val           }) console.log(Squares);        // ==> [1, 9, 16] 注意:由於forEach、map都是ECMA5新增陣列的方法,所以ie9以下的瀏覽器還不支援(萬惡的IE啊),不過呢,可以從Array原型擴充套件可以實現以上全部功能,例如forEach方法。 優勢:foreach和map相對於for來說,實現同樣的功能,但是方便書寫節省程式碼量 forEach相比普通的for迴圈的優勢在於洗漱陣列的處理,或跳過陣列的空位,如下 for迴圈:
var arr = new Array(1000);

arr[0] = 1;
arr[99] = 3;
arr[999] = 5;
// for迴圈
for (var i = 0, l = arr.length; i < l; i++) {
    console.log('arr[%s]', i, arr[i]);
}
console.log('i :' , i);
// ...
// arr[0] 1
// ...
// arr[99] 3
// ...
// arr[999] 5
// i : 1000

// for - in 迴圈
var count = 0;
for(var j in arr){
    count ++ ;
    if(arr.hasOwnProperty(j)){
        console.log('arr[%s]', j, arr[j]);
    }
}
console.log('count : ', count);
// arr[0] 1
// arr[99] 3
// arr[999] 5
// i : 1000


forEach迴圈:
var arr = new Array(1000);
arr[0] = 1;
arr[99] = 3;
arr[999] = 5;

var count = 0;
arr.forEach(function(value, index) {
    count++;
    console.log(typeof index);
    console.log(index, value);
});
console.log('count', count);
// number
// 0 1
// number
// 99 3
// number
// 999 5
// count 3

Array 在 Javascript 中是一個物件, Array 的索引是屬性名。
事實上, Javascript 中的 “array” 有些誤導性, Javascript 中的 Array 並不像大部分其他語言的陣列。首先, Javascript 中的 Array 在記憶體上並不連續,其次, Array 的索引並不是指偏移量。
實際上, Array 的索引也不是 Number 型別,而是 String 型別的。我們可以正確使用如 arr[0] 的寫法的原因是語言可以自動將 Number 型別的 0 轉換成 String 型別的 "0" 。
所以,在 Javascript 中從來就沒有 Array 的索引,而只有類似 "0" 、 "1" 等等的屬性。有趣的是,每個 Array 物件都有一個 length 的屬性,導致其表現地更像其他語言的陣列。
但為什麼在遍歷 Array 物件的時候沒有輸出 length 這一條屬性呢?那是因為 for-in 只能遍歷“可列舉的屬性”, length 屬於不可列舉屬性,實際上, Array 物件還有許多其他不可列舉的屬性。

map可以做鏈式操作,forEach不可以,
for不用擔心相容性的問題,還有可以break跳出迴圈,是基礎迴圈,可以有for...in,foo...of,for(let i=0;i<len;i++)等。可以用continue和break控制
forEach是for(let i=0;i<len;i++)的縮寫,不支援continue和break,可以return來控制迴圈,forEach是不能退出迴圈本身的
map迴圈當前可迴圈物件,並且返回新的可迴圈物件,而forEach沒有返回值
forEach只有在火狐和谷歌瀏覽器中Array有這個方法,在IE中就米有,需要用prototype手動新增這個方法