JavaScriptの破壊の秘訣

投稿日: 2022-04-20 2022-04-20
タグ: javascript

ES6で導入された新しい破壊構文を理解するために、「古い」方法について説明しましょう。これについては全体を通して何度か言及しますが、これらはオプションの構文であり、役立つ場合があります。プロパティアクセサーなど、元のメソッドを使用した方がクリーンで、完全に有効なユースケースがまだいくつかあります。

// some object
const apple = {
  numberOfLeaves: 2,
  colors: {
    actual: ['green', 'yellow'],
    possible: ['red', 'green', 'yellow'],
  },
  kind: 'Golden Delicious',
  sku: 'A-GD-01',
};

ES6より前のこのオブジェクトから値を取得する方法は次のとおりです。

// property accessors using the dot syntax
const kind = apple.kind;
const sku = apple.sku;

破棄が完了したので、次のようにして、これらのプロパティの両方をオブジェクトから抽出し、新しいconst変数に割り当てることができます。

const { kind, sku } = apple;

ネストされた値にアクセスするのに便利です。変数に独自の名前を選択することもできます。プロパティ名と一致する必要はありません。

// instead of:
//   const colors = apple.colors.actual;
//   const possibleColors = apple.colors.possible;

const { actual: colors, possible: possibleColors } = apple.colors;

console.log(colors); // outputs ["green", "yellow"]
console.log(possibleColors); // outputs ["red", "green", "yellow"]

アレイの破壊

配列の破棄は非常によく似ており、次のように、配列から一部の値のみを取得できます。

const names = ['Jack', 'Janet', 'John', 'Jessie', 'Jaqueline', 'Jerry', 'Justin', 'Julie', 'Jake'];

const [first, second, third, ...theRest] = names;

console.log(first); // outputs "Jack"

console.log(theRest); // outputs ["Jessie", "Jaqueline", "Jerry", "Justin", "Julie", "Jake"]

ご覧のとおり、最初の3つの項目を独自の変数に抽出し、rest構文...を使用して、残りの値を別の新しい変数に割り当てています。

残りの値を変数に割り当てる必要はありません。最初の配列値のみが必要だとしましょう。変数を角かっこで囲むことができます。

次に、配列の破棄とオブジェクトの破棄を組み合わせて、必要な1つの値を引き出し、抽出を1つのステートメントに減らします。

const winners = [
  { name: 'Mario',   time: 110 },
  { name: 'Waluigi', time: 115 },
  { name: 'Toad',    time: 116 },
  { name: 'Yoshi',   time: 124 },
  { name: 'Bowser',  time: 129 },
];

function getBestTimeOf(racers) {
  // extract only the first item and from that, we only assign 
  // the property of time to the new variable of bestTime
  const [{ time: bestTime }] = racers;
  return bestTime;
}

console.log( getBestTimeOf(winners) ); // outputs 110

この抽出がconst bestTime = winners[0].time;よりもクリーンであるとは思わない人もいるかもしれません。また、コードをすばやく読み取る能力が失われる可能性があることに同意します。そのため、すべての戦略は、それを実装する前に先見性と常識を必要とします。実際の例では、1つの配列値から1つ以上のプロパティを取得する可能性があります。破壊はその時点で大いに役立ちます。

アレイに関するもう2つの簡単なヒント

constで定義されていない場合は、値を交換できます。

let a = 2;
let b = 5;

[a, b] = [b, a];
console.log(a); // 5
console.log(b); // 2

スロットにコンマを付けたままにしておくと、値をスキップできます。この例では、2番目の値のみをプルします。正規表現の使用法について心配する必要はありません-可能な使用法を示すために、私のプロジェクトからコードを少し変更しました。

const [,, three] = [1, 2, 3, 4, 5, 6, 7];
console.log(`I selected ${three}.`); // outputs "I selected 3."

🔥🔥関数のホットなヒント🔥🔥

複数の戻り値

配列の破棄を使用して、関数から複数の値をきれいに返すことができます。新しいフック機能を使用するReact開発者は、これがどのように使用されるかをよく知っているかもしれません。

const [count, setCount] = useState(0);

複数の値を返すのと同じ機能を使用するために必要なのは、それらの値を返すことだけです。文字通り。

function getCoordinates(address) {
  // use an API to get the lon/lat of an address
  const coordinates = maps.address(address).coordinates;
  return [coordinates.lon, coordinates.lat];
}

// later I can get this with
const [longitude, latitude] = getCoordinates(someAddress);

表現力豊かなパラメータ/引数の構文

これは、破壊の私のお気に入りの使用法です。関数パラメーターと引数の両方としてオブジェクトを使用します。これにより、関数の構造を大幅に簡素化できます。念のために言っておきますが、すでに簡単な場合など、すべての場合にこれを使用する必要はありません。

明確にするために—パラメーターは関数宣言の変数です。引数は、呼び出されたときに関数パラメーターに渡すデータです。

以下は、これらの定義を明確にするためのスニペットです。コードの動作にあまり注意を払わないでください。メモが何を指しているかを確認してください。

// level and data are the parameters
function logData(level, data) {
  console.log(`New log of level: ${level}`);
  console.log(data);
}

const someLevel = 'error';
const calculatedData = {
  id: 1,
  name: 'Jack',
};

// the VALUES of someLevel and calculatedData are the arguments 
// we are passing to logData() - the variable names are irrelevant
logData(someLevel, calculatedData);

これは、電気通信スイッチの一部を制御できるコードです。この関数は、呼び出しチャネルに変数を設定します。繰り返しますが、実際のコードの目的を無視し、メモと戦略に焦点を合わせます。

// ...inside a class
async set({
  variable = '',
  value = '',
  callId = '',
} = {})
{
  console.log(`Setting ${variable} equal to ${value} on call ID: ${callId}`);
  return await this.api('call_setvar', `${callId} ${variable} ${value}`);
}

私はこの関数を次のように呼び出します。

// callId and url are defined above

await this.set({ callId, variable: 'custom_transfer_url', value: url });

オブジェクトを渡し、もう一方の端で暗黙的に非構造化するこの方法は、いくつかの貴重な利点をもたらします。

名前付きパラメーター（自己文書化）
デフォルト値（=記号を使用）**
順序は重要ではありません
オブジェクトproperty-valueshorthand （uuidの受け渡し方法など、値を保持するプロパティと変数に同じ名前を使用）uuid: uuid,はuuid,に短縮されました

私の関数宣言にあるように、各変数を別の行に配置する必要はありません。これは、必要に応じてデフォルトとメモをきれいに提供できるようにするためです。

**デフォルト値は、値が未定義の場合にのみ使用されることに注意してください。つまり、値が渡されていないか、明示的に未定義に設定されています。ヌル値はデフォルトをトリガーせず、ヌルのままになります。

これらの配列とオブジェクトの分解の使用により、コードを単純化および構造化するための新しい方法がいくつか提供されることを願っています。仲間の開発者のいずれかがこれらのヒントを使用できると思われる場合は、これを共有してください。これをツイートまたは共有して、 @alligatorioにリンクすることもできます。

getdocs

13036