[Day 46] [React] Map method - 練習篇! (2) & HTML dictionary list 這是昨天的練習，用 map function 把片段的資料變成可以重複被使用的 components。

今天的課程會更深入介紹 map，同時也會介紹能夠幫我們處理 array 的一些相關 function。例如，map、filter、reduce、find、find index。

今天 sandbox 裡面有的題目：

var numbers = [3, 56, 2, 48, 5];

//Map -Create a new array by doing something with each item in an array.

//Filter - Create a new array by keeping the items that return true.

//Reduce - Accumulate a value by doing something to each item in an array.

//Find - find the first item that matches from an array.

//FindIndex - find the index of the first item that matches.

Map

• 對每個 array 裡面的 item 做些什麼來創造一個新的 array。

一開始我們有的 array 是 numbers，裡面有四個數字 item。

//先做好一個數字乘以2的function

function double(x){
  return x *2;
}

//numbers.map的patameters用double

const newNnumber = numbers.map(double);
console.log(newNnumber)

以上 console.log 印出來的東西就會是：

(5) [6, 112, 4, 96, 10]
0: 6
1: 112
2: 4
3: 96
4: 10

可以看到結果就是double重複被每個 item 用過，最後的結果成為了一個新的 array。

forEach

• 和 Map 一樣是可以重複執行的 function。

//課程一開始給的變數

`var numbers = [3, 56, 2, 48, 5];`

//先做出一個空array

var newNnumber = [];

//push的時候，數字乘以2

function double(x){
  newNnumber.push( x * 2 );
}

//對每個數字都用double

numbers.forEach(double);

console.log(newNnumber)

不過自己跑了一下程式碼還是不太懂哈哈，為了我自己的理解，我把 forEach 註解掉：

var newNnumber = [];

function double(x){
  newNnumber.push( x * 2 );
}

double(9);
double(10);
double(11);

console.log('this one yo = ' + newNnumber)

//output: this one yo = 18,20,22

OK～ 好像更明白了點，看起來是不用 forEach 的話，執行一次 double() 就只會有一個 item，要很多 item 就要執行很多次 double()。或是這樣寫讓 array 存新的 items：

var numbers = [9, 10, 11];


function double(x){
  return numbers.push( x * 2 );
}

numbers.forEach(double);

console.log('this one yo = ' + numbers)

//output: this one yo = 9,10,11,18,20,22 
//這樣的寫法會讓經過double()的新數字加進array