Hosee的空間

[ developer.mozilla.org ] Object

2023年12月18日星期一

前言

在先前的關於 Symbol.iterator 介紹了 iterator 的基本應用，這次來學習瀏覽，在此把學習的過程做個紀錄。

內容

範例如下

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1[Symbol.iterator]();

let ele = iterator1.next();

while( !ele.done ){
  console.log(ele.value);
  ele = iterator1.next();
}
// ["0", "foo"]
// [1, "bar"]

//follow will output nothing
for (const item of iterator1) {
  console.log(item);
}

//
for (const item of map1[Symbol.iterator]() ) {
  console.log(item);
}
// ["0", "foo"]
// [1, "bar"]

這次要使用瀏覽， iterator 有個 next() ，利用這個方法來推進 iterator ，每次被 next() 推出來的物件裡都會包含 done 與 value ，done 是布林值，用來確認是否為最後一個，value 就是容器裡的內容，while 迴圈示範了如何瀏覽，接著範例用 for...of 來瀏覽會發現不會輸出任何東西，原因也很簡單，iterator 已經被瀏覽在最後了，所以 for...of 就不會輸出了，所以要注意 for...of 適從當下的 iterator 瀏覽在結尾，並非從頭!如果要確保從頭，就要透過 Symbol.iterator 重新取得 iterator 。

參考資料

[ developer.mozilla.org ] Symbol.iterator

[ developer.mozilla.org ] Map.prototype[@@iterator]()

2023年12月11日星期一

關於 Symbol.iterator

前言

Symbol.iterator 是設計來提取容器的預設變數，容器大部分都有像 keys() 或 entries() 了，已經很好用了，遽然還有另外一種提取法，在此把學習的過程做個紀錄。

內容

範例如下

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1[Symbol.iterator]();

for (const item of iterator1) {
  console.log(item);
}

for (const item of map1.entries() ) {
  console.log(item);
}

Symbol.iterator 的用法是透過 Symbol 的使用方法，也就是 [ symbol ] 的語法來存取，不過要注意這裡提取的後面要加 () ，看起來就像個 function ，提取後的變數可以搭配 for...of 來提取容器內容，這不是和 entries() 的做法一樣了嗎!所以範例最後也示範了 entries() ，結果是一樣的，但 entries() 看起來比較直覺，相較之下， Symbol.iterator 的用法沒有特別的優勢，所以還是用 entries() 比較好。

參考資料

[ developer.mozilla.org ] Symbol.iterator

[ developer.mozilla.org ] Map.prototype[@@iterator]()

2023年12月4日星期一

關於 Array.length

前言

最近發現 Array.lenth 遽然可以"賦值"，以為自己看錯，查了一下才發現真的可以，在此把學習的過程做個紀錄。

內容

範例如下

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

Array.lenth 賦值的功能就是可以拿來裁減 Array 的內容，會從後方先裁，以前要裁減是透過 Array.splice() 來完成，範例透過 ar1 來實例。

參考資料

[ developer.mozilla.org ] Array: length

2023年11月27日星期一

關於 Number 物件

前言

最近發現 JavaScript 有 Number 物件，發現用起來根想得不太一樣，在此把學習的過程做個紀錄。

內容

範例如下

let numObj = new Number(1234);
console.log(typeof numObj);//"object"
//
let num1 = 1 + numObj;
let num2 = numObj + 2;
console.log( num1 );//1235
console.log(typeof num1);//"number"
console.log( num2 );//1236
console.log(typeof num2);//"number"
console.log( Number.isSafeInteger(numObj )  );//false
console.log( Number.isSafeInteger(Number(numObj) )  );//true

範例開頭使用 new Number() 的方式創建，用 typeof 確定型別是 object ，而非 number ，接著分別測試先加與後加的結果，也就是 num1 與 num2 ，這裡的結果根想的不一樣，無論先加或後加的結果都是 number ，而非 object ，最後範例透過 Number.isSafeInteger() 來測試發現結果是 false ，表示在輸入參數時並不像運算時一樣會自動轉型，要如何把 Number 物件轉乘 Number 呢?透過 Number() ，不過這次不要使用 new 的方式，而是直接透過建構式的結果就可以轉型。

參考資料

developer.mozilla.org ] Number() constructor

2023年11月20日星期一

Object.fromEntries() 用於 Set 的注意事項

前言

Object.fromEntries() 可以適用 Map 與 Array ，那可以用於 Set 嗎?答案是可以的，但有個注意事項，在此把學習的過程做個紀錄。

內容

範例如下

let valueSet1 = new Set( [ 'z' , 12 , 'abc' , 1234 ] );
let valueSet2 = new Set( [ 'z' , 12 , 'abc' , 1234 , '12'] );
//
console.log( valueSet1.size );//4
console.log( Object.fromEntries(valueSet1.entries() ) );
// [object Object] {
//   12: 12,
//   1234: 1234,
//   abc: "abc",
//   z: "z"
// }
//
console.log( valueSet2.size );//5
console.log( Object.fromEntries(valueSet2.entries() ) );
// [object Object] {
//   12: "12",
//   1234: 1234,
//   abc: "abc",
//   z: "z"
// }

範例對 valueSet1 使用 Object.fromEntries() ，要注意不是直接餵，餵之前要透過 Set.entries() ，結果會產生 Key 與 Value 都一樣的 Object ，valueSet2 和 valueSet1 的差異是多了個字串 '12' ，透過 Set.sizeｄ可以知道確實有 5 個內容，但經過 Object.fromEntries() 後卻只會剩 4 個!在數字 12 與字串 12 的部分由於結果是一樣的，所以只會留下一個。

參考資料

2023年11月13日星期一

Object.fromEntries() 用於 Array 的注意事項

前言

在透過 Object.fromEntries() 將 Array 快速複製到 Object 提到 Object.fromEntries() 用於 Array 的範例有提到用在數值做佚代的 Array 會有問題，但查了一下發現有解決方法，仔此把學習的過程做個紀錄。

內容

範例如下

let ar = [
  [ 'a' , 123 ],
  [ 'b' , 456 ]
];
let ar1 = [ 123 , 456 , 789 ];
//
console.log( Object.fromEntries(ar ) );
// [object Object] {
//   a: 123,
//   b: 456
// }
//
//
console.log( Object.fromEntries(ar1.entries() ) );
//
console.log( Object.fromEntries(ar.entries() ) );
// [object Object] {
//   0: ["a", 123],
//   1: ["b", 456]
// }

範例開頭示範對 ar 使用 Object.fromEntries() ，接著對以數值為佚代的 Array 使用 Object.fromEntries() ，但這次會在使用前喚起 Array.entries() ，接著發現這樣就可以正常複製，Array.entries() 到底做了什麼呢?所以接著拿 ar 來實驗會發現 Array.entries() 做的是強制把每個內容用數值當佚代的結果，所以複製的結果會變成使用數值當索引，而內容變成了陣列!

參考資料

2023年11月6日星期一

透過 Object.fromEntries() 將 Array 快速複製到 Object

前言

在先前的透過 Object.fromEntries() 將 Map 快速複製到 Object 裡透過 Object.fromEntries() 將 Map 複製到 Object ，但查了一下發現不只 Map ，其實連 Array 也可以，在此把學習的過程做個紀錄。

內容

範例如下

let ar = [
  [ 'a' , 123 ],
  [ 'b' , 456 ]
];
let ar1 = [ 123 , 456 , 789 ];
//
console.log( Object.fromEntries(ar) );
// [object Object] {
//   a: 123,
//   b: 456
// }
//
//follow has error!
//console.log( Object.fromEntries(ar1) );

複製的用法和 Map 一樣，不過一定要注意如果用的是用數值做佚代的陣列時會發生錯誤。

參考資料

2023年10月30日星期一

