Deconstruction and assignment of variables

Preface ：

Old books never tire of being read again and again , Read carefully, think carefully, and know yourself

Reference documents ： Deconstruction and assignment of variables · Language sparrow

Deconstruction anomaly

1. Array deconstruction error --- Not ergodic structures

let [a] = 1; //Uncaught TypeError: 1 is not iterable
let [b] = false;//Uncaught TypeError: false is not iterable
let [c] = NaN;//Uncaught TypeError: NaN is not iterable
let [d] = undefined;//Uncaught TypeError: undefined is not iterable
let [e] = null;//Uncaught TypeError: null is not iterable
let [f] = {};//Uncaught TypeError: {} is not iterable

2. Array deconstruction failed --- Cannot match variable , The value is equal to undefined

let [a, b] = [];
console.log("a=>",a) //a=> undefined
console.log("b=>",b) //b=> undefined

3. Object deconstruction error

let {b} = undefined;//Uncaught TypeError: Cannot destructure property 'foo' of 'undefined' as it is undefined.
let {e} = null;//	 Uncaught TypeError: Cannot destructure property 'e' of 'null' as it is null.

4. Object deconstruction failed --- Cannot match variable , The value is equal to undefined

let {a} = 1;  //a=> undefined
let {b} = false;//b=> undefined
let {c} = NaN;//c=> undefined
let {f} = {};//f=> undefined

Deconstruction rename

Object renaming : When using the same scope of the scene to deconstruct variables with the same name (let&const);

//  Rename object variables 
let {name:first,tag} = {name:"555",tag:"1222"};
console.log(name) // 
console.log(first)//555
console.log(tag) // 1222

let {name:second,tag:three} = {name:"666",tag:"777"};
console.log(second)//666
console.log(three) // 77

Deconstruct assignment

Precautions for setting default values :

1. Object setting default value error

let {one = "677"} = null; //Uncaught TypeError: Cannot read properties of null (reading 'one')
let {two = "677"} = undefined; //Uncaught TypeError: Cannot read properties of null (reading 'two')
let { data = []} = null;// Cannot read properties of null (reading 'data')

2. An error is reported when setting the default value of the array

If it is a deconstruction error , The default value cannot be set

let [a] = 1; //Uncaught TypeError: 1 is not iterable
let [b] = false;//Uncaught TypeError: false is not iterable
let [c] = NaN;//Uncaught TypeError: NaN is not iterable
let [d] = undefined;//Uncaught TypeError: undefined is not iterable
let [e] = null;//Uncaught TypeError: null is not iterable
let [f] = {};//Uncaught TypeError: {} is not iterable

summary ：

Because there will be exceptions in Deconstruction , Then the deconstruction assignment of has certain limitations ;

//  Suppose the request interface gets a list data （ It should be an array ）,, The return structure is as follows ：
const data = {
  tableList:[],
  totalCount:0
}
// Use deconstruction to copy 
let { tableList = []} = data;
console.log("tableList",tableList)  // []
// But it will inevitably exist null situation 
const data2 = {
  result:null,
  totalCount:0
}
let { result  = []} = data2;
console.log("result",result)  // result null  Setting the default value is invalid 

//  Because it does not conform to the data structure , We have to order a patch 
const last = result || [];
console.log("last",last)  // result null  Setting the default value is invalid 

// Let's take another look  , No data is returned  null
const { list = []} = null;
console.log("list",list) //Uncaught TypeError: Cannot read properties of null (reading 'list'
//  Direct deconstruction reports an error , At this point, the limitations of deconstruction are reflected .

thus , When deconstructing assignment , Be sure to avoid deconstruction errors .