يأخذك إلى فهم مهمة تدمير جافا سكريبت

مفاهيم

البرنامج التعليمي لتعلم JavaScript

يوفر ES6 وضع مهمة أكثر إيجازًا لاستخراج القيم من المصفوفات والكائنات، وهو ما يسمى التدمير

مثال:

[a, b] = [50, 100];
console.log(a);
// الناتج المتوقع: 50
console.log(b);
// الناتج المتوقع: 100

[أ، ​​ب، ...الراحة] = [10، 20، 30، 40، 50]؛
console.log(rest);
// الإخراج المتوقع: [30، 40، 50]

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

عملية تدمير المصفوفة بسيطة جدًا وموجزة. استخدم مصفوفة حرفية على الجانب الأيسر من تعبير المهمة. كل اسم متغير في المصفوفة يعين نفس الفهرس المدمر ماذا يعني العنصر

؟ تمامًا مثل المثال أدناه، تحصل العناصر الموجودة في المصفوفة على اليسار على قيم الفهارس المقابلة للمصفوفة المدمرة على اليمين،

دع [a, b, c] = [1, 2، 3]؛
// أ = 1
// ب = 2
// c = 3

يعلن عن مهام منفصلة.

يمكنك تفكيك المهام بشكل منفصل من خلال إعلانات المتغيرات.

مثال: الإعلان عن المتغيرات، وتعيين القيم بشكل منفصل

// الإعلان عن المتغيرات Let a, b;
// ثم قم بتعيين القيم [a, b] = [1, 2];
console.log(أ);// 1
console.log(b); // 2

تدمير القيمة الافتراضية

إذا كانت القيمة المأخوذة عن طريق التدمير undefined ، فيمكنك تعيين القيمة الافتراضية:

Let a, b;
// تعيين القيمة الافتراضية [a = 5, b = 7] = [1];
console.log(أ);// 1
console.log(b); // 7

في المثال أعلاه، قمنا بتعيين القيم الافتراضية لكل من a وb. في هذه الحالة، إذا كانت قيمة a أو b undefined ، فسيتم تعيين القيمة الافتراضية المحددة للقيمة المقابلة المتغيرات (يتم تعيين 5 إلى a، ويتم تعيين 7 إلى b)

تبادل

قيم المتغيرات

في الماضي، عندما قمنا بتبادل متغيرين، كنا نستخدم دائمًا

//exchange abc = a;a = b;b = c;

ومع ذلك، في التفكيك في المهمة، يمكننا تبادل قيم متغيرين في تعبير مدمر

Let a = 1; Let b = 3;// تبادل قيم a و b [a, b] = [b, a]; console.log( a); // 3console.log(b); // 1

قم

بتفكيك المصفوفة التي تُرجعها الوظيفة مباشرة

.

  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

في المثال أعلاه، ** The يمكن استخدام قيمة الإرجاع [10، 20] لـ c()** في سطر منفصل من التعليمات البرمجية

لتجاهل قيمة الإرجاع (أو تخطي عنصر معين)

يمكنك تخطي بعض قيم الإرجاع غير المرغوب فيها بشكل انتقائي

(. ) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

قم بتعيين القيمة المتبقية للمصفوفة إلى a متغير

عند استخدام تدمير المصفوفة، يمكنك تعيين جميع الأجزاء المتبقية من المصفوفة المخصصة لمتغير

Let [a, ...b] = [1, 2, 3];console.log(a); .log(b ); // [2, 3]

أيضًا

مصفوفة، والعناصر الموجودة في المصفوفة هي جميع العناصر المتبقية.

كن حذرًا هنا، حيث لا يمكنك كتابة فاصلة في النهاية، إذا كانت هناك فاصلة إضافية، فسيتم الإبلاغ عن خطأ

Let [a, ...b,] = [1, 2, 3];// SyntaxError: Rest element. قد لا تحتوي على فاصلة لاحقة

مصفوفة متداخلة تدمر

مثل الكائنات، يمكن أيضًا أن تكون المصفوفات متداخلة

مثال:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// استخدم التدمير المتداخل لتعيين اللون الأحمر والأخضر والأزرق
// استخدم التدمير المتداخل لتعيين اللون الأحمر والأخضر والأزرق
const [ست عشري، [أحمر، أخضر، أزرق]] = اللون؛
console.log(hex, red, green, blue); // #FF00FF 255 0 255

تدمير السلسلة

في عملية تدمير المصفوفة، إذا كان هدف التدمير كائنًا قابلاً للعبور، فيمكن تنفيذ عملية التدمير والتخصيص لواجهة التكرار

للبيانات

[أ، ب، ج، د، ه] = 'مرحبا'؛/*
أ = 'ح'
ب = 'ه'
ج = 'ل'
د = 'ل'
ه = 'س'
*/