透過 Object.fromEntries() 將 Map 快速複製到 Object

前言

在之前的 [ developer.mozilla.org ] Map 介紹過 Map ，最近發現 Object.fromEntries() 可以快速複製內容到 Object ，在此把學習的過程做個紀錄。

內容

Map 的儲存結構很像 Object ，透過瀏覽的方式來複製也不是不可以，只是最近發現可以透過 Object.fromEntries() 來複製，範例如下

let map = new Map([
  ['z','aa'] , 
  [12,'bb'] , 
  ['abc',13] , 
  [1234,5678] 
]);
//
let obj = Object.fromEntries( map );
console.log( obj );
// [object Object] {
//   12: "bb",
//   1234: 5678,
//   abc: 13,
//   z: "aa"
// }
//
let obj1 = Object.assign( { a : 1} , Object.fromEntries( map ) );
console.log( obj1 );
// [object Object] {
//   12: "bb",
//   1234: 5678,
//   a: 1,
//   abc: 13,
//   z: "aa"
// }

Object.fromEntries() 只要把要 Copy 的 Map 當參數就可以得到 Copy 的結果，要複製到 Object ，可以透過 Object.assign() 來複製，如範例的 obj1 。

參考資料

2023年10月23日星期一

注意 Object.assign() 不能複製自定義的 Property

前言

在之前的注意 enumerable 的特性會引響 Object.assign() 的行為有提到 Object.assign() 在特別情形不會完全複製內容，最近又發現自定義的 Property 全部都不會複製!在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
};
//
Object.defineProperty( obj , 'prop' ,{ value:10 } );
console.log( obj.prop );//10
//
Object.defineProperty( obj , 'prop1' ,{
  value : 20,
  writable: true 
} );
console.log( obj.prop1 );//20
//
let copyObj = Object.assign( {} , obj );
console.log( copyObj.prop );//undefined
console.log( copyObj.prop1 );//undefined

範例在 obj 自定義 prop 與 prop1 ，再透過 Object.assign() 複製到 copyObj ，複製後會發現 prop 與 prop1 並不存在於 copyObj ，看來複製自定義的 function 是需要自己寫的!

參考資料

2023年10月16日星期一

注意 enumerable 的特性會引響 Object.assign() 的行為

前言

在之前的關於自定義 Property 的 enumerable 與在 JavaScript 裡複製物件的新選項分別提到了 enumerable 與 Object.assign() ，它們其實會互相引響，在此把學習的過程做個紀錄。

內容

範例如下

let obj = Object.create(
  {},
  {
    prop1: {
      value: 2, 
      enumerable: false, 
    },
    prop2: {
      value: 3,
      enumerable: true, 
    },
  },
);
//
let copy = Object.assign({}, obj);
console.log(copy); 
// [object Object] {
//   prop2: 3
// }

範例分別自定義 prop1 與 prop2 兩個 Property ，一個允許 enumerable ，另一個則不允許，接著透過 Object.assign() 後會發現 prop1 沒有被成功複製，所以 enumerable 不只引響 Object.getOwnPropertyNames() 的結果，也會引響 Object.assign() 的結果。

參考資料

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

2023年10月9日星期一

注意 preventExtensions() 在空物件運行時的特別行為

前言

在關於檢查 Object.preventExtensions() 、Object.seal() 與 Object.freeze() 的注意事項有提到 Object.preventExtensions() ，但我發現它在空物件時遽然有不一樣的結果，在此把學習的過程做個紀錄。

內容

範例如下

let objPE = {
};
let objPE1 = {
  a : 10
};
let objSeal = {
};
let objFrozen = {
};
//
Object.preventExtensions( objPE );
Object.preventExtensions( objPE1 );
Object.seal( objSeal );
Object.freeze( objFrozen );
//
console.log( Object.isExtensible( objPE ) );//false
console.log( Object.isSealed( objPE ) );//false
console.log( Object.isFrozen( objPE ) );//false
//
console.log( Object.isExtensible( objPE1 ) );//false
console.log( Object.isSealed( objPE1 ) );//true
console.log( Object.isFrozen( objPE1 ) );//true

//
console.log( Object.isExtensible( objSeal ) );//false
console.log( Object.isSealed( objSeal ) );//true
console.log( Object.isFrozen( objSeal ) );//false

//
console.log( Object.isExtensible( objFrozen ) );//false
console.log( Object.isSealed( objFrozen ) );//true
console.log( Object.isFrozen( objFrozen ) );//true

範例的 "objPE" 與 "objPE1" 分別代表要進行 Object.preventExtensions() 的非空物件與空物件，要注意比對在 Object.isSealed() 與 Object.isForzen() 的結果是不一樣的!而 Object.seal() 與 Object.freeze() 在空物件與非空物件的結果是一樣的。

參考資料

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

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

2023年10月2日星期一

關於檢查 Object.preventExtensions() 、Object.seal() 與 Object.freeze() 的注意事項

前言

Object.preventExtensions() 、Object.seal() 與 Object.freeze() 這三個相似的功能，看似個別獨立，但實際上有相關聯，在此把學習的過程做個紀錄。

內容

JavaScript 提供 Object.isExtensible() 、Object.isSealed() 與 Object.isFrozen() 來分別檢查狀態，範例如下

let objPE = {
  a:123
};
let objSeal = {
  b:123
};
let objFrozen = {
  c:123
};
//
Object.preventExtensions( objPE );
Object.seal( objSeal );
Object.freeze( objFrozen );
//
console.log( Object.isExtensible( objPE ) );//false
console.log( Object.isSealed( objPE ) );//false
console.log( Object.isFrozen( objPE ) );//false

//
console.log( Object.isExtensible( objSeal ) );//false
console.log( Object.isSealed( objSeal ) );//true
console.log( Object.isFrozen( objSeal ) );//false

//
console.log( Object.isExtensible( objFrozen ) );//false
console.log( Object.isSealed( objFrozen ) );//true
console.log( Object.isFrozen( objFrozen ) );//true

範例準備三個物件分別做 Object.preventExtensions() 、Object.seal() 與 Object.freeze() ，接著分別用檢查個別狀態，經過 Object.preventExtensions() 後，不算是 seal 與 freeze ，接著經過 Object.seal() 後，算是 preventExtensions 但不算是 freeze ，最後經過 freezec 後，不但是 preventExtensions 也是 seal ，這三個相似功能看似個別獨立，但事實上是有相關性的!在使用時要注意這個特性。

參考資料

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

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

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

2023年9月25日星期一

禁止擴充物件的另一個選擇

前言

在之前的在 JavaScript 禁止物件擴充介紹了禁止擴充物件的方法，最近發現還有另一個方法也可以禁止物件擴充，在此把學習的過程做個紀錄。

內容

這次要透過 Object.seal() 來禁止擴充物件，範例如下

let obj = {
  a : 1,
  b : 2
};
Object.seal(obj);
obj.c = 3;
console.log( obj );
// [object Object] {
//   a: 1,
//   b: 2
// }
delete obj.b;
console.log( obj );
// [object Object] {
//   a: 1,
//   b: 2
// }
obj.b = 42;
console.log( obj );
// [object Object] {
//   a: 1,
//   b: 42
// }

範例開頭就透過 Object.seal() 來禁止物擴充，接著實驗擴充該物件後發現是不可以的，接著測試刪除成員，結果一樣是不行，接著試驗修改成員，結果是可以的! Object.seal() 與 Object.preventExtensions() 最大的不同是 Object.seal() 是"不可"刪除成員，但 Object.preventExtensions() 是可以的。

參考資料

[ blog.boggy.tw ] 搞懂 JavaScript的Object.freeze, Object.seal, Object.preventExtensions 到底在幹嘛

2023年9月18日星期一

在重灌 Windows 時如何分割 2T 以上的磁碟

前言

