iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0

上一篇介紹高階函式forEach進行資料處理,forEach雖說比for loop好用,但他卻無法更改陣列中的內容,因此就必須學到本篇會說到的map

map

map的與forEach相似,同樣都是在funtion中加入三個參數:陣列值、陣列索引、陣列

但有幾個map的特性值得注意:

  • 可以透過return回傳值
  • 回傳的值會組合成一個新陣列且不會改變原陣列

語法使用

let data = [data1,data2,data3];
let data2 = data.map(function(item, index, array){ 
	/*
	依陣列資料長度決定function跑幾次 而其中參數名稱也可以作替換
	data 原先陣列
	data2 經由map處理後的新陣列 
	item  值-取出陣列中的元素
	index 索引-在陣列中的第幾筆資料
	array 整個陣列內容
	*/ 
	return(item,index,array); 
})

繼續使用上一回的小狗陣列作為範例:

var dogs = ["芒狗", "奇異狗", "蘋狗"];

var dogsString = dogs.map(function(item, num, arr) {
  item += " 是一種狗狗";
  return item;
});
console.log(dogs); 
// ['芒狗', '奇異狗', '蘋狗']
console.log(dogsString); 
// ['芒狗 是一種狗狗', '奇異狗 是一種狗狗', '蘋狗 是一種狗狗']

可以將較常見的for loopforEachmap三者進行比較看看自己比較適合用哪一種!

若對本篇內容有任何問題都歡迎討論唷~


上一篇
【Day16】forEach資料處理方法
下一篇
【Day18】陣列中的陣列
系列文
喜歡打程式嗎?從JavaScript基礎來進行興趣初探!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言