13 حيل مفيدة للعمل مع المصفوفات في JavaScript والتي قد تكون مفيدة

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

1. كيفية ترك القيم الفريدة فقط في الصفيف

هذا سؤال شائع جدًا أثناء مقابلة لمنصب مطور Javascript. هنا حل سريع وسهل لهذه المشكلة. تحتاج أولاً إلى الحصول على القيم الفريدة للصفيف ، لذلك يمكنك استخدام new Set() ( تقريبًا: إعادة: يخزن بنية البيانات Set قيمًا فريدة فقط ). بعد ذلك ، تحتاج إلى تحويل بنية تعيين البيانات إلى صفيف. أريد أن أعرض عليكم طريقتين لكيفية القيام بذلك: الأولى - باستخدام الطريقة from() ، والثانية - باستخدام معامل الانتشار ( "…" ).

 const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; //   const uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); //  ['banana', 'apple', 'orange', 'watermelon', 'grape'] //   const uniqueFruits2 = [...new Set(fruits)]; console.log(uniqueFruits2); //  ['banana', 'apple', 'orange', 'watermelon', 'grape'] 

سهل ، أليس كذلك؟

2. كيفية استبدال القيم في مجموعة

هناك مواقف عندما تحتاج إلى استبدال القيم في الصفيف بقيم أخرى. هناك طريقة جيدة لهذا قد لا تكون على splice(start, value to remove, values to add) بها - طريقة splice(start, value to remove, values to add) ، حيث start هي رقم الفهرس الذي نريد إزالة عناصر المصفوفة منه ، value to remove هي عدد العناصر التي نريد حذفها ، values to add هي العناصر التي نريد إدراجها في مكان العناصر المحذوفة:

 const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.splice(0, 2, 'potato', 'tomato'); console.log(fruits); //  ["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"] 

3. كيفية تحويل صفيف دون استخدام طريقة map()

ربما يعرف الجميع طريقة الصفيف map() ، ولكن هناك حلًا آخر يمكن استخدامه للحصول على تأثير مماثل ورمز نظيف. للقيام بذلك ، يمكننا استخدام الأسلوب from() :

 const friends = [ { name: 'John', age: 22 }, { name: 'Peter', age: 23 }, { name: 'Mark', age: 24 }, { name: 'Maria', age: 22 }, { name: 'Monica', age: 21 }, { name: 'Martha', age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames); //  ['John', 'Peter', 'Mark', 'Maria', 'Monica', 'Martha'] 

4. كيفية مسح مجموعة بسرعة

على سبيل المثال ، لدينا مجموعة تحتوي على العديد من العناصر. نحتاج إلى تنظيفه (بغض النظر عن أي غرض) ، بينما لا نريد حذف العناصر واحدة تلو الأخرى. هذا بسيط للغاية للقيام به مع سطر واحد من التعليمات البرمجية. لمسح المصفوفة ، نحتاج إلى تعيين طول المصفوفة على 0 ، وهذا كل شيء!

 const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; fruits.length = 0; console.log(fruits); //  [] 

5. كيفية تحويل مجموعة إلى كائن

يحدث هذا الموقف: لدينا صفيف ، لكننا بحاجة إلى كائن (مرة أخرى ، بغض النظر عن أي غرض) مع هذه البيانات ، وأسرع طريقة لتحويل صفيف إلى كائن هي استخدام معامل الانتشار ( "..." ):

 const fruits = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple']; const fruitsObj = { ...fruits }; console.log(fruitsObj); //  {0: 'banana', 1: 'apple', 2: 'orange', 3: 'watermelon', 4: 'apple', 5: 'orange', 6: 'grape', 7: 'apple'} 

6. كيفية ملء مجموعة مع نفس القيم

هناك مواقف مختلفة عندما نريد إنشاء صفيف وتعبئته ببعض القيم ، أو نحتاج إلى صفيف بنفس القيم. طريقة fill() لهذه المهام هي حل رائع:

 const newArray = new Array(10).fill('1'); console.log(newArray); //  ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] 

7. كيفية الجمع بين أكثر من صفيفين

هل تعرف كيفية دمج المصفوفات في واحدة دون استخدام طريقة concat() ؟ هناك طريقة سهلة لدمج أي عدد من الصفائف في صفيف واحد مع سطر واحد من التعليمات البرمجية. كما قد تكون فهمت بالفعل ، فإن عامل الانتشار ( "..." ) هو أداة مفيدة جدًا عند التعامل مع المصفوفات ، كما في هذه الحالة:

 const fruits = ['apple', 'banana', 'orange']; const meat = ['poultry', 'beef', 'fish']; const vegetables = ['potato', 'tomato', 'cucumber']; const food = [...fruits, ...meat, ...vegetables]; console.log(food); //  ["apple", "banana", "orange", "poultry", "beef", "fish", "potato", "tomato", "cucumber"] 

8. كيفية العثور على تقاطع صفيفين

يمكنك مواجهة هذه المهمة في أي مقابلة JavaScript ، لأن حلها يُظهر معرفتك بطرق المصفوفة ، وكذلك طريقة تفكيرك. للعثور على القيم المشتركة للصفيفين ، سنستخدم إحدى الطرق التي تمت مناقشتها مسبقًا في هذه المقالة للتأكد من عدم تكرار القيم الموجودة في الصفيف الذي نتحقق منه. بالإضافة إلى ذلك ، سوف نستخدم filter() includes() الأساليب. نتيجة لذلك ، نحصل على مجموعة تحتوي على عناصر ممثلة في كلا الصفيفين:

 const numOne = [0, 2, 4, 6, 8, 8]; const numTwo = [1, 2, 3, 4, 5, 6]; const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues); //  [2, 4, 6] 