最近因為主硬碟掛了，所以買了個 6T 的硬碟來重灌，但重灌時卡在磁碟分割，分割後硬碟的容量只剩 2T ，在此把解決問題的過程做個紀錄。

內容

在分割程式分割後只剩 2T ，而且不能夠刪除!這時按下 Shift+F10 ，這時會跑出 console ，並在 console 下輸入

diskpart

接著輸入

list disk

其實 diskpart 就是 Windows 磁碟分割的程式，接著可以透過以下確認被割壞的硬碟的號碼

接著透過以下命令

select disk (被割壞的磁碟號碼)
clean all

接著回到 Windows 的分割程式，有個重整的按鈕，按下後就可以看到磁碟回復到未分割的狀態，這樣只是把割壞的硬碟變回正常的狀態，還是無法正常分割。

查了一下發現是 Windows 有分用 MBR 與 UEFI 兩種開機，一般不選就是用 MBR 的方式，但這個方法會發生無法分割 2T 以上的硬碟的問題，所以要換成用 UEFI 的方式開機，在用 UEFI 開機時要先確認一些 BIOS 的設定，可以參考以下

我這邊對了一下，我需要開啟的只有 Intel PXE Option ROM，這個其實我並沒有確認必要性，因為我的情況是用 CD-ROM 來開機，而不是隨身碟，接著是我卡最久的地方，就是把設定的射完後，再把 CD-ROM (我的情況是 CD-ROM 會提供兩種開機讓我選，其中有一個開頭有 "(UEFI)" )設為最優先開機，結果不行!最後發現要直接在 BIOS 調整順序那，直接"雙擊"你要開機的選項，結果神奇的事情發生了! Windows 可以正常分割 2T 的硬碟，也就是成功用 UEFI 來開機，之前把 UEFI 光碟開機選項調成第一後跳出 BIOS ，無論如何都會用 MBR 來開，這是 Bug 嗎?我不確定，這坑沒踩得一定不會知道，就當上了一課。

參考資料

[ learn.microsoft.com ] 安裝 Windows 期間，在大於 2.2 TB 的磁片磁碟機上建立單一磁碟分割時，發生錯誤

[ tw.easeus.com ] Diskpart 是什麼

[ ofeyhong.pixnet.net ] 【教學】搞懂硬碟分割：舊版BIOS/MBR 與新版UEFI/GPT 有什麼差別？

2023年9月11日星期一

關於 Object.preventExtensions() 的注意事項

前言

在先前的在 JavaScript 禁止物件擴充有使用到 Object.preventExtensions() ，但實際使用後發現還有些要注意的事項，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  num : 10
};
console.log( Object.isExtensible(obj) );//true
obj.a = 10;
console.log( obj.a );//10
//
Object.preventExtensions( obj );
console.log( Object.isExtensible(obj) );//false
//
console.log( obj );
// [object Object] {
//   a: 10,
//   num: 10
// }
//
delete obj.a;
console.log( obj );
// [object Object] {
//   num: 10
// }
//follow has error...
//Object.defineProperty( obj , 'prop' ,{ value:10 } );

範例開頭新增 a 這個 Property ，接著透過 Object.preventExtensions() 來禁止擴充，接著就是要住的事，雖然是禁止擴充，但是可以刪除!範例刪除 a 是可以的，最後順帶一提，進止擴充後來自定義 Property 都會禁止，若喚起 Object.defineProperty() 會報錯。

參考資料

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

2023年9月4日星期一

關於自定義 Property 的 enumerable

前言

自定義 Property 可以設定 enumerable ，這功能是做什麼用的呢?在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  a : 10,
  b : 20,
};
Object.defineProperty( obj , 'prop1' ,{
  value : 42,
  writable:true,
} );
Object.defineProperty( obj , 'prop2' ,{
  value : 99,
  writable:true,
  enumerable:true,
} );
//
console.log( Object.keys(obj) );//["a", "b", "prop2"]
console.log( Object.getOwnPropertyNames(obj) );//["a", "b", "prop1", "prop2"]

enumerable 的功能是否可已被"列舉"，但如果你總是透過 Object.getOwnPropertyNames() 來列舉的話，你會發現沒有作用，但如果透過 Object.keys() 來列舉的話就可以發現差別，範例的 prop1 在 Object.keys() 不會被列舉出來，所以 enumerable 設定的是會不會被 Object.keys() 列舉出來，順帶一提， Object.keys() 和 for ... in 的結果是一樣的。

參考資料

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

2023年8月28日星期一

查詢 Property 的組態

前言

在先前的在 Object 中定義 Property 介紹過自定義的 Property ，Property 在定義時要設定 Property 的組態，如可不可寫，定義完後可以查詢嗎?在此把學習的過程做個紀錄。4

內容

要得到 Property 的組態可以透過 Object.getOwnPropertyDescriptor() ，範例如下

let obj = {
  a : 10
};
Object.defineProperty( obj , 'prop1' ,{
  value : 20
} );
Object.defineProperty( obj , 'prop2' ,{
  value : 30,
  writable:true
} );
//
descriptorA = Object.getOwnPropertyDescriptor(obj, 'a');
console.log( descriptorA.value );//10
console.log( descriptorA.writable );//true
descriptorA.writable = false;
obj.a = 100;
console.log( obj.a );//100
//
descriptorProp1 = Object.getOwnPropertyDescriptor(obj, 'prop1');
console.log( descriptorProp1.value );//20
console.log( descriptorProp1.writable );//false
//
descriptorProp2 = Object.getOwnPropertyDescriptor(obj, 'prop2');
console.log( descriptorProp2.value );//30
console.log( descriptorProp2.writable );//true

透過 Object.getOwnPropertyDescriptor() 可以的到 Desciptor ，透過讀取該物件的 Property 就可以知道 Property 的組態，範例的 a 是一般的 Property，從 value 與 writable 讀出來的值如預期，可以透過 Desciptor 讀取組態，那可以透過 Desciptor 改變組態嗎?範例透過改變 Desciptor 的 writable 來實驗，結果是"不行"!接著實驗自定義的 Property ，prop1 與 porp2 皆如預期。

參考資料

2023年8月21日星期一

檢查是否為自定義的 Property

前言

在之前的在 Object 中定義 Property 裡介紹了自定義 Property ，這樣物件裡就會分一般的 Property 與自定義的 Property ，能夠區分出來嗎?在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  a : 10,
  b : 20,
};
Object.defineProperty( obj , 'prop' ,{
  value : 42,
  writable:true
} );
//
console.log( Object.keys(obj) );//["a", "b"]
for(let name in obj){
  console.log(name);
}
//
// "a"
// "b"
//
console.log( Object.getOwnPropertyNames(obj) );//["a", "b", "prop"]
//
console.log( obj.hasOwnProperty('prop') );//true
//
function checkIsDefineProperty( o , name){
  return Object.getOwnPropertyNames(o).includes( name ) && 
    !Object.keys(o).includes(name);
}
//
console.log( checkIsDefineProperty( obj,'a') );//false
console.log( checkIsDefineProperty( obj,'prop') );//true

查了一下發現 JavaScript 本身不直接提供檢查是否為自定義的 Property 的方法，不過可以透過其他方法的結果來得知，在 Object.keys() 與 for ... in 得到的結果都不包含自定義的 Property ，但透過 Object.getOwnPerpertyNames() 可以得到，不過裡面會同時包含一般的 Property，順帶提一下 Object.getOwnProperty() 也可以檢查到自定義的 Property 。綜合以上後就可以檢查是否為自定義的 Property ，只要確定 Property 在 Object.getOwnPerpertyNames() 裡且"不"在 Object.keys() 裡就可以確定是否為自定義的 Property 。

參考資料

2023年8月14日星期一

在自定義的 Property 裡使用 getter 與 setter

