الصفيف المفيد وطرق الكائن في جافا سكريبت

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

Array.prototype.filter ()

تنشئ الطريقة Array.prototype.filter () صفيفًا جديدًا لا تقع فيه سوى عناصر الصفيف الأصلي التي تطابق الشرط المحدد.

▍ مثال

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

const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 ); //  ableToDrink    : [19, 21] 

Array.prototype.map ()

تتيح لك طريقة Array.prototype.map () إنشاء مصفوفة جديدة استنادًا إلى قيم تمت معالجتها بطريقة ما لصفيف آخر. تعد هذه الطريقة رائعة لتعديل البيانات ؛ نظرًا لأنه لا يجري تغييرات على الصفيف الأصلي ، فإنه غالبًا ما يستخدم في React.

▍ مثال

استنادًا إلى مصفوفة الأرقام ، أنشئ مصفوفة جديدة ، في بداية كل عنصر سيتم وضع علامة $ فيه.

 const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); //      dollars: ['$2', '$3', '$4', '$5'] 

Array.prototype.reduce ()

غالبًا ما يتم تجاهل طريقة Array.prototype.reduce () بشكل غير مستحق. يسمح لك بتقليل الصفيف إلى قيمة واحدة تتراكم في عنصر جهاز الاستقبال. يمكن أن تكون القيمة التي أرجعتها هذه الطريقة من أي نوع. على سبيل المثال ، يمكن أن يكون كائنًا أو صفيفًا أو سلسلة أو رقمًا.

▍ مثال

.reduce() طريقة .reduce() للحصول على مجموع عناصر المصفوفة الرقمية.

 const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue); //   total    30 

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

Array.prototype.forEach ()

يطبق الأسلوب Array.prototype.forEach () الوظيفة التي يتم تمريرها إليها على كل عنصر من عناصر الصفيف.

▍ مثال

فيما يلي كيفية إخراج كل عنصر من عناصر الصفيف إلى وحدة التحكم باستخدام طريقة .forEach() .

 const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); //   : // 'happy' // 'sad' // 'angry' 

Array.prototype.some ()

يتحقق أسلوب Array.prototype.some () مما إذا كان عنصر واحد على الأقل من الصفيف يطابق الشرط المحدد بواسطة الوظيفة الممررة إليه. هذه الطريقة ، على سبيل المثال ، قادرة على إظهار نفسها بشكل جيد في حل مهمة التحقق من امتيازات المستخدم. يمكن اعتباره تماثليًا لـ .forEach() تم اعتباره سابقًا ، مع الفارق أنه عند استخدامه بمساعدة الوظيفة التي يتم تمريرها إليها ، من الممكن تنفيذ إجراءات معينة على عناصر المصفوفة حتى ترجع هذه الوظيفة القيمة الحقيقية ، ثم يقطع المعالجة.

▍ مثال

تحقق مما إذا كان الصفيف يحتوي على سلسلة admin واحدة على الأقل.

 const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin'); //  containsAdmin   true 

Array.prototype.every ()

تشبه طريقة Array.prototype.every () طريقة .some() الموضحة أعلاه ، ولكنها لا تُرجع إلا إذا استوفت جميع عناصر الصفيف الشرط المحدد بواسطة الوظيفة التي تم تمريرها إلى هذه الطريقة.

▍ مثال

تحقق مما إذا كانت جميع التقديرات المخزنة في المصفوفة تساوي أو أكبر من 3.

 const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 ); //goodOverallRating   true 

Array.prototype.includes ()

تتيح لك طريقة Array.prototype.includes () معرفة ما إذا كان الصفيف يحتوي على قيمة معينة. وهي تشبه طريقة .some() ، لكنها لا تتحقق مما إذا كانت عناصر المصفوفة تطابق شرطًا معينًا ، ولكن وجود القيمة المحددة في المصفوفة عند استدعائها.

▍ مثال

تحقق مما إذا كان هناك عنصر سلسلة waldo في الصفيف:

 const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo'); // includesWaldo   true 

Array.from ()

تتيح لك الطريقة الثابتة Array.from () إنشاء صفائف بناءً على صفائف أو سلاسل أخرى. إذا لزم الأمر ، يمكن تمرير هذه الطريقة وظيفة لإجراء التعيين ، مما يسمح لك بالتأثير على البيانات التي ستقع في الصفيف الجديد. في الواقع ، يتم توفير طريقة خاصة لرسم الخرائط - Array.prototype.map () ، لذلك ليس من الواضح تمامًا لماذا قد يحتاج أي شخص إلى هذه الميزة في طريقة Array.from() .

