رد فعل ES6 التدمير


التدمير

لتوضيح التدمير ، سنصنع شطيرة. هل تخرج كل شيء من الثلاجة لعمل شطيرة؟ لا ، ما عليك سوى إخراج العناصر التي ترغب في استخدامها على الشطيرة الخاصة بك.

التدمير هو نفسه تماما. قد يكون لدينا مصفوفة أو كائن نعمل معه ، لكننا نحتاج فقط إلى بعض العناصر الموجودة فيها.

يجعل التدمير من السهل استخراج ما هو مطلوب فقط.


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

هذه هي الطريقة القديمة لتخصيص عناصر مصفوفة لمتغير:

قبل:

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

هذه هي الطريقة الجديدة لتخصيص عناصر مصفوفة لمتغير:

مع التدمير:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

عند إتلاف المصفوفات ، من المهم ترتيب إعلان المتغيرات.

إذا كنا نريد السيارة و suv فقط ، فيمكننا ببساطة ترك الشاحنة مع الاحتفاظ بالفاصلة:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

يصبح التدمير مفيدًا عندما تُرجع الدالة مصفوفة:

مثال

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);


w3schools CERTIFIED . 2022

الحصول على شهادة!

أكمل وحدات React ، ونفّذ التمارين ، وخذ الامتحان واحصل على شهادة w3schools !!

95 دولارًا ENROLL

تدمير الكائنات

هذه هي الطريقة القديمة لاستخدام كائن داخل دالة:

قبل:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

// old way
function myVehicle(vehicle) {
  const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}

إليك طريقة جديدة لاستخدام كائن داخل دالة:

مع التدمير:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

لاحظ أنه لا يلزم التصريح عن خصائص الكائن بترتيب معين.

يمكننا حتى تدمير الكائنات المتداخلة بعمق من خلال الرجوع إلى الكائن المتداخل ثم استخدام نقطتين وأقواس متعرجة لتدمير العناصر المطلوبة من الكائن المتداخل مرة أخرى:

مثال

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red',
  registration: {
    city: 'Houston',
    state: 'Texas',
    country: 'USA'
  }
}

myVehicle(vehicleOne)

function myVehicle({ model, registration: { state } }) {
  const message = 'My ' + model + ' is registered in ' + state + '.';
}


اختبر نفسك مع التمارين

ممارسه الرياضه:

استخدم التدمير لاستخراج العنصر الثالث فقط من المصفوفة ، إلى متغير يسمى suv.

const vehicles = ['mustang', 'f-150', 'expedition'];

const [] = vehicles;