前言

在先前的在 Object 中定義 Property 裡直接透過賦值來設定 Property ，但在 Class 使用 Property 時是可以透過 getter 與 setter 來存取 Property ，自定義的 Property 其實也可用 getter 與 setter ，在此把學習的過程做個紀錄。

內容

範例如下

const o = {};
//
let value = 38;
Object.defineProperty(o, "a", {
  get() {
    console.log('get value!');
    return value;
  },
  set(newValue) {
    console.log('set value!');
    value = newValue;
  }
});
o.a = 42;
console.log(o.a); // 42

用起來跟在 Class 時很像，都是定義 get() 與 set() ，要注意的是之前要做"寫"的動作的時候必須設定 writable 為 true 來達成，但有使用 set() 的時候就可以不用設定就可直接完成寫的動作。

參考資料

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

2023年8月7日星期一

在 Object 一次定義多個 Property

前言

在先前的在 Object 中定義 Property 介紹了在 Object 裡定義 Property 的方法，但一次只能定義一個 Property ，而 JavaScript 有提供一次定義多個 Property 的方法，在此把學習的過程做個紀錄。

內容

要一次定義多個 Property 就透過 Object.deifneProperties() ，範例如下

let obj = {};
Object.defineProperties( obj , {
  prop1 : {
    value : 10,
    writable : true
  },
  prop2 : {
    value : 'hello'
  }
} );
//
obj.prop1 = 1024;
console.log( obj.prop1 );//1024
console.log( obj.prop2 );//"hello"

Object.deifneProperties() 用起來和 Object.deifneProperty() 很像，差別是參數的輸入方式，Object.deifneProperty() 要把名稱與內容分開輸入，但 Object.deifneProperties() 輸入時就把名稱與內容包成 JSON 輸入即可，而且還可以一次輸入多個 Proptery ，範例示範一次定義 prop1 與 prop2 兩個 Property ，要記得內容如果不表明代表唯讀，這點與 Object.deifneProperty() 是一樣的。

參考資料

2023年7月31日星期一

在 Object 中定義 Property

前言

最近發現一般物件也可以像 Class 一樣定義 Property ，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {};
Object.defineProperty( obj , 'prop' ,{ value:10 } );
console.log( obj.prop );//10
obj.prop = 30;
console.log( obj.prop );//10
//
Object.defineProperty( obj , 'prop1' ,{
  value : 10,
  writable: true 
} );
console.log( obj.prop1 );//10
obj.prop1 = 30;
console.log( obj.prop1 );//30

要在定義 Object 中定義 Property 可以透過 Object.defineProperty() 來達成，範例開頭定義 'prop' ，直接列印後如同定義，但修改 'prop' 後發現數值遽然不能改!原因是 Object.defineProperty() 如果不刻意設定"可寫"就會是"唯讀"，要如何改"可寫"呢?看範例的 'prop1'，在 Object.defineProperty() 裡新增 'writable' 並設成 true，這樣就可以設定成"可寫"。

參考資料

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

2023年7月24日星期一

在 JavaScript 禁止物件擴充

前言

最近發現 JavaScript 可以讓物件禁止擴充成員，在此把學習的過程作紀錄。

內容

在 JavaScript 的 Object 預設是可以隨意地擴充成員的，如果想要禁止這件事是可行的嗎?答案是可行的，範例如下

let obj = {};
console.log( Object.isExtensible(obj) );//true
obj.a = 10;
console.log( obj.a );//10
Object.preventExtensions( obj );
console.log( Object.isExtensible(obj) );//false
obj.b = 0;
console.log( obj.a );//10
console.log( obj.b );//undefined

範例開頭是在 obj 下擴充 a 這個成員，接著透過 Object.preventExtensions() 來禁止擴充成員，接著再擴充成員 b ，但結果是 undefiend 。如果要確認物件是否可擴充可以透過 Object.isExtensible() 來確認，要注意的是禁止擴充後，再做擴充的行為是不會有任何的錯誤出現在 console。

參考資料

2023年7月17日星期一

覆蓋 String.replace() 對物件的行為

前言

在研究 Symbol 時發現可以覆蓋 String.replace() 對物件的行為，在此把學習的過程做紀錄。

內容

String.replace() 對物件的行為預設是會回傳原本的字串，透過覆蓋可以改變該行為，範例如下

class Replace1 {
  constructor(value) {
    this.value = value;
  }
  [Symbol.replace](string) {
    return `${string} replace ${this.value}`;
  }
}
let obj ={};
obj[Symbol.replace] = function(string){
  return "I am cusutom replace.";
}
console.log('foo'.replace(new Replace1('bar')));//"foo replace bar"
console.log('foo'.replace(obj) );//"I am cusutom replace."

覆蓋的做法是在要被覆蓋的物件裡定義覆蓋 function ，透過 Symbol.replace 來指名覆蓋，範例示範在 class 與 object 的覆蓋，覆蓋 function 的參數是來源的 String ，也就是喚起 replace() 的 String。

參考資料

[ developer.mozilla.org ] Symbol.replace

2023年7月10日星期一

改變 Array.concat() 的特性

前言

最近學習 Symbol 時發現它可以改變Array.concat() 的特性，在此把學習的過程做紀錄。

內容

範例如下

let strAr = [ 'a' , 'b' , 'c' ];
let numAr1 = [ 1 , 2 , 3 ];
let numAr2 = [ 4 , 5 , 6 ];
console.log( strAr.concat(numAr1) );//["a", "b", "c", 1, 2, 3]
//
numAr1[ Symbol.isConcatSpreadable ] = false;
console.log( strAr.concat(numAr1) );//["a", "b", "c", [1, 2, 3]]
console.log( strAr.concat(numAr2) );//["a", "b", "c", 4, 5, 6]

範例開頭先示範一次正常的 Array.concat() ，接著透過 Symbol.isConcatSpreadable 這個 Symbol 來存取 Array 的特性，改變後再次 Array.concat() 後發現 Array 不會被展開了!要注意這個改變特性是針對個別的 Array 來修改，所以與 numAr2 執行 Array.concat() 又再次展開了。Symbol 可以用來改變改變 Function 的行為，用起來雖然優美，但這是不是也代表著以後這些 Funciton 不能認定它只有一種行為，個人認為透過提供新的 Method 或讓 Function 可以用參數來調整行為的做法是比較好的。

參考資料

[ developer.mozilla.org ] Symbol.isConcatSpreadable

2023年7月3日星期一

使用 global 的 Symbol

前言

在先前的 JavaScript 的 Symbol 入門提到 Symbol 的基本運用，這次來學習 global 的運用，在此把學習的過程做個紀錄。

內容

使用 Symbol() 所得到的 Symbal 都是個別的，如果要隨時可以取得同一個 Symbal 的話可以透過 Symbal.for() 來取得同一個 Symbal ，範例如下

let globalSymbol = Symbol.for('foo');
let localSymbol = Symbol('foo');
console.log( globalSymbol === localSymbol );//false
console.log( globalSymbol === Symbol.for('foo') );//true
console.log( localSymbol === Symbol.for('foo') );//false
//
console.log( Symbol.keyFor(globalSymbol) );//"foo"
console.log( Symbol.keyFor(localSymbol) );//undefined

範例開頭有透過 Symbol.for() 來取得的 globalSymbal 與透過 Symbol() 取得的 localSymbal ，可以發現 globalSymbal 與 localSymbal 是不同一個，但如果再次透過 Symbal.for() 用同一名稱取得會發現它與 globalSymbal 是同一個 Symbal !但用類似的手法用在 Symbal() 結果卻不同，也不難理解，因為 Symbal() 每次取得都是獨立的 Symbal。global 的 Symbal 是透過 key 來取得 Symbal ，那如果需要透過 Symbal 來取得 Key 可能嗎?可以透過 Symbal.keyFor() 來達成，不過要注意一下如果用 local 的 Symbal 來查詢時回傳的結果會是 undefined!

