js map方法的使用


原型:   array.map(callback,[ thisObject]);

 callback的參數類似:
[].map(function(value, index, array) {
    // ... });
三個參數為:當前正在遍歷的元素, 元素索引, 原數組本身.


示例:
["1", "2", "3"].map(returnInt);// 返回[1,2,3]
function returnInt(element){
  return parseInt(element,10);
}

 

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]
*/
 
以上摘自網絡,由此可以寫出一個小Demo,比如格式化日期字符串:
 
 
 

function formatTime() {

  var date=new Date();


  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
};

 

 function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

最終結果格式:"2017/05/19 00:37:20"
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM