首页 > web前端 > js教程 > 正文

Typescript 中的 ESestructuring

PHPz
发布: 2024-07-19 08:58:48
转载
603人浏览过

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"
} */
登录后复制

以上就是Typescript 中的 ESestructuring的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号