參考資料

[ developer.mozilla.org ] Symbol

2023年6月26日星期一

JavaScript 的 Symbol 入門

前言

最近發現 JavaScript 有 Symbol 這個資料型態，抽空作個學習，在此做個紀錄。

內容

Symbol 這個資料型態提供一種新的方法提取 Object 的成員，以前成員都是用 String 來提取，現在多一種透過 Symbol 來提取，使用的範例如下

let symbolA = Symbol();
let symbolB = Symbol('member');
let symbolC = Symbol('member');
console.log( symbolA === symbolB );//false
console.log( symbolB === symbolC );//false
console.log( symbolB.description === symbolC.description );//true

//
let obj = {
  num : 1234,
  str : 'abc'
};
//
obj[ symbolA ] = 5678;
console.log( obj[ symbolA ] );//5678

//
for(let key in obj)
  console.log(`${key}:${obj[key]}`);
//
// "num:1234"
// "str:abc"
//
Object.getOwnPropertySymbols( obj ).forEach( sym => 
  console.log( obj[sym] )
);
//5678

Symbol 雖然是資料型態，但沒辦法用 new 來使用，只能用 Symbol() 這個"函式"來產生，產生可以帶有字串參數，這個參數讓它看起來很像是命名，但可以看到 SymbolB 與 SymbolC ，雖然參數一樣但卻不相等，該參數其實是設定 Symbol.description 的內容，每一個透過 Symbol() 產生的 Symbol 其實都是不一樣的!範例接著透過 Symbol 來新增成員與取得成員，用起來跟字串時很像，只是把原本透過字串來存取換成 Symbol ，要注意透過 Symbol 來存取的成員沒辦法透過 . 加名稱來存取。在一般的瀏覽物件可以看到無法取得透過 Symbol 來存取的成員，如果要瀏覽物件裡的 Symbol 成員可以透過 Object.getOwnPropertySymbols() 來瀏覽。

參考資料

[ developer.mozilla.org ] Symbol

2023年6月19日星期一

使用 Object.assign() 用於複製時要注意的事

前言

在之前的在 JavaScript 裡複製物件的新選項提到 Object.assign() 的使用，但實際使用時發現有淺層與深層複製的問題，在此把學習的過程做個紀錄。

內容

範例如下

let obj = { 
  a : { 
    b : 4
  },
  c : 1234
}
let dstObj = Object.assign( {} , obj );
let dstObj1 = JSON.parse( JSON.stringify( obj ) );
//
obj.c =5678;
console.log( dstObj.c );//1234
console.log( dstObj1.c );//1234
//
obj.a.b = 5;
console.log( dstObj.a.b );//5
console.log( dstObj1.a.b );//4

透過 Object.assign() 複製物件是一種淺層複製，也就是範例的 dstObj ，要深層複製的話就要透過 JSON 來複製，也就是範例的 dstObj1 ，淺層複製在複製 Number 或 String 時沒什麼問題，無論 obj.c 如何更改，dstObj 與 dstObj1 都不會更改，但如果複製 Object 的話就會有麻煩，淺層複製 Object 時，只會複製它的參照，並不會複製 Object 的內容，所以當 obj.a.b 更改時，dstIbj.a.b 也跟著更改了，因為根本是同一物件，但透過深層複製的 dstObj1 就沒這個問題。

參考資料

2023年6月12日星期一

關於不可列舉的屬性

前言

在之前的在 JavaScript 裡複製物件的新選項裡初步認識了 Object.assign() ，在學習時發現有所謂的"不可列舉"的屬性，抽個控做個學習，在此做個紀錄。

內容

不可列舉的屬性的作用是在由於複製物件是透過列舉屬性來個別複製的，如果有屬性不會被列舉，也就代表著複製物件時它不會複製，範例如下

let obj = {
  a : {
    value :　1234
  },
  b : {
    value : 5678,
    enumerable : true
  }
};
//
let copyObj = Object.create( {} , obj );
console.log( Object.assign( {} , obj ) );
//
// [object Object] {
//   a: [object Object] {
//     value: 1234
//   },
//   b: [object Object] {
//     enumerable: true,
//     value: 5678
//   }
// }
console.log( Object.assign( {} , copyObj ) );
//
// [object Object] {
//   b: 5678
// }

要讓物件具有不可列舉的屬性必須要讓物件有 enumerable 這個屬性，如 obj.b ，設定成 true 代表可以被列舉，如果不設視同不可列舉，接著透過 Object.create() 來製造出新的物件，這個新的物件才真正具有該屬性，範例直接透過 Object.assign() 來複製 obj ，結果物件和原本的 obj 一樣，但同樣手法複製 copyObj 會發現結果很不一樣， a 由於不帶有列舉屬性所以不會被複製，b 雖然被複製了，但可以看到並不存在 enumerable 這個屬性，這個屬性比較像是專門給 Object.create() 使用的，要注意的是這個不可列舉的屬性是沒辦法透過列印物件來得知的。

參考資料

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

2023年6月5日星期一

在 JavaScript 裡複製物件的新選項

前言

在傳統的 JavaScript 裡要複製物件的內容必須自己寫一個列舉每個成員並複製的方法，也是我一直以來用的方式，但最近發現物件本身已有提供複製的方法，在此把學習的過程做個紀錄。

內容

範例如下

let obj = {
  str : "String",
  num : 1234,
};
let obj1 = {
  num : 12345,
};
let dstObj = {
  data : "data"
};
//
Object.assign( dstObj , obj );
console.log( dstObj);
// [object Object] {
//   data: "data",
//   num: 1234,
//   str: "String"
// }
//
console.log( Object.assign( dstObj , obj , obj1 ) );
// [object Object] {
//   data: "data",
//   num: 12345,
//   str: "String"
// }

複製是透過 Object.assign() 來達成，用法很簡單，第一個參數是要複製到的目標物件，第二個參數則是複製的來源物件，範例的第二次使用時示範了複製多個來源物件，來源物件是 "obj" 與 "obj1"，要注意最後的結果 "num"是 12345 ，這代表著它是按照樹入的順序來複製的! Object.assign() 本身會回傳數值，回傳的數值就是輸入的第一個參數，第二次使用就直接用回傳結果作為輸出。

參考資料

[ tech.havocfuture.tw ] 如何使用 javascript 進行十進位、十六進位轉換

2023年5月29日星期一

關於 JavaScript 的進制轉換

前言

在先前的關於 BigInt 轉換非十進制的作法裡做了 BigInt 的進制轉換的介紹，這次來學習更多的進制轉換，在此把學習的過程做個紀錄。

內容

範例如下

let num = 42;
let hexNum = num.toString( 16 );
//
console.log( hexNum );//2a
//Hex int to int
console.log( parseInt( hexNum , 16 ) );//42
//Hex int to BigInt
console.log(  BigInt( "0x"+hexNum ).toString() );//42
//Binary to BigInt
console.log(  BigInt( "0b"+"11111111111111111111111111111111111111111111111111111" ).toString() );
//"9007199254740991"

//Octal to BigInt
console.log(  BigInt( "0o"+"71" ).toString() );//"57"

範例開頭示範的是把 Number 轉換進制，是透過 Number.toString() 來達成，透過參數可以決定要轉換的進制，如果要把它轉換回原來的 Number ，可以透過 parseInt() 來達成，第二個參數就是要轉換的進制，如果要把非十進制的 Number 轉到 BigInt 呢?可以透過 BigInt 的建構式來達成，在建構式輸入進制的字串就可以轉換，二進制的前方是 "0b" ，八進制的前方是 "0o" ，十六進制的前方是 "0x"，那如果碰到非二進制，也非八進制與十六進制呢?這些情況就要透過 parseInt() 先變回十進制再轉 BigInt 。

