解构

作者: 懂会悟 | 来源:发表于2020-09-24 08:20 被阅读0次

    1、const

    const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。


    2、变量的解构赋值

    解构赋值: 按照一定模式,从数组和对象中提取值,对变量进行赋值,

    常用的结构赋值包括:

    • 数组结构
    • 对象结构
    • 字符结构

    3、数组结构

    数组结构:从数组中提取值,按照对应位置,对变量赋值。

    let [a, b, c] = [1, 2, 3]
    // 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
    
    let [foo, [[bar], baz]] = [1, [[2], 3]]
    
    // foo: 1 bar: 2 baz: 3
    

    如果解构不成功,变量的值就等于undefined

    let [foo] = [];
    let [bar, foo] = [1];
    // 以上两种情况都属于解构不成功,foo的值都会等于undefined。
    

    另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

    let [x, y] = [1, 2, 3]
    x 1
    y 2
    
    let [a, [b], d] = [1, [2, 3], 4]
    a  1
    b  2
    d  4
    

    4、对象的解构赋值

    <font size='4'>
    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值

    let { bar, foo } = { foo: "aaa", bar: "bbb" };
    foo "aaa"
    bar  "bbb"
    
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz  undefined
    

    对象的解构赋值是下面形式的简写

    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }
    

    对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者


    5、字符串解构赋值

    字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象

    const [a, b, c, d, e] = 'hello';
    a "h"
    b "e"
    c "l"
    d "l"
    e "o"
    

    5、解构赋值常见的用途

    • 交换变量的值
    let x = 1
    let y = 2
    [x, y] = [y, x]
    
    // x: 2,y:1
    
    • 从函数返回多个值
    // 返回一个数组
    
    function example() {
      return [1, 2, 3]
    }
    let [a, b, c] = example()
    
    // 返回一个对象
    
    function example() {
      return { foo: 1, bar: 2 }
    }
    let { foo, bar } = example()
    
    
    • 函数参数的定义
    // 参数是一组有次序的值
    function f([x, y, z]) { ... }
    f([1, 2, 3])
    
    // 参数是一组无次序的值
    function f({x, y, z}) { ... }
    f({z: 3, y: 2, x: 1})
    
    • 变量赋值
    let jsonData = { id: 42, status: "OK", data: [867, 5309] }
    let { id, status, data } = jsonData
    console.log(data)
    // [867, 5309]
    const { SourceMapConsumer, SourceNode } = require("source-map")
    

    相关文章

      网友评论

          本文标题:解构

          本文链接:https://www.haomeiwen.com/subject/pqxosktx.html