▍ مثال

قم بإنشاء صفيف استناداً إلى السلسلة.

 const newArray = Array.from('hello'); // newArray    ['h', 'e', 'l', 'l', 'o'] 

أنشئ مصفوفة تحتوي على قيم مضاعفة لعناصر المصفوفة العددية الأصلية.

 const doubledValues = Array.from([2, 4, 6], number => number * 2); //   doubleValues    : [4, 8, 12] 

Object.values ​​()

إرجاع الأسلوب Object.values ​​() صفيف من قيم خصائص الكائن الذي تم تمريره إليه.

▍ مثال

نقوم بتشكيل مجموعة من قيم خصائص الكائن.

 const icecreamColors = {   chocolate: 'brown',   vanilla: 'white',   strawberry: 'red', } const colors = Object.values(icecreamColors); //  colors    ["brown", "white", "red"] 

Object.keys ()

إرجاع الأسلوب Object.keys () صفيف يتكون من أسماء (مفاتيح) خصائص الكائن.

▍ مثال

سنقوم بتشكيل مجموعة من أسماء خصائص الكائن.

 const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); //     types: ["chocolate", "vanilla", "strawberry"] 

Object.entries ()

ترجع طريقة Object.entries () ، بعد معالجة الكائن الذي تم تمريره إليها ، صفيفًا يحتوي على صفائف عبارة عن أزواج من النموذج [, ] ، وهي أسماء خصائص وقيم هذه الخصائص.

▍ مثال

نقوم بتشكيل مصفوفة تحتوي ، بالنسبة للموضوع الذي يهمنا ، على بيانات حول أسماء الخصائص وقيمها.

 const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); //   entries    // [['rain', 0], ['temperature', 24], ['humidity', 33]] 

عامل التمديد والمصفوفات

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

▍ مثال

اجمع بين المصفوفتين.

 const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; //  combined   : [1, 2, 3, 4, 5, 6, 7, 8] 

نقوم بتشكيل صفيف جديد ، وهو الصفيف الأصلي الذي تم حذف العنصر منه. في هذه الحالة ، لا يجب تغيير الصفيف الأصلي.

 const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals   : ['squirrel', 'bear', 'deer', 'rat'] 

عامل التمديد والكائنات

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

▍ مثال

قم بإنشاء كائن جديد عن طريق إضافة خاصية جديدة إلى الكائن الأصلي دون تغيير الكائن الأصلي.

 const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' } //  newObject   : // { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' } 

بناء معلمات الدالة المتبقية

عند العمل مع الدوال ، يمكنك استخدام بنية المعلمات المتبقية لتنظيم استقبال أي عدد من الوسيطات في شكل صفيف.

▍ مثال

نقوم بطباعة مصفوفة تحتوي على الوسائط التي تم تمريرها إلى الدالة.

 function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud'); //      ['hi', 'there', 'bud'] 

Object.freeze ()

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

▍ مثال

نقوم "بتجميد" كائن ، وبعد ذلك نحاول تغيير ملكيته والتأكد من عدم إمكانية القيام بذلك.

 const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; //  frozenObject  ,     { name: 'Robert' } 

Object.seal ()

تتيح لك طريقة Object.seal () "ختم" الكائن ، ومنع إضافة خصائص جديدة. في نفس الوقت ، يمكن تغيير الخصائص الموجودة.

▍ مثال

نقوم "بإغلاق" الكائن ، والذي لن يسمح لنا بإضافة خاصية جديدة إليه ، ولكنه سيترك من الممكن تغيير الخصائص الموجودة.

 const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; //  sealedObject   : { name: 'Bob' } 

كائن. ()

تسمح لك طريقة Object.assign () بدمج الكائنات عن طريق نسخ الخصائص من كائن إلى آخر. في الواقع ، يمكن تحقيق نفس التأثير باستخدام عامل التوسع الموضح أعلاه ، لذلك يمكن الاستغناء عن هذه الطريقة تمامًا. وتجدر الإشارة إلى أن هذه الطريقة ، مثل عامل التمديد ، لا تؤدي استنساخًا عميقًا للأشياء. إذا كنت بحاجة إلى أداة جاهزة للاستنساخ العميق للكائنات - ألق نظرة على أدوات مكتبة Lodash .

▍ مثال

لنقم بإنشاء واحد من كائنين.

 const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject); //      combinedObjec : { firstName: 'Robert', lastName: 'Cooper' } 

الملخص

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

أعزائي القراء! ما هي طرق المصفوفات والكائنات في JavaScript التي تستخدمها في أغلب الأحيان؟