參考資料

2023年5月22日星期一

關於 BigInt 轉換非十進制的作法

前言

最近需要將 BigInt 轉成 16 進制，但發現沒提供直接輸出的做法，上網查了一下發現了做法，仔此做個紀錄。

內容

解決的做法可以在 [ stackoverflow.com ] Convert A Large Integer To a Hex String In Javascript 找到，範例如下

let num = 42n;
console.log( num.toString(2) );//101010
console.log( num.toString(8) );//52
console.log( num.toString(10) );//42
console.log( num.toString(16) );//2a

作法意外的簡單，只要在 BigInt.toString() 加入進制的參數就可以輸出對應的進制，如果沒輸入參數的話就等於輸入 10 ，這點可以在範例的第三次的使用看到。

參考資料

[ stackoverflow.com ] Convert A Large Integer To a Hex String In Javascript

2023年5月15日星期一

在 JavaScript 裡合併 Map

前言

最近在 [ developer.mozilla.org ] Map 發現 Map 可以用很簡單的方法合併，在此把學習的過程做個紀錄。

內容

範例如下

let map1 = new Map( [
  [ 1 , '123'] ,
  [ 2 , '456'] ,
  [ 3 , '789'] 
] );
let map2 = new Map( [
  [ 1 , 'I am 1'] ,
  [ 2 , 'I am 2'] ,
  [ 4 , 'I am 4'] 
] );
//
let combinedMap1 = new Map( [ ...map1 , ...map2] );
for( let [ key , value] of combinedMap1.entries() ){
  console.log(`Key:${ key } Value:${ value }`);
}
// "Key:1 Value:I am 1"
// "Key:2 Value:I am 2"
// "Key:3 Value:789"
// "Key:4 Value:I am 4"

//
let combinedMap2 = new Map( [ 
  ...map1 , 
  [ 4 , '1234' ],
  [ 2 , '2887' ]
] );
for( let [ key , value] of combinedMap2.entries() ){
  console.log(`Key:${ key } Value:${ value }`);
}
// "Key:1 Value:123"
// "Key:2 Value:2887"
// "Key:3 Value:789"
// "Key:4 Value:1234"

合併的方法是透過初始哈的參數來達成，合併時可以看到如果碰到同樣的 Key 的話會是後面合併的 Map 的內容，也可以直接想成照陣列的順序來加入內容，範例的第二段示範了直接加入 Key 的方法，就是直接透過陣列來增加，當然如果有重複還是會以後面的為主。

參考資料

2023年5月8日星期一

關於 JavaScript 的 Map 瀏覽

前言

在先前的關於 JavaScript 的 Set 瀏覽介紹了 Set 的瀏覽，這次來介紹 Map 的瀏覽，在此把學習的過程做個紀錄。

內容

範例如下

let valueMap = new Map( [ 
  ['z','aa'] , 
  [12,'bb'] , 
  ['abc',13] , 
  [1234,5678] 
] );
//use Map.entries()
for( const [ key , value ] of valueMap.entries() )
  console.log( `key:${ key } value:${ value }`);
// "key:z value:aa"
// "key:12 value:bb"
// "key:abc value:13"
// "key:1234 value:5678"

//use Map.keys()
for( const key of valueMap.keys() )
  console.log( `key:${ key }`);
// "key:z"
// "key:12"
// "key:abc"
// "key:1234"

//use Map.values()
for( const value of valueMap.values() )
  console.log( `value:${ value }`);
// "value:aa"
// "value:bb"
// "value:13"
// "value:5678"

瀏覽的方法一樣是透過 entries() 、 keys() 與 values() ，不過這次不會像 Set 一樣發生 key 與 value 是一樣的問題，因為這樣也正好反映了 Map 的特性。

參考資料

2023年5月1日星期一

關於 JavaScript 的 Set 瀏覽

前言

在之前的關於 JavaScript 的 Set 簡單用了 Set ，但只是簡單使用，沒用到瀏覽，最近需要瀏覽 Set ，所以發現 Set 的瀏覽有一些不直覺，在此把學習的過程做個紀錄。

內容

範例如下

let valueSet = new Set( [ 'z' , 12 , 'abc' , 1234] );
//use Set.entries()
for( const [ key , value ] of valueSet.entries() )
  console.log( `key:${ key } value:${ value }`);
// "key:z value:z"
// "key:12 value:12"
// "key:abc value:abc"
// "key:1234 value:1234"

//use Set.keys()
for( const key of valueSet.keys() )
  console.log( `key:${ key }`);
// "key:z"
// "key:12"
// "key:abc"
// "key:1234"

//use Set.values()
for( const value of valueSet.values() )
  console.log( `value:${ value }`);
// "value:z"
// "value:12"
// "value:abc"
// "value:1234"

Set 同時堤供三個瀏覽的方法，分別是 Set.entries() 、 Set.keys() 與 Set.values() ，Set.entries() 瀏覽後會發現 iterator 會是 key 與 value !?，而且 key 與 value 的值永遠是一樣的，這個原因可以在 [ developer.mozilla.org ] Set.prototype.entries() 裡找到，是為了與 Map 有一樣概念，但這樣就用起來不太直覺，而透過 Set.keys() 與 Set.values() 瀏覽其實都可以，結果都會是一樣的。

參考資料

[ developer.mozilla.org ] Set.prototype.entries()

2023年4月24日星期一

對 JavaScript 的 Set 的觀念修正

前言

在前一篇關於 JavaScript 的 Set 有介紹到 Set ，但實際使用發現有些誤解，這次把學習的過程做個紀錄。

內容

在關於 JavaScript 的 Set 的範例有加入字串的 key ，但使用 Set.has() 使用數字來尋找，這樣可能會產生誤會，誤會 Set 只能檢查數字的 key ，畢竟 C++ 的 Set 是要區分數字與字串的，但 JavaScript 其實是不用的!因為 Javascript 的容器天生就可以接受異質的元素，所以不會區分字串與數字的容器，接著看範例

let set = new Set( [ 0 , 'abc' , 2 , 1 ] );
//
console.log( set.has( 0 ) );//true
console.log( set.has('abc') );//true
//
const valueList = [ 'aaa', 'afdsf' , 123 , 'aaa' , 'bbb'];
let checkList = new Set( valueList );
console.log( checkList.size );//4

範例開頭確認 Set 是可以使用異質的 key ，接著就透過 valueList 來確認重複，透過確認 Set.size 來確認是否把重複的值給成功過濾，結果是 4 ，表示第 4 個元素被過濾掉了。

參考資料

2023年4月17日星期一

關於 JavaScript 的 Set

前言

在之前的關於 JavaScript 的 Map 提到了 Map ，再查一下就會發現 JavaScript 和 C++ 一樣都有 Set ，抽個空作個學習，在此做個紀錄。

內容

範例如下

let set = new Set( [ 0 , 1 , 2 , 1 ] );
//check
console.log( set.has( 0 ) );//true
//add
set.add( 2 );
console.log( set.has( 2 ) );//ture
set.add( -3 );
console.log( set.has( -3 ) );//ture
set.add( 3.7 );
console.log( set.has( 3.7 ) );//ture
set.add( "4.7" );
console.log( set.has( 4.7 ) );//false
//delete
set.delete(2);
console.log( set.has( 2 ) );//false

Set 的用法和 C++ 差不多，初始化可以利用陣列來輸入初始值，有重複的沒關係，Set 會自動濾除，接著透過 Set.has() 來確認 Key 是否存在。要增加 Key 時利用 Set.add() ，可以重複增加，也可以增加負數，剩至可以增加有小數的數值，如果企圖透過字串來增加的話，雖然不會加成功，但也不會報錯。刪除透過 Set.delete() 即可，簡單又直覺。

