重学ES6 解构

浅浅的花香味﹌ 2022-10-01 08:50 130阅读 0赞

解构：ES6按照一定模式，从数组和对象中提取值，然后对变量进行赋值。

## 数组解构 ##

在之前，我们声明变量，都是这样的

let a = 1
    let b = 2
    let c = 3
    复制代码

那么，运用解构，我们可以进行这样的赋值

let [a, b, c] = [1, 2, 3]
    复制代码

两段代码的结果是一样的。

那难道只有这样吗？？？当然不是

当我们想快速的取出某些变量时，**只要等号两边模式相同**，左边变量就会被右边赋予相应的值。

我们现在有这样一组数据，是一个二维数组,我们想直接拿到二维数组里面的值

//[1,[2,3],4,5]
    let [a, [b, c], d, e] = [1,[2,3],4,5]
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // 4
    console.log(e) // 5
    复制代码

解构也不一定就能成功，也是有前提的。

//如下就会失败
    let [foo] = 1
    let [foo] = false
    let [foo] = undefined
    let [foo] = null
    let [foo] = {}
    //前五种是 转为对象之后 不具备 Lterator 接口
    //最后一个 是本身就不具备 Lterator 接口
    复制代码

> Lterator 接口：负责遍历和访问元素的接口

### 数组解构默认值 ###

我们可能在一些情况下，得不到要解构的部分，要采取默认值来填充一些变量。解构赋值也允许我们**指定默认值**。

let [x = 1] = []
    //正常情况下，解构是会失败的，但是赋予了默认值之后，x即为1
    复制代码

> 有一点需要注意：只有当 **一个数组元素 ==== undefined**时，默认值才会生效

所以，以上代码变成

// 默认值不会生效~
    let [x = 1] = [null]
    // x: null 
    
    
    let [x = 1] = [undefined]
    // x: 1
    let [x = 1] = []
    // x: 1
    复制代码

> 默认值如果是一个表达式，只有当用到这个表达式时，才会去求值。

function g() {
      console.log('get val')
      return 'ok'
    }
    
    let [ x = g()] = []
    
    let [ y = g()] = [1]
    console.log(x) // 'ok'
    console.log(y) // 1 这里是能够通过解构直接拿到值的
    复制代码

## 对象的解构赋值 ##

先来一个例子看看

let { foo, bar } = { foo: 'hello', bar: 'world'}
    console.log( foo ) // hello
    console.log( bar ) // world
    复制代码

这也是一个”模式“，和之前的数组模式类似

当然，数组解构可以失败，对象解构也是一样的

let { foo } = { bar: 'hahaha'}
    console.log( foo ) // undefined
    复制代码

如果没有对应的同名属性，那么解构失败，变量值为 undefined

### 赋值到某个变量 ###

通常我们在使用某个对象的某个方法时，例如`console.log`,如果使用的频率相对较高，那么我们也可以利用对象解构来简化方法的调用

let { log } = console
    log( 'hello world' )
    复制代码

在一些情况下，我们也许有一些别的需求，给方法 设定一个 别名，对应解构出来的某个方法，还是上面的例子，将 log 改名称 print

let { log:print } = console
    print( 'hello world' ) // 'hello world'
    复制代码

### 对象解构的默认值 ###

var { x= 3} = {}
    x //3
    
    var { y: z = 10 }
    z //10
    复制代码

这里也是要求 对象的属性 严格等于 === undefined 时，默认值才能生效

var {x = 3} = {
        x: undefined};
    x // 3
    
    var {x = 3} = {
        x: null};
    x // null
    复制代码

## 字符串的解构赋值 ##

const [a,b,c,d,e] = 'hello'
    a // 'h'
    b // 'e'
    c // 'l'
    d // 'l'
    e // 'o'
    
    let { length : len } = 'hello'
    len // 5
    复制代码

## 函数参数的解构赋值 ##

> 注意！！！！如果传递了参数那么实际上就是要为传递的实参进行解构赋值，当没有传递实参的时候，才会对函数参数的默认值进行解构赋值！！！

[[1, 2], [3, 4]].map(([a, b]) => a + b);
    // [3, 7]
    复制代码

### 关于默认值 ###

## 用途 ##

说了半天，也该有点用途了吧

### 交换变量的值 ###

let x = 1
    let y = 2
    [x, y] = [y, x]
    复制代码

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

function example() {
        return [1, 2, 3]
    }
    
    let [a, b, c] = example()
    复制代码

### 函数参数定义 ###

//参数有顺序，用数组进行解构
    function f([x, y, z]){}
    f([1, 2, 3])
    //参数无顺序，用对象进行解构
    function f({x, y, z}) { ... }
    f({
        z: 3, y: 2, x: 1});
    复制代码

### 提取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]
    复制代码

### 函数参数的默认值 ###

jQuery.ajax = function (url, { async = true, beforeSend = function () {},
      cache = true,
      complete = function () {},
      crossDomain = false,
      global = true,
      // ... more config
    } = {}) { //默认解构为{},这样当传递实参进来的时候，属性为 undefined 就会 得到默认解构的值
      // ... do stuff
    };
    复制代码

### 遍历 Map 解构 ###

const map = new Map()
    map.set('first','hello')
    map.set('second','world')
    for (let [key, value] of map) { //每一个元素都是 [key,value] 的结构
        console.log(key + "is" + value)
    }
    
    // 获取键名
    for (let [key] of map) {
      // ...
    }
    
    // 获取键值
    for (let [,value] of map) {
      // ...
    }
    复制代码

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

const { SourceMapConsumer, SourceNode } = require("source-map");
    复制代码

转载于:https://juejin.im/post/5cad3576f265da039257c539