Hosee的空間: 2025

2025年8月4日星期一

前言

JavaScript 提供指數運算子(**)，他其實跟早前的 Math.pow() 的功能差不多，但有一些不一樣，在此把學習的過程做個紀錄。

內容

範例如下

console.log( 2 ** 9 );//512
console.log( 10 ** -3 );//0.001
console.log( Math.pow( 2 , 8 ) );//256
console.log( Math.pow( 10 , -2 ) );//0.01
//
let bigNum = 2n;
console.log( (bigNum ** 10n).toString() );//1024
//Follow has error...
//console.log( (bigNum ** 10n).toString() );
//console.log( (2 ** 10n).toString() );

指數運算子(**)跟一班的運算子用起來一樣，可以在指數運算時提供直觀的程式碼，使用 Math.pow() 也不是不行只是程式碼看起來不簡潔而已。指數運算子(**)有一個不同是可以支援BigInt，Math.pow()並不支援，還有要注意用於 BigInt 時前與後的變數都必須是 BigInt。

參考資料

[ developer.mozilla.org ] 指數運算子（**）

[ developer.mozilla.org ] BigInt

2025年7月28日星期一

前言

在先前的解構賦值有層級的物件與解構賦值有層級的陣列分別針對物件與陣列做解構賦值，但其實它們是可以混著用的!在此把學習的過程做個路。

內容

範例如下

let obj = {
  a : 1234,
  b : 5678,
  ar : [ 1 , 2],
};
( { a : newA , b , ar : [ newAr1 , newAr2] } = obj);
console.log( newA );//1234
console.log( b );//5678
console.log( newAr1 );//1
console.log( newAr2 );//2

範例的 newA 與 b 分別使用重新命名與原名的解構賦值，newAr1 與 newAr2 則是這次的混用，在物件裡的陣列，利用重新命名的方式承接 ar ，接著在後面不直接使用變數來承接，而是使用 [] 的方式解構賦值陣列，這樣就可以承接陣列的的內容。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年7月21日星期一

前言

在之前的解構賦值有層級的物件將解構賦值用於有層級的物件，那可以用於有層級的陣列嗎?答案是可以的!在此把學習的過程做個紀錄。

內容

範例如下

let ar = [ 1 , 2 , 3 , [ 4 , 5] ];
[ a , b , c , [ d , e] ] = ar;
console.log( a );//1
console.log( b );//2
console.log( c );//3
console.log( d );//4
console.log( e );//5

用法跟在物件的時候相似，在有層級的的地方用 [] 包起來就可以解構賦值內層的陣列，範例的 d 與 e 就是內層陣列的資料。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年7月14日星期一

前言

解構賦值如果遇到有層級的物件該如何使用呢?在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  name : 'Max',
  data :{
    age : 30
  }
};
//
function showData( { name : newName , data : { age : newAge } }){
  console.log(`${newName}'s age is ${newAge}`);
}
//
( {name , data:{ age } } = obj);
console.log( name );//name
console.log( age );//30
showData( obj );//Max's age is 30

範例的 age 是被包覆在 data 之下，可以透過 data : { age } 的方法來解構賦值 age ，這個方法也可以用在當作函釋的引數時使用，範例透過 showData() 來示範，並且示範時會為變數重新命名。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年7月7日星期一

前言

解構賦值不只可以解構出變數，還能當作函式的引數來用，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  id : 1234,
  name : 'Jack'
};
//
//
function getObjectName( { name } ){
  return name;
}
//
console.log( getObjectName( obj ) );//Jack
console.log( getObjectName( {} ) );//undefined

在函式的引數用 {} 來表明是解構賦值，接著填入要解構的變數，範例是將 name 直接回傳，範例的最後示範如果解構賦值時肥有該變數會發生什麼事，結果是 undefined ，而且不會報錯。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年6月30日星期一

前言

在之前的將解構賦值用於物件裡用解構賦值來承接數值，承接數值時變數採用和物件裡的變數一樣的名稱來承接，但其實是可以用不同的變數名稱來承接，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  a : 100,
  b : 200,
};
//
( { a : x , b : y } = obj );
console.log( x );//100
console.log( y );//200

使用原本的名稱加 : 後指定新的變數，原本的名稱是 a 與 b ，新承接的變數名稱為 x 與 y ，要注意要把整運算式用 () 包起來，不然會報錯。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年6月23日星期一

前言

在先前的利用解構賦值將陣列剩餘部分解構到一個變數裡將陣列剩餘部分解構到一個變數，但其實還可以對物件做一樣的行為〉在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  a : 1234,
  b : 'abcd',
  c : 56,
  d : 78,
};
//
( { a , b , ...ar } = obj );
console.log( a );//1234
console.log( b );//abcd
console.log( ar );//{ c: 56, d: 78 }

