4. الجداول

4.1. نص برمجي [tab-01]

يوضح البرنامج النصي التالي بعض خصائص مصفوفات JavaScript. تشبه هذه المصفوفات مصفوفات PHP، ولكن مع اختلاف رئيسي واحد: يتم التعامل معها عبر المؤشرات وتُعتبر كائنات.


'use strict';
 
// an array is an object manipulated via its address
const tab1 = [1, 2, 3];
// address copying
const tab2 = tab1;
// tab1 and tab2 point to the same table
console.log("tab1===tab2 :", tab1 === tab2);
// the table can be modified using either tab1 or tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

تعليقات

يُظهر السطر 2 من النتائج أن [tab1] و [tab2] هما كيانان متساويان، بل في الواقع مؤشران متساويان؛
يُظهر السطران 4 و 5 من النتائج أن هذين المؤشرين يشيران إلى نفس المصفوفة؛

4.2. نص برمجي [tab-02]

يوضح هذا البرنامج النصي أن مصفوفات JavaScript تختلف عن المصفوفات في اللغات المُجمَّعة.


'use strict';
 
// table
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// element initialization
tab[3] = 100;
tab[1] = "huit";
// table
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// the keys to the picture are its indices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// table values
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}

السطر 4: مصفوفة فارغة؛
السطر 8: المصفوفة ليس لها حجم ثابت. إنها ببساطة سلسلة من العناصر المفهرسة برقم. يمكنك تهيئة العنصر رقم 3 حتى لو لم يتم تعريف العناصر [0، 1، 2] بعد؛
الأسطر 16–24: يتصرف مصفوفة JavaScript بشكل مشابه لمصفوفة PHP؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. نص برمجي [tab-03]

يوضح هذا البرنامج النصي طرقًا مختلفة لاستخدام كائن [array].


'use strict';
// a table can contain different types of data
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log can display the contents of an array
show(1);
console.log("tab=", tab);
show(2);
// table path with foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// another script to do the same thing
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// table route with for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// change tab[i]
tab[5] = [];
// display
console.log("tab=", tab);
show(5);
// remove the last element
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// add an element to the end of the array
tab.push('xyz');
console.log("tab=", tab);
show(7);
// add an element at the beginning of the array
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// remove the 1st element from the array
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// remove element no. 2 from the table
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// remove two elements from the table, starting with element no. 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);
 
// function
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

تعليقات

يوضح السطران 3 و 24 الفرق بين مصفوفات PHP ومصفوفات JavaScript:
- يُعلن السطر 3 المتغير [tab] كثابت؛
- السطر 24 يعدل العنصر tab[5]؛

في السطر 3، يُعلن المؤشر الذي يشير إلى المصفوفة كثابت، وليس المصفوفة نفسها. يمكن تعديل المصفوفة نفسها.

السطور 14-16: يتم تكرار المصفوفة [tab] باستخدام طريقة [forEach] الخاصة بالمصفوفة [tab]. تأخذ هذه الطريقة كمعلمة تعريف دالة، والتي يمكن تسميتها دالة حرفية. تأخذ هذه الدالة معلمة واحدة: العنصر الحالي من المصفوفة [tab]. يتم استدعاء الدالة لكل عنصر من عناصر المصفوفة. هذا النوع من بناء الجملة شائع في JavaScript؛
السطور 9-10: نستخدم بناء جملة مختلفًا لتعريف الدالة. بدلاً من كتابة:
- function(p1, p2, …, pn){….}

نكتب:

(تابع)
- (p1,p2, ..,pn)=>{.…}. وهذا ما يُسمى بـ"ترميز السهم"؛
يتم شرح بقية الكود من خلال التعليقات؛

من هذا البرنامج النصي، لاحظ أن:

المصفوفة هي كائن يُشار إليه بواسطة مؤشر؛
هذا الكائن له طرق [forEach، pop، push، shift، unshift]؛

4.4. النص البرمجي [tab-04]

