شارك 12 نصائح عملية جافا سكريبت عملية

في هذه المقالة ، سوف نشارككم 12 نصيحة حول JavaScript. قد تساعدك هذه النصائح في حل بعض المشكلات في عملك الفعلي.

استخدم !! المشغل لتحويل القيمة المنطقية

في بعض الأحيان ، نحتاج إلى التحقق مما إذا كان هناك متغير أو التحقق مما إذا كانت القيمة لها قيمة صالحة ، وإذا كانت موجودة ، فإنها تُرجع بشكل صحيح. من أجل القيام بهذا التحقق ، يمكننا استخدام !! المشغل لتنفيذ هو مريح للغاية وبسيط. للمتغيرات ، يمكنك استخدام !! متغير للكشف. طالما أن قيمة المتغير هي: 0 ، NULL ، "" ، غير محدد أو نان ، ستعود كاذبة ، وإلا فإنها ستعود بشكل صحيح. على سبيل المثال ، المثال التالي:

 حساب الوظيفة (نقدي) {this.cash = cash ؛ this.hasmoney = !! } var account = new account (100.50) ؛ console.log (account.cash) ؛ // 100.50 console.log (account.hasmoney) ؛ // true var fmareaccount = new account (0) ؛ console.log (فارغ cash) ؛ // 0 console.log (فارغ councount.hasmoney) ؛ // خطأ شنيع

في هذا المثال ، طالما أن قيمة الحساب. cash أكبر من 0 ، فإن القيمة التي تم إرجاعها بواسطة الحساب. hasmoney صحيحة.

استخدم + لتحويل السلاسل إلى الأرقام

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

 وظيفة tonumber (strnumber) {return +strnumber ؛ } console.log (tonumber ("1234")) ؛ // 1234 console.log (tonumber ("ACB")) ؛ // نان

يعمل هذا أيضًا للتاريخ ، في هذه الحالة ، سيُرجع رقم الطابع الزمني:

انسخ الرمز كما يلي: console.log (+New Date ()) // 1461288164385 والرمز الشرطي

إذا كان لديك رمز مثل هذا:

 if (conged) {login () ؛ }

يمكنك أيضًا اختصار المتغيرات واستخدامها && وتسلسلها معًا. على سبيل المثال ، يمكن اختصار المثال أعلاه على النحو التالي:

نسخة الكود كما يلي: Conced && login () ؛

إذا كانت بعض الخصائص أو الوظائف موجودة في كائن ، فيمكنك أيضًا القيام بالكشف ، كما هو موضح في الكود التالي:

نسخة الكود كما يلي: user && user.login () ؛

استخدم || المشغل

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

 مستخدم الوظيفة (الاسم ، العمر) {this.name = name || "أوليفر كوين" ؛ this.age = العمر || 27 ؛ } var user1 = new user () ؛ console.log (user1.name) ؛ // Oliver Queen Console.log (user1.age) ؛ // 27 var user2 = مستخدم جديد ("Barry Allen" ، 25) ؛ console.log (user2.name) ؛ // Barry Allen console.log (user2.age) ؛ // 25

صفيف ذاكرة التخزين المؤقت. الطول في حلقة

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

 لـ (var i = 0 ؛ i <array.length ؛ i ++) {console.log (Array [i]) ؛ }

إذا كانت صفيفًا صغيرًا ، فهذا أمر رائع ، إذا كنت تتعامل مع صفيف كبير ، فسيقوم هذا الرمز بإعادة حساب حجم الصفيف في كل تكرار ، مما سيؤدي إلى بعض التأخير. لتجنب هذه الظاهرة ، يمكن استخدام Array.Length كذاكرة التخزين المؤقت:

 var length = array.length ؛ لـ (var i = 0 ؛ i <length ؛ i ++) {console.log (array [i]) ؛ }

يمكنك أيضًا كتابتها مثل هذا:

 لـ (var i = 0 ، length = array.length ؛ i <length ؛ i ++) {console.log (Array [i]) ؛ }

اكتشف الخصائص في الكائنات

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

 if ('QuerySelector' في المستند) {document.queryselector ("#id") ؛ } آخر {document.getElementById ("id") ؛ }

في هذا المثال ، إذا كانت وظيفة QuerySelector غير موجودة في المستند ، فسيتم استدعاء المستند.

احصل على العنصر الأخير في المصفوفة

