TypeScript Academy · درس

تفكيك المصفوفات والصفائف

فككوا المصفوفات والصفائف باستخدام أنواع العناصر الصحيحة

تفكيك المصفوفات والصفائف درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

التفكيك حسب الموضع

يربط تفكيك المصفوفات المتغيرات حسب الموضع بدلًا من الاسم. ومع tuple، يحمل كل موضع نوعًا محددًا، ما يتيح استخراجًا دقيقًا ومرتبًا.

تفكيك المصفوفات الأساسي

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

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

تحديد نوع نمط tuple

حدّد النوع بمنح الارتباط نوع tuple بعد النمط. ويحصل كل موضع على نوعه الخاص — هنا نوع number ثم نوع string.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

الأنواع تتبع الموضع

في tuple، يكون النوع عند كل فهرس ثابتًا. فالارتباط الأول من نوع number والثاني من نوع string؛ وسيؤدي تبديل القيم إلى خطأ في النوع.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

تخطي العناصر باستخدام الفواصل

اترك فجوة بوضع خانة فاصلة فارغة لتخطي موضع لا تحتاج إليه. ويُتجاهل نوع العنصر المتخطى ببساطة.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

التفكيك باستخدام rest

يجمع عنصر rest العناصر المتبقية في مصفوفة. وفي حالة tuple، يعكس نوعه المواضع المتبقية.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

نوع rest المستمد من tuple

عندما تفكك tuple باستخدام rest، يستنتج TypeScript أن متغير rest هو tuple للعناصر المتبقية، مع الحفاظ على أنواعها.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

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

إليك حيلة أنيقة يتيحها تفكيك المصفوفات: تبديل قيمتين من دون متغير مؤقت. ويجب أن تكون الأنواع متوافقة حتى ينجح فحص النوع لعملية التبديل.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

التفكيك في القيم المُعادة من الدوال

تتوافق الدوال التي تُعيد tuple بشكل رائع مع التفكيك — فنمط React ‏useState هو ذلك تحديدًا.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

القيم الافتراضية في أنماط المصفوفات

وفّر قيمة افتراضية لموضع قد تكون قيمته undefined. ولا تُطبّق القيمة الافتراضية إلا عندما يكون العنصر مفقودًا أو يساوي undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

تفكيك المصفوفات المتداخلة

يمكنك تفكيك المصفوفات الموجودة داخل مصفوفات في تعليمة واحدة. وتتداخل الأنواع تبعًا لذلك، لكن احرص على قابلية القراءة في البنى العميقة.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

تحقق سريع

اختبر مدى فهمك لتفكيك المصفوفات وtuple.

مراجعة

يربط تفكيك المصفوفات حسب الموضع؛ حدّد النوع باستخدام نوع tuple بعد النمط، بحيث يحصل كل فهرس على نوعه الخاص. تخطَّ العناصر باستخدام خانات الفواصل الفارغة، واجمع الباقي باستخدام عنصر rest الذي يظل tuple للمواضع المتبقية، ووفّر قيمًا افتراضية للمواضع التي قد تكون مفقودة. وتمنحك القيم المُعادة على هيئة tuple مع التفكيك أنماطًا قوية مثل useState.

الأسئلة الشائعة

هل درس «تفكيك المصفوفات والصفائف» مجاني؟

نعم — نص درس «تفكيك المصفوفات والصفائف» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «تفكيك المصفوفات والصفائف»؟

فككوا المصفوفات والصفائف باستخدام أنواع العناصر الصحيحة تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «تفكيك المصفوفات والصفائف»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى TypeScript Academy