延續探討

陣列函數

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)