延續探討
陣列函數
Array.forEach(function callback(currentValue[, index[, array]])
函數說明:列舉出列所有內容並執行callback的內容。
傳入參數說明:
callback:列舉每個陣列內容時執行的一段程式。
currentValue:目前列舉出來陣列內的資料內容
index:目前列舉的陣列內容位於陣列的位置
array:該列舉的陣列
範例:
var data = [1,2,3,4,’nas’];
var sum = 0;
data.forEach(function(value){sum += value;});
console.log(sum);
data.forEach(function(v,i,a){a[i] = v+1;});
console.log(data.toString());
說明:第一行宣告一個data陣列,並賦予陣列內容[1,2,3,4,’nas’],接下來第二行宣告sum變數給予數值0,第三行使用了data陣列forEach執行了帶入callback程式片段的功能,所以forEach會開始按照陣列順序列舉陣列的資料並執行callback程式片段,第一次列舉出陣列的第一個值1所以sum+=1的結果,目前sum=1,第二次列舉出陣列的第二個值2所以sum+=2的結果,目前sum=3,第三次列舉出陣列的第三個值3所以sum+=3的結果,目前sum=6,第四次列舉出陣列的第四個值4所以sum+=4的結果,目前sum=10,第五次列舉出陣列的第五個值’nas’所以sum+=’nas’的結果等於sum=sum+’nas’,目前sum=’10nas’,第四行顯示目前sum的值會顯示’10nas’,第五行使用了data陣列forEach執行了帶入callback程式片段的功能,所以forEach會開始按照陣列順序列舉陣列的資料並執行callback程式片段,第一次列舉出陣列的第一個值1所以會執行data [0] = 1+1,這時data[0]會變為2,第二次列舉出陣列的第二個值2所以會執行data [1] = 2+1,這時data[1]會變為3,第三次列舉出陣列的第三個值3所以會執行data [2] = 3+1,這時data[2]會變為4,第四次列舉出陣列的第四個值4所以會執行data [3] = 4+1,這時data[3]會變為5,第五次列舉出陣列的第五個值’nas’所以會執行data [4] = ‘nas’+1,這時data[4]會變為’nas1’,第六行輸出data陣列結果為[2,3,4,5,’nas1’]
Array.map(function callback( currentValue[, index[, array]])[, thisArg])
函數說明:列舉出列所有內容並執行callback的內容,並回傳新的陣列。
傳入參數說明:
callback:列舉每個陣列內容時執行的一段程式。
currentValue:目前列舉出來陣列內的資料內容
index:目前列舉的陣列內容位於陣列的位置
array:該列舉的陣列
thisArg:執行callback的this值
範例:
var data = [1,2,3,4,’Message‘];
var qq=data.map(x=>x+1);
console.log(qq);
var d2 = [2,3,4,5,’nas’];
qq = data.map(function(x,y,z){return z[y]+this[y]},d2);
console.log(qq)
說明:
第一行宣告一個data陣列,並賦予陣列內容[1,2,3,4,’Message’],接下來第二行宣告qq變數,將data.map(x=>x+1);的結果回傳給qq變數,data.map(x=>x+1)相當於data.map(function(x){return x+1});,所以map開始列舉後第一次列舉出陣列的第一個值1所以會執行return 1+1,所以目前map所製造的回傳陣列為[2],接下來列舉出陣列的第二個值2所以會執行return 2+1,所以目前map所製造的回傳陣列為[2,3],接著是列舉出陣列的第三個值3會執行return 3+1的程式,能看出目前map所製造的回傳陣列為[2,3,4],第四個列舉出陣列的第四個值4將會執行return 4+1,目前map所製造的回傳陣列為[2,3,4,5],接著最後列舉出陣列的第5個值’Message’所以會執行return ‘Message’+1,所以最終map所製造的回傳陣列為[2,3,4,5,’Message’],並回傳給qq變數,第三行顯示目前qq變數值為[2,3,4,5,’Message’],第四行宣告一個d2陣列,並賦予陣列內容[2,3,4,5,’nas’],接下來將qq變數變更為data.map(function(x,y,z){return z[y]+this[y]},d2)的回傳結果,先來介紹callback function內的參數值z為data陣列,y為目前陣列的列舉位置,this值為thisArg所以this等於d2,接下來map列舉第一個值為data[0],所以y等於0,所以回傳會等於data[0]+d2[0]=1+2,目前map所製造的回傳陣列為[3],接著map列舉第二個值為data[1],所以y等於1,所以回傳會等於data[1]+d2[1]=2+3,目前map所製造的回傳陣列為[3,5],接著map列舉第三個值為data[2],所以y等於2,所以回傳會等於data[2]+d2[2]=3+4,目前map所製造的回傳陣列為[3,5,7],接著map列舉第四個值為data[3],所以y等於3,所以回傳會等於data[3]+d2[3]=4+5,目前map所製造的回傳陣列為[3,5,7,9],最後map列舉第五個值為data[4],所以y等於4,所以回傳會等於data[4]+d2[4]=’Message‘+’nas’,最後map所製造的回傳陣列為[3,5,7,9,’Messagenas’],[3,5,7,9,’Messagenas’]會回傳給qq變數,最後一行qq變數的輸出值就會是[3,5,7,9,’Messagenas’]。
參考:JavaScript大全(ISBN:9789862764411)