關於 Array.find()

前言

  最近發現 ECMA Script  的 2023 的 新標準新增的 findLast() 與 findLastIndex() ，抽空做個學習，在此做個紀錄。

內容

  在先前的標準就有 find() 與 findIndex() ，用途是找尋陣列裡的元素，可以透過引數來決定尋找的條件， find() 找的是內容 ， findIndex() 找的是索引值，範例如下

const array1 = [5, 12, 130, 70, 44];
//
const found = array1.find((element) => element > 45);

console.log(`findValue:${found}`);
//
const foundIndex = array1.findIndex((element) => element > 45);

console.log(`findIndex:${foundIndex}`);
//
const foundLast = array1.findLast((element) => element > 45);

console.log(`findLastValue:${foundLast}`);
//
const foundLastIndex = array1.findLastIndex((element) => element > 45);

console.log(`findLastIndex:${foundLastIndex}`);
// "findValue:130"
// "findIndex:2"
// "findLastValue:70"
// "findLastIndex:3"

範例示範了用同一個條件對同一個陣列做找尋的結果， findLast() 與 findLastIndex() 就如同字面上的意思是從陣列的最後開始找，所以 find() 的結果是 130 ， findLast() 的結果是 70  ，而 findLastIndex() 就是 findLast() 回傳索引值的版本。 

參考資料

[ developer.mozilla.org ] Array.prototype.find()

 關於 Promise 的 any()

前言

  最近發現 Promise 還有個 any() ，抽個空作個學習，在此做個紀錄。

內容

  範例如下

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`num:${ num } is done`);
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.any([promise(0,5000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
// "num:2 is done"
// "value:2, 成功"
// "It's done"
// "finally block "
// "num:3 is done"
// "num:0 is done"

Promise.any() 一樣是一次啟動多個 Promise ，但跟之前的 Promise.all() 或 Promise.allSettled() 不一樣的是它只要其中一個 Promise 進入 resolve() 或 reject() 就開始喚起 then() 或 catch() ，範例的" num:2" 會最快完成，所以 500ms 就進入了 then() ，之後就 finally() ，但可以看到跑完 finally() 後，" num:0" 與 " num:3" 還是會繼續跑，但不會進到任何一個 then() 或 catch()。

參考資料

[ developer.mozilla.org ] Promise.any()

 關於 Promise 的 allSettled()

前言

  最近發現 Promise 還有個 allSettled() ，抽個空作個學習，在此做個紀錄。

內容

  先看範例

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.allSettled([promise(0,5000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
// [[object Object] {
//   reason: "value:0,失敗",
//   status: "rejected"
// }, [object Object] {
//   status: "fulfilled",
//   value: "value:2, 成功"
// }, [object Object] {
//   status: "fulfilled",
//   value: "value:3, 成功"
// }]
// "It's done"
// "finally block "

allSettled() 的功能與 all() 類似，都是同時啟動多個 Promise， 差別在於 all() 只會喚起 then() 或 catch() 一次 ，但 allSettled() 會讓每個 Promise 都跑 then() 或 catch()，而且要注意回傳的是一個物件，並不是 resolve() 或 reject() 的引數，但可以在物件的屬性中提取該值，並且注意 then() 與 catch() 回傳物件的屬性名稱是不一樣的， then() 的是"reason"，而 catch() 的是"value"，最後範例會用 finally() 來印出完成，這粒可以可看出 allSettled() 並不是每個 Promise 一完成就直接跑 then() 或 catch() ，而是等所有的 Promise 都跑完後才跑所有的 then() 或 catch() 。

參考資料

[ developer.mozilla.org ] Promise.allSettled()

 關於for await 

前言

  在先前的 初探 async 與 await 介紹了 await 的基本用法，最近發現可以搭配 for 來使用，在此把學習的過程做個紀錄。

內容

  範例如下

// noprotect
function resolveByTime(x, waitTime) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, waitTime);
  });
}
//
const promises = [
  resolveByTime(1,1000), 
  resolveByTime(2,5000), 
  resolveByTime(3,2000) ];

//
(async function () {
  for await (const item of promises) {
    console.log(`[for await...of] result: ${ item }`);
  }
})();

//
(async function () {
  for (const item of promises) {
    const result = await item;
    console.log(`[for...of] result: ${ result }` );
  }
})();

開頭的註解"// noprotect" 是為了讓 Jsbin 可以正常運作加的，請勿省略。範例有一個 Promise 的陣列，裡面有三個 Promise ，接著就利用 async function 來使用 for await ... of 的方式來啟動每個 Promise，接著會再使用 for...of 的方式啟動每個 Promise ，如果只看語意的結果可能會認為 for await ... of 會同時啟動每個 Promise ，而 for...of  會啟動完一個 Promise 後才啟動下一個，但不幸的是結果並非如此!就結果來看，不論是 for await ... of  或 for...of  都會同時啟動每個 Promise ，for 迴圈的內容會照陣列的順序進行 await ，範例會先顯示第一個 Promise 的結果後，等一段時間後會同時完成第二與第三個 Promise ，因為等待完第二個以後第三個就會馬上完成，因為第三個的時間比第二個短，加上 Promise 是同時啟動的，所以第二個顯示完就馬上顯示第三個。

參考資料

[ pjchender.dev ] [JS] Async and Await in JavaScript

相關文章與資料

初探 async 與 await