初探 Object.groupBy()

前言

  JavaScript 2024 新增了 Object.groupBy() ，在此把學習的過程做個紀錄。

內容

  範例如下

const fruits = [
  {name:"apples", quantity:300},
  {name:"bananas", quantity:500},
  {name:"oranges", quantity:200},
  {name:"kiwi", quantity:150}
];

function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}

const result = Object.groupBy(fruits, myCallback);
console.log( result.low );
// [[object Object] {
//   name: "oranges",
//   quantity: 200
// }, [object Object] {
//   name: "kiwi",
//   quantity: 150
// }]
console.log( result.ok );
// [[object Object] {
//   name: "apples",
//   quantity: 300
// }, [object Object] {
//   name: "bananas",
//   quantity: 500
// }]

Object.groupBy() 的功能是在同質的物件陣列中做分類，範例中會對 fruits 做出兩種分類，分別是 ok 與 low ，在喚起 Object.groupBy() 時，輸入物件陣列，並同時輸入 Function ，這個 Function 會用來決定如何分類，範例依據 quantity 的數值是否大於 200 來分類，注意看該 Function 的引數 quantity  要用 {} 用以表明是屬性，而 Function 的回傳值是要被分類的群組，是用字串來表達，Object.groupBy()  的結果也就是 result ，可以看到裡面的 low 與 ok 會存有符合分類的結果。

參考資料

[ www.w3schools.com ] Object.groupBy()

[ developer.mozilla.org ] Object.groupBy()

 關於 Array.flatMap()

前言

  Array.flatMap() 和先前的 關於 Array.flat() 是相似的，但由於很難從 關於 Array.flat() 推測 Array.flatMap() 的功能，在此把學習的過程做個紀錄。

內容

   Array.flatMap() 的功能也是把 Array 裡面的 Array 內容展開，但最大的不同在 Array.flatMap() 是透過 Function 來決定展開後的數值，範例如下

let ar = [ 1 , 2 , 3 , 4 ];
console.log( ar.flatMap( (val) => 99 ) );//[99, 99, 99, 99]
console.log( ar.flatMap( (val) => (val<=2? val : 99 ) ) );//[1, 2, 99, 99]

範例第一例的 Function 無論如何都回傳 99 ，所以得到數值都是 99 ，第二例在數值小於等於 2 時保持原來數值，否則回傳99，所以結果的最後兩個數值為 99 。

參考資料

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

相關文章與資料

關於 Array.flat()

 初探 Array.toSorted()

前言

  最近看到 Array.toSorted() ，想說不是本身就有個 Array.sort() ，這個新 Function 有什麼差別?在此把學習的過程做個紀錄。

內容

  範例如下

let ar = ["Jan", "Feb", "Mar", "Apr"];
console.log( ar.toSorted() );//["Apr", "Feb", "Jan", "Mar"]
console.log( ar );//["Jan", "Feb", "Mar", "Apr"]
//
ar.sort();
console.log( ar );//["Apr", "Feb", "Jan", "Mar"]

Array.toSorted() 與 Array.sort()  的差異在於 Array.sort()  是把本身的內容排序，而 Array.toSorted() 是產生一個新的 Array ，取內容是排序好的，使用完後本身的內容不會改變，可以看到範例在 Array.toSorted() 後 ar 的內容並未改變，但在 Array.sort() 後就發生改變。

參考資料

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

取得 Function 的名稱

前言

  最近看 [ developer.mozilla.org ] Function: name  時發現有些特性跟我想地的不一樣，在此把學習的過程做個紀錄。

內容

  Funciton:name 是個屬性，且是 Read only那如果 Function 被賦値到另一個變數後名稱會不一樣嗎?

範例如下

let fun1 = function(){};
let fun2 = fun1;
//
console.log( fun1.name );//fun1
console.log( fun2.name );//fun1
console.log( new Function().name );//anonymous
console.log( function(){}.name );//

答案是一樣的， Funciton:name 會在第一次被賦值後就不再改變，所以 fun2 還是顯示 fun1 ，JavaScript 的 Function 使用起來很自由，有時盛至不取名就使用，那這些不取名的 Funciton 他們的 Funciton:name 會是什麼?如果是 new 出來的，名稱會是 anonymous ，如果是一般的匿名 Function ，名稱就真的是空字串。

 

參考資料

[ developer.mozilla.org ] Function: name 

 取得 Function 的引數的數量

前言

  由於先前的 初探 Function.toString() 的關係，Funciton:Length  直覺上會認為是回傳程式碼的字數，但事實上不是，在此把學習的過程做個紀錄。

內容

  範例如下

function fun0(){}
function fun1( a ){}
function fun2( a , b ){}
function fun3( a , b , c ){}
//
console.log( fun0.length );//0
console.log( fun1.length );//1
console.log( fun2.length );//2
console.log( fun3.length );//3

Funciton:Length 回傳的是引數數量，並非程式碼的字數，範例分別是分了從沒引數到3個引數的狀況。

參考資料

[ developer.mozilla.org ] Function: length

相關文章與資料

初探 Function.toString()

 初探 Function.bind()

前言

  最近查找 Function 發現裡面有個 Function.bind() ，在此把學習的過程做個紀錄。

內容

  範例如下

let objA = {
  x : 1234,
  getX : function(){
    return this.x;
  }
};
let objB = {
  x : 5566,
};
//
console.log( objA.getX() );//1234
//
x = 9999;
let call = objA.getX;
console.log( call() );//9999
//
let bindCall = objA.getX.bind(objB);
console.log( bindCall() );//5566

Function.bind() 的作用是決定該 Function 在喚起時的 this 會是哪個物件，範例的 objA.getX() 就是單純的成員函式喚起，接著透過 call 來喚起時，如果不做 Function.bind()  的話會得到 9999 ，範例有設定 global 的 x 是 9999 ，最後用 Function.bind()  綁定到 objB 上，要注意 objB 本身是沒有 getX() 的!只是成員也有 x ，綁定完後喚起會得到 objB.x 的內容，也就是 5566。 

參考資料

[ developer.mozilla.org ] Function.prototype.bind()

 初探 Function.toString()

前言

  最近發現 JavaScript 可以在執行的時候，透過 Function.toString() 來返回原始碼，在此把學習的過程做個紀錄。

內容

  範例如下

function myCall(){
  //comment...
  
  return 1234;
}
//
console.log( myCall.toString() );
// "function myCall(){
//   //comment...
  
//   return 1234;
// }"

可以看到 Function.toString() 的結果會是該 Function 的原始碼，比較特別的是返回的原始碼裡不論是空白換行與註解都會完整地返回，雖然不知道這個功能有什麼實用的地方，但還是個有趣的功能。

參考資料

[ developer.mozilla.org ] Function.prototype.toString()