検索

es6 では、構造化とは、配列やオブジェクトから特定のパターンに従って値を抽出し、変数に値を割り当てる行為を指します。一般的なものには、オブジェクト構造、配列の構造化、および混合構造化が含まれます。データの構造化の一種で、情報の抽出を簡素化するために構造をより小さな部分に分解するプロセス。

es6 の分解とは何を意味しますか?

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 での構造化とは何ですか

構造化: Baidu 百科事典では構造分解を意味します。ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。これは、それを構造破壊といいます。

開発においてより一般的なものには、オブジェクトの構造化、配列の構造化、および混合の構造化が含まれます。これは、情報の抽出を簡素化するために、データ構造をより小さな部分に分割するプロセスです。

オブジェクトの構造化

オブジェクト内の値を取得する従来の方法

let node = {
    type: 'Identifier',
    name: 'foo'
}
console.log(node.type) // Identifier
console.log(node.foo) // foo

構造化を使用する

let node = {
    type: 'Identifier',
    name: 'foo'
}
let { type, name } = node
console.log(type) // Identifier
console.log(name) // foo

If 指定されたローカル変数名がオブジェクト内に存在しない場合、ローカル変数には値が割り当てられます。 unknown

let { type, name, value } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // undefined

指定された属性が存在しない場合は、非定義の属性に対して任意のデフォルト値を定義できます。既存の属性

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true

割り当てを構造化するための新しい変数名を指定します

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19

上記を見て、奇妙に見えるかどうかを確認してください。従来のオブジェクト割り当てには、左側に 4 つの属性があり、左側に値があります。右。ただし、分割では右側が属性、左側が値となるため、新しい変数名は右側になります。

let、var、または const を使用してオブジェクトを構造解除する場合、構造化されたオブジェクトの値が存在してはなりません。

var、let、const の割り当てを使用しない場合、構造化ステートメントを () で囲む必要があります

({type, name} = node); //{} が使用されますjs ブロックのコードとして、等号のみを使用すると、エラーが報告されます。

ネストされたオブジェクトの構造化

ネストされたオブジェクトの構造化では、引き続き中括弧を使用します。さらに深く進むための構造化の最初のレベルです。1 つのレイヤーで検索します。最初に栗を見てみましょう:

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

上記はネストされたオブジェクト ノードです。最初のレイヤーを分解しましょう

let { loc, type, name } = node // {} Identifier foo

ご覧のとおりです。意図的に混乱させたものです。{} 属性の順序では、結果は依然として正しく出力されるため、対応する特定のメソッドは名前に基づいているはずであり、順序とは関係がないことが推測できます。

2 番目のレイヤーの分解を続けます

let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 4

ここでは、start を新しいカスタム ローカル変数に割り当てることもできます (newStart に割り当てることを前提としています)

let { loc: { start: newStart }} = node
console.log(newStart.line) // 1
console.log(newStart.column) // 4

概要は次のとおりです。 :

コロンより前のすべての識別子はオブジェクト内の取得位置を表し、右側は代入される変数名です。コロンの後に中括弧がある場合は、最終的に代入される値を意味しますオブジェクト内のより深いレベルにネストされています。

配列の構造化

配列の構造化では配列リテラルが使用され、すべての構造化操作は配列内で完了します。また、配列の構造化はオブジェクト リテラル構文のように使用する必要はありません。オブジェクトのプロパティ。

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, secondColor ] = colors
console.log(firstColor) // 'red'
console.log(secondColor) // 'green'

配列分割構文では、主に配列内の位置に基づいて値を選択し、それを任意の変数に格納できます。明示的に宣言されていない要素は直接無視されます。

let [ , , thirdColor ] = colors
console.log(thirdColor) // 'blue'

配列分割の変数交換

従来の ES5 では、値を交換するには通常、転送として 3 番目の一時変数を導入する必要がありますが、配列分割代入構文を使用する場合、追加の変数を追加する必要はありません。

// ES5中互换值:
 let a = 1, b = 2, tmp;
 tmp = a
 a = b
 b = tmp
 console.log(a, b) // 2, 1
 // ES6中互换值
 let a = 1, b = 2;
 [ a, b ] = [b, a]
 console.log(a, b) // 2, 1

ネストされたデータの構造化

 let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ]
 let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors
 console.log(firstColor) // red
console.log(secondColor) // green
console.log(thirdColor) // lightgreen
console.log(fourthColor) // blue

デフォルト値

配列構造化代入式の配列内の任意の位置にデフォルト値を追加することもできます。指定位置 存在しない場合、または値が未定義の場合は、デフォルト値が使用されます

let colors = [ 'red' ]
let [ firstColor, secondColor = 'green' ] = colors
console.log(firstColor) // red
console.log(secondColor) // green

不定要素

...これは展開演算子です。その目的は誰もが知っているはずです。配列を操作するときに配列を文字列に展開するために使用できます。配列の構造化では、... 構文を使用して、配列内の残りの要素を特定の変数に割り当てることができます。

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, ...restColors ] = colors
console.log(firstColosr) // 'red'
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

配列コピー

ES5 では、開発者は配列のクローンを作成するために concat() メソッドをよく使用します

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

concat() メソッドはもともと 2 つの配列を接続するように設計されていました。呼び出し時にパラメータが渡されない場合、現在の関数のコピーが返されます。

