DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js 自帶的 map() 方法全面了解
js 自帶的 map() 方法全面了解
編輯:關於JavaScript     

1. 方法概述

map() 方法返回一個由原數組中的每個元素調用一個指定方法後的返回值組成的新數組。

2. 例子

2.1 在字符串中使用map

在一個 String  上使用 map 方法獲取字符串中每個字符所對應的 ASCII 碼組成的數組:

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值為[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

2.2 易犯錯誤

通常情況下,map 方法中的 callback 函數只需要接受一個參數(很多時候,自定義的函數形參只有一個),就是正在被遍歷的數組元素本身。

但這並不意味著 map 只給 callback 傳了一個參數(會傳遞3個參數)。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。

// 下面的語句返回什麼呢:
["1", "2", "3"].map(parseInt);
// 你可能覺的會是[1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]

// 通常使用parseInt時,只需要傳遞一個參數.但實際上,parseInt可以有兩個參數.第二個參數是進制數.可以通過語句"alert(parseInt.length)===2"來驗證.
// map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身.
// 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN.

/*
//應該使用如下的用戶函數returnInt

function returnInt(element){
 return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/

參考 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

以上這篇js 自帶的 map() 方法全面了解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved