ETypescript での構造化

王林
リリース: 2024-07-19 10:17:09
オリジナル
905 人が閲覧しました

ESestructuring in 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 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"
} */
ログイン後にコピー

以上がETypescript での構造化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート