最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • Typescript 中的 ESestructuring

    typescript 中的 esestructuring

    解构使得将数组中的值或对象中的属性解包为不同的变量成为可能。

    优点

    • 使代码简洁且更具可读性。
    • 我们可以轻松避免重复的解构表达式。

    一些用例

    1. 从对象、数组中获取变量值。
    let array = [1, 2, 3, 4, 5];
    let [first, second, ...rest] = array;
    console.log(first, second, rest);
    //expected output: 1 2 [3,4,5]
    
    let objectfoo = { foo: 'foo' };
    let { foo: newvarname } = objectfoo;
    console.log(newvarname);
    //expected output: foo
    
    // nested extraction
    let objectfoobar = { foo: { bar: 'bar' } };
    let { foo: { bar } } = objectfoobar;
    console.log(bar);
    //expected output: bar
    
    1. 仅更改对象中所需的属性。
      let array = [
        { a: 1, b: 2, c: 3 },
        { a: 4, b: 5, c: 6 },
        { a: 7, b: 8, c: 9 },
      ];
      let newarray = array.map(({ a, ...rest }, index) => ({
        a: index + 10,
        ...rest,
      }));
      console.log(newarray);
    /* expected output: [
      {
        "a": 10,
        "b": 2,
        "c": 3    
      },
      {
        "a": 11,
        "b": 5,
        "c": 6
      },
      {
        "a": 12,
        "b": 8,
        "c": 9
      }
    ]*/
    
    1. 将参数中的值提取到独立变量中。
    // object destructuring:
      const objectdestructure = ({ property }: { property: string }) => {
        console.log(property);
      };
      objectdestructure({ property: 'foo' });
      //expected output: foo
    
      // array destructuring:
      const arraydestructure = ([item1, item2]: [string, string]) => {
        console.log(item1 , item2);
      };
      arraydestructure(['bar', 'baz']);
      //expected output: bar baz
    
    
    // assigning default values to destructured properties:
      const defaultvaldestructure = ({
        foo = 'defaultfooval',
        bar,
      }: {
        foo?: string;
        bar: string;
      }) => {
        console.log(foo, bar);
      };
      defaultvaldestructure({ bar: 'bar' });
    //expected output: defaultfooval bar
    
    1. 从对象中获取动态键值。
    const obj = { a: 1, b: 2, c: 3 };
    const key = 'c';
    let { [key]: val } = obj;
    console.log(val);
    //expected output: 3
    
    1. 交换值。
    const b = [1, 2, 3, 4];
    [b[0], b[2]] = [b[2], b[0]]; // swap index 0 and 2
    console.log(b);
    //expected output : [3,2,1,4]
    
    1. 获取对象的子集。
    const obj = { a: 5, b: 6, c: 7 };
    const subset = (({ a, c }) => ({ a, c }))(obj);
    console.log(subset); 
    // expected output : { a: 5, c: 7 }
    
    1. 进行数组到对象的转换。
    const arr = ["2024", "17", "07"],
          date = (([year, day, month]) => ({year, month, day}))(arr);
    console.log(date);
    /* expected output: {
      "year": "2024",
      "month": "07",
      "day": "17"
    } */
    
    1. 在函数中设置默认值。
    function somename(element, input, settings={i:"#1d252c", i2:"#fff", ...input}){
        console.log(settings.i);
        console.log(settings.i2);
    }
    somename('hello', {i: '#123'});
    somename('hello', {i2: '#123'});
    /* expected output: 
    #123
    #fff
    #1d252c
    #123 
    */
    
    1. 获取数组长度、函数名称、参数数量等属性。
    let arr = [1,2,3,4,5];
    let {length} = arr;
    console.log(length);
    let func = function dummyfunc(a,b,c) {
      return 'a b and c';
    }
    let {name, length:funclen} = func;
    console.log(name, funclen);
    /* expected output : 
    5
    dummyfunc 3
    */
    
    1. 组合数组或对象。
    //combining two arrays
    const alphabets = ['A','B','C','D','E','F'];
    const numbers = ['1','2','3','4','5','6'];
    const newArray = [...alphabets, ...numbers]
    console.log(newArray);
    //expected output: ['A','B','C','D','E','F','1','2','3','4','5','6']
    
    //combining two objects
    const personObj = { firstname: "John", lastname: "Doe"};
    const addressObj = { city: "some city", state: "some state" };
    const combinedObj = {...personObj, ...addressObj};
    console.log(combinedObj);
    /* expected output: {
        "firstname": "John",
        "lastname": "Doe",
        "city": "some city",
        "state": "some state"
    } */
    
    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » Typescript 中的 ESestructuring
    • 7会员总数(位)
    • 25846资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 293稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情