لونك المفضل
الألوان
chatالمواضيع الأخيرة
new_releasesأفضل 10 أعضاء في هذا الأسبوع
new_releasesأفضل 10 أعضاء في هذا الشهر
bubble_chartالمتواجدون الآن ؟
ككل هناك 5 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 5 زائر :: 2 عناكب الفهرسة في محركات البحث

لا أحد

مُعاينة اللائحة بأكملها

أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 494 بتاريخ 2019-03-19, 11:43 am

موقع احلى مطور

موقع احلى مطور لتطوير و تنمية منتديات أحلى منتدى

عنوان الخبر

تفاصيل الخبر

عنوان الخبر

تفاصيل الخبر

كلمات دليلية:

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

ahmdsat
عضو شرف
 نُشر في 2018-12-31

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نبذة

هل سبق واستخدمت 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

  • all
  • average
  • chunk
  • collapse
  • combine
  • concat
  • contains
  • count
  • crossJoin
  • dd
  • diff
  • diffAssoc
  • diffKeys
  • dump
  • each
  • eachSpread
  • every
  • except
  • filter
  • first
  • firstWhere
  • flatMap
  • flatten
  • flip
  • forget
  • forPage
  • get
  • groupBy
  • has
  • implode
  • intersect
  • intersectByKeys
  • isEmpty
  • isNotEmpty
  • keyBy
  • keys
  • last
  • macro
  • map
  • mapInto
  • mapSpread
  • mapToDictionary
  • mapToGroups
  • mapWithKeys
  • max
  • median
  • merge
  • min
  • mode
  • nth
  • only
  • pad
  • partition
  • pipe
  • pluck
  • pop
  • prepend
  • pull
  • push
  • put
  • random
  • reduce
  • reject
  • reverse
  • search
  • shift
  • shuffle
  • slice
  • sort
  • sortBy
  • sortByDesc
  • splice
  • split
  • sum
  • take
  • tap
  • times
  • toArray
  • toJson
  • transform
  • union
  • unique
  • unless
  • unwrap
  • values
  • when
  • where
  • whereIn
  • whereNotIn
  • wrap
  • zip
لا يوجد حالياً أي تعليق

اعلانات نصية