Home > Web Front-end > JS Tutorial > ESestructuring in Typescript

ESestructuring in Typescript

王林
Release: 2024-07-19 10:17:09
Original
907 people have browsed it

ESestructuring in Typescript

Destructuring makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Advantages

  • Makes code concise and more readable.
  • We can easily avoid repeated destructuring expression.

Some use cases

  1. To get values in variable from Objects, Array.
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
Copy after login
  1. To change only desired property in an object.
  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
  }
]*/
Copy after login
  1. To extract values from parameters into standalone variables.
// 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
Copy after login
  1. To get dynamic keys value from object.
const obj = { a: 1, b: 2, c: 3 };
const key = 'c';
let { [key]: val } = obj;
console.log(val);
//expected output: 3
Copy after login
  1. To swap values.
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]
Copy after login
  1. To get a subset of an object.
const obj = { a: 5, b: 6, c: 7 };
const subset = (({ a, c }) => ({ a, c }))(obj);
console.log(subset); 
// expected output : { a: 5, c: 7 }
Copy after login
  1. To do array to object conversion.
const arr = ["2024", "17", "07"],
      date = (([year, day, month]) => ({year, month, day}))(arr);
console.log(date);
/* expected output: {
  "year": "2024",
  "month": "07",
  "day": "17"
} */
Copy after login
  1. To set default values in function.
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 
*/
Copy after login
  1. To get properties such as length from an array, function name, number of arguments etc.
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
*/
Copy after login
  1. To combine arrays or objects.
//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"
} */
Copy after login

The above is the detailed content of ESestructuring in Typescript. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template