JavaScript デストラクタ
この記事では主に、ES6 の最も便利な機能の 1つである JavaScript の構造化解除に焦点を当てます。 構造化解除は、配列項目またはオブジェクト プロパティを個別の変数、配列、オブジェクト、ネストされたオブジェクト、およびデータのすべての抽出を可能にする変数への割り当てにアンパックできるようにする JavaScript ステートメントです。
同時に、いくつかの例を見て、配列、オブジェクト、およびその両方に対して構造化解除を使用する方法を確認します。
オブジェクトで破壊を使用する
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
前述の JS コードの employee オブジェクトが表示されます。 右側では、この従業員には、id、name、age、および department などの基本的なプロパティがあります。 いくつかのデータを含むコンソールが表示されます。
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
const name = employee.name;
const age = employee.age;
console.log(name);
console.log(age);
そのため、まず、オブジェクトの構造化解除をどのように使用できるかを見ていきます。
この従業員のプロパティにアクセスしたい場合、どうすればよいでしょうか? 名前を書くことができます。 employee.name を変更します。
年齢にアクセスする場合は、employee.age に変更します。
console.log(name); を使用して名前と年齢をコンソールに出力するとします。 そして console.log(age);. コードを実行すると、name と age がコンソール出力されていることがわかります。
ここでは、同じことを繰り返し行っていることがわかります。 name を 2 回、age を 2 回、従業員を繰り返しました。
しかし、ES6 は、小さな構文で簡潔に実行できるため、繰り返す必要がない場合に、割り当てを構造化解除するためのいくつかの最高の機能を提供します。
このタスクを非構造化でどのように達成できるかを見てみましょう。 まず、変数を書きます。
ここで、この定数は employee と同じです。
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
//const name = employee.name;
//const age = employee.age;
const { name, age } = employee;
console.log(name);
console.log(age);
しかし左側では、オブジェクト構文を作成し、employee オブジェクトからアクセスしたいプロパティ名を記述できます。 そのため、name と age にもアクセスしたいと考えています。
上記のコードを実行すると、同じ出力または結果が返されます。
ここでは、employee.name や employee.age を繰り返していません。 これらのプロパティ名を直接使用しているだけです。
name をプロパティとして使用せず、他の名前を付けたい場合は、もう 1つ実行できます。
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
//const name = employee.name;
//const age = employee.age;
const { name: fullName, age } = employee;
console.log(fullName);
console.log(age);
次に、コロンを記述して fullName を使用できますが、それでも同じ結果が得られます。 この構造化解除の素晴らしい点の 1つは、ここでデフォルトのパラメーターを使用できることです。
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
// const name = employee.name;
// const age = employee.age;
const {name: fullName = 'Lora Noah ', age} = employee;
console.log(fullName);
console.log(age);
Lora Noah のデフォルト パラメータを使用するとします。 デフォルトのパラメータを使用したことがわかります。
プロパティ名を含まないこの employee オブジェクトを見てみましょう。 その場合、デフォルト値の Lora Noah が使用されます。
employee のようなネストされたオブジェクトを分解したいとします。 特定の従業員が住んでいる都市を知り、現在知っている住所に追加する必要があります。
それなら、それもできます。 まず住所が必要です。
このアドレスをコンソールにすると、オブジェクトが得られます。 コードを実行してみましょう。
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
// const name = employee.name;
// const age = employee.age;
const {address} = employee;
console.log(address);
出力は、次のように受信されます。 しかし、私たちはその都市だけを望んでいます。
オブジェクトは変更できるので、完全なオブジェクトは必要ありません。 何を分解できるか? 都市について書くことができます。
アドレスを削除し、コンソールに city を使用します。
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
// const name = employee.name;
// const age = employee.age;
const {address: {city}} = employee;
console.log(city);
得られる出力は次のとおりです。
次に、関数で構造化解除を使用できる場合、出力として Colombo を取得します。 構築する関数は、displayEmployee と呼ばれる必要があります。
この関数は employee を受け取り、console.log() を必要とします。 コンソールには文字列リテラルを使用します。
従業員名を ${name} と書き、年齢を ${age}; とします。 コンソール用。
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(employee) {
console.log(`The employee name is ${name} and age is ${age}`);
}
displayEmployee(employee);
それらの名前を印刷したい場合、通常はどうすればよいでしょうか? コンソールの employee.name と employee.age。
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(employee) {
console.log(
`The employee name is ${employee.name} and age is ${employee.age}`);
}
displayEmployee(employee);
このコード実行では、employee.name が未定義として取得されていることがわかります。
そのため、employee のオブジェクトから name プロパティを削除しました。 これで、John という名前と24という年齢を取得できます。
コードと、コードを実行した後の予想される出力を以下に示します。
// object
const employee = {
id: 001,
name: 'John',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(employee) {
console.log(
`The employee name is ${employee.name} and age is ${employee.age}`);
}
displayEmployee(employee);
出力：
しかし、関数の構造を分解することもできます。 したがって、この機能を分解するには年齢が必要です。 名前が必要です。
ここでシーケンスを維持する必要はありません。 言い換えれば、≪名前≫と≪年齢≫が書ける。
決まった順番はありませんので、必要に応じて変更可能です。
// object
const employee = {
id: 001,
name: 'John',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(age, name) {
console.log(
`The employee name is ${employee.name} and age is ${employee.age}`);
}
displayEmployee(employee);
このコードを実行すると、同じ出力が得られます。
配列で破壊を使用する
配列を作成する必要があります。 配列の任意の値にアクセスしたいと考えています。
apple、mango、banana、pineapple という単語が配列に書き込まれています。 その配列を表すために、変数 fruit を使用します。
最初の要素 apple はインデックス 0 に書き込まれ、2 番目の要素 mango はインデックス 1 で使用されます。
そして、console.log(apple) と console.log(mango) を表示します。
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
const apple = fruits[0];
const mango = fruits[1];
console.log(apple);
console.log(mango);
出力を以下に示します。
その結果、apple と mango が得られます。 しかし、配列を分解したい場合は、それを書き込みます。
配列を分解するために、この定数は果物配列と同様に設定されます。
ここでは、配列が必要であり、値は配列に使用されます。 fruit1 と fruit2 を入力すると、最初のインデックスの apple が出力されます。
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
// const apple = fruits[0];
// const mango = fruits[1];
const [fruit1, fruit2] = fruits;
console.log(fruit1);
console.log(fruit2);
したがって、apple には fruit1 の値が割り当てられ、mango には fruit2 の値が割り当てられます。 上記のfruit1という用語は、配列の最初の値に関連しています。
配列の 2 番目の値は fruit2 と呼ばれます。 これは配列の 2 番目の値 mango です。
マンゴーをスキップしたい場合は、3 番目の値であるバナナが必要です。 したがって、空を実行します。
参照がない場合は、配列の 2 番目の値をスキップします。 これにより、3 番目の値が得られます。
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
// const apple = fruits[0];
// const mango = fruits[1];
const [fruit1, , fruit2] = fruits;
console.log(fruit1);
console.log(fruit2);
次に、出力として apple と banana を取得できます。
配列の構造化に Rest 演算子を使用する
構造化解除に rest 演算子を使用することもできます。 配列の最初の 3つの項目と残りの値が必要な場合は、rest 演算子を使用できます。
rest 演算子を入力して console.log() を実行すると、pineapple を含む残りの配列を取得できます。
コードでは、オペレーターの動作を確認できます。
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
// const apple = fruits[0];
// const mango = fruits[1];
const [fruit1, , fruit2, ...rest] = fruits;
console.log(fruit1);
console.log(fruit2);
console.log(rest);
これが出力です。
配列の構造化解除部分を行う方法は次のとおりです。
配列とオブジェクトで同時に構造化を使用する
まず、配列とオブジェクトを記述できます。 この食料品の配列は、以下のコードで確認できます。
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
console.log(groceryList[0].item);
Apples にアクセスしたい場合、通常は console.log(groceryList[0].item); を実行します。 次に、Apples が出力として表示されます。
分解を使用して、これを記述できます。 定数を書き、その中に りんご と書きます。
これらの Apples は groceryList と同じになります。 まず、配列の最初の要素を調べたい場合は、配列があります。
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [apple] = groceryList;
console.log(apple);
これが出力です。
ここで配列は完成しましたが、オブジェクトは必要ありません。 構造化解除のためにオブジェクト内のアイテムのみが必要です。
オブジェクトを分解すると、常にプロパティと共に取得されます。 そして、リンゴのような性質はありません。
したがって、この方法でプロパティを割り当てる必要があります。 以下のコードを見てください。
変数のさまざまなコンポーネントをリンゴとして試すことができます。 しかし、アイテムとして直接使用する場合は、それを書くことができます。
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [{item}] = groceryList;
console.log(item);
出力には Apples と表示されます。
出力をトマトにしたい場合は、最初の 2つのステップをスキップしてください。その後は何も心配する必要はありません。 Tomatoes が 3 番目の配列に表示されます。
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [, , {item}] = groceryList;
console.log(item);
これは、上記で実装されたコード チャンクの出力です。
Tomatoes を受け取った後、他のアイテムも必要だとします。 そのためには、同じ残りの演算子を適用し、コンソールに console.log() を追加する必要があります。
それができたら、オブジェクトの残りの配列を取得できます。
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [, , {item}, ...rest] = groceryList;
console.log(item);
console.log(rest);
出力を以下に示します。
それが、脱構造化がどれほど強力かということです。 オブジェクトに配列が含まれる別のアプローチの図を見てみましょう。
Singapore という場所を選択します。 したがって、シンガポールの場所を取得するには、console.log(company.(locations[0])) を実行できます。
// Array and Object
const company = {
name: 'Google',
locations: ['Singapore', 'India', 'Germany'],
};
console.log(company.locations[0]);
シンガポールとしての価値/アウトプットを得ることができます。 以下を参照してください。
これは、構造化解除を使用して実現したいと考えています。 会社であるオブジェクトに等しい定数を書くことができます。
オブジェクトの構造化解除を行うには、中括弧を使用します。 中括弧では、プロパティ名を場所として使用します。
位置から、インデックス 0 の最初の値にアクセスする必要があります。したがって、ここに配列を書き込み、位置に loc を使用できます。
// Array and Object
const company = {
name: 'Google',
locations: ['Singapore', 'India', 'Germany'],
};
const {
locations: [loc],
} = company;
console.log(loc);
そして、この loc を出力したいと思います。 したがって、console.log(loc) を使用します。 次に、出力として Singapore を取得できます。
India という結果が必要だとします。 したがって、最初の値をスキップします。 次に、その値を出力できます (インド)。
// Array and Object
const company = {
name: 'Google',
locations: ['Singapore', 'India', 'Germany'],
};
const {
locations: [, loc],
} = company;
console.log(loc);
ここで、出力を確認できます。
構造化解除について説明する最後の使用例があります。 ここでは、新しい Users として定数を使用します。
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
これらの Users にはネスト配列があります。 結果を以下の出力にしたい場合は、オブジェクトを含むオブジェクトとオブジェクトの内部を確認できます。
キーと値のペアが必要です: firstName は John で、lastName は Oliver です。 分解を使用すると、非常に簡単に実行できます。
ここでは、マップである高次配列関数を使用します。 そこで、Users を受け取る Users オブジェクトで定数を作成します。
最初のユーザーが表示されます。 最初のユーザーでは、必要なオブジェクトを返すことができます。 ここでは、firstName を行います。
この firstName はユーザー インデックス 0 に等しくなり、lastName のユーザー インデックスは 1 になります。
そのコンソールの後、console.log(UsersObj); を使用して Users オブジェクト。
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
const UserObj = Users.map((User) => {
return { firstName: User[0], lastName: User[1] };
});
console.log(UserObj);
ここでは、3つのオブジェクトの firstName と lastName を取得します。
構造化解除に関して、ここで何ができるでしょうか? 配列から、最初の値を firstName として、2 番目の値を lastName として割り当てることができます。
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
const UserObj = Users.map(([firstName, lastName]) => {
return { firstName: firstName, lastName: lastName };
});
console.log(UserObj);
ここでも、上記の出力と同じ結果が得られます。
しかし、ES6 ではオブジェクト リテラルが強化されているので、もう 1つできることがあります。 キーに対してそれを行うことができ、値は同じです。
削除できます。 ただし、残ったもので、同じ結果を得ることができます。
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
const UserObj = Users.map(([firstName, lastName]) => {
return { firstName, lastName };
});
console.log(UserObj);
これが、デストラクチャリングを使用する方法です。
まとめ
この記事では、構造化解除とは何か、JavaScript でそれを実行する方法について説明しました。 React などの言語を使用する場合に便利です。
React を使っていなくても、きれいなコードを書くことができます。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.