Array Methods

以下皆是 higher-order function

• arr.map(callbackFn) - 創建一個新array，其中填充了在 arr 中的每個元素上調用 callbackFn 的結果，每次 callbackFn 執行時，返回的值都會添加到新 array 內部

  單一資料

  let languages = ["Java", "C++", "Python", "JavaScript"];
  
  let result = languages.map(function (lang) {
    return lang.toUpperCase();
  });
  console.log(result);  // -> ['JAVA', 'C++', 'PYTHON', 'JAVASCRIPT']
  
  //可以改成error function
  let result = languages.map((lang) => lang.toUpperCase());
  console.log(result);  // -> ['JAVA', 'C++', 'PYTHON', 'JAVASCRIPT']
  

  物件資料呈現

  const languages = [
    { name: "Python", rating: 9.5, popularity: 9.7, trending: "super hot" },  // -> 後端抓資料時，會以物件形式呈現
    { name: "Java", rating: 9.4, popularity: 8.5, trending: "hot" },
    { name: "C++", rating: 9.2, popularity: 7.7, trending: "hot" },
    { name: "PHP", rating: 9.0, popularity: 5.7, trending: "decreasing" },
    { name: "JS", rating: 8.5, popularity: 8.7, trending: "hot" },
  ];
  
  let result = languages.map((lang) => {
    return lang.name.toUpperCase();
  });
  console.log(result);  // -> ['PYTHON', 'JAVA', 'C++', 'PHP', 'JS']
  

• arr.find(callbackFn) - 返回 arr 中滿足 callbackFn 條件的第一個元素(也就是第一個使 callbackFn 做 return true 的元素)。 如果沒有值滿足 callbackFn 條件，則返回 undefined

  let result = languages.find((lang) => {
    return lang.popularity > 9.5;
  });
  console.log(result); // -> {name: 'Python', rating: 9.5, popularity: 9.7, trending: 'super hot'}
  
  let result2 = languages.find((lang) => {
    return lang.popularity > 9.8;
  });
  console.log(result2); // -> undefined
  

• arr.filter(callbakcFn) - 過濾出在給定 arr 中通過在 callbakcFn 會 return true元素。Return value 是 A shallow copy of a portion of arr

  let result = languages.filter((lang) => {
    return lang.rating >= 9.2;
  });
  console.log(result);
  //-> [
  //     {name: 'Python', rating: 9.5, popularity: 9.7, trending: 'super hot'},
  //     {name: 'Java', rating: 9.4, popularity: 8.5, trending: 'hot'},
  //     {name: 'C++', rating: 9.2, popularity: 7.7, trending: 'hot'}
  //   ]
  

• arr.some(callbackFn) - 給定 callbackFn ，測試 arr 中是否至少有一個元素，通過 callbackFn 的測試(是否至少有一元素會 return true)
  some()的 return type 是 boolean

  let result = languages.some((lang) => lang.popularity <= 6);
  console.log(result);  // -> true
  

• arr.every(callbackFn) - 給定 callbackFn ，測試 arr 中是否所有的元素都通過 callbackFn 的測試(是否所有的元素都會 return true)
  every()的 return type 是 boolean

  let result = languages.every((lang) => lang.popularity > 5);
  console.log(result);  // -> true
  

map, forEach 差別比較

map

何時使用:要創建新 arr，新 arr 需要使用舊 arr 每個元素的值做運算後，再去把運算結果集合成 arr

mdn array.map()

creates a new array，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合

-> return A new array with each element being the result of the callback function.

let arr = [1, 2, 3, 4, 5, 6, 7];

let newArr = arr.map((i) => i ** 2);
console.log(newArr);  // -> [1, 4, 9, 16, 25, 36, 49]

forEach

何時使用:如果只是要對一個 arr 當中的每個元素去執行某 function

mdn array.forEach()

executes a provided function once for each array element 對 arr 中的元素在 func 中執行一次

-> return undefined

let arr = [1, 2, 3, 4, 5, 6, 7];

let newArr = arr.forEach((i) => {
  console.log(i ** 2);  // -> [1, 4, 9, 16, 25, 36, 49]
});

console.log(newArr);  // -> undefined

下一篇文章學習進階的執行環境。