解构赋值在实际开发中的应用场景

交换变量的值

let a = 2;
let b = 3;
let c = 4;
[a, b, c] = [b, c, a]; // a、b、c 已经声明了，这里就不用再添加 let 等关键字声明了
console.log(a, b, c); // 3 4 2

从函数返回多个值

返回一个数组

const foo = () => [5, 6, 7];
let [x, y, z] = foo(); // 函数返回结果一个数组，对该数组进行解构，获取里面的每个值
console.log(x, y, z); // 5 6 7

返回一个对象

const fun = () => ({
  foo: 2,
  bar: 3,
});

let { foo, bar } = fun(); // 函数返回结果一个对象，对该对象进行解构，获取里面的每个值
console.log(foo, bar); // 2 3

函数参数的解构

可以方便地将一组参数与变量名对应起来

如果传入函数的参数是数组时，可以对参数进行解构，获取数组中每一项的值

function f([a, b, c]) {
  // 相当于  let  [a, b, c]=[5, 6, 7]
  console.log(a, b, c);
}
f([5, 6, 7]); // 5 6 7

传入函数的参数是对象时，可以对参数进行解构，获取对象中对应的属性值

function f({ a, b, c }) {
  // 相当于 { a, b, c }={ c: 5, a: 6, b: 7 }
  console.log(a, b, c); // 6 7 5
}
f({ c: 5, a: 6, b: 7 });