المصفوفات

لتخزين المجموعات المرتبة ، توجد بنية بيانات خاصة تسمى "مصفوفة".

Array - مجموعة مرتبة من البيانات ، تحتوي على العناصر الأولى والثانية والثالثة ، إلخ. على سبيل المثال ، نحتاج إليها لتخزينها قائمة بشيء ما: المستخدمون ، المنتجات ، عناصر الموقع ، إلخ.

خلق

يوجد 2️⃣ خيارات للإنشاء مصفوفة فارغة:

let arr = new Array(5)
// new Array(5) - creates an array with no elements (which cannot be accessed just like that), but with a given length.
let arr = []

البديل الثاني2️⃣ بناء الجملة دائمًا تقريبًا. بين قوسين ، يمكننا الإشارة إلى القيم الأولية للعناصر:

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] return fruits.toString() }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']

  return fruits.toString()
}

النتيجة

Loading...

يتم ترقيم عناصر المصفوفة بدءًا من الصفر0️⃣.

يمكننا الحصول على عنصر بتحديد رقمه بين قوسين مربعين :

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] return fruits[0] }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']

  return fruits[0]
}

النتيجة

Loading...

يمكننا استبدال جزء:

fruits[2] = 'Plum' // now ["Apple", "Orange", "Plum"]

... Or add a new one to the existing array :

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] fruits[2] = 'Pear' fruits[3] = 'Lemon' // теперь ["Apple", "Orange", "Pear", "Lemon"] return fruits }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']
  fruits[2] = 'Pear'
  fruits[3] = 'Lemon' // теперь ["Apple", "Orange", "Pear", "Lemon"]

  return fruits
}

النتيجة

Loading...

الطول

يتم تضمين العدد الإجمالي للعناصر في المصفوفة في.length منشأه:

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] return fruits.length }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']

  return fruits.length
}

النتيجة

Loading...

يتم تحديث خاصية length تلقائيًا عندما تتغير المصفوفة. لكي نكون دقيقين ، ليس عدد العناصر في المصفوفة ، بل هو أكبر فهرس رقمي زائد واحد.

على سبيل المثال ، العنصر الحقيقي الوحيد الذي يحتوي على فهرس كبير يعطي أكبر طول ممكن للصفيف :

محرر مباشر

