01559244245
موقع احلى مطور :: تقنيات متقدمة :: عالم المقالات البرمجيه

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

ahmdsat
ahmdsat
عضو شرف
المساهمات :
42
النقاط :
82
التقيم :
1
الاوسمة :
التعامل مع arrays و objects في جافاسكربت باستخدام collect.js Crown_gold
2018-12-31, 1:08 pm

نبذة

هل سبق واستخدمت 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
شُكر
اقتباس
اقتباس
تعديل
حذف
IP
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
جميع الحقوق محفوظة™ © 2020 موقع احلى مطور