參考資料

2023年4月10日星期一

關於 JavaScript 的 Map

前言

最近發現 JavaScript 有 Map 這個類別，抽個空做個學習，在此做個紀錄。

內容

Map 的功能其實和 Object 很相似，所以範例會拿 Object 來與 Map 對比，範例如下

let obj = {};
let map = new Map();
//
obj.prop = 1234;
map.set( 'prop' , 1234 );
console.log( obj.prop );//1234
console.log( map.get( 'prop' ) );//1234
//Use key by number
map.set( 1 , 'number');
console.log( map.get( 1 ) );//number
//delete key
delete obj.prop;
map.delete( 'prop' );
console.log( obj.prop );//undefined
console.log( map.get( 'prop' ) );//undefiend

新增內容時透過 Map.set() 來新增，如果沒有該 Key 值會新增，如果有效果則是覆蓋，Map 可以使用 Number 當作 Key 值，但 Object 是完全不行，刪除 Key 時，Object 是透過 delete 命令來達成，而 Map 透過 Map.delete() 來達成。

參考資料

[ developer.mozilla.org ] delete operator

2023年4月3日星期一

重新認識 delete

前言

最近發現自己對 delete 有很深的誤解，抽空做個學習，在此做個紀錄。

內容

原本我認為 delete 跟直接給 undefiend 的結果是一樣的!所以在注意 in 搭配數字時 delete 和直接給 undefiend 的不同才會說要注意不同，但實驗了一下搭配 Object 與 hasOwn() 後，發現了差異，範例如下

const example = {};

console.log(Object.hasOwn(example, "prop") );//false

example.prop = "exists";
console.log( Object.hasOwn(example, "prop") );//true

example.prop = null;
console.log( Object.hasOwn(example, "prop") );//true

example.prop = undefined;
console.log( Object.hasOwn(example, "prop") );//true

delete example.prop;
console.log( Object.hasOwn(example, "prop") );//false

範例凱使先確認 prop 是否存在，回傳 false ，如預期，接著新增 prop 後，再次確認也如預期得到 true ，接著實驗給予 null ，結果是 true ，再來的 undefiend 也是一樣的結果，只有在執行 delete 後才能確實刪除成員的存在。

參考資料

2023年3月27日星期一

注意 in 搭配數字時 delete 和直接給 undefiend 的不同

前言

在之前的 hasOwn() 與 in 搭配數字使用的意義提過 in 搭配數字使用的意義，但實際使用後發現有個注意事項，在此做個紀錄。

內容

範例如下

const ar = [ 1 , 2 , 3 , 4 , undefined];
//
console.log( 4 in ar);//true
console.log( Object.hasOwn( ar, 4) );//true
delete ar[4];
console.log( 4 in ar);//false
console.log( Object.hasOwn( ar, 4) );//false

範例開始直接對 ar[4] 做 in ，結果是 true ，但是如果經過 delete 後，結果就會變成 false ，要注意直接給 undefiend 跟 delete 的意思是不同的!

參考資料

[ developer.mozilla.org ] in operator

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

2023年3月20日星期一

hasOwn() 與 in 搭配數字使用的意義

前言

最近發現 hasOwn() 與 in 都可以搭配數字使用，抽個空作個學習，在此做個紀錄。

內容

範例如下

const ar = [ 1 , 2 , 3 , 4 , undefined];
//
console.log( 2 in ar);//true
console.log( Object.hasOwn( ar, 2) );//true
//
console.log( 4 in ar);//true
console.log( Object.hasOwn( ar, 4) );//true
//
console.log( 5 in ar);//false
console.log( Object.hasOwn( ar, 5) );//false
//
console.log( -1 in ar);//false
console.log( Object.hasOwn( ar, -5) );//false

hasOwn() 與 in 搭配數字使用時，意思接近於詢問陣列是否可以接受輸入的索引值，範例開頭用 2 當索引值可以得到 true ，第二個例子測試當該數值是 undefiend 是否有效，答案是有效的，接著當索引值是 5 ，也就是超出 ar 這個陣列最大索引值時，結果會是 fasle ，最後範例實驗了當索引值是負值時是否有效?結果是無效的!這個搭配數字的用法個人覺得實在不實用，但有又因為是標準用法，所以還是要認識一下。

參考資料

[ developer.mozilla.org ] in operator

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

2023年3月13日星期一

hasOwn() 與 in 的不同

前言

在之前的在 JavaScript 使用 in 與 hasOwnProperty() 與 hasOwn() 的差異分別學習了 in 與 hasOwn() ，它們的功能很像，兩者都是檢查物件裡是否存在某成員，抽個空研究一下差異，在此把學習的過程做個紀錄。

內容

範例如下

class baseClass{
  get prop(){
    return 1234;
  }
}
let obj = new baseClass();
//
console.log( 'constructor' in obj );//true
console.log( Object.hasOwn( 'constructor' , obj ) );//false
//
console.log( 'prop' in obj );//true
console.log( Object.hasOwn( 'prop' , obj ) );//false

in 可以檢查 'constrouctor' ，但 hasOwn() 卻沒辦法，會還傳 false ，還有一個差異是 class 裡的 getter 與 setter ， in 一樣可以檢查，但 hasOwn() 會會傳 false 。

參考資料

[ masteringjs.io ] The Difference Between in and hasOwnProperty in JavaScript

2023年3月6日星期一

hasOwnProperty() 與 hasOwn() 的差異

前言

hasOwn() 是 JavaScript 的新標準拿來替代 hasOwnPerperty() ，最近研究了一下差異，在此做個記錄。

內容

hasOwnProperty() 與 hasOwn() 都是拿來檢查物件是否有某個屬性，但有些細微的差異，範例如下

let obj1 = {
  prop : 1
}
console.log( obj1.hasOwnProperty('prop') );//true
console.log( Object.hasOwn( obj1 , 'prop' ) );//true
//
let obj2 = {
  prop : 1,
  hasOwnProperty : function(){
    return false;
  }
}

console.log( obj2.hasOwnProperty('prop') );//false
console.log( Object.hasOwn( obj2 , 'prop' ) );//true
//
let obj3 = Object.create(null);
obj3.prop = 1;
//follow has error!
//console.log( obj3.hasOwnProperty('prop') );
console.log( Object.hasOwn( obj3 , 'prop' ) );//true

obj1 的範例是兩者的正常用法，結果無異，但在 obj2 的例子裡，由於 hasOwnProperty() 遭到覆蓋，所以會回傳由覆蓋的 function 的結果，也就是 false ，但是 hasOwn() 就不用擔心這樣的麻煩。obj3 的例子特別了點，透過 Object.create() 來創造純淨的物件，裡面並不含 hasOwnPerperty() ，所以如果直接使用 hasOwnPerperty() 會有錯誤，但如果使用 hasOwn() 就不會有問題。

參考資料

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

[ developer.mozilla.org ] Object.prototype.hasOwnProperty()

2023年2月27日星期一

關於 Destructuring assignment

前言

最近查詢語法時發現 Destructuring assignment 不只可以用在陣列，在此把學習的過程做個紀錄。

內容

範例如下

//
[a,b,...c] = [10,20,30,40];
console.log(c);//[30, 40]
//
const obj = { constA: 1, constB: 2 };
const { constA, constC } = obj;
console.log(constA);//1
console.log(constC);//undefined
//
const objA = { const1: 1, const2: { const3: 99 } };
const {
  const1,
  const2: { const3: const4 },
} = objA;

console.log(const4);//99
//Default value
const [ aA = 1] = []; 
const { bB = 2 } = { bB: undefined }; 
const { cC = 2 } = { cC: null }; 
console.log(aA);//1
console.log(bB);//2
console.log(cC);//null

