有條件的解構

我試圖有條件地解構一個物件，但即使試圖實作我在其他答案中看到的回退也無濟于事。有時出發或到達是未定義的，這會使代碼中斷。我怎么能解決呢？

const {
    duration,
    segments: [
        {
            departure: { iataCode: departureIataCode, at: departAt},
            arrival: { iataCode: arrivalIataCode, at: arriveAt },
            carrierCode,
        },
        {
            departure: {
                iataCode: stopOverDepartureIataCode,
                at: stopOverDepartAt,
            },
            arrival: { iataCode: finalArrivalIataCode, at: finalArriveAt },
        },
    ],
} = outbound;

uj5u.com熱心網友回復：

如果在解構時提供默認值，則不會出現錯誤，而是將值設定為某個默認值（如果不存在）。

在下面的示例中，我從第一個段中洗掉了到達物件和在 iata 代碼上的停留，這些將被設定為默認值而不是導致錯誤。

let outbound = {
    duration: 'duration',
    segments: [
        {
            departure: { iataCode: 'LAX', at: 'departAt'},
            carrierCode: 'LH',
        },
        {
            departure: {
                at: 'stopOverDepartAt',
            },
            arrival: { iataCode: 'finalArrivalIataCode', at: 'finalArriveAt' },
        },
    ],
};

// Set to whichever value you wish...
const defaultValue = undefined;

const {
    duration,
    segments: [
        {
            departure: { iataCode: departureIataCode = defaultValue, at: departAt = defaultValue } = {},
            arrival: { iataCode: arrivalIataCode = defaultValue, at: arriveAt = defaultValue } = {},
            carrierCode = '',
        } = {}, // Set default for segment 0.
        {
            departure: {
                iataCode: stopOverDepartureIataCode = defaultValue,
                at: stopOverDepartAt = defaultValue,
            } = {},
            arrival: { iataCode: finalArrivalIataCode = defaultValue, at: finalArriveAt = defaultValue } = {},
        } = {}, // Set default for segment 1.
    ] = [{},{}], // Set defaults for segments.
} = outbound;

let outputs = { departureIataCode, carrierCode, arrivalIataCode, stopOverDepartureIataCode } ;
Object.keys(outputs).forEach(k => console.log(`${k}:`, `${outputs[k]}`))
         

.as-console-wrapper { max-height: 100% !important; top: 0; }

我還會看看lodash get，這對于訪問可能存在或不存在的嵌套值非常有用：

let outbound = {
    duration: 'duration',
    segments: [
        {
            departure: { iataCode: 'LAX', at: 'departAt'},
            carrierCode: 'LH',
        },
        {
            departure: {
                at: 'stopOverDepartAt',
            },
            arrival: { iataCode: 'finalArrivalIataCode', at: 'finalArriveAt' },
        },
    ],
};

let departureIataCode = _.get(outbound, 'segments[0].departure.iataCode');
let carrierCode = _.get(outbound, 'segments[0].carrierCode');
let arrivalIataCode = _.get(outbound, 'segments[0].arrival.iataCode');
let stopOverDepartureIataCode = _.get(outbound, 'segments[1].departure.iataCode');

let outputs = { departureIataCode, carrierCode, arrivalIataCode, stopOverDepartureIataCode } ;
Object.keys(outputs).forEach(k => console.log(`${k}:`, `${outputs[k]}`))

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" referrerpolicy="no-referrer"></script>

uj5u.com熱心網友回復：

這可能不是一個直接的答案，但絕對與某些人相關并有幫助......

不久前，我受 Laravel data_get()php 函式的啟發創建了這個函式：

/**
 * Get an item from an array or object using "dot" notation.
 *
 * @param {object} source
 * @param {array|string} name
 * @param {null|*} defaultValue
 *
 * @returns {null|*}
 */
window.objectGet = function( source, name, defaultValue = null ) {

    const parts = Array.isArray( name ) ? name : name.split( '.' );

    // Duplicate array prevents modifying original by reference
    let partsTracking = Array.isArray( name ) ? name : name.split( '.' );

    for ( let i = 0; i < parts.length; i   ) {
        const segment = parts[ i ];
        partsTracking.splice( 0, 1 );

        if ( segment === null ) {
            return source;
        }

        if ( segment === '*' ) {

            if ( !source || typeof source !== 'object' ) {
                return defaultValue;
            }

            let tmpResult = [];

            for ( var key in source ) {
                tmpResult.push( objectGet( source[ key ], partsTracking.join( '.' ), defaultValue ) );
            }

            return partsTracking.includes( '*' ) ? tmpResult.flat( Infinity ) : tmpResult;
        }

        if ( source && typeof source === 'object' && segment in source ) {
            source = source[ segment ];
        } else {
            return defaultValue;
        }
    }

    return source;
};

用法示例：

const myObject = {
    key: 'value',
    nested: {
        example: [
            'value1',
            'value2',
        ]
    }
};

console.log( objectGet( myObject, 'key' ) ); // Output: 'value'
console.log( objectGet( myObject, 'nested.example' ) ); // Output: [ 'value1', 'value2' ]
console.log( objectGet( myObject, 'nested.example.0' ) ); // Output: 'value1'
console.log( objectGet( myObject, 'nested.example.1' ) ); // Output: 'value2'

因此，關于 OP 問題的用法可能類似于：

const duration                  = objectGet( outbound, 'duration' );
const departureIataCode         = objectGet( outbound, 'segments.0.departure.iataCode' );
const departAt                  = objectGet( outbound, 'segments.0.departure.at' );
const arrivalIataCode           = objectGet( outbound, 'segments.0.arrival.iataCode' );
const arriveAt                  = objectGet( outbound, 'segments.0.arrival.at' );
const carrierCode               = objectGet( outbound, 'segments.0.carrierCode' );
const stopOverDepartureIataCode = objectGet( outbound, 'segments.1.departure.iataCode' );
const stopOverDepartAt          = objectGet( outbound, 'segments.1.departure.at' );
const finalArrivalIataCode      = objectGet( outbound, 'segments.1.arrival.iataCode' );
const finalArriveAt             = objectGet( outbound, 'segments.1.arrival.at' );

我應該補充一點，如果找不到鍵，將回傳 null。您可以將默認值作為第三個引數傳遞，例如：

const notFound = objectGet( input, 'my.data.key', 'my default value' );

您還可以使用*以下示例回傳嵌套值陣列：

const input = {
    data: [
        {
            id: 123,
            name: 'Example 1'
        },
        {
            id: 789,
            name: 'Example 2'
        }
    ]
};

const ids = objectGet( input, 'data.*.id' ); // Ouput: [ 123, 789 ]

標籤：javascript

上一篇：Javascriptonclick如何在再次單擊時撤消

下一篇：以下形式的功能組件是否有效？