ES6 结构赋值学习笔记

ES6结构赋值学习笔记

/*
    var    作用域为全局
    let    作用域为代码块内
    const  作用域为块内，且只读 同let 只读的本质为其指向的为一个固定的地址（所以对象要注意）
*/

//数组的解构赋值
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1，2，3

let [, , d] = ['', '', 7]
console.log(d)  // 7

let [e, ...f] = [1, 2, 3, 4, 5]
console.log(e, f) //1 , [ 2, 3, 4, 5 ]
let [g, h, ...i] = [1]
console.log(g, h, i) // 1,undefined, []
// 同理也可以使用生成器来解构赋值
function* fibs() {
    let a = 0;
    let b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth) // 0 1 1 2 3 4 5

//同时解构赋值也允许指定默认值
let [j = true] = []
let [k, l = 1] = [2] //k=2 l=1


// 对象的解构赋值 对象的解构赋值需要指定键，若没有指定key则为undefined
let {m, n} = {m: 1, n: 2} // m=1 n=2
// 对象的解构赋值可以很方便的将现有的对象方法赋值到某一个变量
const {log} = console
log(111)  //这里log就相当于console.log
// 若是变量名与属性名不一致，则必须写为如下
let {log: los} = console
los(222) // 222 正确输出
// 对象的解构赋值其实就是先找到同名属性，然后再赋值给相应的变量，真正赋值的是后者而不是前者
const node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};

let {loc, loc: {start}, loc: {start: {line}}} = node;
console.log(line) // 1
console.log(loc)  // Object {start: Object}
console.log(start) // Object {line: 1, column: 5}
// 在最后一次line对属性解构赋值之中，只有Line是变量，loc和start都是模式，不是变量

// 数组也可以用于解构赋值
{
    let arr = [1, 2, 3];
    let {0: first, [arr.length - 1]: last} = arr;
    console.log(first) // 1
    console.log(last) // 3
}

//字符串也可以用于解构赋值
{
    const [a, b, c, d, e] = 'hello';
    console.log(a, b, c, d, e) //h e l l o
    // 同理也可以对数组的属性方法进行解构赋值
    let {length: len} = 'hello';
    console.log(len) // 5
}

// 可以使用解构赋值来快速清除数组中的 undefined
{
    let arr = [1, undefined, 3]
    arr = arr.map((x = 'yes') => x);
    console.log(arr) // [ 1, 'yes', 3 ]
}

// 用途
{
    // 交换变量
    let x = 1;
    let y = 2;
    [x, y] = [y, x]
    console.log(x, y) // 2,1
}

{
    // 使函数返回多个值
    function example() {
        return [1, 2, 3]
    }

    let [a, b, c] = example()
    console.log(a, b, c) // 1,2,3

    function examples() {
        return {
            foo: 1,
            bar: 2
        };
    }

    let {foo, bar} = examples();
    console.log(foo, bar) // 1,2
}

{
    //提取 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 ]
}

{
    // 便利Map解构
    const map = new Map()
    map.set('first', 'hello')
    map.set('second', 'world')
    for (let [key, val] of map) {
        console.log(key + ' is ' + val)
    }
    // first is hello
    // second is world

    // 若是只想获取键或者值可以如下写法
    for (let [key] of map) {
        //
    }
    for (let [, val] of map) {
        //
    }
}


{
    // 比较常见的地方为导入的时候，会使得输入的语句非常清晰
    const {SourceMapConsumer, SourceNode} = "";
}