التعامل مع arrays و objects في جافاسكربت باستخدام collect.js

تبسيط التعامل مع المصفوفات والكائنات باستخدام collect.js في جافاسكربت بتوفيرها للعديد methods

Ali Majrashiمنذ 6 سنوات

نبذة

هل سبق واستخدمت Laravel Collections للتعامل مع المصفوفات Arrays اذا انت تعرف مدى روعتها وتبسيطها التعامل مع المصفوفات حيث ان collect.js تعتبر تحويل لنفس الادوات والطرق لمطوري جافاسكربت JavaScript لتبسيط التعامل مع المصفوفات Arrays والكائنات Objects المميز في collect.js انها لاتعتمد على اي مكتبات أخرى لتعمل Dependency Free في هذا المقال راح نشرح طريقة التثبيت وطريقة استخدام بعض الطرق Methods للتعامل مع المصفوفات او الكائنات ونضع روابط بقية الطرق Methods في صفحة collect.js في موقع GitHub لمشاهدة بقية الأمثلة

التثبيت

تستطيع تثبيت collect.js باستخدام احد هذه الطرق اختر المناسب لك ولمشروعك.

1- تستطيع تثبيت collect.js باستخدام NPM

npm install collect.js --save

2- باستخدام Yarn

yarn add collect.js

3- باستخدام رابط CDN

قم بزيارة هذه الصفحة collect.js CDN
قم بتحديد النسخة ومزود CDN ثم انسخ الرابط المناسب لك سواء رابط النسخه العادية او النسخة المضغوطه
اضف الرابط داخل وسم <script> داخل كود HTML لديك

مثال لكود html يستخدم رابط CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collect.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/collect.js/4.0.13/collect.js"></script>
</head>
<body>

    
</body>
</html>

4- بتحميل ملف collect.js من صفحة GitHub

قم بزيارة هذه الصفحة collect.js Build
قم بتحميل الملف المناسب لك سواء النسخه الكامله او المضغوطه
قم باضافة الملف لمجلدات مشروعك واضف رابط الملف داخل وسم <script> داخل كود HTML لديك

مثال لكود HTML برابط مباشر للملف (ملاحظة: يجب ان تنسخ ملف collect.js داخل مجلد باسم js وبنفس الاسم ليعمل المثال لديك)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collect.js</title>
    <script src="/js/collect.js"></script>
</head>
<body>

    
</body>
</html>

الإستخدام

راح نضع امثلة لبعض الطرق Methods التي توفرها collect.js للتعامل مع المصفوفات والكائنات في جافاسكربت في امثلتنا راح نستخدم الدالة collect لانشاء كائن من كلاس Collection راح يعطيك العديد من الطرق Methods للتعامل مع البيانات المدخله سواء كانت مصفوفة Array او كائن Object

1- all

وظيفة all تقوم بارجاع جميع عناصر Collection كمصفوفة

مثال:

collect([1, 2, 3]).all();

//=> [1, 2, 3]

2- average

هذا مسمى آخر لـ avg وله نفس الوظيفة

3- avg

وظيفة avg تقوم بارجاع متوسط جميع عناصر Collection

مثال:

collect([1, 3, 3, 7]).avg();

//=> 3.5

اذا كان لديك مصفوفة متشعبة nested arrays او كائن يجب ان تحدد المفتاح key المراد تنفيذ عملية حساب المتوسط عليه

مثال:

const collection = collect([{
  name: 'JavaScript: The Good Parts', pages: 176
}, {
  name: 'JavaScript: The Definitive Guide', pages: 1096
}]);

collection.avg('pages');

//=> 636

4- chunk

وظيفة chunk تقوم بتقسيم Collection الى عدة مجموعات Collections اصغر بناء على الحجم المدخل

مثال:

const collection = collect([1, 2, 3, 4, 5, 6, 7]);

const chunks = collection.chunk(4);

chunks.all();

//=> [[1, 2, 3, 4], [5, 6, 7]]

5- collapse

وظيفة collapse تحويل جميع المصفوفات المدخله الى Collection مستوى واحد single, flat collection

مثال:

const collection = collect([[1, 2, 3], [4, 5, 6], [7, 8, 9]]);

const collapsed = collection.collapse();

collapsed.all();

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

6- combine

وظيفة combine هي دمج مجموعتين بحيث تستخدم اول مجموعة Collection كمفاتيح وثاني مجموعة Collection كقيم لها

مثال:

const collection = collect(['name', 'number']);

const combine = collection.combine(['Steven Gerrard', 8]);

combine.all();

//=> {
//=>   name: 'Steven Gerrard',
//=>   number: 8
//=> }

7- concat