ES6 では、不定要素の構文を使用して同じ目標を達成できます。

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

非構造化配列では、 independent 要素は最後のエントリである必要があります。要素の後にカンマを追加すると、プログラムで構文エラーがスローされます。

混合分解

let err = {
    errors: [
        {
            msg: 'this is a message'
        },
        {
            title: 'this is a title'
        }
    ]
}

上記のコードでは、err オブジェクトにはエラーが含まれており、errors は配列であり、新しいオブジェクトが含まれています。オブジェクトの中で。上記の栗を段階的に分解して分解することができます:

let { errors } = err
let [ firstArr ] = errors
let { msg } = firstArr
console.log(msg) // 'this is a message'
也可以这样解构
let [ , { title }] = err.errors
console.log(title) // 'this is a title'
let [{ msg }] = err.errors
console.log(msg) // 'this is a message'

より複雑なものを見てみましょう. 実際、順序さえわかれば、これはまだ非常に簡単に理解できます。

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

実際の使用法 - パラメータの分解

は、通常、以下に示すように、関数パラメータをカプセル化するときに使用されます。

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为:对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

[関連する推奨事項: JavaScript ビデオ チュートリアル ウェブフロントエンド]

以上がes6 の分解とは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
functional ReactコンポーネントでUseState()フックを使用する方法functional ReactコンポーネントでUseState()フックを使用する方法Apr 30, 2025 am 12:25 AM

UseStateを使用すると、クラスコンポーネントと関数コンポーネント間の障害を除去するため、機能コンポーネントに状態を追加できます。 UseStateを使用する手順には、次のものが含まれます。1)UseStateフックのインポート、2)状態の初期化、3)状態を使用して関数を更新します。

Reactのビューに焦点を当てた性質:複雑なアプリケーション状態の管理Reactのビューに焦点を当てた性質:複雑なアプリケーション状態の管理Apr 30, 2025 am 12:25 AM

Reactのビューフォーカスは、追加のツールとパターンを導入することにより、複雑なアプリケーションの状態を管理します。 1)React自体は、状態管理を処理せず、状態をマッピングすることに焦点を当てています。 2)複雑なアプリケーションは、Redux、Mobx、またはContextapiを使用して状態を切り離す必要があり、管理をより構造化して予​​測可能にします。

統合他のライブラリやフレームワークとの統合統合他のライブラリやフレームワークとの統合Apr 30, 2025 am 12:24 AM

統合されているため、他の人を統合して、FrameWorksCanenHanceApplicationCapabilitivitiations'stools'stools'Strengths.benefitseStreamLinedStateManagementiondobustBackEndegrationとdisteStreamLedinedStateManageminationは、パフォーマンスを築きました

Reactによるアクセシビリティの考慮事項:包括的UIの構築Reactによるアクセシビリティの考慮事項:包括的UIの構築Apr 30, 2025 am 12:21 AM

tomakereActAppLicationsMoreAccessible、FollowTheSteps:1)useSemantichtmLelementsinjsxforbetternavigationandseo.2)explmentfocusmanagement forkeyboardusers.3)utilizereacthookslikeslikes likeuseefecttomectonadedynamic contentchangedariveeriveriveriveriveeriveriveeriveeriverive

ReactとのSEOの課題:クライアント側のレンダリングの問題に対処しますReactとのSEOの課題:クライアント側のレンダリングの問題に対処しますApr 30, 2025 am 12:19 AM

ReactアプリケーションのSEOは、次の方法で解決できます。1。next.jsを使用するなど、サーバー側のレンダリング(SSR)を実装します。 2。Prerender.ioまたはPuppeteerを介したプレレンダリングページなど、動的レンダリングを使用します。 3.アプリケーションのパフォーマンスを最適化し、パフォーマンス監査に灯台を使用します。

Reactの強力なコミュニティとエコシステムの利点Reactの強力なコミュニティとエコシステムの利点Apr 29, 2025 am 12:46 AM

反応の反応は、反応すること:1)即時カクセスソリューションスループラットフループラットフルフルフローアンドGithub;

モバイル開発のためのネイティブの反応:クロスプラットフォームアプリの構築モバイル開発のためのネイティブの反応:クロスプラットフォームアプリの構築Apr 29, 2025 am 12:43 AM

ReactNativeIsCosenformedeveledementBecauseDevelowSowRiteCodeOdeCodeOdeCodeandedDeployitOnMultPlatforms、ReducingDevelopmentTimeandCosts.ItOfferSnear-NativePerformance、Athrive-community、AndleverageSexistingwebdevelyments.keytomatherinere

ReactのuseState()で状態を正しく更新しますReactのuseState()で状態を正しく更新しますApr 29, 2025 am 12:42 AM

ReactのuseState()状態の正しい更新には、州の管理の詳細を理解する必要があります。 1)機能的な更新を使用して、非同期更新を処理します。 2)状態を直接変更しないように、新しい状態オブジェクトまたは配列を作成します。 3)単一の状態オブジェクトを使用して、複雑なフォームを管理します。 4)アンチシェイクテクノロジーを使用して、パフォーマンスを最適化します。これらの方法は、開発者が一般的な問題を回避し、より堅牢なReactアプリケーションを作成するのに役立ちます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール