解构Destructuring

问题：1, 2, 3分别存入a, b, c

// 方法一：常规
const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a, b, c);
// 方法二：解构赋值
const [a, b, c] = [1, 2, 3]
console.log(a, b, c);

是结构化赋值

数组解构

const [a, b] = [];
//相当于
const [a, b] = [undefined,undefined]; 

模式匹配

又叫结构匹配
例如：右边数组，左边也要是数组

const [a, b, c] = [1, 2, 3]

按索引匹配

1）从左到右一一对应,a取到了1

 const [a] = [1, 2, 3]

2）用逗号跳过不想要的
c取到了3

 const [, , c] = [1, 2, 3]

应用-交换变量的值

let x = 1, y = 2;
// 1.一般地
let temp = x;
x = y;
y = temp;
// 2.解构赋值
[x, y] = [y, x];

对象解构

模式匹配

又叫结构匹配
例如：右边对象，左边也要是对象

const {} = {} ;

按属性名匹配

1）属性名的顺序可不对应

const { age, username } = { username: 'Alex', age: 18 };

2）完整写法（属性名：属性值）

const { age: age, username: username } = 
{ username: 'Alex', age: 18 };

3）属性值名可自定义

const { age: age, username: uname } = { username: 'Alex', age: 18 };

其他解构

默认包装为数组/对象进行解构赋值
特别地,
undefined、null不可包装为数组/对象，故不能解构赋值

类数组-包装为对象

类数组：不能用数组的相关方法
但可按数组进行解构赋值

arguments

function func() {
    const [a, b] = arguments;
    console.log(a, b);
}
func(1, 2);

NodeList

<p>我</p>
<p>是</p>
<p>谁</p>
<script>
    const [p1, p2, p3] = document.querySelectorAll('p');
    console.log(p1, p2, p3);
</script>

字符串-包装为数组/对象

是类数组，也是类对象
类数组：无自己的属性和方法,继承数组原型的属性和方法
类对象：无自己的属性和方法,继承对象原型的属性和方法

1.按数组

const [a, b, , c] = 'hello';
console.log(a, b, c);

2.按对象

const { 0: a, 1: b, length } = 'hello';
console.log(a, b, length);

数值&布尔-包装为对象

是类对象,无自己的属性和方法, 继承了toString
手动包装为对象

 console.log(new Number(123));

1.数值
继承对象原型的toString方法

const { toString } = 123;
console.log(toString);

2.布尔

const { toString } = true;
console.log(toString);

嵌套解构

数组&数组嵌套

const [a, [, , b], c] = [1, [2, 4, 5], 3]
console.log(a, b, c);//1,5,3

对象&数组嵌套

const obj = {
   x: 1,
   y: [2, 3, 4],
   z: {
       a: 5,
       b: 6
   }
};
// 取数组里的3
const { y: [, yy] } = obj;
// 取数组里的2,3,4
const { y, y: [, yy], y: [,,yy] } = obj;

对象&对象嵌套

从最外层对象定位，一直到需要取值的层，层之间冒号:隔开
2层

const obj = {
  x: 1,
  y: [2, 3, 4],
  z: {
      a: 5,
      b: 6
  }
};
//写法1：
const {z: { b }} = obj;
console.log(b);//6
//写法2：
const { z } = obj;
console.log(z.b);

3层

let node = {
    personalInfo: {
        basicInfo: {
            name: 'mike',
            age: 25
        }
    },
    level: 3
};
let { personalInfo: { basicInfo } } = node;
console.log(basicInfo.name);// mike

4层

let node = {
    personalInfo: {
        basicInfo: {
            name: {
                firstName: 'mike',
                lastName: 'deep'
            },
            age: 25
        }
    },
    level: 3
};
let { personalInfo: {basicInfo: {name}} } = node;
console.log(name.firstName);// mike

参数解构

可命名参数

对象作为参数的解构

1.一般地

const logPersonInfo = user =>
console.log(user.username, user.age);
logPersonInfo({ username: 'Alex', age: 18 });

2.对象作为参数

const logPersonInfo = ({ age, username }) => 
console.log(username, age);
logPersonInfo({ username: 'Alex', age: 18 });

3.设置默认值

const logPersonInfo = ({ age = 0, username = 'ZhangSan' }) => 
console.log(username, age);
logPersonInfo({});
console.log(username, age);//ZhangSan 0

数组作为参数的解构

1.一般地

const add = arr => arr[0] + arr[1];
console.log(add([1, 2]));

2.数组作为参数

const add = ([x, y]) => x + y;
console.log(add([1, 2]));

初始化&解构

同时初始化和解构

 let { x } = { x: 1 };

先初始化再解构

需在圆括号中进行;
因浏览器会混淆对象的花括号，误解为代码块等

let x = 2;
({ x } = { x: 1 });

特别地，
2.1基本数据类型不可先初始化，再解构赋值
因为基本数据类型是以重新赋值方式修改值

const x = 2;
({ x } = { x: 1 });//报错

2.2复杂数据类型可先初始化，再解构赋值
因为复杂数据类型不是以重新赋值方式修改值，而是找到对象的属性，改变属性值
例如：数组

const x = 2;
 [x] = [1];