想学变量的解构赋值？看完这一篇就够了

秒速五厘米 2022-12-14 06:08 197阅读 0赞

### 文章目录 ###

*  序言
 *  数组的解构赋值
 *   *  基本用法
     *  默认值
 *  对象的解构赋值
 *   *  基本用法
     *  默认值
 *  字符串的解构赋值
 *  数值和布尔值的解构赋值
 *  函数参数的解构赋值
 *  圆括号问题
 *   *  不能使用圆括号的情况
     *   *  变量声明语句
         *  函数参数
     *  可以使用圆括号的情况
 *  解构赋值的用途
 *   *  交换变量的值
     *  从函数返回多个值
     *  函数参数的定义
     *  提取JSON数据
     *  遍历Map结构
     *  输入模块的指定方法

# 序言 #

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行复制，这被称为解构（Destructuring）

# 数组的解构赋值 #

## 基本用法 ##

![在这里插入图片描述][20201013111444589.png_pic_center]  
       像上面的例子，可以从数组中提取值，按照对应位置对变量赋值，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值，如果解构不成功，变量的值就等于undefined  
![在这里插入图片描述][20201013164212688.png_pic_center]  
       像上面因为模式并不匹配，所以a,b,c变量并没有解析成功，为undefined  
还有一种情况是不完全解构，即等号左边的模式只匹配一部分的等号右边的数组  
![在这里插入图片描述][20201013170023494.png_pic_center]  
       事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。具体关于Iterator接口，会在后面进行详细解释

## 默认值 ##

解构赋值允许指定默认值，但是默认值只在没有赋到值（即为undefined的情况下）生效，**如果是null，默认值不生效，因为ES6内部是使用严格相等运算符（===）来判断一个位置是否有值的，null不严格等于undefined，默认值是不会生效的**  
![在这里插入图片描述][20201013171228628.png_pic_center]  
       如果默认值是一个表达式，那么这个表达式是惰性求值的，即**只有在用到时才会求值**  
默认值可以引用解构赋值的其他变量，但该变量必须已经声明  
![在这里插入图片描述][20201013171702490.png_pic_center]

# 对象的解构赋值 #

## 基本用法 ##

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值是由它的位置决定的；而对象的属性没有次序，变量必须与属性同名才能取到正确的值，总而言之，**对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量**  
同学们可以看下下面的例子体会一下

let {  bar, foo} = {  foo: 'aaa', bar: 'bbb' };
    foo // 'aaa'
    bar // 'bbb'
    var {  foo: baz} = {  foo: 'aaa', bar: 'bbb' };
    // 等价于baz = 'aaa';

上例中的第二个解构赋值，真正被赋值的是后者，而不是前者，foo是匹配的模式，baz才是变量，所以要**注意对象的解构赋值冒号前的作为模式，只用作匹配，不能被赋值**，下面给个稍微复杂的例子，同学们自己结合上面说的理解一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]  
       这里再次提醒一下，冒号前面的都是模式，不会被解构赋值，只是用于解构赋值的匹配

## 默认值 ##

默认值和数组的解构赋值类似，需要对象的属性值严格等于undefined才会生效

# 字符串的解构赋值 #

字符串也可以解构赋值，这是因为此时字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]

# 数值和布尔值的解构赋值 #

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。  
![在这里插入图片描述][20201013182655798.png_pic_center]  
       因为123不是对象或数组，所以转化为对象，toStr就赋值了Number.toString()方法。  
由于undefined和null无法转为对象，所以对它们进行解构赋值时都会报错  
![在这里插入图片描述][20201013183131483.png_pic_center]

# 函数参数的解构赋值 #

![在这里插入图片描述][20201014092141214.png_pic_center]

# 圆括号问题 #

ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号，但是这条规则实际上不那么容易辨别，处理起来相当麻烦。因此建议，只要有可能，**就不要在模式中放置圆括号**

## 不能使用圆括号的情况 ##

### 变量声明语句 ###

![在这里插入图片描述][20201014092951826.png_pic_center]

### 函数参数 ###

![在这里插入图片描述][20201014093145962.png_pic_center]

## 可以使用圆括号的情况 ##

可以使用圆括号的情况只有一种：**赋值语句的非模式部分**可以使用圆括号

# 解构赋值的用途 #

## 交换变量的值 ##

let x = 1, y = 2;
    [x, y] = [y, x]; //交换x,y的值

## 从函数返回多个值 ##

function example(){ 
    	return [1, 2, 3];
    }
    let [a, b, c] = example();

## 函数参数的定义 ##

function f([x, y, z]){ ...}
    f([1, 2, 3]);

## 提取JSON数据 ##

let jsonData = { 
    	id: 42,
    	status: "OK",
    	data: [867, 5309]
    };
    let { id, status, data: number} = jsonData;

## 遍历Map结构 ##

任何部署了Iterator接口的对象都可以用for…of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值获取键名和键值非常方便

var map = new Map();
    for(let [key, value] of map){ ...}

## 输入模块的指定方法 ##

const { SourceMapConsumer, SourceNode} = require('source-map');

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 2]

[20201013111444589.png_pic_center]: /images/20221123/12d9209cf1544f5eb90163ab15c3bfc6.png
[20201013164212688.png_pic_center]: /images/20221123/86a01c4e0f2d45028df74a17163866c2.png
[20201013170023494.png_pic_center]: /images/20221123/d845afef671f4335b2d13f552dd21b2a.png
[20201013171228628.png_pic_center]: /images/20221123/cf3a654763764542a2aad7aae2c4dab5.png
[20201013171702490.png_pic_center]: /images/20221123/ffc048b2210d40c8bb749b08c4d11db2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/692e10323db741ab94a516e22e6155f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7c2ad2793ffd4ac6bb1ae8462c3d7683.png
[20201013182655798.png_pic_center]: /images/20221123/3d47f23a7d204358b0a54e5d61ae1654.png
[20201013183131483.png_pic_center]: /images/20221123/160b1b47a1734edea2f09dea2334073c.png
[20201014092141214.png_pic_center]: /images/20221123/1fb5c2be5afa432f942aa1e440a1e1fa.png
[20201014092951826.png_pic_center]: /images/20221123/4ed9d1eb8aa64b4ba9f3b3f771a9100d.png
[20201014093145962.png_pic_center]: /images/20221123/03b3c1a393674217bc34e881d0a3d4ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/78054eef566544548e08ffb4021c654e.png