المسارات
/
JavaScript
JavaScript
/
المنهج
/
تفكيك المصفوفات
تف

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

1 تمرين

نبذة عن تفكيك المصفوفات

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

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

إعادة الإسناد

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

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

وينطبق هذا على المصفوفات المتداخلة أيضًا.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

تخطّي الإسناد

تسمح الصياغة بتخطّي قيم أثناء الربط، مثلًا لتجاهل مواضع محددة في المصفوفة. في المثال أدناه، تخيّل أن لدينا دالة getUserInfo تُرجع مصفوفة تحتوي على الاسم الأول للمستخدم واسم عائلته وعنوان شارعه.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

إسقاط القيم

لا يُشترط في الإسناد أيضًا استخدام كل القيم.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

أخذ قيم أكثر مما هو متاح

بل يمكن حتى استخراج قيم أكثر مما تحتويه المصفوفة. أما المتغيرات المتبقية فستُسند إليها القيمة undefined. قد يكون هذا مفيدًا عندما لا يكون عدد القيم معروفًا مسبقًا.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

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

يمكن لإسناد تفكيك المصفوفات أن يوفّر قيمًا افتراضية في حال عدم وجود أي منها في المصفوفة المصدر.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

مفاهيم ذات صلة

object-destructuring rest-and-spread

تعديل عبر GitHub يفتح الرابط في نافذة أو علامة تبويب جديدة

تعلّم تفكيك المصفوفات