变量的解构赋值

前言：

旧书不厌百回读，熟读精思子自知

参考文档：变量的解构赋值 · 语雀

解构异常

1.数组解构报错 --- 不是可遍历的结构

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.数组解构失败 --- 匹配不到变量，值等于undefined

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

3.对象解构报错

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.对象解构失败 --- 匹配不到变量，值等于undefined

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

解构重命名

对象重命名:使用场景同一作用域解构同名变量时(let&const)；

// 对象变量重命名
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

解构赋值

设置默认值注意事项:

1.对象设置默认值报错

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.数组设置默认值报错

如果是解构报错，则无法进行设置默认值

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

总结：

由于解构会有异常情况， 则使的解构赋值存在一定的局限性；

// 假设请求接口获取一个列表数据（应该是一个数组），，返回结构如下：
const data = {
  tableList:[],
  totalCount:0
}
//使用解构复制
let { tableList = []} = data;
console.log("tableList",tableList)  // []
//但是难免会存在null情况
const data2 = {
  result:null,
  totalCount:0
}
let { result  = []} = data2;
console.log("result",result)  // result null 设置默认值失效

// 因为不符合数据结构，得在定一个补丁
const last = result || [];
console.log("last",last)  // result null 设置默认值失效

//再来看一个情况 ,没有数据返回的是 null
const { list = []} = null;
console.log("list",list) //Uncaught TypeError: Cannot read properties of null (reading 'list'
// 直接解构报错了，此时解构的局限性就体现出来了。

由此，解构赋值的时候，一定要避免解构报错。