تدمير المصفوفات والأشياء

التدمير في JavaScript هو صيغة مهمة تسمح لك باستخراج البيانات بسهولة من المصفوفات والكائنات في سطر واحد.

تدمير الكائن

محرر مباشر

function learnJavaScript() { // Create a `fruit` object let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // Destructuring the `fruit` object let { title, group, quantity } = fruit // Display `title` return title }

function learnJavaScript() {
  // Create a `fruit` object
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }

  // Destructuring the `fruit` object
  let { title, group, quantity } = fruit

  // Display `title`
  return title
}

النتيجة

Loading...

الخصائص title, group و quantity كرر بنية الكائن "ثمار" وانسخ قيمها إلى متغيرات متطابقة🔔 عثر عليه في {...}. لذلك ، إذا قمت بتبديل المتغيرات 🔔 في{...}, ثم سيعمل الرمز أيضًا ، حاول تبديل المتغيرات🔔 in the example في الاعلى.

كائن متداخل

يمكننا أيضًا تدمير الكائن المتداخل.

محرر مباشر

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: { store: 5, storeHaus: 99 } } let { title, quantity: { store: s1, storeHaus: s2 } } = fruit return title + ', ' + parseFloat(s1 + s2) }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: {
      store: 5,
      storeHaus: 99
    }
  }

  let {
    title,
    quantity: { store: s1, storeHaus: s2 }
  } = fruit

  return title + ', ' + parseFloat(s1 + s2)
}

النتيجة

Loading...

اسماء اخرى

إذا كنت بحاجة إلى استخدام أسماء المتغيرات🔔 بخلاف أسماء الخصائص ، سيعمل بناء الجملة التالي:

محرر مباشر

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // title -> a; group -> b; quantity -> c let { title: a, group: b, quantity: c } = fruit return a }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }
  // title -> a; group -> b; quantity -> c
  let { title: a, group: b, quantity: c } = fruit

  return a
}

النتيجة

Loading...

Default values

إذا كان في{...} تكتب متغير خاصية🔔 التي لن يتم العثور عليها ، ثم سيتم تعيين القيمة لهاundefined. لتعيين قيمة افتراضية لمتغير🔔, يمكنك تخصيص هذه القيمة لها. إذا حاولت تعيين قيمة لمتغير🔔 التي تم العثور على خصائصها ، ثم سيتم تعيين قيمة الخاصية لها. لنلقي نظرة على مثال.

محرر مباشر

function learnJavaScript() { let fruit = { title: 'banana' } let { title = 'lime', group, quantity = 5 } = fruit return title + ', ' + group + ', ' + quantity }

function learnJavaScript() {
  let fruit = {
    title: 'banana'
  }
  let { title = 'lime', group, quantity = 5 } = fruit

  return title + ', ' + group + ', ' + quantity
}

النتيجة

Loading...

ال title يحتوي على قيمة الخاصية ، وليس ما نخصصه لها. ال group الخاصية غير موجودة في كائن "الفاكهة" ، ولم نقم بتعيين أي قيم للمتغير 🔔. الملكية quantity أيضًا غير موجود ، لكننا قمنا بتعيين القيمة 5 للمتغير🔔.

بقية

إذا كنت بحاجة إلى الحصول على متغير واحد 🔔 من كائن ، وجمع الباقي في كائن آخر ، ثم استخدم... قبل المتغير 🔔 من خلالها سيتم إنشاء الكائن مع الخصائص المتبقية.

محرر مباشر

function learnJavaScript() { let fruit = { title: 'banana ', group: 'tropical ', quantity: 5 } let { group, ...prop } = fruit return prop.title + group }

function learnJavaScript() {
  let fruit = {
    title: 'banana ',
    group: 'tropical ',
    quantity: 5
  }
  let { group, ...prop } = fruit

  return prop.title + group
}

النتيجة

Loading...

تدمير المصفوفات

تدمير المصفوفة هو نفسه بالنسبة للكائن. الاختلاف الوحيد هو أنه سيتم تخصيص قيم عناصر المصفوفة للمتغيرات 🔔 بالترتيب الذي يتم به تعريف العناصر.

محرر مباشر

function learnJavaScript() { // Create an array `fruit` let fruit = ['banana', 'tropical', 5] // Destruct the `fruit` array let [title, group, quantity] = fruit // Display return `${title}, ${group}, ${quantity}` }

function learnJavaScript() {
  // Create an array `fruit`
  let fruit = ['banana', 'tropical', 5]

  // Destruct the `fruit` array
  let [title, group, quantity] = fruit

  // Display
  return `${title}, ${group}, ${quantity}`
}

النتيجة

Loading...

بقية

بالقياس مع الأشياء ، يعمل الباقي.

محرر مباشر

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let [name, ...prop] = fruit return `${name}, ${prop}` }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let [name, ...prop] = fruit

  return `${name}, ${prop}`
}

النتيجة

Loading...

نسخة من المصفوفة

مثال على إنشاء نسخة من المصفوفة.

محرر مباشر

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let _fruit = [...fruit] return _fruit }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let _fruit = [...fruit]

  return _fruit
}

النتيجة

Loading...

المصفوفات المتسلسلة

مثال على دمج المصفوفات في واحد.

محرر مباشر

function learnJavaScript() { let name = ['banana '], prop = ['tropical ', 5], fruit = [...name, ...prop] return fruit }

function learnJavaScript() {
  let name = ['banana '],
    prop = ['tropical ', 5],
    fruit = [...name, ...prop]

  return fruit
}

النتيجة

Loading...

مشاكل؟

اكتب ل Discord محادثة.

أسئلة:

التدمير هو؟

1. الوظيفة
2. النحو
3. الكائن

هل من الضروري ، عند إتلاف كائن ، وضع المتغيرات في نفس الترتيب كما هي في الكائن؟

1. نعم
2. لا

ما الذي سيتم تخصيصه للمتغير إذا لم يتم العثور على خاصية مماثلة في الكائن؟

1. error
2. undefined
3. unknown

هل ترتيب العناصر في كائن مهم عند تدميره؟

1. نعم
2. لا

In order to understand how much you learned this lesson, take the test on the mobile application of our school on this topic.

##الروابط

1. Learn JavaScript
2. MDN Web Docs
3. Destructuring in ES6

المساهمون✨

الشكر يعود إلى هؤلاء الأشخاص الرائعين(emoji key):

IIo3iTiv 📖

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