JavaScript での代入の構造化の強力な例-jsチュートリアル-php.cn

JavaScript での代入の構造化の強力な例

Linda Hamilton

リリース： 2024-11-04 00:30:30

オリジナル

573 人が閲覧しました

Powerful Examples of Destructuring Assignments in JavaScript

分割代入は、ES6 で導入された糖衣構文で、配列またはオブジェクトの値を変数に展開できるようになります。コードを大幅に簡素化し、読みやすくすることができます。

配列の分割

基本的な例:

const numbers = [1, 2, 3, 4];
const [first, second, ...rest] = numbers;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4]

ログイン後にコピー

要素のスキップ: カンマを使用して要素をスキップできます。

const [first, , third] = numbers;
console.log(first, third); // Output: 1 3

ログイン後にコピー

ネストされた配列: 構造化はネストされた配列に適用できます。

const nestedArray = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = nestedArray;
console.log(a, b, c, d); // Output: 1 2 3 4

ログイン後にコピー

オブジェクトの分割

基本的な例:

const person = { name: 'Alice', age: 30, city: 'New York' };
const { name, age, city } = person;

console.log(name, age, city); // Output: Alice 30 New York

ログイン後にコピー

プロパティの名前変更: 分割中にプロパティの名前を変更できます。

const { name: firstName, age, city } = person;
console.log(firstName, age, city); // Output: Alice 30 New York

ログイン後にコピー

デフォルト値: 欠落している可能性があるプロパティのデフォルト値を指定します。

const { name, age = 25, city } = person;
console.log(name, age, city); // Output: Alice 30 New York

ログイン後にコピー

ネストされたオブジェクト: ネストされたオブジェクトを構造解除します。

const person = { name: 'Alice', address: { street: '123 Main St', city: 'New York' } };
const { name, address: { street, city } } = person;
console.log(name, street, city); // Output: Alice 123 Main St New York

ログイン後にコピー

変数の交換

構造化を使用すると、変数を簡潔に交換できます。

let a = 10;
let b = 20;

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

console.log(a, b); // Output: 20 10

ログイン後にコピー

関数パラメータの構造化

関数パラメータを構造化して読みやすくすることができます。

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet({ name: 'Alice', age: 30 });

ログイン後にコピー

分割代入を効果的に使用することで、よりクリーンで、より簡潔で、読みやすい JavaScript コードを作成できます。

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