变量的解构赋值

短命女 2022-12-18 08:59 216阅读 0赞

# 变量的解构赋值 #

> ES6 允许按照一定模式, 从数组和对象中提取值, 对变量进行赋值, 这被称为解构(Destructruing)

## 一. 数组的解构赋值 ##

1.  基本用法
    
        let [foo, [[bar], baz]] = [1, [[2],3]]; //foo - 1 bar - 2 baz - 3 
        let [x, ,y] = [1, 2, 3]; //x - 2 y - 3
        let [head, ...tail] = [1,2,3,4]; //head - 1 tail - [2,3,4]
        let [x, y, ...z] = ['a'] // x - a y - undefined z - []
    
     *  如果解构不成功, 变量的值就等于undefined
     *  不完全解构, 等号左边的模式, 值匹配一部分的等号右边的数组, 这种情况下, 解构依然可以成功.
     *  如果等号的右边不是数组, 那么将会报错.
        
            //报错
            let [a] = 1;
            let [a] = false;
            let [a] = NaN;
            let [a] = undefined;
            let [a] = null;
            let [a] = { };
     *  对于Set结构, 也可以使用数组的解构赋值
        
        > Set 对象允许你存储任何类型的唯一值, 无论是原始值或者是对象引用
        
            let [x,y,z] = new Set(['a','b','c']);
            x // "a"
2.  默认值
    
        let [a = 1] = []
        a // 1
        let [a, b = 2] = [1]; // a=1, b=2
        let [a, b = 2] = [1, undefined]; // a=1, b=2
    
     *  ES6内部使用严格相等运算符(===) , 判断一个位置是否有值. 所以, 只有当一个数组成员严格等于undefined, 默认值才会生效.
        
            let [a = 1] = [undefined]; //a=1
            let [b = 2] = [null]; //x= null
     *  默认值是表达式: 如果默认值是一个表达式, 那么这个表达式是惰性求值的, 即只有在用到的时候, 才会赋值
        
            function f(){ 
                console.log('a')
            }
            
            let [a = f()] = [1]
            
            //因为x能取到值, 所以函数f根本不会执行
            //等价于
            let x;
            if([1][0] === undefined){ 
                x = f()
            }else{ 
                x = [1][0]
            }
     *  默认值可以引用解构赋值的其他变量, 但该变量必须已经声明
        
            let [a = 1, b = a] = []; // a=1, b=1
            let [a = 1, b = a] = [2]; // a=2, b=2
            let [a = 1, b = a] = [1,2]; // a=1, b=2
            let [a = b, b = 1] = []; // 报错

## 二. 对象的解构赋值 ##

1.  基本用法
    
    对象的解构与数组的解构不同, 数组的元素是按次序排列的, 变量的取值是由它的位置决定的; 而对象的属性没有次序, 变量必须与属性同名, 才能取到正确的值. 如果解构失败, 变量的值变为undefined.
    
        let {  a, b, c} = { a: 1, b: 2};
        a // 1
        b // 2
        c // undefined
    
     *  对象的解构赋值可以将现有对象的方法, 赋值到某个变量
    
        //将Math对象的对数,正弦,余弦三个方法, 赋值到对应的变量上
        let {  log, sin, cos} = Math
        
        //将console.log赋值到log变量
        let {  log } = console;
        log('hello') // hello
    
     *  如果变量名与属性名不一致
    
        let obj = {  a: 1, b: 2};
        let { a: c, b: d} = obj
        c // 1
        d // 2
    
    这说明了, 对象的解构赋值是下边的简写
    
        let {  a:a, b:b } = {  a:1, b:2}
    
    也就是说, 对象的解构赋值的内部机制, 是先找到同名属性, 然后再赋值给对应的变量, 真正被赋值的是后者, 而不是前者.
    
     *  解构也可以用于嵌套结构的对象
    
        let obj = { 
            p: [
                'Hello',
                {  y: 'World' }
            ]
        };
        
        let {  p: [x, { y}] } = obj
        x // Hello
        y // World
    
        let obj = { 
            p: [
                'Hello',
                {  y: 'World' }
            ]
        };
        
        let {  p, p: [x, { y}] } = obj
        x // Hello
        y // World
        p // ['Hello', { y: 'World'}]
    
        const node = { 
            loc: { 
                start: { 
                    line: 1,
                    column: 5
                }
            }
        };
        let {  loc, loc: { start}, loc: { start: { line}} } = node;
        line //1
        start //Object {line: 1, column: 5}
        loc //Object {start:Object}
    
    最后一次对line属性的解构赋值之中, 只用line是变量, loc和start都是模式不是变量.
    
     *  嵌套赋值的例子
    
        let obj = { };
        let arr = [];
        ({  foo: obj.prop, bar: arr[0] } = {  foo: 123, bar: true});
        obj // { prop: 123}
        arr // [true]
