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