前端小白成长02--解构

解构

• 数组解构（根据位置）

  1. 数组解构要按顺序取值，不需要的要空加逗号
  2. ...三个点语法只能用在数组最后取值
  3. 当解构的length大于被取值的数组length时，后面多出来的解构访问到的就是undefined

  4. 可以给要解构的赋初始默认值，这样取不到值的就不会undefined，会有自己设置的默认值

     
     image
     image

const path = '/fool/bar/baz';
const temp = path.split('/');
console.log(temp[1]);//fool

// 用解构来赋值，和上面结果一样的
const [, temp1] = path.split('/');
console.log(temp1);//fool

//典型的交换变量
var a = 10;
var b = 20;
 
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10

• 对象解构（根据属性）

  1. 对象解构要按属性取值，和属性同名已经存在这个变量，这个变量还是个常量不可更改，此时，我们可以给他重命名

   const obj = { name: 'clover', age: 18 };
   const name = 'happy';
   // const { name } = obj;//报错，name已经存在
   const { name: objName } = obj;
   console.log(objName);//clover
  
  

  2. ...三个点语法只能用在数组最后取值
  3. 当解构属性不存在访问到的就是undefined
  4. 可以给要解构的赋初始默认值，这样取不到值的就不会undefined，会有自己设置的默认值

    const obj = { name: 'clover', age: 18 };
    const { name: objName = 'lucky',sex='女' ,hobby} = obj;
    console.log(objName,sex,hobby);//clover 女 undefined