首頁 > web前端 > js教程 > 主體

javascript數組的map方法怎麼用

青灯夜游
發布: 2023-01-07 11:44:16
原創
8142 人瀏覽過

在javascript中,陣列的map方法用於對陣列的每個元素呼叫指定的回調函數,並傳回包含結果的陣列;語法格式為「array.map(callbackfn[, thisArg]); 」。

javascript數組的map方法怎麼用

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript map() 方法可以對陣列的每個元素呼叫指定的回呼函數,並傳回包含結果的陣列。具體用法如下:

array.map(callbackfn[, thisArg]);
登入後複製

參數說明:

  • array:必要參數,陣列物件。

  • callbackfn:必要參數,最多可以接收三個參數的函數。對於陣列中的每個元素,map() 方法都會呼叫 callbackfn 函數一次。

  • thisArg:可選參數,callbackfn 函數中的 this 關鍵字可引用的物件。如果省略 thisArg,則 undefined 將用作 this 值。

map() 方法將傳回一個新數組,其中每個元素均為關聯的原始數組元素的回調函數傳回值。對於陣列中的每個元素,map() 方法都會呼叫 callbackfn 函數一次(採用升序索引順序),不會為陣列中缺少的元素呼叫回調函數。

除了陣列物件之外,map() 方法可由具有 length 屬性,且具有已依編制索引的屬性名稱的任何物件使用,如 Arguments 參數物件。

回呼函數的語法如下:

function callbackfn (value, index, array);
登入後複製

使用者可以使用最多三個參數來宣告回呼函數。回呼函數的參數說明如下:

  • value:陣列元素的值。

  • index:陣列元素的數字索引。

  • array:包含該元素的陣列物件。

map() 方法不會直接修改原始數組,但回呼函數可能會修改它。在 map 方法啟動後修改陣列物件所得到的結果說明如表所示。

回呼函數修改陣列的影響
map 方法啟動後的條件元素是否傳遞給回呼函數
在陣列的原始長度之外加上元素
#新增元素以填入陣列中缺少的元素是,如果該索引尚未傳遞給回呼函數
元素已更改是,如果該元素尚未傳遞給回調函數
從陣列中刪除元素否,除非該元素已傳遞給回呼函數

範例1

下面範例使用map() 方法來對應數組,把數組中每個元素的值平方,乘以PI 值,把傳回的圓的面積值當作新數組的元素值,最後回傳這個新數組。

function f (radius) {
    var area = Math.PI * (radius * radius);
    return area.toFixed(0);
}
var a = [10,20,30];
var a1 = a.map(f);
console.log(a1);
登入後複製

範例2

下面範例使用map() 方法來對應數組,把陣列中每個元素的值除以一個閾值,然後傳回這個新數組其中回呼函數和閾值都以物件的屬性存在,透過此方法示範如何在map 中使用thisArg 參數。

var obj = {
    val : 10,
    f : function (value) {
        return value % this.val;
    }
}
var a = [6,12,25,30];
var a1 = a.map(obj.f, obj);
console.log(a1);  //6,2,5,0
登入後複製

範例3

下列範例示範如何使用 JavaScript 內建方法作為回呼函數。

var a = [9, 16];
var a1 = a.map(Math.sqrt);
console.log(a1);  //3,4
登入後複製

【推薦學習:javascript進階教學

以上是javascript數組的map方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!