注意 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()

相關文章與資料

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

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

 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

相關文章與資料

在 JavaScript 使用 in

hasOwnProperty() 與 hasOwn() 的差異

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