技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

砂を集めて塔を作り、毎日少しずつ進んでいます

⭐コラム紹介

フロントエンド入門: Web 開発の素晴らしい世界を探索する フロントエンドエントリーの旅へようこそ！ご興味がございましたら、このコラムを購読してください。このコラムはこんなことに興味がある人向けですウェブ開発フロントエンド分野に興味があり、参入したばかりの方向けにカスタマイズされています。まったくの初心者であっても、ある程度の基本知識がある開発者であっても、ここでは体系的でフレンドリーな学習プラットフォームを提供します。このコラムでは、フロントエンドの知識やよくある質問への回答を厳選してQ&A形式で毎日更新していきます。 Q&A 形式を通じて、フロントエンド テクノロジーに関する読者の質問により直接的に回答し、皆さんが徐々に強固な基礎を確立できるようにしたいと考えています。 HTML、CSS、JavaScript、または一般的に使用されるさまざまなフレームワークやツールのいずれであっても、シンプルでわかりやすい方法で概念を説明し、学んだ内容を定着させるための実践的な例と演習を提供します。同時に、フロントエンド開発におけるさまざまなテクノロジーをより深く理解し、適用するのに役立ついくつかの実践的なヒントとベスト プラクティスも共有します。

あなたが転職、スキルアップ、または個人的な興味の実現を求めている場合でも、私たちは最高の学習リソースとサポートを提供することに専念しています。一緒に Web 開発の素晴らしい世界を探検しましょう!フロントエンドのエントリージャーニーに参加して、優れたフロントエンド開発者になりましょう! フロントエンドの旅を始めましょう! ！ ！

今日の内容:JavaScript における構造化代入とは何ですか?

---

JavaScript における構造化代入とは何ですか?

1 はじめに

分割代入は ES6 で導入された構文で、配列またはオブジェクトから値を抽出し、それらを別の変数に割り当てることができます。代入を分割すると、データの抽出がより簡潔かつ明確になり、コード構造が簡素化されます。この記事では、実際のプログラミングにおける構造化代入の概念、構文、応用について詳しく説明します。

2. 割り当ての概念を解体する

構造化代入は、配列またはオブジェクトからデータを抽出し、それを独立変数に代入する方法です。これにより、データ抽出操作が簡素化され、オブジェクトのプロパティまたは配列要素への複数のアクセスが回避されます。

3. 配列の分割と代入

3.1 基本的な構文

配列分割代入を使用すると、配列から値を抽出して変数に割り当てることができます。

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

3.2 スキップ要素

配列内の特定の要素をスキップして、必要な値のみを抽出できます。

const [a, , c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(c); // 输出: 3
1
2
3

3.3 デフォルト値

対応する配列要素が構造化されたときに割り当てられる変数のデフォルト値を指定できます。undefinedの場合は、デフォルト値が有効になります。

const [a, b = 2] = [1];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
1
2
3

3.4 変数値の交換

代入を分割すると、2 つの変数の値を交換する簡潔な方法が提供されます。

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 输出: 2
console.log(b); // 输出: 1
1
2
3
4
5

4. オブジェクトの分割と代入

4.1 基本的な構文

オブジェクト分割代入を使用すると、オブジェクトからプロパティ値を抽出して変数に割り当てることができます。

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 输出: John
console.log(age); // 输出: 30
1
2
3
4

4.2 変数の名前変更

変数名の競合を回避したり、コードの読みやすさを向上させるために、代入の構造化中に変数の名前を変更できます。

const person = { name: 'John', age: 30 };
const { name: userName, age: userAge } = person;
console.log(userName); // 输出: John
console.log(userAge); // 输出: 30
1
2
3
4

4.3 デフォルト値

オブジェクトの構造化によって割り当てられる変数のデフォルト値は、対応する属性が存在しない場合、または値が存在しない場合に指定できます。undefinedの場合は、デフォルト値が有効になります。

const person = { name: 'John' };
const { name, age = 25 } = person;
console.log(name); // 输出: John
console.log(age); // 输出: 25
1
2
3
4

4.4 入れ子構造の分割

ネストされた構造化を通じて、オブジェクトのネストされたプロパティから値を抽出できます。

const person = { name: 'John', address: { city: 'New York', zip: 10001 } };
const { address: { city, zip } } = person;
console.log(city); // 输出: New York
console.log(zip); // 输出: 10001
1
2
3
4

5. 構造化代入の適用

5.1 関数パラメータ

関数パラメータに分割代入を使用すると、関数パラメータの処理を簡素化できます。

function displayPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'John', age: 30 };
displayPerson(person); // 输出: Name: John, Age: 30
1
2
3
4
5
6

5.2 関数の戻り値の抽出

構造化代入を使用すると、関数によって返された配列またはオブジェクトから値を抽出できます。

function getCoordinates() {
  return [40.7128, -74.0060];
}

