Object Destructuring در جاوا اسکریپت

ES6 یک ویژگی جدید به نام destructing assignment معرفی کرد که به شما این امکان را می دهد تا properties یک object یا element های یک آرایه را به متغیرهای جداگانه assignment کنید.در این نوشته object destructuring را مورد بررسی قرار می دهیم.

نکته : اگر می خواهید نحوه destructure آرایه را بیاموزید ، می توانید نوشته Array Destructuring در جاوا اسکریپت را مطالعه کنید.

معرفی Object destructuring در جاوا اسکریپت

فرض کنید که یک object به نام person با دو properties به نام های firstName و lastName دارید:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

let person = {

firstName: 'John',

lastName: 'Doe'

};

تا قبل از ES6 زمانی که شما قصد داشتید properties های person رو به یک سری متغیر تخصیص دهید،باید از روش زیر استفاده می کردید:

let firstName = person.firstName;
let lastName = person.lastName;

1 2	let firstName = person.firstName; let lastName = person.lastName;

ES6 با object destructuring یک راه جدید جایگزین برای تخصیص properties های object معرفی کرد:

let { firstName: fname, lastName: lname } = person;

1	let { firstName: fname, lastName: lname } = person;

در این مثال properties های firstName و lastName به ترتیب به متغیر های fName و lName تخصیص یافته اند.

با استفاده از این syntax:

let { property1: variable1, property2: variable2 } = object;

1	let { property1: variable1, property2: variable2 } = object;

identifier قبل از (:) property یک object و identifier بعد از آن متغیر است

توجه داشته باشید که نام ویژگی property در سمت چپ است ، تفاوتی نمی کند که object literal باشد یا object destructuring .

اگر متغیرها دارای نام یکسانی با properties های object هستند ، می توانید کد را به صورت زیر مختصر تر کنید:

let { firstName, lastName } = person;

console.log(firstName); // 'John'
console.log(lastName); // 'Doe'

let { firstName, lastName } = person;

console.log(firstName); // 'John'

console.log(lastName); // 'Doe'

در این مثال ، ما دو متغیر firstName و lastName را تعریف کردیم و در همان statement، properties های شیء person را به متغیرها اختصاص دادیم.

زمانی که شما یک property که وجود ندارد به یک متغیر با استفاده از object destructuring اختصاص می دهید،مقدار متغیر برابر با undefined می شود.برای مثال:

let { firstName, lastName, middleName } = person;
console.log(middleName); // undefined

1 2	let { firstName, lastName, middleName } = person; console.log(middleName); // undefined

در این مثال middleName property در شیءperson وجود ندارد،بنابراین مقدار متغیر middleName برابر با undefined است.

Setting default values

شما می توانید یک default value در صورتی که property در object وجود نداشته باشد،اختصاص دهید.

let person = {
    firstName: 'John',
    lastName: 'Doe',
    currentAge: 28
};

let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // ''
console.log(age); // 28

let person = {

firstName: 'John',

lastName: 'Doe',

currentAge: 28

};

let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // ''

console.log(age); // 28

در این مثال ما empty string را به متغیر middleName زمانی که شیء person دارای property به نام middleName نیست،اختصاص دادیم.

همچنین ما currentAge property را به متغیر age با مقدار پپیش فرض 18 اختصاص دادیم.

با این وجود زمانی که person object یک property به نام middleName دارد،اختصاص به صورت معمول انجام می شود:

Reflection در جاوا اسکریپت

let person = {
    firstName: 'John',
    lastName: 'Doe',
    middleName: 'C.',
    currentAge: 28
};

let { firstName,  lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // 'C.'
console.log(age); // 28

let person = {

firstName: 'John',

lastName: 'Doe',

middleName: 'C.',

currentAge: 28

};

let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;

console.log(middleName); // 'C.'

console.log(age); // 28

Destructuring a null object

یک تابع ممکن است در برخی شرایط یک object یا null را برگرداند. مثلا:

function getPerson() {
    return null;
}

function getPerson() {

return null;

}

و زمانی که شما از object destructuring استفاده می کنید:

let { firstName, lastName } = getPerson();

console.log(firstName, lastName);

let { firstName, lastName } = getPerson();

console.log(firstName, lastName);

کد یک TypeError را throw می کند:

TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.

1	TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.

برای جلوگیری از این امر ، می توانید از عملگر OR (||) برای جایگزینی null object با یک empty object استفاده کنید:

let { firstName, lastName } = getPerson() || {};

1	let { firstName, lastName } = getPerson() \|\| {};

حالا هیچ error اتفاق نمی افتد.و firstName و lastName برابر با undefined خواهند بود.

Nested object destructuring

فرض کنید شما یک employee object دارید که دارای یک name object به عنوان property دارید:

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};

let employee = {

id: 1001,

firstName: 'John',

lastName: 'Doe'

}

};

statement زیر properties های nested name object را درون متغیرها جداگانه destruct می کند:

let {
    name: {
        firstName,
        lastName
    }
} = employee;

console.log(firstName); // John
console.log(lastName); // Doe

let {

firstName,

lastName

}

} = employee;

console.log(firstName); // John

console.log(lastName); // Doe

این امکان نیز وجود دارد که چندین assignement از یک property به چنیدن متغیر انجام شود:

let employee = {
    id: 1001,
    name: {
        firstName: 'John',
        lastName: 'Doe'
    }
};

let {
    name: {
        firstName,
        lastName
    },
    name
} = employee;

console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); // { firstName: 'John', lastName: 'Doe' }

let employee = {

id: 1001,

firstName: 'John',

lastName: 'Doe'

}

};

let {

firstName,

lastName

name

} = employee;

console.log(firstName); // John

console.log(lastName); // Doe

console.log(name); // { firstName: 'John', lastName: 'Doe' }

Destructuring function arguments

فرض کنید یک تابع دارید که person object را نشان می دهد:

let display = (person) => console.log(`${person.firstName} ${person.lastName}`);

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

display(person);

let display = (person) => console.log(`${person.firstName} ${person.lastName}`);

let person = {

firstName: 'John',

lastName: 'Doe'

};

display(person);

این امکان وجود دارد که argument های object پاس داده شده به تابع را destruct کرد:

let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

display(person);

let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);

let person = {

firstName: 'John',

lastName: 'Doe'

};

display(person);

به نظر می رسد که این روش چندان واضح نباشد ، مخصوصاً هنگامی که object پاس داده شده به عنوان argument دارای properties های زیادی باشد. این تکنیک اغلب در React استفاده می شود.

Object Destructuring در جاوا اسکریپت

معرفی Object destructuring در جاوا اسکریپت

Setting default values

Destructuring a null object

Nested object destructuring

Destructuring function arguments

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

معرفی Object destructuring در جاوا اسکریپت

Setting default values

Destructuring a null object

Nested object destructuring

Destructuring function arguments

مطالب زیر را حتما مطالعه کنید

Reflection در جاوا اسکریپت

Proxy در جاوا اسکریپت

()includes در جاوا اسکریپت

endsWith در جاوا اسکریپت

startsWith در جاوا اسکریپت

()Object.is در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