function learnJavaScript() { let fruits = [] fruits[155] = 'Apple' return fruits.length // 156 }

function learnJavaScript() {
  let fruits = []
  fruits[155] = 'Apple'

  return fruits.length // 156
}

النتيجة

Loading...

لاحظ أننا عادة لا نستخدم المصفوفات بهذه الطريقة.

هناك حقيقة أخرى مثيرة للاهتمام حول خاصية "length" وهي إمكانية الكتابة فوقها.

إذا زدنا يدويا➕ لا شيء مثير للاهتمام يحدث. ولكن إذا قللناها ، ستصبح المصفوفة أقصر. هذه العملية لا رجوع عنها ، كما يمكننا أن نفهم من المثال:

محرر مباشر

function learnJavaScript() { let arr = [1, 2, 3, 4, 5] arr.length = 2 // shorten to two elements //console.log( arr ) // [1, 2] arr.length = 5 // return length as it was //console.log( arr[3] ) // undefined: values are not restored! return 'The real array was shortened:' + arr }

function learnJavaScript() {
  let arr = [1, 2, 3, 4, 5]

  arr.length = 2 // shorten to two elements
  //console.log( arr )  // [1, 2]

  arr.length = 5 // return length as it was
  //console.log( arr[3] )  // undefined: values are not restored!

  return 'The real array was shortened:' + arr
}

النتيجة

Loading...

لذا فإن أبسط طريقة لمسح المصفوفة هي باستخدام arr.length = 0.

أنواع العناصر

يمكن أن تخزن المصفوفة عناصر من أي نوع - رقم أو قيمة منطقية أو سلاسل أو كائنات أو وظائف كاملة:

على سبيل المثال :

محرر مباشر

function learnJavaScript() { let arr = [ 'Apple', { name: 'Nikita' }, true, function () { return 'Hello' } ] // get the element with index 1 {object} and then read its property let x = arr[1].name // name Nikita // get the element with index 3 (function) and execute it let result1 = arr[3] // The function itself let result2 = arr[3]() // 'Hello' return 'Value of 4th element at 3rd index:' + result2 // + '. The function itself: '+ result1 }

function learnJavaScript() {
  let arr = [
    'Apple',
    { name: 'Nikita' },
    true,
    function () {
      return 'Hello'
    }
  ]
  // get the element with index 1 {object} and then read its property
  let x = arr[1].name // name Nikita
  // get the element with index 3 (function) and execute it
  let result1 = arr[3] // The function itself
  let result2 = arr[3]() // 'Hello'

  return 'Value of 4th element at 3rd index:' + result2
  // + '. The function itself: '+ result1
}

النتيجة

Loading...

ملحوظة result1 = arr [3] تحتوي على نص الوظيفة ، و "result2 = arr [3] ()the result of the executed function is() `نحن نديرها.

طرق "دفع / فرقعة"

Stack هو نوع من استخدام المصفوفات كهياكل بيانات.

انها تدعم اثنين 2️⃣ أنواع العمليات:

• push يضيف أ➕ عنصر حتى النهاية.

• pop يزيل ➖ العنصر الأخير.

وبالتالي ، يتم دائمًا إضافة عناصر جديدة أو إزالتها من "النهاية".

عادةً ما يكون أحد الأمثلة على المكدس عبارة عن هرم: توضع حلقات جديدة في الأعلى وتؤخذ أيضًا من الأعلى.

Queue هو أحد الاستخدامات الأكثر شيوعًا للمصفوفة. في علوم الكمبيوتر ، هذه مجموعة مرتبة من العناصر

طرق العمل مع نهاية المصفوفة:

يدفع

يضيف ان ➕ عنصر في نهاية المصفوفة :

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange'] fruits.push('Pear') return 'Array: ' + fruits // Apple, Orange, Pear }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange']

  fruits.push('Pear')

  return 'Array: ' + fruits // Apple, Orange, Pear
}

النتيجة

Loading...

البوب

يزيل ➖ آخر عنصر من المصفوفة ويعيده:

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Pear'] let delFruits = fruits.pop() // remove the "Pear" and return it to the delFruits variable return 'Removed item = ' + delFruits + '. Array left: ' + fruits // Apple, Orange }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Pear']

  let delFruits = fruits.pop() // remove the "Pear" and return it to the delFruits variable

  return 'Removed item = ' + delFruits + '. Array left: ' + fruits // Apple, Orange
}

النتيجة

Loading...

طرق العمل مع بداية المصفوفة:

تحول

يزيل ➖ الأول من المصفوفة ويعيده :

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Pear'] fruits.shift() // remove the Apple return fruits }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Pear']

  fruits.shift() // remove the Apple

  return fruits
}

النتيجة

Loading...

نزل

يضيف ان➕ عنصر في بداية المصفوفة:

محرر مباشر

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Pear'] fruits.unshift('Apricot') return fruits }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Pear']

  fruits.unshift('Apricot')

  return fruits
}

النتيجة

Loading...

يمكن أن تضيف أساليب "push" و "unshift" ➕ عدة عناصر في وقت واحد :

محرر مباشر