跟陣列的時候相比把陣列的 [] 換成 {} 這個是可以猜得到的，不過要注意整個運算還要再用 () 來包覆，這是必要的無法省略!如果省略會抱錯，當然剩餘部分的變數只能放在最後，這和陣列的狀況是一樣的，剩餘部分會以物件的型態來承接，如同範例的 ar 。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年6月16日星期一

前言

解構復職可以將陣列剩餘部分解構到一個變數，在此把學習的過程做個紀錄。

內容

範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
//
[ a , b , ...c ] = ar;
console.log( a );//0
console.log( b );//1
console.log( c );//[2, 3, 4, 5]
//follow will be error...
//[ a , ...b , c ] = ar;

解構賦值將陣列剩餘部分解構到一個變數只要將最後一個變數用 ... 的語法來承接變數就可以把剩餘的變數丟到變數，但不幸地這個用法只能用在最後一個變數，如果不是最後一個變數來承接會報錯。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年6月9日星期一

前言

在之前的初探解構賦值時，都是使用新變數來解構賦值，但其實可以使用舊的變數來解構賦值進而達到交換變數，在此把學習的過程做個紀錄。

內容

範例如下

let ar = [ 1 , 2 , 3 ,4 ];
//
[ a , b , c ] = ar;
console.log(a);//1
console.log(b);//2
console.log(c);//3
//
[ c , b , a] = ar;
console.log(a);//3
console.log(b);//2
console.log(c);//1

範例開始依舊是用新變數 a,b,c 來解構賦值，接著用 a,b,c 再次解構賦值，注意賦值的順序是有交換的，結果也成功地交換了結果。這個交換動作只能用在陣列，不能用在物件，因為物件在解構賦值時必須跟該物件的成員"同名"來完成賦值，所以不能在物件完成交換。

參考資料

[ developer.mozilla.org ] 解構賦值

2025年6月2日星期一

前言

在先前的初探解構賦值對陣列使用解構賦值，最近發現它其實也可以對物件使用，在此把學習的過程做個紀錄。

內容

範例如下

let obj ={
  name : 'Bob',
  age : 25
}
let { age , name } = obj;
console.log( age );//25
console.log( name );//Bob

使用的方法很簡單，陣列的時候使用 [] 解構賦值，物件則是使用 {} ，在解構賦值陣列時變數是按照陣列的順序複製的，但解構賦值物件是靠變數的名稱來賦值，範例故意將順序倒過來，結果並不會倒過來!

參考資料

[ developer.mozilla.org ] 解構賦值

2025年5月26日星期一

前言

在之前的再探 Array.copyWithin() 之三介紹當 start 的值是負值的狀況，這次來學習 end的值是負值。

內容

範例如下

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

當引數 end 是負值，代表複製的結尾索引是從結尾來算。第一例的複製結尾是 -4 ，從結尾來算可以得到索引 2 ，所以第一例的結果跟直接將 end 填上 2 的結果一樣，第二例的 end 是 -3 ，換算回正索引的話是 3 ，所以結果和 end 是 3 的狀況一樣。最後一例是將 end 填上 -1 ，也就是陣列的最後一個索引，這其實就何不填 end 時的結果一樣是複製到結尾。

參考資料

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

2025年5月19日星期一

前言

在之前的再探 Array.copyWithin() 之二介紹當 target 的值是負值的狀況，這次來學習 start 的值是負值。

內容

範例如下

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

當引數 start 是負值，代表複製的開頭索引是從結尾來算，第一例是 -1 ，所以最後只複製了一個，第二例是 -3 ，也就是複製倒數的三個，要注意順序依舊是 3,4,5 ，而不是 5,4,3。當沒有引數 end 的情況下。索引是負值可以解釋為要複製多少數量，所以當它是負的陣列大小時，等於複製全部陣列。

參考資料

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

2025年5月12日星期一

前言

在之前的再探 Array.copyWithin() 介紹三個參數的用法，但查閱 [ developer.mozilla.org ] Array.prototype.copyWithin() 發現三個引數其實還可以輸入負值!這次先來學習引數 target 是負值的狀況。

內容

範例如下

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

當引數 target 是負值時，代表的是從陣列尾端倒過來指定，可以看到範例1 與範例2 的結果是倒過來指定複製的位址，如果大於負陣列長度時，也就是範例3，這樣的結果就等於無作用，因為已經過了開頭了!

參考資料

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

2025年5月5日星期一

前言

在先前的初探 Array.copyWithin() 裡基本的使用了 Array.copyWithin() 。範例使用 Array.copyWithin() 時都使用兩個引數，但 Array.copyWithin() 還可以使用三個引數，在此把學習的過程做個紀錄。

內容

