ES6解构赋值

认识解构赋值
const arr = [3,4,5];
const a = arr[0]; const b = arr[1]; const c = arr[2];
console.log(a, b, c);// 3 4 5
//通过以下的方式进行赋值 const [d,e,f]=[2,34,5];
//数组的解构赋值 console.log(d,e,f);//2 34 5
什么是解构赋值? 解析某一数据的解构，将我们想要的东西提取出来，赋值给变量或者常量。
数组的解构赋值原理

1. 模式匹配、或结构匹配
   [] = [1, 2, 3];//左边是数组，那么右边也是数组
2. .索引值相同的完成赋值
   const [a, b, c] = [1, 2, 3]; console.log(a, b, c);
3. 不取的，可以直接用逗号跳过
   const [,c]=[1, 2, 3];//不取的数据可以用，逗号跳过 console.log©;//3 const [a,b,c]=[1,[2,4,5],3]; console.log(a,c);//b为一个数组
   数组的解构赋值的默认值
4. 默认值的基本用法
   const [a,b]=[]; console.log(a,b);//undefined undefined const [a=2,b=4]=[]; console.log(a,b);//2 4 const [c=2,d=4]=[3,5]; console.log(c,d);
5. 默认值生效的条件只有当一个数组成员严格等于（===）undefined 时，对应的默认值才会生效
   const [a=1,b=3]=[3,2]; console.log(a,b);//3 2 const [a=1,b=3]=[3,null]; console.log(a,b);//3 null // 数组成员严格等于undefined const [a = 1, b = 3] = [3, undefined];//3 3 console.log(a, b);//3 3
6. 默认值表达式 如果默认值是表达式，默认值表达式惰性求值的
   const fun1 = () => { console.log(“我被执行了”); return 3; } const [a = fun1()] = [1]; //1 const [b = fun1()] = [];//会执行fun1函数 console.log(b);
   数组解析赋值的应用 1.常见的类数组的解构赋值 ( arguments NodeList)
   function fun1() { console.log(arguments);//类数组对象，接受函数的参数 const [a, b] = arguments;//对arguments进行解构 console.log(a, b);//2,57 } fun1(2, 57, 4);
   2.函数参数的解构赋值
   const array = [1, 4]; const add=arr=>arr[0]+arr[1]; console.log(add(array)); //函数参数的解构 const add = ([x,y])=>x+y; console.log(add(array));
   3.交换变量的值
   let x=2,y=3; [x,y]=[y,x]; console.log(x,y)
   对象解构赋值的原理 1.模式（结构）匹配 2.属性名相同的完成赋值 3.属性名不相同 取别名 Uname Sex为别名 对象解构赋值的注意事项
7. 默认值的生效条件：对象的属性值严格等于undefined时。对应的默认值才会生效
   const person = { name: ‘xiaoming’, sex: ‘female’, address: ‘sichaun’ } const { name: Uname } = person; console.log(Uname);//将person对象的name属性解构出来并取别名 const { age = 12 } = person;//解构一个不存在的属性age==>undifined console.log(age);//12 默认值

2.默认值表达式==>如果默认值是表达式，默认值表达式是惰性求值的
3.将一个已经声明的变量用于解构赋值用
4.可以取到继承的属性 对象解构赋值的应用
1.函数参数的解构赋值
//创建一个箭头函数 const logPersonInfor = user => console.log(user.userName, user.age); //调用logPersonInfor函数，并传入一个user对象 logPersonInfor({ userName: ‘zhangsan’, age: 12 })//创建一个箭头函数，形参部分直接解构 const logPerson = ({ name, sex, address }) => console.log(name, sex, address); const person = { name: ‘xiaoming’, sex: ‘female’, address: ‘sichaun’ } //函数调用的时候直接传入一个对象 logPerson(person);//传入对象
2. 复杂的嵌套
let obj = { x: 1, y: { a: ‘a’, b: ‘b’ }, z: [2, 54, 7] } //解构赋值 获取 z中的54 和z const { z: zarr, z: [, zz] } = obj; console.log(zarr, zz);//zarr 解构出来的是一个数组 //zz 解构的是z中数组的54

1. 字符串的解构赋值
   // 数组形式的解构赋值 const [a,b,c]=‘hello’; console.log(a,b,c); // 对象形式的解构赋值 const {0:a,1:b,2:c}=‘hello’; console.log(a,b,c);
2. 数值和布尔值的解析赋值
   //对数值进行解构赋值 const {a}=new Number(123); console.log(a);//undefined //对布尔值进行解构赋值 const {a,toString}=true;//进行解构赋值之前 先将true转换为对象 然后对对象进行解构赋值 console.log(a,toString);//undefined 可以取到toString这个函数
3. undefined 和null 的解构赋值
   由于undefined和null无法转换为对象，所以对他们进行解构赋值。都会报错
   const {toString}=undefined;//报错 // console.log(toString);//报错，因为undefined无法转换为对象，解构赋值的时候报错 const { toString } = null;//报错