初探 Array.copyWithin()

前言

  最近看到 Array.copyWithin() ，結果看 [ developer.mozilla.org ] Array.prototype.copyWithin() 多次後才看懂，Array.copyWithin() 的參數設置相當不直覺，在此把學習的過程做個紀錄。

內容

  Array.copyWithin() 的功能是依據輸入的參數來複製 Array ，但要注意雖說是複製，事實卻是會把複製的結果改變到現在的 Array ，應用範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
console.log( [...ar].copyWithin( 0 , 0) );//[0, 1, 2, 3, 4, 5]
console.log( [...ar].copyWithin( 1 , 0) );//[0, 0, 1, 2, 3, 4]
console.log( [...ar].copyWithin( 2 , 0) );//[0, 1, 0, 1, 2, 3]
console.log( [...ar].copyWithin( 3 , 0) );//[0, 1, 2, 0, 1, 2]
console.log( [...ar].copyWithin( 4 , 0) );//[0, 1, 2, 3, 0, 1]
console.log( [...ar].copyWithin( 5 , 0) );//[0, 1, 2, 3, 4, 0]
console.log( [...ar].copyWithin( 6 , 0) );//[0, 1, 2, 3, 4, 5]
//
console.log( [...ar].copyWithin( 2 , 1) );//[0, 1, 1, 2, 3, 4]
console.log( [...ar].copyWithin( 3 , 1) );//[0, 1, 2, 1, 2, 3]

Array.copyWithin() 的參數有兩個，分別是 index 與 start ，index 表示要從哪個目標 Array 索引開始複製，start 則表示要從來源 Array 的哪個索引開始複製。以範例的第一例來看是從目標的索引 0 開始複製，來源是從索引 0 開始複製，所以第一例地所以值都是被來源 Array 複製，第二例的目表索引是 1 ，所以結果的索引0 不會被來源 Array 複製到，結果是從索引 1 開始從來源 Array 複製，接著依此類推，如果 index 大於原始 Array.length 的話此 Function 等於沒任何作用，可以看到範例的 copyWithin( 6 , 0) ，範例的最後兩例示範了改變 start 後結果會有什麼不一樣，可以分別跟 copyWithin( 2, 0) 與 copyWithin( 3 , 0)  拿來對比。再次提醒，所說這個 Function 的功能是複製，但這個 Funciton 會改變原本 Funcitton 的值，所以範例都是複製 ar 陣列後才喚起 Array.copyWithin()。

參考資料

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

 在  Map.groupBy() 與 Object.groupBy() 分多個群組

前言

  在先前的 初探 Object.groupBy() 與  初探 Map.groupBy() 介紹了 groupBy() 分群組的功能，但範例都只分了兩個群組，事實是 groupBy()  是可以分多個群組的，在此把學習的過程做個紀錄。

內容

  範例如下

const fruits = [
  {name:"apples", quantity:300},
  {name:"bananas", quantity:500},
  {name:"oranges", quantity:200},
  {name:"kiwi", quantity:150}
];
//
function myCallback({ quantity }) {
  let res = 'default';
  if( quantity > 0 && quantity <= 200)
    res = 'group1';
  else if( quantity > 200 && quantity <= 400)
    res = 'group2';
  //
  return res;
}
//

let result = Map.groupBy( fruits , myCallback );
console.log( result.get('default') );
// [[object Object] {
//   name: "bananas",
//   quantity: 500
// }]
console.log( result.get('group1') );
// [[object Object] {
//   name: "oranges",
//   quantity: 200
// }, [object Object] {
//   name: "kiwi",
//   quantity: 150
// }]
console.log( result.get('group2') );
// [[object Object] {
//   name: "apples",
//   quantity: 300
// }]

範例使用 Map.groupBy() 來分多個群組，要分多個群組只要在分類的 Function 裡回傳不同的名稱就可以有不同的群組，範例將 0~200 分為 group1 ，201~400 分為 group2 ，剩餘為 default ，這樣結果就會產生出三個群組。Object.groupBy() 也可以用一樣的方法來分多個群組。

參考資料

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

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

相關文章與資料

初探 Object.groupBy()

初探 Map.groupBy()

 初探 Map.groupBy()

前言

  在先前的 初探 Object.groupBy() 使用過 Object.groupBy()，Map 裡也有個 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";
}
//
let result = Map.groupBy( fruits , myCallback );
console.log( result.get('low') );
// [[object Object] {
//   name: "oranges",
//   quantity: 200
// }, [object Object] {
//   name: "kiwi",
//   quantity: 150
// }]
console.log( result.get('ok') );
// [[object Object] {
//   name: "apples",
//   quantity: 300
// }, [object Object] {
//   name: "bananas",
//   quantity: 500
// }]

Map.groupBy() 的功能和 Object.groupBy() 是一樣的!差別在於輸出的結果，Object.groupBy() 輸出的是 Object ，而 Map.groupBy() 輸出的是 Map ，範例在喚起 Map.groupBy()  時的參數和使用 Object.groupBy() 的時候一樣，在得到結果要取出時要使用 Map.get() 來取得內容，因為輸出的結果並不是 Object ，而是 Map ，如此可以看到結果和上次 初探 Object.groupBy() 的範例一樣的結果。

參考資料

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

相關文章與資料

初探 Object.groupBy()

 初探 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