Skip to content

Latest commit

 

History

History
245 lines (184 loc) · 4.65 KB

变量的解构赋值.md

File metadata and controls

245 lines (184 loc) · 4.65 KB
Raw

变量的解构赋值

1、数组的解构赋值

  1. 基本用法
    let [a,b,c]=[1,2,3];
    console.log(a);//1
    console.log(b);//2
    console.log(c);//3
    
    let [head, ...tail] = [1, 2, 3, 4,];
    console.log(head);//1
    console.log(tail);//[2,3,4]
    
    let {a,b,c}={a:1,b:2,c:3};
  1. 默认值
    let [x,y='b']=['a'];
    console.log(x);//a
    console.log(y);//b
    
    let [foo=true]=[];
    foo //true

2、对象的解构赋值

实例一：基本用法

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

实例二：对象的结构指定默认值

    var {x = 3} = {};
    x // 3
    
    var {x, y = 5} = {x: 1};
    x // 1
    
    y // 5
    var {x:y = 3} = {};
    y // 3
    
    var {x:y = 3} = {x: 5};
    y // 5
    
    var { message: msg = 'Something went wrong' } = {};
    msg // "Something went wrong"

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

4、数值和布尔值的解构赋值

意义不大的。。。。。。

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

5、函数参数的解构赋值

实例1：基本使用

function add([x, y]){
    return x + y;
}
add([1, 2]); // 3

实例2：使用默认赋值

function move({x = 0, y = 0} = {}) {
    return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

实例3：

function move({x, y} = { x: 0, y: 0 }) {
    return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

6、使用

实例1：交换变量 下面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

[x, y] = [y, x];

实例2：从函数返回多个值

    function example() {
        return [1, 2, 3];
    }
    var [a, b, c] = example();
    
    //  返回一个对象
    function example() {
        return {
            foo: 1,
            bar: 2
        };
    }
    var { 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 数据 (非常重要的用途)

    var 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 结构 (非常重要的用途)

    var 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");