
ahmdsat
عضو شرف
المساهمات :
42
النقاط :
82
التقيم :
1
الاوسمة :

2018-12-31, 1:08 pm
1- تستطيع تثبيت collect.js باستخدام NPM
2- باستخدام Yarn
3- باستخدام رابط CDN
مثال لكود html يستخدم رابط CDN
4- بتحميل ملف collect.js من صفحة GitHub
مثال لكود HTML برابط مباشر للملف (ملاحظة: يجب ان تنسخ ملف collect.js داخل مجلد باسم js وبنفس الاسم ليعمل المثال لديك)
1-
مثال:
2-
3-
مثال:
اذا كان لديك مصفوفة متشعبة nested arrays او كائن يجب ان تحدد المفتاح key المراد تنفيذ عملية حساب المتوسط عليه
مثال:
4-
مثال:
5-
مثال:
6-
مثال:
7-
مثال:
8-
مثال:
مثال آخر على مصفوفة:
9-
مثال:
10-
مثال:
11-
مثال:
12-
مثال:
مثال آخر:
عكس وظيفة except تستطيع استخدام only بحيث سوف تقوم بإرجاع عناصر المجموعة التي تحدد مفاتيحها
13-
مثال:
عند عدم تحديد Callback سوف يتم حذف اي عنصر يساوي false
مثال:
عكس وظيفة filter تستطيع استخدام reject حيث انك سوف تحدد شرط التحقق لحذف العناصر وابقاء بقية العناصر
14-
مثال:
وتستطيع الحصول على اول عنصر في المجموعة بدون تحديد Callback
مثال:
15-
مثال:
نبذة
هل سبق واستخدمت 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 يستخدم رابط 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 برابط مباشر للملف (ملاحظة: يجب ان تنسخ ملف 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 او كائن Object1-
- الكود:
all
مثال:
- الكود:
collect([1, 2, 3]).all();
//=> [1, 2, 3]
2-
- الكود:
average
3-
- الكود:
avg
مثال:
- الكود:
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
مثال:
- الكود:
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
مثال:
- الكود:
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
مثال:
- الكود:
const collection = collect(['name', 'number']);
const combine = collection.combine(['Steven Gerrard', 8]);
combine.all();
//=> {
//=> name: 'Steven Gerrard',
//=> number: 8
//=> }
7-
- الكود:
concat
مثال:
- الكود:
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
مثال:
- الكود:
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
مثال:
- الكود:
const collection = collect([1, 2, 3, 4, 5]);
const diff = collection.diff([1, 2, 3, 9]);
diff.all();
//=> [4, 5]
10-
- الكود:
each
مثال:
- الكود:
let sum = 0;
const collection = collect([1, 3, 3, 7]);
collection.each((item) => {
sum += item;
});
//=> console.log(sum);
//=> 14
11-
- الكود:
every
مثال:
- الكود:
collect([1, 2, 3, 4]).every((value, key) => value > 2);
//=> false
12-
- الكود:
except
مثال:
- الكود:
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
مثال:
- الكود:
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
مثال:
- الكود:
collect([1, 2, 3, 4]).first(item => item > 1);
//=> 2
وتستطيع الحصول على اول عنصر في المجموعة بدون تحديد Callback
مثال:
- الكود:
collect([1, 2, 3, 4]).first();
//=> 1
15-
- الكود:
firstWhere
مثال:
- الكود:
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