JavaScriptで破壊する完全なガイド

19566 ワード
destructuring webdev javascript テキストリンク
この記事はもともとblog.vaibhavgharge.com
オブジェクトと配列リテラルはJavaScriptで最も頻繁に使用される表記法のうちの2つです、そして、人気のJSONデータ形式のおかげで、彼らは特に
言語の重要な部分.
この記事の目的は、「JavaScriptの破壊」の異なる側面を定義し、明確にすることです.
詳しく見る.
  • 破壊の理由と理由
    • を破壊しているアレイ
    物を破壊しているオブジェクト
    を切り離している


  • 破壊の理由と理由

    Destructuring is an elegant way to extract data from arrays and objects.


    ECMAScript 6は、データ構造をより小さな部分に分解する過程である破壊を加えることによって、配列やオブジェクトのような構造から、関連する情報を体系的に引き抜く作業を簡素化する.
    オブジェクトや配列から情報を取得する必要があると、多くの重複するコードがローカル変数に特定のデータを取得できます.
    例えば、

    破壊する前に.js
    
let userDetails = {
    userHasSubscribed: true,
    userLoggedIn: false
};

// extract values from the object

let userHasSubscribed = userDetails.userHasSubscribed,
let userLoggedIn = userDetails.userLoggedIn;
    ご覧のように、このコードのコードはUserHumpSubbedとUserLoggedinの値をUserDetailオブジェクトから抽出し、そのデータをローカル変数に同じ名前で格納し、さらに使用するようにします.
    多くの変数を割り当てるには、1つずつ割り当てる必要があります.最悪のことでさえ、入れ子になったデータ構造を持っていれば、データを1つだけ見つけるために、構造全体を掘り下げなければならないかもしれません.
    それはES 6がオブジェクトと配列のために破壊を加えた理由です.データ構造をより小さな部分に分解するとき、情報を得る
    あなたはそれからはるかに簡単になる必要があります.
    この表記法は使用に少しかかりますが、すぐにあなた自身のコードでそれを使用してかなり快適になります.

    アレイの破壊
    典型的なJavaScriptアプリケーションでは、関数は通常、単一の値を返す.配列を返す以外に、複数の値を返すエレガントな方法はありません.
    これは、関数内のコードを理解するのに簡単になりますが、受信端で、それは処理するために非常にメシアです.
    例を見てみましょう.

    アレイの破壊.js
    
const getUserNameById = function(id) {
    return ['Kent', 'Bob', 'Victor'];
};


const userNamById = getUserNameById('@kent_Victor');

const userFirstName = userNamById[0];
const userMiddleName = userNamById[1]
const userLastName = userNamById[2];
    関数getusernameById ()は、指定したユーザIDでユーザの最初の名前、ミドルネーム、最後の名前を返します.
    結果をFirstNameとLastNameのような変数に直接割り当てるのは良いことでしょうか?インデックス演算子を使用せずに.
    それは正確に破壊が可能になるものです.

    アレイの破壊.js
    
let [firstName, middleName, lastName] = getUserNameById('@kent_Victor');
    ご覧のように、インデックスに基づいて配列から値を取得する必要はありません.また、変数に直接値を代入できます.
    firstname ,ミドルネームおよび名前.

    値の抽出方法

    より少ない値
    最初の名前だけではなく、他の詳細については、最初の名前だけをやさしく抽出します.
    
let [firstName] = getUserNameById('@kent_Victor');

    値の無視
    ミドルネームを無視することもできます.
    
let [firstName, , lastName] = getUserNameById('@kent_Victor'); // Extract only firstName and lastName

let [, , lastName] = getUserNameById('@kent_Victor');// Extract only lastName
    すべての値を抽出し、より少ない値を抽出する例を見ました.しかし、JavaScriptでも配列で利用可能な値よりも多くの値を取り出すことができます.

    利用可能以上のものを抽出する
    
let [firstName, , lastName, userName] = getUserNameById('@kent_Victor'); // Extract only firstName, lastName and userName with value 'undefined'

    REST演算子の使用による値の抽出
    ただ一つ以上の変数を使う必要があるが、残りの値を使いたくないならば、それらを使って配列に集めることができます.レスト演算子.
    
// Extract only firstName and variable otherName will contain remaining values from the array.

let [firstName, ...otherName] = getUserNameById('@kent_Victor');

    デフォルト値を渡す
    見ることができるように、配列内で4番目の値が利用できないので、username変数の破壊はありません.しかし、ユーザー名にデフォルト値を割り当てることができます.
    
// Extract firstName, middleName, lastName along with userName with default value.