const [latitude, longitude] = getCoordinates();
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`); // 输出: Latitude: 40.7128, Longitude: -74.0060
1
2
3
4
5
6

5.3 複数の戻り値の処理

構造化代入を使用すると、関数によって返される複数の値を処理でき、配列インデックスやオブジェクト プロパティ名の使用を回避できます。

function getUserInfo() {
  return { name: 'John', age: 30, city: 'New York' };
}

const { name, age, city } = getUserInfo();
console.log(name); // 输出: John
console.log(age); // 输出: 30
console.log(city); // 输出: New York
1
2
3
4
5
6
7
8

6. まとめ

分割代入は、配列またはオブジェクトから値を抽出して変数に割り当てるための JavaScript の簡潔な構文です。代入を分割することで、データの抽出、関数パラメータの処理、関数の戻り値の抽出、コード構造の簡素化がより簡単になります。構造化代入テクノロジを習得すると、コードの可読性と保守性が向上し、開発効率が向上します。

---

⭐最後に書いてください

このコラムは幅広い読者に適しており、フロントエンドの初心者、フロントエンドを学んだことがなくフロントエンドに興味がある人、または自分自身をより良く見せて拡張したいと考えているバックエンドの学生に適しています。面接プロセス中にいくつかのフロントエンドの知識ポイントがあるため、フロントエンドの基本を理解してこのコラムに従えば、ブロガー自身がコンテンツを作成するため、ギャップを見つけて埋めるのにも大いに役立ちます。記事に欠陥がある場合は、ホームページの左側から連絡してください。一緒に進歩しましょう。同時に、興味のあるパートナーにはいくつかのコラムを購読することをお勧めします。以下のコラムにアクセスしてください。また、私のホームページにアクセスして他のコラムをご覧いただくこともできます。

フロントエンドミニゲーム（無料）このコラムでは、HTML、CSS、JavaScript の基礎知識を活用して、さまざまな面白いページ ゲームを一緒に構築していきます。初心者でも、フロントエンド開発の経験がある人でも、このコラムはあなたのためのものです。基本から始めて、ページ ゲームを構築するために必要なスキルについて説明します。実践的なケースと演習を通じて、HTML を使用してページ構造を構築する方法、CSS を使用してゲーム インターフェイスを美しくする方法、および JavaScript を使用してゲームにインタラクティブで動的な効果を追加する方法を学びます。このコラムでは、迷路ゲーム、レンガ崩し、スネーク、マインスイーパー、電卓、飛行機戦闘、三目並べ、パズル、迷路など、さまざまなタイプのミニゲームを取り上げます。各プロジェクトでは、詳細な説明とコード例を使用して、簡潔かつ明確な手順で構築プロセスをガイドします。同時に、ページのパフォーマンスとユーザー エクスペリエンスの向上に役立つ最適化のヒントとベスト プラクティスも共有します。フロントエンド スキルを発揮するための興味深いプロジェクトを探している場合でも、ページ ゲーム開発に興味がある場合でも、フロントエンド ゲームのコラムが最適な選択となるでしょう。クリックしてフロントエンド ゲームのコラムを購読します

Vue3透明チュートリアル【0から1まで】（有料） Vue3 の透明性チュートリアルへようこそ!このコラムは、Vue3 に関する総合的な技術知識を皆様に提供することを目的としています。 Vue2 の経験がある場合、このコラムは Vue3 の中心となる概念と使用法を習得するのに役立ちます。ゼロから始めて、完全な Vue アプリケーションを構築する方法を段階的にガイドします。実践的なケースと演習を通じて、Vue3 のテンプレート構文、コンポーネント開発、状態管理、ルーティング、その他の機能の使用方法を学びます。また、Vue3 の新機能をよりよく理解して適用できるように、Composition API や Teleport などのいくつかの高度な機能も紹介します。このコラムでは、詳細な説明とサンプル コードを使用して、各プロジェクトを簡潔かつ明確な手順でガイドします。同時に、困難を克服し、開発効率を向上させるために、Vue3 開発におけるいくつかの一般的な問題と解決策も共有します。 Vue3 を詳しく学びたい場合でも、フロントエンド プロジェクトを構築するための包括的なガイドが必要な場合でも、Vue3 の徹底したチュートリアルのコラムは、あなたにとって不可欠なリソースとなるでしょう。クリックして Vue3 透過チュートリアル [ゼロから 1 まで] コラムを購読します

TypeScript 入門 (無料) これは、誰もがすぐに始めて、TypeScript 関連テクノロジを習得できるように設計されたコラムです。簡潔で明確な言語と豊富なサンプルコードを通じて、TypeScript の基本概念、構文、機能を詳しく説明します。初心者でも経験豊富な開発者でも、ここで自分に合った学習パスを見つけることができます。型アノテーション、インターフェイス、クラスなどのコア機能から、モジュール開発、ツール構成、一般的なフロントエンド フレームワークとの統合まで、あらゆる側面を包括的にカバーします。このコラムを読むことで、JavaScript コードの信頼性と保守性が向上し、プロジェクトのコード品質と開発効率が向上します。この刺激的で挑戦的な TypeScript の旅に一緒に乗り出しましょう!クリックして TypeScript 入門ガイドのコラムを購読します