يقدم هذا البرنامج النصي طرقًا أخرى لكائنات المصفوفات.


'use strict';
 
// table manipulation method
 
// a picture
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// display
console.log("tab=", tab);
// map
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// display
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce without initial value
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reduce with initial value
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filter
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// find
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// spell
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// reverse spell
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

تعليقات

الأسطر 13–15: تأخذ طريقة [map] دالة تحويل كمعلمة. يتم استدعاء هذه الدالة بشكل متكرر لكل عنصر في المصفوفة. وهي مسؤولة عن تحويل العنصر إلى شيء آخر — في هذه الحالة، كائن له الخصائص [prop1, prop2]. تُرجع طريقة [map] مصفوفة جديدة. تظل المصفوفة الأصلية دون تغيير:


tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]

السطر 20: تأخذ طريقة [reduce] كمعلمة دالة ذات حجتين يتم استدعاؤها بشكل متكرر لكل عنصر في المصفوفة. تأخذ هذه الدالة حجتين:
- [currentValue] هو العنصر الحالي في المصفوفة؛
- [accumulator] هي النتيجة الأخيرة التي حصلت عليها الدالة. إذا لم يتم توفير قيمة أولية لهذا المجمع، فستكون 0؛
- عند استدعاء دالة التراكم للمرة الأولى، فإنها تُرجع [0+tab[0]]. يتم تعيين هذه القيمة للمُجمِّع؛
- في المرة الثانية، تُرجع المجمع + tab[1]، أي tab[0] + tab[1]؛
- في المرة الثالثة، تُرجع المجمع + tab[2]، أي tab[0] + tab[1] + tab[2]؛
- وهكذا دواليك. في النهاية، سيمثل المجمع مجموع جميع العناصر في المصفوفة [tab]؛
السطر 26: تأخذ طريقة [filter] دالة تصفية كمعلمة. يتم استدعاء هذه الدالة بشكل متكرر لكل عنصر في المصفوفة وتتلقى هذا العنصر كمعلمة. يجب أن ترجع:
- [true] إذا كان يجب الاحتفاظ بالعنصر؛
- [false] في الحالات الأخرى؛
السطر 33: تأخذ طريقة [find] دالة بحث كمعلمة. يتم استدعاء هذه الدالة بشكل متكرر لكل عنصر في المصفوفة وتستقبل ذلك العنصر كمعلمة. يجب أن ترجع [true] إذا كان العنصر المستلم يفي بمعايير البحث. ثم يتوقف البحث. وبالتالي، ترجع طريقة [find] عنصرًا واحدًا أو صفرًا؛
السطر 36: تعمل طريقة [findIndex] مثل طريقة [find]، ولكن بدلاً من إرجاع العنصر الذي تم العثور عليه، فإنها ترجع مؤشره في المصفوفة؛
السطران 39 و41: تبحث طريقة [indexOf(value)] عن [value] في المصفوفة وتُرجع رقمها الترتيبي، أو -1 إذا لم يتم العثور عليها؛
السطر 44: تعمل الطريقة [lastIndexOf(value)] مثل الطريقة [indexOf(value)] ولكنها تبدأ البحث من نهاية المصفوفة؛
السطر 47: تُرجع طريقة [sort] بدون معلمات مصفوفة مرتبة بالترتيب الطبيعي (أرقام، سلاسل)؛
السطر 50: عندما لا يكون الترتيب الطبيعي مناسبًا، يجب تمرير دالة ذات معلمتين (e1، e2) إلى دالة [sort]، والتي ترجع:
- +1 إذا كان يجب فرز e1 بعد e2؛
- -1 إذا كان يجب فرز e1 قبل e2؛
- 0 إذا كان يجب أن يكون لكلا العنصرين نفس الترتيب؛

يتم استدعاء الدالة التي تم تمريرها كمعلمة إلى طريقة [sort] بشكل متكرر من قبلها لمقارنة عنصرين من المصفوفة؛