Heim > Web-Frontend > js-Tutorial > ESestrukturierung in Typescript

ESestrukturierung in Typescript

王林
Freigeben: 2024-07-19 10:17:09
Original
911 Leute haben es durchsucht

ESestructuring in Typescript

Destrukturierung ermöglicht es, Werte aus Arrays oder Eigenschaften von Objekten in verschiedene Variablen zu entpacken.

Vorteile

  • Macht Code prägnant und besser lesbar.
  • Wir können wiederholte desstrukturierende Ausdrücke leicht vermeiden.

Einige Anwendungsfälle

  1. Um Werte in Variablen aus Objekten und Arrays abzurufen.
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
Nach dem Login kopieren
  1. Um nur gewünschte Eigenschaften in einem Objekt zu ändern.
  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
  }
]*/
Nach dem Login kopieren
  1. Zum Extrahieren von Werten aus Parametern in eigenständige Variablen.
// 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
Nach dem Login kopieren
  1. Um dynamische Schlüsselwerte vom Objekt zu erhalten.
const obj = { a: 1, b: 2, c: 3 };
const key = 'c';
let { [key]: val } = obj;
console.log(val);
//expected output: 3
Nach dem Login kopieren
  1. Um Werte auszutauschen.
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]
Nach dem Login kopieren
  1. Um eine Teilmenge eines Objekts zu erhalten.
const obj = { a: 5, b: 6, c: 7 };
const subset = (({ a, c }) => ({ a, c }))(obj);
console.log(subset); 
// expected output : { a: 5, c: 7 }
Nach dem Login kopieren
  1. Um eine Array-zu-Objekt-Konvertierung durchzuführen.
const arr = ["2024", "17", "07"],
      date = (([year, day, month]) => ({year, month, day}))(arr);
console.log(date);
/* expected output: {
  "year": "2024",
  "month": "07",
  "day": "17"
} */
Nach dem Login kopieren
  1. Um Standardwerte in der Funktion festzulegen.
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 
*/
Nach dem Login kopieren
  1. Um Eigenschaften wie die Länge eines Arrays, den Funktionsnamen, die Anzahl der Argumente usw. abzurufen.
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
*/
Nach dem Login kopieren
  1. Zum Kombinieren von Arrays oder Objekten.
//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"
} */
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonESestrukturierung in Typescript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage