解构,展开运算符及for of遍历

    //数组解构
    console.log('---数组解构---');
    let five_array = [0, 1, 2, 3, 4];
    let [x, y, z] = five_array;
    console.log(z);//return 2

    //对象解构 
    console.log('---对象解构---');
    //https://www.cnblogs.com/hbzyin/p/6524122.html
    let demo = {
        va: "va1",
        vb: "vb1",
    };
    let { va, vb } = demo;
    console.log(`va:${va},vb:${vb}`);//return va:va1,vb:vb1
    //解构剩余的属性值
    let person2 = {
        name2: "Semlinker",
        gender2: "Male",
        age2: 18
    };
    let { name2, ...rest } = person2;
    console.log(`name2:${name2},age:${rest.age2}`);//return name2:Semlinker,age:18
    // 解构时并重命名
    let { gender2: gender3, ...rest2 } = person2;
    console.log(`name2:${rest2.name2},age:${rest2['age2']},gender2:${gender3}`);//return name2:Semlinker,age:18,gender2:Male
    // 解构并声明类型
    let demo3 = { a: 1, b: 2, c: 3 }
    let { a: a2, b: b2 }: { a: number, b: number } = demo3;
    console.log(`a:${a2},b:${b2}`);//return a:1,b:2

    // 数组展开运算符
    console.log('---数组展开运算符---');
    let one_array = [0, 1];
    let two_array = [...one_array, 2, 3, 4];
    console.log(two_array[3]);//return 3

    // 对象展开运算符
    console.log('---对象展开运算符---');
    let person = {
        name: "Semlinker",
        gender: "Male",
        address: "Xiamen",
    };
    let personWithAge = { ...person, age: 33 };
    console.log(personWithAge.name);//return Semlinker

    // 数组遍历
    console.log('---数组遍历---');
    let colors: string[] = ["red", "green", "blue"];
    for (let i of colors) {
        console.log(i);//return "red", "green", "blue"
    }
    // Map遍历
    console.log('---Map遍历---');
    let myMap = new Map([["key1", "value1"],
        ["key2", "value2"]
    ]);
    for (let i of myMap) {
        console.log(i);//return ["key1", "value1"]  ["key2", "value2"]
    }

参考

https://www.cnblogs.com/hbzyin/p/6524122.html

posted @ 2021-08-31 23:36  wl夏白  阅读(87)  评论(0)    收藏  举报