解構賦值有層級的物件

前言

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

內容

  範例如下

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 ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

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

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

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

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

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

前言

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

內容

  範例如下

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 ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

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

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

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

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

前言

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

內容

  範例如下

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 ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

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

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

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

前言

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

內容

  範例如下

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 ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

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

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

前言

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

內容

  範例如下

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 ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

 利用解構賦值來交換變數

前言

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

內容

  範例如下

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 ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

 將解構賦值用於物件

前言

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

內容

  範例如下

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

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

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值