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

 在 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

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

前言

  最近在查詢資料時發現 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

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