PHP前端开发

Typescript 中的 ESestructuring

百变鹏仔 3天前 #JavaScript
文章标签 Typescript

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

优点

一些用例

  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 extractionlet 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 2console.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 : 5dummyfunc 3*/
  1. 组合数组或对象。
//combining two arraysconst 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 objectsconst 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"} */