تفكيك الكائنات

الأساسية لتفكيك الكائنات

Let x = { y: 22, z: true };
Let { y, z } = x; // Let {y:y,z:z} = اختصار لـ x;
console.log(z); // true

يتم تعيينه لاسم متغير جديد.

يمكن تغيير اسم المتغير عند استخدام تدمير الكائن

Let o = { p: 22, q: true };
Let { p: foo, q: bar } = o;

console.log(foo);//22
console.log(bar); // الكود الصحيح

foo

=

var {p: foo} = o يحصل على اسم الخاصية p للكائن o، ثم يعينه لمتغير اسمه foo

خارج عن طريق التدمير undefined ، يمكننا تعيين القيمة الافتراضية

Let { a = 10, b = 5 } = { a: 3 };

console.log(أ);// 3
console.log(b); // 5

قم بتعيين قيمة لاسم الكائن الجديد وقم بتوفير قيمة افتراضية.

كما ذكرنا سابقًا، يمكننا تعيين قيمة لاسم الكائن الجديد إذا لم يتم تفكيكها، فسيتم استخدام القيمة الافتراضية تلقائيًا

Let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa);
console.log(bb); // 5

استخدم عملية تدمير المصفوفات والكائنات في نفس الوقت،

ويمكن استخدام المصفوفات والكائنات معًا في الهياكل

constprops = [.
  { المعرف: 1، الاسم: 'فيز' }،
  { المعرف: 2، الاسم: "نبضات Google" }،
  {المعرف: 3، الاسم: 'FizzBuzz' }،
];

const [, , { name }] =props;
console.log(name); // "FizzBuzz"

لم يتم تفكيكه بالكامل

Let obj = {p: [{y: 'world'}] };
Let {p: [{ y }, x ] } = obj;// لا تفكك x

// س = غير محدد
// y = 'world'

يعين القيمة المتبقية للكائن

Let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// أ = 10
// ب = 20
// Rest = {c: 30, d: 40}

تدمير الكائنات المتداخلة (يمكن تجاهل التدمير)

Let obj = {p: ['hello', {y: 'world'}] };
دع {p: [x, { y }] } = obj;
// س = "مرحبا"
// ص = "العالم"
Let obj = {p: ['hello', {y: 'world'}] };
Let {p: [x, { }] } = obj;//تجاهل y
// x = 'hello'

ملاحظة:

احرص على استخدام المتغيرات المعلنة لتدمير

عرض الأخطاء:

Let x;{x} = {x: 1};

سوف يفهم محرك JavaScript {x} على أنه كتلة تعليمات برمجية، مما يؤدي إلى بناء جملة خطأ، نريد تجنب كتابة الأقواس المتعرجة في بداية السطر لمنع JavaScript من تفسيرها على أنها كتلة تعليمات برمجية

الطريقة

الصحيحة

للكتابة

:

دع

الدالة add([x, y]) {
	return x + y;}add([1, 2]);

في الكود أعلاه، معلمة الوظيفة add عبارة عن مصفوفة على السطح، ولكن عند تمرير المعلمة، يتم تفكيك معلمة المصفوفة إلى متغيرات x وy الدالة داخليًا هي نفسها التي يتم تمريرها مباشرة في x و y.

استخدام

مهمة التدمير. هناك العديد من الطرق

لتبادل قيم المتغيرات

Let x = 1;
دع ص = 2؛
[x, y] = [y, x];

يتبادل الكود أعلاه قيم x و y. طريقة الكتابة هذه ليست موجزة فحسب، بل سهلة القراءة أيضًا، وإرجاع

قيم متعددة من دالة

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

// إرجاع دالة مصفوفة example() {
  return [1, 2, 3];} Let [a, b, c] = example();
  // إرجاع مثال دالة كائن () {
  يعود {
    فو: 1،
    شريط: 2
  };
  }let { foo, bar } = example();

استخراج مهمة تدمير بيانات JSON

مفيدًا بشكل خاص لاستخراج البيانات في كائنات JSON.

مثال:

Let jsonData = {.
  المعرف: 42,
  الحالة: "موافق"،
  البيانات: [867، 5309]
};

Let {المعرف، الحالة، البيانات: الرقم} = jsonData؛

console.log(id, Status, number);
// 42، "OK"، [867، 5309]

باستخدام الكود أعلاه، يمكننا استرداد القيمة بسرعة في بيانات JSON.

التوصيات ذات الصلة: البرنامج التعليمي لـ JavaScript

ما سبق هو أخذك إلى فهم تفاصيل مهمة تدمير JavaScript مزيد من المعلومات، يرجى الانتباه إلى PHP المقالات الأخرى ذات الصلة على الموقع الصيني!