function learnJavaScript() { let fruits = ['Apple'] fruits.push('Orange', 'Pear') fruits.unshift('Pineapple', 'Lemon') return 'In an array ' + fruits.length + ' elements. ' + ' Array: ' + fruits // ["Pineapple", "Lemon", "Apple", "Orange", "Pear"] }

function learnJavaScript() {
  let fruits = ['Apple']

  fruits.push('Orange', 'Pear')
  fruits.unshift('Pineapple', 'Lemon')

  return 'In an array ' + fruits.length + ' elements. ' + ' Array: ' + fruits // ["Pineapple", "Lemon", "Apple", "Orange", "Pear"]
}

النتيجة

Loading...

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

المصفوفة هي نوع خاص من الأشياء. الأقواس المربعة المستخدمة للوصول إلى خاصية arr [0] هي أساسًا الصيغة المعتادة للوصول إلى المفتاح ، مثل obj [key] ، حيث يكون obj arr والمفتاح هو فهرس رقمي.

تقوم المصفوفات بتوسيع الكائنات لأنها توفر طرقًا خاصة للعمل مع مجموعات البيانات المرتبة ، بالإضافة إلى خاصية length. "لكنهم لا يزالون قائمين على منشأة.

ضع في اعتبارك أنه في JavaScript ، المصفوفة هي كائن وبالتالي تتصرف ككائن.

على سبيل المثال ، يتم نسخ المصفوفة حسب المرجع:

محرر مباشر

function learnJavaScript() { let fruits = ['Lemon'] let copy = fruits // copied by reference (two variables refer to the same array) copy.push('Pear') // arrays are changed by reference with one command return '1 array:' + fruits + '2 array:' + copy // Lemon, Pear - now two elements }

function learnJavaScript() {
  let fruits = ['Lemon']

  let copy = fruits // copied by reference (two variables refer to the same array)

  copy.push('Pear') // arrays are changed by reference with one command

  return '1 array:' + fruits + '2 array:' + copy // Lemon, Pear - now two elements
}

النتيجة

Loading...

ما يجعل المصفوفات مميزة حقًا هو تمثيلها الداخلي. يحاول محرك JavaScript تخزين عناصر المصفوفة في منطقة متجاورة من الذاكرة ، واحدة تلو الأخرى. هناك تحسينات أخرى تجعل المصفوفات سريعة جدًا.

لكنهم جميعًا يصبحون غير فعالين إذا توقفنا عن العمل مع مصفوفة باعتبارها "مجموعة منظمة من البيانات" وبدأنا استخدامها ككائن عادي.

على سبيل المثال ، يمكننا تقنيًا القيام بما يلي:

let fruits = [] // create an empty array

fruits[99999] = 5 // create a property with a redundant index much larger than the required array length

fruits.age = 25 // create a property with an arbitrary name

هذا ممكن لأن المصفوفة مبنية على كائن. يمكننا تعيين أي خصائص لها.

::: note احتمال إساءة استخدام مصفوفة!

• إضافة خاصية غير رقمية (اختبار الفهرس) ، على سبيل المثال: arr.test = 5
• إنشاء "ثقوب" ، على سبيل المثال: إضافة arr [0] ، ثم arr [1000] (لا يوجد شيء بينهما)
• تعبئة المصفوفة بترتيب عكسي ، على سبيل المثال: arr [1000] ، arr [999] ، إلخ.

:::

ضع في اعتبارك المصفوفة كهيكل خاص يسمح لك بالعمل مع البيانات المرتبة. إذا كنت بحاجة إلى مفاتيح عشوائية ، فمن الممكن تمامًا أن يكون الكائن العادي {} أكثر ملاءمة.

كفاءة

طرق الدفع / الفرقعة سريعة ، وطرق التغيير / إلغاء التغيير بطيئة.

لماذا يكون العمل مع نهاية المصفوفة أسرع من العمل مع بدايته؟ دعونا نرى ما يحدث في وقت التشغيل:

fruits.shift() // remove the first element from the beginning

لا يكفي مجرد انتزاع وإزالة العنصر 0. تحتاج أيضًا إلى إعادة ترقيم باقي العناصر.

يجب أن تقوم عملية التحول بثلاثة أشياء:

• إزالة العنصر بالفهرس 0

• انقل جميع العناصر إلى اليسار ، وأعد ترقيمها ، واستبدل "1" بـ "0" ، و "2" بـ "1" ، إلخ.

• قم بتحديث ملفlength منشأه

كلما زاد عدد العناصر التي تحتوي عليها المصفوفة ، كلما طالت مدة نقلها ، زادت عمليات الذاكرة.

لكن ماذا عن إزالة البوب؟ لا يحتاج إلى تحريك أي شيء. لإزالة عنصر في نهاية مصفوفة ، تقوم طريقة pop بمسح الفهرس وتقليل الطول. تبقى العناصر المتبقية بنفس المؤشرات.

fruits.pop() // remove one element from the end

طريقة البوب لا تحتاج إلى النقل. هذا هو السبب في أنها تعمل بسرعة كبيرة.

ال push الطريقة تعمل بنفس الطريقة.

التكرار على العناصر

إحدى أقدم الطرق للتكرار على عناصر المصفوفة هي ملفfor () حلقة فوق المؤشرات الرقمية:

محرر مباشر

// prettier-ignore function learnJavaScript() { let result = '' let arr = ['Apple', 'Orange', 'Kiwi'] for (let i = 0; i < arr.length; i++) // iterate over elements through for () result += arr[i] + ', ' return result // Apple, Orange, Kiwi }

// prettier-ignore
function learnJavaScript() {
   let result = ''
   let arr = ['Apple', 'Orange', 'Kiwi']

   for (let i = 0; i < arr.length; i++) // iterate over elements through for ()
   result += arr[i] + ', '

   return result // Apple, Orange, Kiwi
}

النتيجة

Loading...

ولكن يمكن استخدام إصدار آخر من الحلقة للمصفوفات ،for..of :

محرر مباشر

function learnJavaScript() { let result = '' let fruits = ['Apple', 'Orange', 'Plum'] for (let fruit of fruits) { // iterate over values through `for..of` result += fruit + ', ' } return result // Apple, Orange, Plum }

function learnJavaScript() {
  let result = ''
  let fruits = ['Apple', 'Orange', 'Plum']

  for (let fruit of fruits) {
    // iterate over values through `for..of`
    result += fruit + ', '
  }
  return result // Apple, Orange, Plum
}

النتيجة

Loading...

ال for..of الحلقة لا توفر الوصول إلى رقم العنصر الحالي ، فقط قيمته ، ولكن في معظم الحالات يكون هذا أكثر من كافٍ ، كما أنه أقصر.

المصفوفات متعددة الأبعاد

يمكن أن تحتوي المصفوفات على عناصر هي أيضًا صفائف. يمكن استخدام هذا لإنشاء مصفوفات متعددة الأبعاد ، على سبيل المثال ، لتخزينها المصفوفات:

محرر مباشر

function learnJavaScript() { let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] return matrix[1][1] // 5, central element }

function learnJavaScript() {
  let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]

  return matrix[1][1] // 5, central element
}

النتيجة

Loading...

مجموع

المصفوفة هي نوع خاص من الكائنات مصممة للعمل مع مجموعة مرتبة من العناصر.

إعلان:

// square brackets (usually)
let arr = [item1, item2 ...]

// new Array (very rare)
let arr = new Array (item1, item2 ...)

الاتصال new Array (number) ينشئ مصفوفة بالطول المحدد ، لكن بدون عناصر.

تعكس خاصية length طول المصفوفة.

يمكننا استخدام المصفوفة كمصفوفة deque باستخدام العمليات التالية:

• push (... items) يضيف ➕ عناصر إلى نهاية المصفوفة.
• pop () يزيل ➖عنصر في نهاية المصفوفة وإعادته.
• shift () يزيل ➖ العنصر في بداية المصفوفة وإعادته.
• unshift (... items) يضيف ➕ عناصر إلى بداية المصفوفة.

لتكرار عناصر المصفوفة:

• for (let i = 0 i < arr.length i ++) - يعمل بشكل أسرع ومتوافق مع المتصفحات القديمة.
• for (let item of arr) - النحو الحديث فقط لقيم العناصر (لا يمكن الوصول إلى المؤشرات).
• for (let i in arr) - لا تستخدم أبدا للمصفوفات!

مشاكل؟

اكتب لDiscord محادثة.

أسئلة:

المصفوفة هي ...

1. نوع فرعي من الكائنات مع "جمع مرتب للبيانات"
2. الوظيفة الداخلية
3. نوع فرعي من الكائنات مع "جمع بيانات غير مرتب"

يتم إنشاء مصفوفة فارغة:

1. let arr1 = []
2. let arr2 = {}
3. let arr3 = ()

يمكن تحديد طول المصفوفة بواسطة الخاصية:

1. pop ()
2. push ()
3. length

يمكن للمصفوفة تخزين العناصر:

1. أي نوع
2. رقمي
3. سلسلة

إضافة عنصر في نهاية المصفوفة:

1. push ()
2. pop ()
3. shift ()

إزالة عنصر في بداية المصفوفة:

1. pop ()
2. shift ()
3. unshift ()

لفهم مقدار ما تعلمته في هذا الدرس ، قم بإجراء الاختبار على [تطبيق الهاتف المحمول] (http://onelink.to/njhc95) الخاص بمدرستنا حول هذا الموضوع.

الروابط

1. Article "Arrays"
2. MDN web doc. Article "Arrays"
3. JavaScript Arrays
4. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz

المساهمون✨

الشكر يعود إلى هؤلاء الأشخاص الرائعين(emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