Array.Prototype.slice (تبدأ ، النهاية) يستخدم للحصول على عناصر الصفيف بين البداية والنهاية. إذا لم تقم بتعيين المعلمة النهائية ، فسيتم اعتبار قيمة الطول الافتراضي للمصفوفة القيمة النهائية. لكن بعض الطلاب قد لا يعرفون أن هذه الوظيفة يمكن أن تقبل أيضًا القيم السلبية كمعلمات. إذا قمت بتعيين قيمة سالبة كقيمة البداية ، فيمكنك الحصول على العنصر الأخير من الصفيف. يحب:

 صفيف var = [1،2،3،4،5،6] ؛ console.log (Array.Slice (-1)) ؛ // [6] console.log (array.slice (-2)) ؛ // [5،6] console.log (Array.Slice (-3)) ؛ // [4،5،6]

اقتطاع الصفيف

تستخدم هذه الخدعة بشكل أساسي لقفل حجم الصفيف ، وهي مفيدة للغاية إذا تم استخدامها لحذف بعض العناصر في الصفيف. على سبيل المثال ، تحتوي صفيفك على 10 عناصر ، لكنك تريد فقط الحصول على العناصر الخمسة الأولى فقط ، ثم يمكنك اقتطاع المصفوفة بواسطة Array.Length = 5. كما في المثال التالي:

 صفيف var = [1،2،3،4،5،6] ؛ console.log (Array.Length) ؛ // 6 array.length = 3 ؛ console.log (Array.Length) ؛ // 3 console.log (صفيف) ؛ // [1،2،3]

استبدل كل شيء

تتيح لك وظيفة string.replace () استخدام السلاسل أو التعبيرات العادية لاستبدال السلاسل. هذه الوظيفة نفسها تحل محل السلسلة الأولى فقط. ومع ذلك ، يمكنك استخدام /G في تعبيرات منتظمة لمحاكاة وظيفة وظيفة replaceall ():

 var string = "John John" ؛ console.log (string.replace (/hn/، "ana")) ؛ // "Joana John" Console.log (string.replace (/hn/g ، "ana")) ؛ // "جوانا جوانا"

المصفوفات دمج

إذا كنت ترغب في دمج صفيفتين ، فستستخدم عادة وظيفة Array.Concat ():

 var array1 = [1،2،3] ؛ var array2 = [4،5،6] ؛ console.log (Array1.Concat (Array2)) ؛ // [1،2،3،4،5،6] ؛

هذه الوظيفة غير مناسبة بعد ذلك لدمج صفيفتين كبيرتين ، لأنها ستستهلك الكثير من الذاكرة لتخزين المصفوفات التي تم إنشاؤها حديثًا. في هذه الحالة ، يمكنك استخدام Array.pus (). تطبيق (ARR1 ، ARR2) لإنشاء صفيف جديد بدلاً من ذلك. لا يتم استخدام هذه الطريقة لإنشاء مجموعة جديدة ، فهي تجمع فقط بين الأرقام الأولى والثانية معًا مع تقليل استخدام الذاكرة:

 var array1 = [1،2،3] ؛ var array2 = [4،5،6] ؛ console.log (Array1.push.apply (Array1 ، Array2)) ؛ // [1،2،3،4،5،6] ؛

تحويل Nodelist إلى صفيف

إذا قمت بتشغيل وظيفة المستند. FerySelectorAll ("P") ، فقد تقوم بإرجاع مجموعة من عناصر DOM ، أي الكائن Nodelist. لكن هذا الكائن لا يحتوي على وظائف الوظائف ، مثل SORT () ، تقليل () ، MAP () ، FILTER () ، وما إلى ذلك حتى يتم استخدام وظائف وظيفة الصفيف الأصلية هذه ، يجب تحويل قائمة العقدة إلى صفيف. يمكنك استخدام [] .slice.call (عناصر) للتنفيذ:

 var elements = document.querySelectorAll ("p") ؛ // nodelist var arrayElements = [] .slice.call (عناصر) ؛ // الآن nodelist هو صفيف var arrayelements = array.from (عناصر) ؛ // هذه طريقة أخرى لتحويل Nodelist إلى Array

تقلص عناصر الصفيف

بالنسبة إلى خلط عناصر الصفيف ، ليست هناك حاجة لاستخدام أي مكتبات خارجية ، مثل Lodash ، فقط قم بذلك:

 قائمة var = [1،2،3] ؛ console.log (list.sort (function () {Math.Random () - 0.5})) ؛ // [2،1،3]

لخص

لقد تعلمت الآن بعض نصائح JavaScript المفيدة. آمل أن تساعدك هذه النصائح في حل بعض المشاكل في العمل ، أو أن هذه المقالة ستكون مفيدة لك. إذا كان لديك بعض نصائح JavaScript الممتازة ، فيرجى مشاركتها معنا في التعليقات.