[前端-小分享]在JavaScript裡多元使用 Array-Part1

以下介紹ES5和ES6+ Array的常見用法，也許能讓你寫出來的JS Code看起來更簡潔易懂

主要有八種：

1. Array.forEach
2. Array.map
3. Array.find
4. Array.findIndex
5. Array.filter
6. Array.every
7. Array.some
8. Array.reduce

這篇先來介紹兩種，以下來一一說明吧！ 

1.　Array.forEach 

      回傳陣列裡每一個元素

Array.forEach(callback(currentValue [, index [, array]])[, thisArg]); 

範例： 

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month) {
  console.log(month);});

/* output
January
February
March
April
*/ 

如上面程式碼的output所示，會逐筆回傳array裡的資料

等同for迴圈: 

const months = ['January', 'February', 'March', 'April'];

for(let i = 0; i < months.length; i++) {
  console.log(months[i]);}

/* output
January
February
March
April
*/ 

※要記住的是forEach不會回傳任何值，因此只適合用在一些迴圈處理

如下面範例，使它return month，得到的是undefined 

const months = ['January', 'February', 'March', 'April'];

const returnedValue = months.forEach(function (month) {
  return month;});
  
console.log('returnedValue: ', returnedValue); // undefined 

 上面範例只用到callback的第一個參數，但其實還可以接收兩個參數：

1. index: 目前被執行的元素index
2. array: 正在loop的陣列

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month, index, array) {
  console.log(month, index, array);});

/* output
January 0 ["January", "February", "March", "April"]
February 1 ["January", "February", "March", "April"]
March 2 ["January", "February", "March", "April"]
April 3 ["January", "February", "March", "April"]
*/ 

• 相對於for loop，使用forEach的好處：
  • 程式觀看上的較簡短且易懂
  • 不用追蹤陣列裡有多少元素，避免掉建立額外的算數變數
  • 程式碼易於debug，無須多餘參數去loop陣列
  • 當所有元素loop完成會自動停止

2.  Array.map

   回傳一新轉變過的陣列 

 Array.map(function callback(currentValue[, index[, array]]) { // Return element for new_array}[, thisArg])

  範例1:

const months = ['January', 'February', 'March', 'April'];

const transformedArray = months.map(function (month) {
  return month.toUpperCase();});

console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"] 

 上面程式碼將每個元素全轉為大寫

等同: 

const months = ['January', 'February', 'March', 'April'];const converted = [];

for(let i = 0; i < months.length; i++) {
    converted.push(months[i].toUpperCase());
};

console.log(converted); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"] 

 ※新的陣列長度會跟原始陣列一樣 

    前面有提到forEach不會回傳值，但map可以回傳一新長度同原始陣列的陣列 

    另外，map不會異動到原始陣列

範例2: 

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }];

const usersList = users.map(function (user) {
  return user.first_name + ' ' + user.last_name;});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"] 

也可使用map將first_name和last_name串接起來，回傳成一新array

原本用+符號去串接，在ES6可以使用以下用法： 

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }];

const usersList = users.map(function (user) {
  return `${user.first_name} ${user.last_name}`;});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"] 

• 使用map的好處:
  • 可以快速得到一新陣列並且不會變動到原始陣列
  • 得到一陣列能夠根據每一個元素動態取得內容
  • 快速取出陣列裡的任何元素
  • 得到長度和原始陣列一樣的新陣列

下回再繼續整理接下來的兩個~