٥.٤ الوسائط

تمهيد

التمرين 1: أنشئ دالة عادية تستقبل وسيطًا واحدًا وتُرجعه.

function displayArguments(a){
  return a;
}

console.log(displayArguments(4));

النتيجة هي: 4

التمرين 2: أنشئ دالة عادية تستقبل أربعة وسائط وتُرجعها.

function displayArguments(a, b, c, d){
  return a, b, c, d;
}

console.log(displayArguments(4, 5, 7, 10));

النتيجة هي: 10

تحذير

تُرجع الدالة قيمة واحدة؛ ولإرجاع عدة قيم نجمعها في مصفوفة أو كائن.

---

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

التمرين 3: تأمّل الشيفرة التالية.

function displayArguments(a, b, c, d){
  return [a, b, c, d];
}

var a, b, c, d;
[a, b, c, d] = displayArguments(4, 5, 7, 10);
console.log(a, b, c, d);

النتيجة هي: 4 5 7 10

التمرين 4: الدالة calc تُرجع مصفوفة. فكّك عناصرها إلى متغيرات منفصلة.

function calc(n1, n2){
  return [n1 + n2, n1 - n2, n1 * n2, n1 / n2];
}

var res1, res2, res3, res4;
[res1, res2, res3, res4] = calc(5, 8);
console.log(res1, res2, res3, res4);

النتيجة هي: 13 -3 40 0.625

التمرين 5: الدالة calc تُرجع مصفوفة. فكّك عناصرها إلى متغيرات منفصلة.

function calc(num1, num2, num3){
  return [num1 * num2, num1 * num3, num2 * num3];
}

var res1, res2, res3;
[res1, res2, res3] = calc(8, 0, 3);
console.log(res1, res2, res3);

النتيجة هي: 0 24 0

التمرين 6: الدالة calc تُرجع مصفوفة. فكّك عناصرها إلى متغيرات منفصلة.

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return [a1, a2, a3, a4, a5, a6, a7, a8];
}

var res1, res2, res3, res4, res5, res6, res7, res8;
[res1, res2, res3, res4, res5, res6, res7, res8] = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(res1, res2, res3, res4, res5, res6, res7, res8);

النتيجة هي: 10 20 30 40 50 60 70 80

التمرين 7: الدالة calc تُرجع مصفوفة. فكّك عناصرها إلى 3 متغيرات منفصلة.

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return [a1, a2, a3, a4, a5, a6, a7, a8];
}

var res1, res2, res3;
[res1, res2, res3] = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(res1, res2, res3);

النتيجة هي: 10 20 30

التمرين 8: الدالة calc تُرجع مصفوفة. فكّك عناصرها إلى 3 متغيرات منفصلة. تلميح: استخدم [res1, res2, ...res3].

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return [a1, a2, a3, a4, a5, a6, a7, a8];
}

var res1, res2, res3;
[res1, res2, ...res3] = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(res1, res2, res3);

النتيجة هي: 10 20 (6) [30, 40, 50, 60, 70, 80]

عامل البقية (Rest)

في task 8؛ العامل rest operator ... يجمع العناصر المتبقية في مصفوفة.

التمرين 9: الدالة calc تُرجع مصفوفة. فكّك عناصرها إلى 2 متغيرات منفصلة. تلميح: استخدم عامل البقية.

function calc(a, b, c, d, e, f, g, h){
  return [a * 1 , b * 2, c * 3, d * 4, e * 5, f * 6, g * 7, h * 8];
}

var n1, n2;
[n1, ...n2] = calc(1, 2, 3, 4, 5, 6, 7, 8);
console.log(n1, n2);

النتيجة هي: 1 (7) [4, 9, 16, 25, 36, 49, 64]

التمرين 10: ارجع إلى التمرين 9؛ فكّك قيم المصفوفة إلى 4 متغيرات منفصلة.

function calc(a, b, c, d, e, f, g, h){
  return [a * 1 , b * 2, c * 3, d * 4, e * 5, f * 6, g * 7, h * 8];
}

var n1, n2, n3, n4;
[n1, n2, n3, ,..n4] = calc(1, 2, 3, 4, 5, 6, 7, 8);
console.log(n1, n2, n3, n4);

النتيجة هي: 1 4 9 (5) [16, 25, 36, 49, 64]

١. إسناد التفكيك

العامل destructuring assignment يتيح استخراج عناصر المصفوفة في متغيرات منفصلة.

---

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

التمرين 11: تأمّل الشيفرة التالية.

var obj = {
  a: 1,
  b: 2,
  c: 3
};

var {a, b, c} = obj;
console.log(a, b, c);

النتيجة هي: 1 2 3

التمرين 12: الدالة doSomething تُرجع كائنًا. فكّك قيم خصائصه إلى متغيرات منفصلة.

function doSomething(task1, task2, task3){
  return {t1: task1, t2: task2, t3: task3};
}

var {t1, t2, t3} = doSomething("Meditate", "Be grateful", "Study JS");
console.log(t1, t2, t3);

النتيجة هي: Meditate Be grateful Study JS

التمرين 13: الدالة getMeALaptop تُرجع كائنًا. استخرج قيمة ram من الكائن المُرجع.

