ES6学习之-变量的解构赋值

川长思鸟来 2022-01-28 06:11 172阅读 0赞

> 仅做个人学习交流
> 
> 参考文章：[http://es6.ruanyifeng.com][http_es6.ruanyifeng.com]

**前提：**

解构赋值分为：数组、对象、字符串、数值和Boolean、函数参数；

解构赋值就是将目标对象进行分解之后赋值给声明变量的一个过程；

解构所对应的是数组或者对象，如果不是的话，将会自动将其装换为对象（数组是特殊的对象）进行结构；

解构的对象必须是具备 iterrator 接口的对象；

解构可以对复杂的嵌套结构进行解构；

解构过程中使用的大括号“\{....\}”不可以用于行首（会被 JavaScript 解析为块级元素），需要通过圆括号进行隔离；

**数组的解构赋值：**

1、数组的解构是通过 index 属性进行的，有序的和声明变量进行一一赋值，声明变量可以通过默认的（index）进行取值，也可以通过指定位置（属性）进行获取（将数组视为对象）；

// 常规用法
    
    let [x, , y] = [1, 2, 3];
    
    x // 1
    
    y // 3
    
    
    
    // 对象用法
    
    let arr = [1, 2, 3];
    
    let {0 : first, [arr.length - 1] : last} = arr;
    
    first // 1
    
    last // 3

2、解构失败之后将会赋值：undefined；

3、变量值严格等于 undefined 的时候（直接赋值或者解构失败）会触发默认值；

4、默认值可以是变量、常量、函数（函数为惰性函数，即：用到就运算，用不到就不运算）等；

**对象的解构赋值：**

1、对象的取值必须通过完整的属性名进行获取；

2、继承自父类的属性也是可以获取的；

3、默认值的使用和数组的注意点是一致的；

4、其他类型的数据都是特殊类型的对象，所以对于其他数据的包装类型都可以通过其属性名进行取值；

**字符创的解构赋值：**

1、字符串在被解构的时候会装换为一个数组，赋值的过程就和数组的操作是一致的了。

**数值和Boolean值得解构赋值：**

1、数值和Boolean值默认的包装类型都是有tostring方法的，所以会优先转换为对象进行解构；

2、undefined 和 null 由于无法转换为包装类型所以会报错：TypeError Exception

**函数参数的解构赋值：**

这个是讲如何将解构之后的内容赋值到函数参数中去。

1、函数中传值的时候默认将传递参数进行解构，并对参数进行赋值；

2、参数设置的时候是可以设置默认值的，可以对单独的参数进行设值也可以对参数整体进行设值；

3、默认值得使用同数组的解构赋值相同；

**圆括号的使用：**

因为圆括号的使用会导致解析复杂度的升高，所以为了提升性能，在能不使用圆括号的情况下，尽可能的不用。

**以下情况不能使用圆括号：**

1、声明语句中（函数的参数也属于变量的声明范畴）；

2、赋值语句中，圆括号会将赋值语句进行分割；

总结：圆括号有分割区域的作用，任何可能会破坏原有模型结构的语句中都是不能是引用圆括号的。

**可以使用的情况：**

1、不改变原有模型结构的情况下，通俗讲就是他不会破坏原有的结构：可以是结构整体放在圆括号中或者其他情况；

**解构赋值能用来做什么？**

1、交换变量的值

let x = 1;
    
    let y = 2;
    
    
    
    [x, y] = [y, x];

2、接收函数返回的值

// 返回一个数组
    
    function example() {
    
      return [1, 2, 3];}let [a, b, c] = example();
    
    // 返回一个对象
    
    function example() {
    
      return {
    
        foo: 1,
    
        bar: 2
    
    };}
    
    let { foo, bar } = example();

3、函数参数的赋值

// 参数是一组有次序的值
    
    function f([x, y, z]) { ... }f([1, 2, 3]);
    
    // 参数是一组无次序的值
    
    function f({x, y, z}) { ... }f({z: 3, y: 2, x: 1});

4、从 json 数据中取值

let jsonData = {
    
      id: 42,
    
      status: "OK",
    
      data: [867, 5309]};
    
    
    
    let { id, status, data: number } = jsonData;
    
    
    
    console.log(id, status, number);
    
    // 42, "OK", [867, 5309]

5、设定函数参数的默认值

6、遍历 Map 类型的数据（同 json 数据的处理）（任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。）

7、输入模块的指定方法（实话讲：没看明白。。。。）

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

[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/