ما هو التفكيك؟
التفكيك هو معاكس تماما لبناء البيانات. على سبيل المثال ، بدلاً من إنشاء كائن أو صفيف جديد ، يقسم الكائن الحالي أو الصفيف واحدًا تلو الآخر لاستخراج البيانات التي تحتاجها.
يستخدم ES6 نمطًا جديدًا لمطابقة القيم العددية التي تريد استخراجها ، وتبني مهمة تفكيك هذا النمط. سيقوم هذا النمط بتخطيط بنية البيانات التي تقوم بتفكيكها ، وفقط تلك البيانات التي تتطابق مع النمط سيتم استخراجها.
يوجد عنصر البيانات الذي تم تفكيكه في مشغل الواجبات إلى يمين = ، يمكن أن يكون أي مجموعة من المصفوفات والكائنات ، مما يسمح بالتعشيش التعسفي. لا يوجد حد لعدد المتغيرات المستخدمة لتعيين القيم لهذه البيانات.
تدمير الصفيف
يستخدم تفكيك الصفيف صفيفًا كعنصر بيانات ، ويمكنك استخراج القيم من هذه الصفيف لتعيين القيم إلى متغير واحد أو أكثر وفقًا لنمط الصفيف (المستخدم لمطابقة القيم التي تحتاجها من الصفيف).
يتم استخدام نمط الصفيف لتحديد القيم التي تريد استخراجها بناءً على موضع القيم. يجب أن يكون قادرًا على تعيين بنية الصفيف بدقة بحيث يتم تعيين كل متغير في نمط الصفيف قيمة تتوافق مع الموضع في المصفوفة التي تم تفكيكها.
اسمحوا لي أن أقدم لك بعض الأمثلة لمساعدتنا على فهم:
مثال نمط الصفيف
تعيين جميع القيم في الصفيف إلى المتغيرات الفردية
// set array const avengers = ['Tony Stark' ، 'Steve Rogers' ، 'Natasha Romanoff'] ؛ // تفكيك الصفيف إلى متغير. يقع نمط الصفيف على يسار مشغل الواجب `=` ، والمصفوفة المهيكلة على يمين //. const [Ironman ، Cap ، Blackwidow] = Avengers ؛ // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Output Ironman: Ironman ؛
استخراج جميع القيم باستثناء أولها
Const Avengers = ['Tony Stark' ، 'Steve Rogers' ، 'Natasha Romanoff'] ؛ // لسنا بحاجة إلى استخدام Tony Const [، Cap ، Blackwidow] = Avengers ؛ // Ironman = error: undefined // cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // cap: cap ؛
استخراج جميع القيم باستثناء الثانية
Const Avengers = ['Tony Stark' ، 'Steve Rogers' ، 'Natasha Romanoff'] ؛ // Cap Missing Const [Ironman ، ، Blackwidow] = Avengers ؛ // Ironman = 'Tony Stark' // cap = error: undefined // blackwidow = 'natasha romanoff' // outputly blackwidow: blackwidow ؛
استخراج جميع القيم باستثناء آخرها
Const Avengers = ['Tony Stark' ، 'Steve Rogers' ، 'Natasha Romanoff'] ؛ // Ironman vs Cap const [Ironman ، Cap] = Avengers ؛ // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = error: undefined // outputly blackwidow: Ironman ؛
صفائف متداخلة
يدعم هذا النمط المطابق أيضًا المصفوفات المتداخلة ، طالما أن مشغل المهمة = نمط الصفيف على اليسار يطابق بنية الصفيف على اليمين. اسمحوا لي أن أشرح مرة أخرى أنه سيتم تعيين المتغيرات الموجودة على اليسار القيمة المقابلة للموضع في الصفيف على اليمين. بغض النظر عن مدى عمرك ، لا يزال بإمكانك تفكيكهم.
تفكيك المصفوفات المتداخلة
. // Avengers وشركائهم const [Blackwidow ، [Ironman ، Warmachine] ، [Cap ، Falcon]] = Avengers ؛ // Blackwidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Warmachine = 'James Rhodes' // Cap = 'Steve Rogers' // Falcon = 'Sam Wilson' // Outding Warmachine: Warmachine ؛
استخراج قيمة من صفيف متداخل بعمق
// استخراج Pepper Potts Const Avengers من هذه المصفوفة = ['Natasha Romanoff' ، [['Tony Stark' ، 'Pepper Potts'] ، 'James Rhodes'] ، ['Steve Rogers' ، 'Sam Wilson']] ؛ // Destructure const [، // تخطي 'natasha romanoff' [[، // skip 'tony Stark' // Pepper Potts ensign to the ariable 'hera']] = avengers ؛ // يرجى ملاحظة: يمكنك أيضًا الكتابة بهذه الطريقة // const [، [[، Hera]]] = Avengers ؛ // إخراج هيرا: هيرا ؛ // Hera = 'Pepper Potts'
استخدم مشغل REST لالتقاط جميع العناصر المتبقية
إذا كنت ترغب في الحصول على عنصر صفيف معين ووضع العناصر المتبقية في صفيف ، فيمكنك استخدام مشغل REST لتفكيكه مثل هذا:
// تفكيك Const Avengers من خلال REST Operator = ['Natasha Romanoff' ، 'Tony Stark' ، 'Steve Rogers'] ؛ const [Blackwidow ، ... thethers] = Avengers ؛ الأخت // Blackwidow = 'Natasha Romanoff' // theothers = ['tony Stark' ، 'Steve Rogers']
تدمير الكائن
يعد تفكيك الكائن أكثر سحرية ، خاصةً عندما تحتاج إلى أخذ قيم من كائن معقد متداخل بعمق ، وهو أكثر وضوحًا. لتكرار ، استخدم تفكيك الكائنات وتفكيك الصفيف نفس القواعد (أي ، قم بإنشاء نمط كائن على الجانب الأيسر من مشغل المهمة ، بحيث يطابق موضعه المتغير موضع القيمة للكائن على الجانب الأيمن).
في تدمير الكائنات ، تحتاج إلى تحديد أسماء السمات التي يجب استخلاصها والأسماء المتغيرة التي سيتم تعيينها. مثل تفكيك الصفيف ، نحتاج إلى إنشاء نمط كائن لرسم خريطة للكائن الذي تم تفكيكه على الجانب الأيسر من مشغل المهمة.
على الرغم من أن ما نريد استخلاصه هو قيمة خاصية الكائن (مثل: نستخرج value من { prop: value }). وفقًا لذلك ، يجب أن يحتوي نمط الكائن الخاص بنا على متغير ، ويجب أن يكون موضع هذا المتغير متسقًا مع موضع قيمة الخاصية التي نكون على وشك الاستخراج.
مثال بسيط
استخراج قيمة سمة كائن بسيطة
يمكننا القيام بذلك لتعيين قيمة خاصية ironMan للكائن { ironMan: 'Tony Stark' } 'Tony Stark' المتغير a :
// تفكيك قيمة خاصية الكائن وتعيينها إلى متغير واحد "A`: const {Ironman: A} = {Ironman: 'Tony Stark'} ؛ // الإخراج أ: أ ؛ // A = 'Tony Stark'استخراج قيم السمة المتعددة
طالما أننا نوسع نفس النمط ، يمكننا استخراج قيم سمة متعددة من كائن ، على النحو التالي:
// إعداد كائننا const avengers = {Ironman: 'Tony Stark' ، cap: 'Steve Rogers' ، Blackwidow: 'Natasha Romanoff'} ؛ // destructure object to ferialbles const {Ironman: a ، cap: b ، blackwidow: c} = avengers ؛ // a = 'tony stark' // b = 'steve rogers' // c = 'natasha romanoff' // output a: a ؛لاحظ كيف يتطابق نمط التفكيك هذا بالضبط الكائن الذي تم تفكيكه.
تدمير الكائن المتداخل
مثل تفكيك المصفوفات المتداخلة ، يمكننا تفكيك الأشياء المتداخلة ، بغض النظر عن مدى عمقها.
// إعداد كائننا const avengers = {Blackwidow: 'Natasha Romanoff' ، IronmanCharacters: {{{Ironman: 'Tony Stark' ، Hera: 'Pepper Potts' ،} ، الشريك: {Warmachine: 'James Brodie'}} ، capcharacters: // Destructure Object to Ferialbles const {Blackwidow: A ، IronmanCharacters: {الزوجين: {Ironman: B ، Hera: C} ، الشريك: {Warmachine: D}} ، capcharacters: {cap: e ، الشريك: {falcon: f}}} = avengers ؛ // a = 'natasha romanoff' // b = 'Tony Stark' // c = 'Pepper Potts' // d = 'James Brodie' // e = 'Steve Rogers' // f = 'Sam Wilson' // Output A: a ؛اسم المتغير المعين
بالطبع ، من السيئ تعيين أسماء متغيرة مثل أسماء A و B و C ومتغيرات يجب أن تكون منطقية.
تسمية طويلة الأمد
// إعداد كائننا const avengers = {Ironman: 'Tony Stark' ، cap: 'Steve Rogers' ، Blackwidow: 'Natasha Romanoff'} ؛ // Destructure Object to Ferialbles بأسماء ذات معنى ] هذا النهج أفضل من الاسم أعلاه A و B و C ، ولكن لا يزال من الممكن تحسينه. { ironMan: ironMan } يبدو قبيحًا بعض الشيء وليس بديهية.
اختصارات سميت بشكل نحلي
إذا كنت ترغب في تعيين قيمة السمة لكائن ما إلى متغير ، واسم المتغير هو نفس اسم سمة الكائن ، ثم في وضع المهمة على الجانب الأيسر من = ، تحتاج فقط إلى كتابة اسم السمة ، على النحو التالي:
// إعداد كائن const Avenger = {Ironman: 'Tony Stark'} ؛ // destructure object to ferialbles بأسماء ذات معنى // Ironman = 'Tony Stark' // Output Ironman: Ironman ؛نظرًا لأن اسم سمة الكائن الذي تم تفكيكه هو نفس الاسم المتغير المعين ، نحتاج فقط إلى سرد الاسم مرة واحدة.
قواعد موجزة
دعنا نعيد تغريد الكود السابق قليلاً لجعلها تبدو أكثر وضوحًا وتوضيحًا:
// إعداد كائننا const avengers = {Ironman: 'Tony Stark' ، cap: 'Steve Rogers' ، Blackwidow: 'Natasha Romanoff'} ؛ // destructure object to ferialbles بأسماء ذات معنى // إخراج Ironman: Ironman ؛استخراج خاصية متداخلة بعمق من كائن
الأمور أكثر إثارة للاهتمام عندما نريد استخراج خاصية كائن متداخل بعمق:
. }} ؛ // المدمر كائن متداخل بعمق {IronManCharacters: {eBain}} = avengers ؛ // couple = {// Ironman: 'Tony Stark' ، // hera: 'Pepper Potts' ، //} // الإخراج الزوجين: الزوجين ؛انتظر كيف قرأت هذا الرمز؟ كيف يتم تعريف الزوجين المتغير؟
من خلال الانقسام بهذه الطريقة ، يمكننا أن نرى أن مشغل الواجب = على اليسار هو خريطة للكائن الذي تم تفكيكه:
Const Avengers = {IronmanCharacters: {{{Ironman: 'Tony Stark' ، Hera: 'Pepper Potts' ،}} ؛ const {IronmanCharacters: {exiro}} = Avengers ؛ // إخراج الزوجين: الزوجين ؛ فقط باستخدام const { couple } = avengers; لا توجد طريقة لاستخراج قيمة الزوجين . فقط من خلال تعيين موقع واسم سمة الكائن المراد استخلاصه ، يمكن لمجمول JS الحصول على المعلومات المقابلة ، والبحث في جميع سمات الكائن ، واستخراج القيمة التي نريدها بدقة.
تجدر الإشارة هنا أيضًا إلى أن الزوجين يستخدمون اختصارات بناء الجملة لتسمية المتغيرات ، وهو في الواقع مثل هذا:
const {IronManCharacters: {الزوجين: الزوجين}} = Avengers ؛هذه هي الطريقة التي يتم بها تعريف الزوجين ، وقيمتها هي القيمة التي اسم السمة الزوجين في Avengers الكائن.
تفكيك سمات الكائن
حتى الآن ، قمنا بتفكيك قيمة الكائن لتعيين القيم لمتغير واحد ، وفي الواقع يمكننا أيضًا تعيين قيم لخصائص كائن آخر.
Const Avengers = {Blackwidow: 'Natasha Romanoff' ، IronmanCharacters: {الزوجين: {Ironman: 'Tony Stark' ، Hera: 'Pepper Potts'}}} ؛ const IronmanProperties = {Family: {}} ؛ IronmanProperties.family// IronmanProperties.family = {// Ironman: 'Tony Stark' ، // Hera: 'Pepper Potts' //} // output IronmanProperties.family:ironmanproperties.family ؛ نحن هنا نخصص قيمة ironManCharacters.couple إلى خاصية ironManProperties.family . فيما يلي نقطتان يتم شرحهما:
1. يجب تضمين مهمة التفكيك بين الأقواس
عندما نفكك متغيرًا موجودًا (مثل IronManProperties في المثال أعلاه) ، يجب علينا القيام بذلك بدلاً من إعلان متغير جديد.
2. لا يزال النمط يتطابق
{ ironManCharacters: { couple... } } يطابق IronmanCharacters في كائن Avengers . وبهذه الطريقة ، يمكنك استخراج قيمة ironManCharacters.couple من كائن Avengers كما يحلو لك. ولكن الآن ، يتم وضع كائن جديد IronManProperties وعائلته الممتلكات خلف الزوجين . في الواقع ، تم تعيين Property ironManProperties.family من هذا الكائن بالفعل.
هل ما زلت مرتبكًا عندما تحاول شرح هذا الموقف بوضوح؟ جرب الرمز أعلاه في JSFiddle وسيكون كل شيء واضحًا.
إذا لم تكن متأكدًا من سبب قيامك بذلك ، فيرجى الرجوع إلى المثال في المقالة التالية. ستخبرك هذه الأمثلة لماذا يتم استخدام هذا النمط لتفكيك كائن JSON الذي يطلق عليه API ، مما يتيح لك تقدير سحر التفكيك!
القيمة الافتراضية
عند التفكيك ، يمكنك أيضًا تحديد قيمة افتراضية للمتغير:
// إعداد كائننا const avengers = {Ironman: 'Tony Stark' ، cap: 'Steve Rogers' ، Blackwidow: 'Natasha Romanoff'} ؛ // المدمر باستخدام الافتراضات const {Ironman ، Cap ، Blackwidow ، thehulk = 'bruce banner'} = avengers ؛ // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // thehulk = 'Bruce Banner' // output leatplicwidow: Blackwidow ؛تجنب هذه المشاكل أثناء التفكيك
const ، دع ، var لا يتم استخدامه عند تفكيك المهمة
تم ذكر هذه النقطة عند الحديث عن تفكيك خصائص الكائن وتعيينها ، ولكن لا يزال من الضروري أن يكررها هنا لمنح الجميع انطباعًا عميقًا.
لا يمكن تفكيك المتغيرات المعلنة
أي أنه يمكنك فقط إعلان المتغيرات أثناء تفكيك المتغيرات.
// إعداد كائننا const avengers = {Ironman: 'Tony Stark' ، cap: 'Steve Rogers' ، Blackwidow: 'Natasha Romanoff' ، thehulk: 'Bruce Banner'} ؛ // تدمير صحيح const {Ironman} = Avengers ؛ دع {cap} = avengers ؛ var {Blackwidow} = Avengers ؛ // تدمير غير صالح دعك. {thehulk} = avengers ؛ // error // output thehulk: thehulk ؛لماذا لا يمكن تفكيك المتغير المعلن؟ ذلك لأنه إذا كنت تستخدم Curly Braces { ، فستعتقد JavaScript أنك تعلن عن كتلة .
الحل هو إرفاق المهمة التي تم تفكيكها بأكملها في زوج من الأقواس .
كيفية تفكيك وتخصيص متغير معلن
// إعداد كائننا const avengers = {Ironman: 'Tony Stark' ، cap: 'Steve Rogers' ، Blackwidow: 'Natasha Romanoff' ، thehulk: 'Bruce Banner'} ؛ // هالك ساري المفعول السماح لك ؛ ({thehulk} = avengers) ؛ // thehulk = 'bruce banner' // output thehulk: thehulk ؛الآن لا نبدأ بأقواس مجعد ، لذلك لن تعتقد JS أننا نعلن عن كتلة حتى نتمكن من تحقيق نتيجة التفكيك المتوقعة.
إرجاع قيمة تفكيكها مباشرة
عندما لا يتم الإعلان عن متغير يتم إرجاعه بعد ذلك أولاً ، يتم إرجاع القيمة التي تم تفكيكها مباشرة ، والتي لن تحقق التأثير المتوقع. على سبيل المثال ، في الكود التالي ، لن يكون كائن Ironman بالكامل هو القيمة المتوقعة لتوني ستارك .
// ملاحظة: هذا لا يعمل! وظيفة gettonystark (Avengers) {return {Ironman: {RealName}} = Avengers ؛ // إرجاع كائن Avengers ، وليس قيمة RealName} const avengers = {Ironman: {RealName: 'Tony Stark'}} ؛ const tonystark = gettonystark (Avengers) ؛ // tonystark = {// Ironman: {// realName: 'Tony Stark' //} //} ؛ // إخراج تونيستارك: تونيستارك ؛لاستخراج قيمة من كائن تم تفكيكه ، يجب عليك أولاً تعيينه إلى متغير ، ثم إرجاع هذا المتغير ، كما هو موضح في الكود التالي:
// ملاحظة: هذا يعمل! وظيفة gettonystark (Avengers) {const {Ironman: {RealName}} = Avengers ؛ إرجاع الاسم الحقيقي ؛ } const Avengers = {Ironman: {RealName: 'Tony Stark'}} ؛ const tonystark = gettonystark (Avengers) ؛ // Tonystark = 'Tony Stark' // إخراج TonyStark: Tonystark ؛طريقة تقسيم المهمة والعودة إلى سطرين من الكود مزعجة حقًا ، والرمز قبيح وغير ضروري. لسوء الحظ ، تعمل JavaScript مثل هذا - عليك تعيين القيمة التي تم تفكيكها إلى متغير أولاً ، ثم إرجاعها ، ويجب إجراء الخطوتين بشكل منفصل.
ومع ذلك ، لم نقول أننا فعلنا ذلك بشكل منفصل ، ولم نقول أنه يجب علينا وضعه في سطرين من الكود. لذا فإن كتابته إلى سطر واحد مثل ما يلي يمكن أن يحقق أيضًا النتائج المتوقعة:
وظيفة gettonystark (Avengers) {return ({Ironman: {RealName}} = Avengers) && realName ؛ } const Avengers = {Ironman: {RealName: 'Tony Stark'}} ؛ const tonystark = gettonystark (Avengers) ؛ // Tonystark = 'Tony Stark' // إخراج TonyStark: Tonystark ؛ نظرًا لأن مشغل JavaScript _short-circuit_ Circuit_Logical (&& و ||) يعيد قيمة المعامل الثاني بناءً على قيمة المعامل الأول ، يمكن أن تحقق طريقة الكتابة هذه التأثير المتوقع. هنا ، يتمثل المعامل الأول في تفكيك تعبير المهمة وتعيين القيمة إلى الاسم الحقيقي . RealName هو المعامل الثاني ، لذلك يتم إرجاع قيمته أخيرًا.
هذا ليس الأمثل ، ولكن يمكن تحقيقه. أثناء متابعة ضيق الكود ، يجب أن تنتبه إلى قابلية قراءة الكود.
لخص
تشرح هذه المقالة المتعمقة المبادئ الرئيسية لتفكيك المهمة. لا يقلل التفكيك فقط من كمية الكود الخاص بك ، ولكن أيضًا يغير بشكل أساسي كيفية تشفيره. كلما استخدمت ذلك ، زادت الطرق التي يمكنك من خلالها تشكيل البيانات والوظائف ، والتي كانت مستحيلة تقريبًا في الماضي. آمل أن يكون هذا المقال مفيدًا للجميع لتعلم ES6.