let [firstName, middleName, lastName, userName = "Kent Victor"] = getUserNameById('@kent_Victor');

    オブジェクトの破壊
    オブジェクトの破壊は、オブジェクトからデータをローカルまたは語彙スコープ内の変数に抽出するエレガントな方法を提供します.
    最初に非破壊的な方法を使用してオブジェクトからデータを抽出し、オブジェクトの破壊がどのように物事を容易にするかを見ましょう.
    以前と同様の例を使用して、ユーザーの詳細を保持するオブジェクトに配列を変換します.

    オブジェクトの破壊js
    
let userDetails = {
    firstName: 'Kent',
    middleName: 'Bob',
    lastName: 'Victor',
    address: { street: '909 Holly St.'}
} 

const firstNameOfUser = userDetails.firstName;
const middleNameOfUser = userDetails.middleName;
const lastNameOfUser = userDetails.lastName;
    ご覧の通り、ユーザーの最初の名前、ミドルネーム、および最後の名前を抽出する必要があります.しかし、それはかなり冗長である点の2行とドット表記の呼び出しをしました.
    破壊は、その不要なコードの多くを減らすことができます.

    オブジェクトの破壊js
    
let userDetails = {
    firstName: 'Kent',
    middleName: 'Bob',
    lastName: 'Victor',
    address: { street: '909 Holly St.'}
} 

const { firstName: firstNameOfUser, middleName: middleNameOfUser , lastName: lastNameOfUser } = userDetails;

    同じ名前の変数への抽出
    
const { firstName, middleName, lastName} = userDetails;

    デフォルト値の割り当て
    抽出するとき、我々が欲しかったプロパティがオブジェクトに存在しないならば、我々は不足している資産のためにデフォルト値を割り当てることができます.
    
const { firstName, middleName, lastName, age = 25} = userDetails; // age will be assigned with default value of 25

    関数へのオブジェクト渡し時の抽出
    ユーザーオブジェクトを受け取り、最初の名前、ミドルネーム、および最後の名前をログ出力する関数を作成しましょう.
    
const logInfo = function(userDetails) {
    console.log(`${userDetails.firstName} ${userDetails.middleName} ${userDetails.lastName}`);
};

logInfo(userDetails);
    これはオブジェクトパラメータを関数に扱う伝統的な方法です.
    オブジェクトの破壊構文を使用すると、オブジェクトの値の抽出によって正しい宣言を行うことができます.オブジェクトの破壊を使用するためにloginfo ()関数を書き直しましょう.
    
const logInfo = function({ firstName, middleName, lastName}) {
    console.log(`${firstName} ${middleName} ${lastName}`);
};

logInfo(userDetails);

    ネストしたオブジェクトの破壊
    これまでの例では、オブジェクトの最上位のプロパティを抽出しました.破壊構文は、より低いレベルまたは埋め込みオブジェクトのプロパティを簡単に抽出できます.ユーザーの詳細に埋め込まれたオブジェクトのStreamプロパティを展開しましょう.
    
const { firstName, address: { street } } = userDetails;
    前に見たように、トップレベルのプロパティであるfirstNameプロパティが抽出されます.また、Addressプロパティ内にネストされているStreamプロパティも存在します
    摘出
    我々が見ることができるように、これらの変更は我々がfirstNameと通りにアクセスすることができるネストしたオブジェクトの特性を抽出するのを許します、しかし、アドレス・オブジェクトにアクセスするどんな試みも「変数が定義されていない」エラーに終わります.

    既存変数の抽出
    これまで、我々はオブジェクトから新しい変数への特性を抽出しました.しかし、我々は新しい変数への抽出に限定されません.オブジェクトの構造を変更することもできますし、ローカルまたは辞書スコープ内の既存の変数に割り当てることもできます.
    
let firstNameOfUser = 'NA';
let lastNameOfUser = 'NA';

({ firstName : firstNameOfUser,  lastName : lastNameOfUser } = userDetails);
    SyntaxErrorを避けるために:予期しないトークン=です.セミコロンは、の外側になければならない.

    考えを捨てる
  • あなたは、破壊がJavaScriptのオブジェクトと配列で働くのをより簡単にするということを学びました.
  • JavaScriptの破壊を使用して、多くの回、言語の偉大な機能を使用して終了するでしょう、かなり簡単に配列とオブジェクトからデータを抽出することができます.
  • オブジェクトと配列の両方の破壊によって未定義のプロパティや項目の既定値を指定でき、割り当ての右側がnullまたは未定義になったときにエラーがスローされることがわかりました.
    • この記事は役に立つと思います.コメントセクションであなたの考えを共有してください.
    私は、話して満足です!あなたがこのポストが好きであるならば❤️ 😊 チアーズ.また会いましょう.
    React Hookの仕組み
    mysqlでのsplit関数