Array.copyWithin() 使用三個引數時會比兩個引數多出一個 end 的引數，該引數放在最後，配合第二個引數 start 來使用，start 表示要從來源 Array 的哪個索引開始複製， end 表示複製到來源 Array的那個索引為止，使用的範例如下

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

end 控制的是要複製到的索引，所以如果 end 填上陣列的數量的結果就跟只使用兩個引數的結果一樣，可以在範例的第一例與第二例看到。第三例有設置 end 為 3 ，所以結果看到索引 1~3 是被限制的 copy ，索引 4~5 則保持原來的值。要注意的是 end 並不是表示數量，也和 start 一樣是索引，第四例的 start 與 end 只差 1 ，所以結果只改變了索引 3 ，如果把 start 與 end 填成一樣的，就會發現不會有任何的值被改變，就像第五例那樣。

參考資料

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

2025年4月28日星期一

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

2025年4月21日星期一

在 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()

2025年4月14日星期一

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

2025年4月7日星期一

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

2025年3月31日星期一

關於 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()

2025年3月24日星期一

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

2025年3月17日星期一

取得 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

2025年3月10日星期一

取得 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

2025年3月3日星期一

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

2025年2月24日星期一

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

2025年2月17日星期一

初探 Nullish coalescing assignment (??=)

前言

在先前的初探 Nullish coalescing operator (??) 介紹過 ?? ，這次來學習跟它很像的 ??= ，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  a : 1234
};
//
obj.a ??= 5678;
console.log( obj.a );//1234
//
obj.b ??= 9999;
console.log( obj.b );//9999
//
obj.c ??= undefined;
console.log( obj.c );//undefined
//
obj.d ??= null;
console.log( obj.d );//null

??= 是有賦值的特性，並不是像 == 之類比較，賦值的邏輯是當左側是 null 或 undefiend 則給予賦值，範例第一例由於 a 已經有數值，所以賦值不會成功， b 由於本來就沒值，所以賦值成功，如果左側原本沒值，右側賦予 null 或 undefined 會成功嗎?從 c 與 d 的結果來看答案是肯定的!

參考資料

[ developer.mozilla.org ] Nullish coalescing assignment (??=)

2025年2月10日星期一

初探 Nullish coalescing operator (??)

前言

最近發現新語法 Nullish coalescing operator ，在此把學習的過程做個紀錄。

內容

範例如下

console.log( 1111 ?? undefined );//1111
console.log( null ?? 1234);//1234
console.log( null ?? undefined ?? 5678);//5678
console.log( null ?? 'abcd' ?? undefined);//"abcd"
console.log( null ?? 5555 ?? undefined ?? 9999);//5555

Nullish coalescing operator 可以理解成處理的雙方只要有一方不是 null 或 undefined ，還可以連續處理多個對象，如範例的第三、第四與第五例，要注意處理都是左方對象優先，第五例回傳的是 5555 而非 9999。

參考資料

[ developer.mozilla.org ] Nullish coalescing operator (??)

2025年2月3日星期一

初探 Optional chaining (?.)

前言

最近發現 JavaScript 有個 Optional chaining 的語法，在此把學習的過程做個紀錄。

內容

範例如下

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
const dogName = adventurer?.name;
//Follow code has the same result...
//const dogName = adventurer.dog && adventurer.dog.name;
console.log(dogName);//Alice
//
const catName = adventurer?.cat?.name;
console.log(catName);//Dinah

Optional chaining 用來簡化程式碼，在寫程式常常需要檢查物件是否存在，若存在提取其內容這樣的邏輯，用 ?. 的語法就可以快速完成，範例的 dogName 會先確認 adventurer 是否存在，若存在回傳 aadventurer.name ，若不存在則是回傳 undefined ，這點要注意。這個語法還可以使用在巢狀結構，如範例的 catName 的應用，先確認 adventurer 是否存在，再確認 adventurer.cat 的存在，都沒問題才回傳 adventurer.cat.name 。

參考資料

[ developer.mozilla.org ] Optional chaining (?.)

2025年1月27日星期一

初探 console.count()

前言

JavaScript 有提供計數器給偵錯用，這次把學習的過程做個紀錄。

內容

範例如下

console.count( 'a' );//a: 1
console.count( 'a' );//a: 2
console.countReset( 'a' );
console.count( 'a' );//a: 1
//
console.count( );//default: 1

這次的情況有點特別，[ jsbin.com ] JS Bin 在跑範例時會無法正常工作，所以這次的範例會使用 [ onecompiler.com ] OneCompiler ，計數使用 console.count() ，參數可用輸入計數器的名稱，要清除計數可以透過 console.countReset() ，在 [ onecompiler.com ] OneCompiler 的執行結果還是和 [ developer.mozilla.org ] console: countReset() 不一樣，console.countReset() 在 MDN 的範例是會有輸出的，但在 onecompiler.com ] OneCompiler 卻不會。