وظيفة concat هي دمج أكثر من مصفوفة او كائن او Collection

مثال:

const collection = collect([1, 2, 3]);

collection
  .concat(['a', 'b', 'c'])
  .concat({
    name: 'Steven Gerrard',
    number: 8
  });

collection.all();

//=> [1, 2, 3, 'a', 'b', 'c', 'Steven Gerrard', 8]

8- contains

وظيفة contains هي التحقق اذا كان Collection يحتوي على عنصر محدد

مثال:

const collection = collect({
  name: 'Steven Gerrard',
  number: 8
});

collection.contains('name');
//=> true

collection.contains('age');
//=> false

مثال آخر على مصفوفة:

const collection = collect([1, 2, 3]);

collection.contains(3);
//=> true

9- diff

وظيفة diff المقارنة بين مصفوفتين او مجموعتين Collections مثال عند المقارنة بين Collection A مع Collection B راح يرجع لنا عناصر Collection A الغير موجودة في Collection B

مثال:

const collection = collect([1, 2, 3, 4, 5]);

const diff = collection.diff([1, 2, 3, 9]);

diff.all();

//=> [4, 5]

10- each

وظيفة each المرور على جميع عناصر المجموعة Collection وتمرير كل عنصر في المجموعة على Callback

مثال:

let sum = 0;

const collection = collect([1, 3, 3, 7]);

collection.each((item) => {
  sum += item;
});

//=> console.log(sum);
//=> 14

11- every

وظيفة every هي التحقق من جميع عناصر المجموعة Collection انهم يتخطون تحقق شرطي تحدده

مثال:

collect([1, 2, 3, 4]).every((value, key) => value > 2);

//=> false

12- except

وظيفة except هي ارجاع جميع عناصر المجموعة ماعدى بعض المفاتيح Keys التي تحددها ليتم تجاهلها

مثال:

const collection = collect({
  product_id: 1,
  price: 100,
  discount: false,
});

const filtered = collection.except(['price', 'discount']);

filtered.all();

//=> { product_id: 1 }

مثال آخر:

collect([1, 2, 3, 4]).except([2, 12]).all();

//=> [1, 3, 4]

عكس وظيفة except تستطيع استخدام only بحيث سوف تقوم بإرجاع عناصر المجموعة التي تحدد مفاتيحها

13- filter

وظيفة filter هي المرور على جميع عناصر المجموعة Collection وتمرير جميع العناصر على Callback وابقاء العناصر التي تتجاوز شرط التحقق فقط وحذف البقية

مثال:

const collection = collect([1, 2, 3, 4]);

const filtered = collection.filter((value, key) => value > 2);

filtered.all();

//=> [3, 4]

عند عدم تحديد Callback سوف يتم حذف اي عنصر يساوي false

مثال:

const collection = collect([0, 1, 2, null, 3, 4, undefined, 5, 6, 7, [], 8, 9, {}, 10]);

const filtered = collection.filter();

filtered.all();

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

عكس وظيفة filter تستطيع استخدام reject حيث انك سوف تحدد شرط التحقق لحذف العناصر وابقاء بقية العناصر

14- first

وظيفة first هي الحصول على اول عنصر في المجموعة يتجاوز شرط التحقق باستخدام Callback

مثال:

collect([1, 2, 3, 4]).first(item => item > 1);

//=> 2

وتستطيع الحصول على اول عنصر في المجموعة بدون تحديد Callback

مثال:

collect([1, 2, 3, 4]).first();

//=> 1

15- firstWhere

وظيفة firstWhere تبحث داخل المجموعة Collection وتقوم بارجاع اول عنصر في المجموعة باستخدام مفتاح و قيمة تحددها لعملية البحث

مثال:

const collection = collect([
    {name: 'Regena', age: 12},
    {name: 'Linda', age: 14},
    {name: 'Diego', age: 23},
    {name: 'Linda', age: 84},
]);

collection.firstWhere('name', 'Linda');

//=> { name: 'Linda', age: 14 }

الختام

هنا قائمة بكل الطرق Methods في collect.js على موقع GitHub يوجد شرح ومثال لكل Method

كلمات دليلية: collect collect.js collection collectjs javascript

إعجاب

أعجبني

5347

مشاهدات

تلقائي

متابع

تابع

متميز

محتوى رهيب

متميز

التعليقات (2)

othman:

thats great one it is similar to underscore.js

Ali Majrashi:

هلا باخوي othman صحيح ولكن collect.js متخصصة اكثر في التعامل فقط مع المصفوفات والكائنات بينما underscore.js توفر لك الكثير من الدوال المساعدة لمختلف الاستخدامات حيث توفر اكثر من ١٠٠ دالة تستخدمها في مشروعك