第一個是常見的使用"..."的變數來承接變數，也是我原本就知道的用法，接著範例會用物件來 Destructuring assignment ，要注意的是物件的行為是對同名的變數進行賦值，所以"constC"是 undefiend ，接著會來對物件進行深層的 Destructuring assignment ，要注意"const4"這個變數是跟原本複製"objA"裡不太一樣，"objA"裡不需要"const4"這個變數的命名，最後範例是犯了預設值的狀況，第一個大概可以猜的到，由於右邊根本沒內容可以複製，所以"aA"是 1 ，接著在物件有預設值進行 Destructuring assignment ，發現賦值並未發生，"bB"是2，但在"cC"的賦值就發生了，所以可以得知在物件進行 Destructuring assignment 時，如果該變數是 undefined ，賦值是不會發生的。

參考資料

[ developer.mozilla.org ] Destructuring assignment

2023年2月20日星期一

在 JavaScript 使用 in

前言

最近發現 for...in 與 in 是不同的語法，抽個空作個學習，在此做個紀錄。

內容

in 這個語法適用於檢查物件是否有某成員，範例如下

const obj = {
  p1 : 'string',
  p2 : 1234
};
console.log('p1' in obj);//true
console.log('p2' in obj);//true
console.log('p3' in obj);//false

檢查的結果會是布林值，要注意檢查的參數是用 string。當然可以用檢查是否為 undefined 來檢查，但是語法比較長就是了。

參考資料

[ developer.mozilla.org ] in operator

2023年2月13日星期一

考慮空的迴圈的另一個寫法

前言

最近在查詢資料時發現 JavaScript 的空迴圈的另一個寫法，在此把學習的過程做個紀錄。

內容

範例如下

const array1 = [1, 2, 3];
//
for (let i = 0; i < array1.length; array1[i++] = 0) ;
//
console.log(array1);//[0, 0, 0]

範例做的事很簡單，就是把陣列的每個值填成 0 ，但注意看 for 迴圈不需要 {} ，這個在 [ developer.mozilla.org ] empty 裡稱為 empty statement ，在 C++ 之類的語法裡， {} 是不可省略的，但在 JavaScript 是合法語法，只需要在迴圈的結尾用一個 ; ，就可以等效於 {} 。

參考資料

[ developer.mozilla.org ] empty

2023年2月6日星期一

關於 Object.freeze()

前言

最近使用 Object.freeze() 發現跟自己想的不太一樣，在此把學習的過程作紀錄。

內容

我對 Object.freeze() 的觀念一直保持著就是個有點麻煩將變數改成不可更改，但最近發現這觀念錯得離譜，範例如下

let valNum = 1111;
let valStr = '1111';
let valObj = {};
const constVal = '1234';
console.log( `valNum is frozen:${ Object.isFrozen( valNum ) }` );
console.log( `valStr is frozen:${ Object.isFrozen( valStr ) }` );
console.log( `valObj is frozen:${ Object.isFrozen( valObj ) }` );
console.log( `constVal is frozen:${ Object.isFrozen( constVal ) }` );
//freeze all object...
Object.freeze(valNum);
Object.freeze(valStr);
Object.freeze(valObj);
Object.freeze(constVal);
//
valNum = 1;
console.log( `valNum:${ valNum}` );
valStr = '12';
console.log( `valNum:${ valStr}` );
valObj.a = 1;
console.log( valObj.a );
//Follow has error...
//constVal = 1111;

範例剛開頭有四種變數，接著對每一種變數做 Object.isFrozen() 來確認是否已經是不可改，結果是只有 valObj 會是 false ，這裡跟我想的不一樣，我本以為 valNum 與 valStr 也應該是 false ，但結果來說 Object.isFrozen() 只對 Object 有效，如果不是 Object 都匯回傳 true ，接著範例對每個變數 Object.freeze() ，發現 valNum 與 valStr 修改是有效的， valObj 加了 a 這個成員，但會發現結果會是 undefined ，過程中是不會有任何的報錯，最後就是 const ，如同預期的結果，一改就報錯。

參考資料

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

2023年1月29日星期日

利用 Object.entries() 來瀏覽物件

前言

最近在瀏覽物件時發現遽然忘記要如何瀏覽，仔此把學習的過程做個紀錄。

內容

範例如下

const object1 = {
  a: 'string',
  b: 1234
};
//
for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}
//"a: string"
//"b: 1234"
//
console.log( Object.keys(object1) );//["a", "b"]
console.log( Object.values(object1) );//["string", 1234]

透過 Object.entries() 再搭配 of 語法就可以瀏覽物件，如果只需要名稱，可以透過 Object.keys()，如果只需要數值就用 Object.values()。

參考資料

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

2023年1月23日星期一

關於 String.trim()

前言

最近在 ECMAScript 2019 標準發現 JavaScript 支援 trim() ，抽個空做個學習，在此做個紀錄。

內容

範例如下

const str = ' \n\t  Hello world!   ';

console.log( str );
//" 
//    Hello world!   "
console.log( str.trimStart() );
//"Hello world!   "
console.log( str.trimEnd() );
//" 
//    Hello world!"
console.log( str.trim() );
//"Hello world!"

JavaSctript 不只支援 trim() ，同時支援 trimStart() 與 trimEnd() ，目的都是去除"空白字元"，但所謂的空白字元並不是只有空白，包含換行字元與 tab 字元也都會被去除，但一般的標點符號都不會被去除，這次看 MDN 的說明發現 trimStart() 可以用 trimLeft() 來替代，而 trimEnd() 可以用 trimRight() 來替代，其實只是名稱不同而已，功能是一樣的。

參考資料

[ developer.mozilla.org ] String.prototype.trim()

2023年1月16日星期一

關於 BigInt 搭配運算子時的注意事項

前言

在先前的關於 BigInt 裡基本使用了 BigInt ，最近發現它可以搭配運算子來使用，在此把學習的過程做個紀錄。

內容

範例如下

console.log( (10n + 3n).toString() );//13
console.log( (10n - 3n).toString() );//7
console.log( (10n * 3n).toString() );//30
console.log( (10n / 3n).toString() );//3
//It can't operator with Number
//console.log( (10n / 3).toString() );//Thtis has error!
//
//This equal 10n.toString() + '3'
console.log( 10n + '3' );//103
console.log( '3' + 10n );//310

範例的開頭對 BigInt 進行了加減乘除，結果如預期，要注意除法會只取整數，畢竟 BigInt 不支援小數，不幸的搭配 Number 來使用是不支援的，搭配 String 來使用時並不是運算的加法，而是將字串串接在一起，注意到範例在運算完後都不需要 toString() ，因為加法完成後的型別一定是 String ，不論加法的順序，這點要注意。

參考資料

2023年1月9日星期一

關於 BigInt

前言

最近發現 BigInt 這個型別，抽個空做個學習，在此做個紀錄。

內容

BigInt 是 JavaScript 用來支援位數很多的整數的方案，它比 Number 還要能處理更多的整數，但不能處理小數，範例如下

console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
//
let num = 1234567890123456789 * 123;
let bigNum = 1234567890123456789n * 123n;
console.log(  num );//151851850485185200000
console.log(  Number.isFinite(num) );
console.log(  bigNum.toString() );//"151851850485185185047"

範例開頭先印出了 Number 的最大整數與負最大整數，接著用 Number 與 BigInt 來示範超出 Number 最大後會發生什麼事，如果要將一串數字轉成 BigInt 的話只要在數字的最後加上"n"就會變成 BigInt ， Number 雖然可以正常印出數值，但其實數值是錯的!利用 Number.isFinite() 來檢查發現不會變成"false"，所以 JavaScript 並不會在超出最大述職時直接變成無限大，最後 BigInt 並不能直接做列印，要透過 BigInt.toString() 才能列印數值，這點要注意。

參考資料