參考資料

[ developer.mozilla.org ] console: count()

[ developer.mozilla.org ] console: countReset()

2025年1月20日星期一

清除偵錯訊息

前言

常常遇到滿滿的偵錯訊息嗎?其實偵錯訊息是可以清除的，在此把學習的過程做個紀錄。

內容

範例如下

console.log( 'I`m message');
console.clear();

執行結果如下

範例執行結果

清除只需透過 console.clear() 即可，不只是一班的輸出會被清除，如圖 1 處，就連瀏覽器的偵錯也會被清除，如圖 2 處。

參考資料

[ developer.mozilla.org ] console: clear()

2025年1月13日星期一

關於顯示偵錯訊息

前言

JavaScript 提供很多顯示偵錯訊息的方法，之前都只使用 console.log() ，這次把其它的做個學習，在此在個紀錄。

內容

JavaScript 提供顯示偵錯訊息有 console.log() 、 console.info() 、 console.error() 、console.debug() 與 console.warn() ，參數都是直接填寫要顯示的訊息即可，範例如下

console.debug('debug');
console.log('log');
console.info('info');
console.error('error');
console.warn('warn');

執行結果如下

範例執行結果

一般的 console 都會顯示這五個的結果，差別在於瀏覽器自帶的偵錯器，可以圖中右下看到可以依據不同的群組來顯示訊息， Verbose 群組代表了 console.debug() ， Info 群組裡包含了 console.log() 與 console.info() ，Warnings 群組代表了 console.warn() ， Errors 群組代表了 console.error() ，可以根據欲顯示群組來顯示結果。

參考資料

[ developer.mozilla.org ] console: log()

[ developer.mozilla.org ] console: info()

[ developer.mozilla.org ] console: error()

[ developer.mozilla.org ] console: debug()

[ developer.mozilla.org ] console: warn()

2025年1月6日星期一

初探 console.groupCollapsed()

前言

在先前的初探 console.group() 可以在瀏覽器的偵錯中摺疊訊息，但一定是展開狀態，能一開始就是縮起來狀態嗎?在此把學習的過程做個紀錄。

內容

範例如下

console.groupCollapsed( 'MyGroup' );
for(let i=0;i<10;i++)
  console.log(i);
//
console.groupEnd( 'MyGroup' );

執行結果如下

範例執行結果

要預設是縮起來的狀態，只要將原本的 console.group() 換成 console.groupCollapsed() 即可，一樣適用參數分群，一樣是用 console.groupEnd() 做搭配即可。

參考資料

[ developer.mozilla.org ] console.groupCollapsed()

2025年8月4日 星期一

關於指數運算子(**)

前言

內容

參考資料

相關文章與資料

2025年7月28日 星期一

解構賦值有層級的陣列與物件

前言

內容

參考資料

相關文章與資料

2025年7月21日 星期一

解構賦值有層級的陣列

前言

內容

參考資料

相關文章與資料

2025年7月14日 星期一

解構賦值有層級的物件

前言

內容

參考資料

相關文章與資料

2025年7月7日 星期一

利用解構賦值作為函式的引數

前言

內容

參考資料

相關文章與資料

2025年6月30日 星期一

在解構賦值用於物件時，用不同的變數名稱承接數值

前言

內容

參考資料

相關文章與資料

2025年6月23日 星期一

利用解構賦值將物件剩餘部分解構到一個變數

前言

內容

參考資料

相關文章與資料

2025年6月16日 星期一

利用解構賦值將陣列剩餘部分解構到一個變數

前言

內容

參考資料

相關文章與資料

2025年6月9日 星期一

利用解構賦值來交換變數

前言

內容

參考資料

相關文章與資料

2025年6月2日 星期一

將解構賦值用於物件

前言

內容

參考資料

相關文章與資料

2025年5月26日 星期一

再探 Array.copyWithin() 之四

前言

內容

參考資料

相關文章與資料

2025年5月19日 星期一

再探 Array.copyWithin() 之三

前言

內容

參考資料

相關文章與資料

2025年5月12日 星期一

再探 Array.copyWithin() 之二

前言

內容

參考資料

相關文章與資料

2025年5月5日 星期一

再探 Array.copyWithin()

2025年8月4日星期一

2025年7月28日星期一

2025年7月21日星期一

2025年7月14日星期一

2025年7月7日星期一

2025年6月30日星期一

2025年6月23日星期一

2025年6月16日星期一

2025年6月9日星期一

2025年6月2日星期一

2025年5月26日星期一

2025年5月19日星期一

2025年5月12日星期一

2025年5月5日星期一

2025年4月28日星期一

2025年4月21日星期一

2025年4月14日星期一

2025年4月7日星期一

2025年3月31日星期一

2025年3月24日星期一

2025年3月17日星期一

2025年3月10日星期一