9. كيفية إزالة القيم الخاطئة من مجموعة

للبدء ، دعونا نحدد القيم الخاطئة. في Javascript ، القيم الخاطئة هي: false ، 0 ، "" ، null ، NaN وغير undefined . الآن يمكننا معرفة كيفية إزالة هذه القيم من مجموعة لدينا. لتحقيق ذلك ، نحتاج إلى طريقة filter() :

 const mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr); //  ["blue", 9, true, "white"] 

10. كيفية الحصول على قيمة مجموعة عشوائية

في بعض الأحيان نحتاج إلى تحديد قيمة مجموعة عشوائية. لجعل الحل بسيطًا وقصيرًا وسريعًا ، يمكننا الحصول على رقم فهرس عشوائي وفقًا لطول الصفيف. ألقِ نظرة على هذا المثال:

 const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; console.log(randomColor); //      

11. كيفية توسيع مجموعة في الاتجاه المعاكس

عندما نحتاج إلى "قلب" صفيفتنا ، ليست هناك حاجة لإنشائها من خلال حلقات ووظائف معقدة ، لأن هناك طريقة صفيف reverse() بسيطة تعمل كل هذا من أجلنا ، وبواسطة سطر واحد من التعليمات البرمجية يمكننا "قلب" صفيفتنا:

 const colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown']; const reversedColors = colors.reverse(); console.log(reversedColors); //  ["brown", "black", "yellow", "orange", "purple", "pink", "navy", "green", "white", "blue"] 

12. lastIndexOf() طريقة

يحتوي JavaScript على أسلوب lastIndexOf(elem) الذي يتيح لك العثور على فهرس التواجد الأخير لعنصر elem . على سبيل المثال ، إذا كانت صفيفنا يحتوي على قيم مكررة ، فيمكننا العثور على موضع التواجد الأخير فيها. ألقِ نظرة على مثال الكود التالي:

 const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex); //  9 

13. كيفية جمع كل القيم في صفيف

سؤال شائع آخر خلال مقابلة لوظيفة مطور JavaScript. يمكن العثور على مجموع جميع العناصر في سطر واحد من الكود ، إذا كنت تعرف طريقة reduce() :

 const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum); //  14 

استنتاج

في هذه المقالة ، قدمت لك 13 حيلة مفيدة لمساعدتك في كتابة رمز نظيف وموجز. بالإضافة إلى ذلك ، لا تنس أن هناك العديد من الحيل المختلفة التي يمكنك استخدامها في Javascript والتي تستحق الدراسة ليس فقط للعمل مع المصفوفات ، ولكن أيضًا لبنية البيانات الأخرى. آمل أن تكون قد اعجبتك الحلول المقدمة في المقالة وأن تستخدمها لتحسين عملية التطوير.

هل لديك رمز الكتابة لطيفة!