2.  默认值
    
        var { x, y = 5} = { x: 1};
        x // 1
        y // 5
        var { x: y = 3} = { };
        y // 3
        var { x: y = 3} = {  x: 5 };
        y // 5
    
    默认值生效的条件是, 对象的属性值严格等于undefined
3.  注意点
    
    (1) 如果要将一个已经声明的变量用于解构赋值, 必须非常小心.
    
        //错误写法
        let x;
        { x} = { x:1};
        
        //正确写法
        let x;
        ({ x} = { x: 1});
    
    (2) 解构赋值允许等号左边的模式之中, 不放置任何变量名.
    
    (3) 由于数组本质是特殊的对象, 因此可以对数组进行对象属性的解构
    
        let arr = [1, 2, 3];
        let { 0: first, [arr.length - 1] : last} = arr;
        first // 1
        last // 3

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

1.  字符串被解构赋值时, 被转换成了一个类似数组的对象
    
        const [a,b,c,d,e] = 'hello'
        a // h
        b // e
        c // l
        d // l
        e // o
2.  类似数组的对象都有一个length属性, 因此还可以对这个属性解构赋值
    
        let { length: len} = 'hello'
        len // 5

## 四. 数值和布尔值的结构赋值 ##

1.  解构赋值时, 如果等号右边是不数值和布尔值, 则会先转为对象
    
        let {  toString: s } = 123
        s === Number.prototype.toString // true
        
        let {  toString: s } = true;
        s === Boolean.prototype.toString // true
2.  解构赋值时, 由于undefined和null无法转为对象, 所以对他们进行解构赋值都会报错.

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

1.  例子
    
        function add([x,y]){ 
            return x + y;
        }
        add([1,2]); //3
        
        [[1,2],[3,4]].map(([a,b]) => a + b);
        //[3,7]

## 六. 圆括号问题 ##

以下三种解构赋值不得使用圆括号:

1.  变量声明语句
    
        let [(a)] = [1]
2.  函数参数
    
        function f([(z)]) { 
            return z;
        }
3.  赋值语句的模式
    
        ([a]) = [5];

可以使用圆括号的情况

[(b)] = [3];
    ({ p: (b)} = { });
    [(parseInt.prop)] = [3];

## 七. 用途 ##

1.  交换变量的值
    
        let x = 1
        let y = 2
        [x,y] = [y,x]
2.  从函数返回多个值
    
    函数只能返回一个值, 如果要返回多个值, 只能将他们放在数组或对象里返回.
    
        //返回一个数组
        function f(){ 
            return [1,2,3];
        }
        let [a,b,c] = f();
        
        //返回一个对象
        function f(){ 
            return { 
                a: 1,
                b: 2
            };
        }
        let {  a, b } = f();
3.  函数参数的定义
    
        function f([x, y, z]) { ...}
        f([1,2,3]);
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.  函数参数的默认值
    
        jQuery.ajax = function (url, { 
          async = true,
          beforeSend = function () { },
          cache = true,
          complete = function () { },
          crossDomain = false,
          global = true,
          // ... more config
        } = { }) { 
          // ... do stuff
        };
6.  遍历Map结构
    
        const map = new Map();
        map.set('first', 'hello');
        map.set('second', 'world');
        
        for (let [key, value] of map) { 
          console.log(key + " is " + value);
        }
        // first is hello
        // second is world
    
    如果只想获取键名, 或者只想获取键值
    
        //获取键名
        for(let [key] of map) { 
            
        }
        //获取键值
        for(let [,value] of map) { 
            
        }
7.  输入模块的指定方法
    
    加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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