ES6：解构赋值

本文链接： https://blog.csdn.net/qq_39025670/article/details/100018644

主要内容

数组解构赋值
对象解构赋值
函数解构赋值
字符串、数值和布尔值的解构赋值

一.数组解构赋值

常用的两种写法如下

{
  let a,b;
  [a,b] = [1,2];
  console.log('数组解构赋值1：',a,b); // 1 2
}
 
{
  let a,b,other;
  [a,b,...other] = [1,2,3,4,5];
  console.log('数组解构赋值2：',a,b,other); // 1 2 [3,4,5]
}

我们还可能会有选择的解构和不完全解构

{
  let a,b;
  [a,,b] = [1,2,3];
  console.log('有选择的解构：',a,b); // 1 3
}
 
{
  let a,b;
  [a,b] = [1,2,3,4,5];
  console.log('不完全解构：',a,b); // 1 2 
}

设置默认值

{
  let a,b;
  [a = 0, b = 2] = [1];
  console.log('默认值：',a,b); // 1 2
}

二.对象解构赋值

在数组解构赋值中，我们要按次序排列进行结构，而对象结构不要求次序，只要变量与属性同名即可

{
 let a,b;
 ({a,b} = {a:1,b:2}); // 必须括起来  不然{a,b} = {a:1,b:2}会报错
 console.log('对象解构赋值1：',a,b); // 1 2
}
 
{
 let {a,b,c=3} = {a:1,b:2};
 console.log('对象解构赋值2：',a,b,c); // 1 2 3
}

变量名和属性名不一致的情况还可以这样写

{
 let {a:b, c} = {a:1};
 console.log('变量名属性名不一致：',b,c); // 1 undefined
}

我们能看出，真正被赋值的是后者，而解构赋值是下面形式的简写

{
 let {a:a, b:b} = {a:1,b:2};
 console.log(a,b); // 1 2
}

三.函数解构赋值

我们可以对函数参数和返回值进行解构赋值

{
  function fn([x, y]){
    return x+y
  }
  console.log('函数参数解构赋值：', fn([1, 2])); // 3
}

{
  function fn(){
    return [1,2]
  }
  let a,b;
  [a,b] = fn();
  console.log('函数返回值解构赋值：',a,b); // 1 2
}

四.字符串、数值和布尔值的解构赋值

这一类用得少，了解即可。这里就介绍下字符串解构赋值

// 此时字符串被转换成了类似数组的对象
let [a,b] = 'hi';
console.log(a,b); // h i


// length属性
let {length: len} = 'hi';
console.log(len); // 2

五.补充

上面的数组和对象都只用简单的一层，其实嵌套的数组和对象都可以用解构赋值，只要变量和属性相互对应就好。

六.应用

1.变量值交换（可能出现在面试题中）

let a = 1;
let b = 2;

[a, b] = [b, a];

2.用来封装一些方法的参数