JS 分解を使用する 5 つの興味深い方法について話しましょう

この記事では、JavaScript の構造化 (Destructuring) の 5 つの興味深い使用方法について説明します。

1. 変数の交換

2 つの変数を交換する一般的な方法では、追加の一時変数が必要です。簡単なシナリオを見てみましょう。 :

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp は一時変数であり、a の値を保存し、b の値を a## に割り当てます。 #、最後に temp に保存した a の値を b に代入して交換は完了です。
代入の構造化 変数の交換が簡単になり、一時変数を明示的に作成する必要がなくなりました:

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

[a, b] = [b, a]Yes A代入の構造化。右側で、 は配列 [b, a]、つまり [2,1] を作成します。この配列の最初の項目 (つまり、値 2) は次のとおりです。 a に割り当てられたら、2 番目の項目 (つまり、値 1) が b に割り当てられ、交換が完了します。 このメソッドでも一時配列が作成されますが、変数を交換するこの方法はより簡潔に見えます。
それだけでなく、このメソッドは次のように 3 つ以上の変数を交換することもできます:

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

変数は必要なだけ交換できます。ただし、2 つの変数を交換するのが最も一般的なシナリオです。

2. 配列 item へのアクセス

空の可能性がある配列があります。配列の 1 番目、2 番目、または n 番目の要素にアクセスしたいが、その要素が存在しない場合はデフォルト値を取得します。

通常、配列の長さプロパティを使用します。

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

配列の構造化を使用して同じ効果を実現すると、より少ないコードで済みます。

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'

const [firstColor = 'white' ] = colorDestructuring は、colors 配列の最初の要素を firstColor 変数に割り当てます。配列のインデックス 0 に要素がない場合は、「白」のデフォルト値が割り当てられます。 ここではさらに柔軟性が提供されています。2 番目の要素にのみアクセスしたい場合は、これも可能です:

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'

分割の左側にあるカンマ に注意してください。これは無視することを意味します。最初の要素は要素です。 secondColor は、colors 配列のインデックス 1 の要素によって割り当てられます。

3. 不変操作

React とその後の Redux を使い始めたとき、不変性を伴うコードを書かざるを得なくなりました (ここでの意味は、元のコードを維持することです)オブジェクトは変更されません)。最初は少し難しかったですが、後からその利点がわかりました。

一方向のデータ フローの処理が容易になりました。。 不変性とは、オブジェクトの変更が禁止されていることを意味します。幸いなことに、構造を分割すると、特定の操作を不変の方法で簡単に実装できます。
構造化を残りの演算子 (
...) と組み合わせて、配列の最初の要素を削除します。

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

[, ...fooNumbers] =numbersDestructuring により、numbers 配列の最初の要素を除くすべての要素が含まれる新しい配列 fooNumbers が作成されます。 numbers配列は変更されておらず、操作の不変性が維持されています。 同じ不変の方法で、オブジェクトからプロパティを削除できます。 big オブジェクトから foo 属性を削除してみます。

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

代入の構造化とオブジェクト残余演算子を組み合わせると、新しいオブジェクト

small が作成されます。これには、bigAll プロパティが含まれます。 foo プロパティを除くオブジェクト内。

4. イテラブルの構造化

前のセクションでは、構造化を配列に適用しました。ただし、反復可能プロトコルを実装するオブジェクトはすべて分解できます。

配列、文字列、型付き配列、セット、マップなど、多くのネイティブ プリミティブ型とオブジェクトは反復可能です。
たとえば、文字列を複数の文字に分解できます:

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

ネイティブ型に限定されず、反復可能なプロトコルを実装することで、分解ロジックをカスタマイズできます。

movies movie オブジェクトのリストが含まれます。 movies を分解するとき、映画のタイトルを文字列として取得すると便利です。カスタム反復子を実装しましょう:

const movies = {
  list: [
    { title: 'Heat' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => &#39;Heat&#39;

movies このオブジェクトは、Symbol.iterator を定義することで反復可能なプロトコルを実装します。 Iterator メソッド: 映画のタイトルを反復処理します。 反復プロトコルに従うと、
movies オブジェクトをタイトルに分解できます。最初のムービーのタイトルを取得する具体的なメソッドは、const [firstMovieTitle] = Movies です。

5. 動的プロパティの構造化

私の経験では、プロパティを使用したオブジェクトの構造化は、配列の構造化よりも一般的です。オブジェクトの分割は簡単に見えます:

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

const {title} = movie変数 title を作成し、属性 movie.title を設定します。値が割り当てられます。 オブジェクトの構造化について初めて読んだとき、静的にプロパティ名を知る必要はなく、動的なプロパティ名を使用してオブジェクトを構造化できることに少し驚きました。

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'

greet()函数有两个参数：对象和属性名。在greet()函数内部，解构赋值const {[nameProp]: name = 'Unknown'} = obj使用中括号[nameProp]读取动态属性名，name变量作为别名接收动态属性值。如果属性不存在，你还可以给它赋一个默认值Unknown。

6. 总结

如果你想访问对象属性和数组元素，那么解构非常有用。
在基本用法之上，数组解构便于交换变量、访问数组项、执行一些不可变的操作。
JavaScript提供了更大的可能性，因为你可以使用迭代器定义自定义的解构逻辑。

本文翻译自：5 Interesting Uses of JavaScript Destructuring

地址：https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

【相关推荐：javascript视频教程、编程视频】

以上がJS 分解を使用する 5 つの興味深い方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。