javascript陣列的map()函式用法簡單介紹

本章節結合程式碼例項介紹一下陣列物件的map()函式的用法，希望能夠給需要的朋友帶來一定的幫助。

一.基本介紹:

此函式是IES5中新增的，具有一定的瀏覽器相容性問題，IE9和IE9以上瀏覽器和其他標準瀏覽器支援，低版本的IE瀏覽器不支援。

map()函式可以隊陣列中的每個元素使用自定義的回撥函式，並且返回一個新的陣列，新陣列的元素內容是回撥函式利用原來陣列對應元素的返回值，也就是說，每次呼叫回撥函式都會返回一個值，這個值將作為新陣列的元素，並且索引位置和當前回撥函式使用的原陣列元素索引是對應的。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
array.map(callbackfn[, thisArg])

引數解析:

1.array:一個陣列物件。

2.callbackfn:必需，一個自定義函式，此函式最多可以具有三個引數，會在例項程式碼中介紹。

3.thisArg:可選，一個物件，可以作為回撥函式中的this將指向這個物件。

二.例項程式碼:

例項一:

[JavaScript] 純文字檢視 複製程式碼
var theArray=[2,3,4,5];
function func(){
  return 8;
}
var newArray=theArray.map(func);
console.log(newArray);

從以上程式碼的執行結果可以看出，新陣列的元素是回撥函式的返回值，也可以看出回撥函式完全可以不用傳遞引數，當然通常情況下不會這麼使用。

例項二:

[JavaScript] 純文字檢視 複製程式碼
var theArray=[2,3,4,5];
function func(value){
  return value+2;
}
var newArray=theArray.map(func);
console.log(newArray);

如果回撥函式帶有一個引數，那麼此引數用來傳遞原來陣列的元素，按照索引的大小升序傳遞的。

例項三:

[JavaScript] 純文字檢視 複製程式碼
var theArray=[2,3,4,5];
function func(value,index){
  return value+2*index;
}
var newArray=theArray.map(func);
console.log(newArray);

如果回撥函式具有兩個引數，那麼第二個引數就是當前引數在原陣列中的索引值。

例項四:

[JavaScript] 純文字檢視 複製程式碼
var theArray=[2,3,4,5];
function func(value,index,arr){
  return value+2*index*arr[index];
}
var newArray=theArray.map(func);
console.log(newArray);

如果回撥函式具有第三個引數，那麼傳遞的就是原來的陣列物件。

例項五:

[JavaScript] 純文字檢視 複製程式碼
var theArray=[2,3,4,5];
function func(value){
  return value*this.target;
}
var obj={
  target:8
}
var newArray=theArray.map(func,obj);
console.log(newArray);

如果map()函式具有2個引數，那麼第二個是一個物件，回撥函式中的this指向該物件。

三.特別說明:

map()函式並不是陣列物件的專屬，只要具有length屬性，且可以使用數字作為索引的物件都可以使用，比如字串也是可以使用此函式的，下面看一個程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
function threeChars(value,index,str){
  return str.substring(index-1,index+2);
}
var word="antzone";
var result=[].map.call(word,threeChars);
console.log(result);

當然str物件時沒有map()方法的還是需要陣列物件引用，只是使用call()函式改變一下呼叫物件就可以了，返回值也是一個陣列。

相關閱讀:

1.substring()函式可以參閱javascript substring()一章節。

2.call()函式可以參閱js call()一章節。