function getMeALaptop(p, r, s){
  return {processor: p, ram: r, storage: s}
}

var {ram} = getMeALaptop("i7", "8GB", "2TB");
console.log(ram);

النتيجة هي: 8GB

التمرين 14: الدالة getMeAVideo تُرجع كائنًا. استخرج title و language من الكائن المُرجع.

function getMeAVideo(l, g, c, t, l){
  return {
    length: l,
    host: g,
    category: c,
    title: t,
    language: l
  }
}

var {title, language} = getMeAVideo("30min", "Nawras", "Education", "JS rest operator", "Arabic");
console.log(title, language);

النتيجة هي: JS rest operator Arabic

التمرين 15: الدالة userInfo تُرجع كائنًا. استخرج firstName, lastName، و email من الكائن المُرجع.

function userInfo(f, l, u, e){
  return {
    firstName: f,
    lastName: l,
    username: u,
    email: e
  }
};

var {firstName, lastName, email} = userInfo("Ola", "Rasi", "OlaRasi89", "olaRasi@gmail.com" );
console.log(firstName, lastName, email);

النتيجة هي: Ola Rasi olaRasi@gmail.com

التمرين 16: تأمّل الشيفرة التالية.

function getMeALaptop(p, r, s){
  return {processor: p, ram: r, storage: s}
}

var {processor, ...rest} = getMeALaptop("i7", "8GB", "2TB");
console.log(processor, rest);

النتيجة هي: i7 {ram: "8GB", storage: "2TB"}

التمرين 17: ارجع إلى التمرين 14؛ استخرج host من الكائن، واجمع الخصائص المتبقية في other .

function getMeAVideo(l, g, c, t, l){
  return {
    length: l,
    host: g,
    category: c,
    title: t,
    language: l
  }
}

var {host, ...other} = getMeAVideo("30min", "Nawras", "Education", "JS rest operator", "Arabic");
console.log(host, other);

النتيجة هي: Nawras {length: "Arabic", category: "Education", title: "JS rest operator", language: "Arabic"}

التمرين 18: ارجع إلى التمرين 15؛ استخرج username و email من الكائن، واجمع الخصائص المتبقية في other .

function userInfo(f, l, u, e){
  return {
    firstName: f,
    lastName: l,
    username: u,
    email: e
  }
};

var {username, email, ...other} = userInfo("Ola", "Rasi", "OlaRasi89", "olaRasi@gmail.com" );
console.log(username, email, other);

النتيجة هي: OlaRasi89 olaRasi@gmail.com {firstName: "Ola", lastName: "Rasi"}

٢. إسناد التفكيك

العامل destructuring assignment يتيح استخراج خصائص الكائن في متغيرات منفصلة.

---

الكائن arguments

التمرين 19: تأمّل الشيفرة التالية.

function displayArguments(a, b, c, d){
  return arguments;
}

var result = displayArguments(4, 5, 7, 10);
console.log(result);

النتيجة هي: Arguments(4) [4, 5, 7, 10, callee: ƒ, Symbol(Symbol.iterator): ƒ]

التمرين 20: ارجع إلى التمرين 19؛ ما نوع result?

function displayArguments(a, b, c, d){
  return arguments;
}

var result = displayArguments(4, 5, 7, 10);
console.log(typeof result);

النتيجة هي: object

التمرين 21: ارجع إلى التمرين 19؛ ما نتيجة result[0], result[1], result[2], result[4]?

function displayArguments(a, b, c, d){
  return arguments;
}

var result = displayArguments(4, 5, 7, 10);
console.log(result[0], result[1], result[2], result[3]);

النتيجة هي: 4 5 7 10

التمرين 22: أعد كتابة التمرين 6 باستخدام the argument object.

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return arguments;
}

var result = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(result[0], result[1], result[2], result[3], result[4], result[5], result[6], result[7]);

النتيجة هي: 10 20 30 40 50 60 70 80

التمرين 23: أنشئ دالة عادية تستقبل عددًا غير محدّد مسبقًا من الوسائط وتُرجعها.

function giveMeMore(...values){
  return values;
}

var result = giveMeMore(6, 8, 7, 10, 11);
console.log(result);

النتيجة هي: (5) [6, 8, 7, 10, 11]

التمرين 24: أنشئ دالة تستقبل 5 وسائطَ، وتغيّر قيمة الوسيط الأول إلى 105، ثم تُرجعه.

function func(arg1, arg2, arg3, arg4, arg5){
  arguments[0] = 105;
  return arguments[0]
}

var result = func(5, 8, 50, 0, 55);
console.log(result);

النتيجة هي: 105

التمرين 25: أنشئ دالة تستقبل عددًا غير محدّد من الوسائط وتغيّر قيمة التاسع إلى arguments[8] * 20، ثم تُرجعه.

function func(...values){
  arguments[8] = arguments[8] * 20;
  return arguments[8]
}

var result = func(10, 80, 55, 97, 4, 88, 70, 100, 200, 10);
console.log(result);

النتيجة هي: 4000

الكائن arguments

The Argument Object هو array-like كائن يحتوي على الوسائط المُمرّرة إلى الدالة العادية.

شبيه بالمصفوفة

The argument object هو array-like لكنه لا يمتلك طرائق المصفوفات المضمّنة.