تم إصدار معيار ECMASCript5 في 3 ديسمبر 2009 ، وهو يجلب بعض الطرق الجديدة لتحسين عمليات صفيف الصفيف الحالية. ومع ذلك ، فإن أساليب الصفيف الجديدة هذه لم تصبح شائعة حقًا لأن هناك نقصًا في المتصفحات التي تدعم ES5 في السوق في ذلك الوقت.
صفيف "إضافات"
لا أحد يشك في التطبيق العملي لهذه الأساليب ، ولكن كتابة polyfill (PS: البرنامج المساعد المتوافق مع المتصفحات القديمة) لا يستحق ذلك. يتحول "يجب أن تنفذ" إلى "أفضل تنفيذ". بعض الناس يسميون بالفعل مجموعة أساليب الصفيف هذه "إضافات". لماذا!
لكن الأوقات تتغير. إذا نظرت إلى مشاريع JS Open Source الشهيرة على Github ، فسترى أن الاتجاه يتغير. يريد الجميع تقليل الكثير من التبعيات (مكتبات الطرف الثالث) وتنفيذها باستخدام التعليمات البرمجية المحلية فقط.
حسنًا ، لنبدأ.
صفيفاتي الخمسة
في ES5 ، هناك 9 طرق صفيف في إجمالي http://kangax.github.io/compat-table/es5/
ملاحظة* تسع طرق
Array.Prototype.indexof
Array.Prototype.LastIndexof
Array.Prototype.every
Array.prototype.some
Array.Prototype.foreach
Array.prototype.map
Array.Prototype.Filter
Array.prototype.reduce
Array.Prototype.reduceright
سأختار 5 طرق ، والتي أعتقد شخصياً أنها الأكثر فائدة وسيواجه العديد من المطورين.
1) فهرس
تقوم طريقة IndexOF () بإرجاع موضع العنصر الأول الموجود في الصفيف ، و -1 إذا لم يكن موجودًا.
عندما لا يتم استخدام indexOF
var arr = ['Apple' ، 'Orange' ، 'Pear'] ، Found = false ؛ for (var i = 0 ، l = arr.length ؛ i <l ؛ i ++) {if (arr [i] === 'Orange') {found = true ؛}} console.log ("found:" ، found) ؛بعد الاستخدام
var arr = ['Apple' ، 'Orange' ، 'Pear'] ؛ console.log ("found:" ، arr.indexof ("Orange")! = -1) ؛2) مرشح
تقوم طريقة Filter () بإنشاء صفيف جديد يطابق معايير المرشح.
عندما لا يتم استخدام Filter ()
var arr = [{"name": "Apple" ، "Count": 2} ، {"name": "Orange" ، "Count": 5} ، {"name": "pear" ، "count": 3} ، {"name": "Orange" ، "Count": 16} ،] ؛ var newarr = [] ؛ for (var i = 0 ، l = arr.length ؛ i <l ؛ i ++) {if (arr [i]استخدم Filter ():
var arr = [{"name": "Apple" ، "Count": 2} ، {"name": "Orange" ، "Count": 5} ، {"name": "pear" ، "count": 3} ، {"name": "Orange" ، "Count": 16} ،] ؛ var newarr = arr.filter (function (item) {return item.Name === "Orange" ؛}) ؛ console.log ("نتائج التصفية:" ، نيوار) ؛3) foreach ()
يقوم Foreach بتنفيذ الطريقة المقابلة لكل عنصر
var arr = [1،2،3،4،5،6،7،8] ؛ // يستخدم المعتاد "من أجل" loop to ideaterfor (var i = 0 ، l = arr.length ؛ i <l ؛ i ++) {console.log (arr [i]) ؛ iteratearr.foreach (وظيفة (العنصر ، الفهرس) {console.log (item) ؛}) ؛يتم استخدام Foreach لاستبدال الحلقة
4) الخريطة ()
بعد أن تقوم MAP () بإجراء عملية (MAP) على كل عنصر من عناصر الصفيف ، سيتم إرجاع مجموعة جديدة.
لا تستخدم الخريطة
var oldarr = [{first_name: "colin" ، last_name: "toh"} ، {first_name: "addy" ، last_name: "Osmani"} ، {first_name: "yehuda" ، last_name: "katz"}] لـ (var i = 0 ، l = oldarr.length ؛ i <l ؛ i ++) {var item = oldarr [i] ؛ item.full_name = [item.first_name ، item.last_name].بعد استخدام الخريطة
var oldarr = [{first_name: "colin" ، last_name: "toh"} ، {first_name: "addy" ، last_name: "Osmani"} ، {first_name: "yehuda" ، last_name: "katz"}] ؛ وظيفة getNewarR () {return oldarr.map (وظيفة (العنصر ، الفهرس) {item.full_name = [item.first_name ، item.last_name]. } console.log (getNewarR ()) ؛MAP () هي وظيفة عملية للغاية عند معالجة البيانات التي يتم إرجاعها بواسطة الخادم.
5) تقليل ()
يمكن أن يؤدي تقليل () إلى تنفيذ وظيفة تراكم ، مما يقلل من كل قيمة من الصفيف (من اليسار إلى اليمين) إلى قيمة.
بصراحة ، كان من الصعب بعض الشيء فهم هذه الجملة في البداية ، كانت مجردة للغاية.
السيناريو: الإحصائيات كم عدد الكلمات غير القابلة للتكرار في صفيف
عندما لا تستخدم تقليل
var arr = ["Apple" ، "Orange" ، "Apple" ، "Orange" ، "Pear" ، "Orange"] ؛ Function GetWordCnt () {var obj = {} ؛ لـ (var i = 0 ، l = arr.length ؛ i <l ؛ i ++) {var item = arr [i] ؛ OBJ [item] = (OBJ [item] +1) || 1 ؛ } return obj ؛} console.log (getWordCnt ()) ؛بعد استخدام تقليل ()
var arr = ["Apple" ، "Orange" ، "Apple" ، "Orange" ، "Pear" ، "Orange"] ؛ Function GetWordCnt () {return arr.reduce (function (prev ، next) {prev [next] = (prev [next] + 1) || 1 ؛ return prev ؛} ، {}) ؛} console.log (getwordcnt ()) ؛اسمحوا لي أن أشرح فهمي الخاص بالتقليل أولاً. تقليل (رد الاتصال ، initialValue) سوف يمر في متغيرين. وظيفة رد الاتصال (رد الاتصال) و initialValue. لنفترض أن الوظيفة لها معلمة واردة ، Prev و Next ، الفهرس والمصفوفة. يجب أن تفهم Prev و Jext.
بشكل عام ، يبدأ Prev بالعنصر الأول في الصفيف ، والآخر هو العنصر الثاني. ولكن عندما تمر بالقيمة الأولية (initialValue) ، سيكون أول PRIM هو القيمة المبدئية ، وسيكون التالي العنصر الأول في الصفيف.
على سبيل المثال:
/** الفرق بين الاثنين ، قم بتشغيله في وحدة التحكم وستعرف*/var arr = ["Apple" ، "Orange"] ؛ وظيفة nopassvalue () {return arr.reduce (function (prev ، next) {console.log ("prev:" ، drev) ؛ console.log ("،" ، التالي) ؛ إرجاع + ". arr.reduce (function (prev ، next) {console.log ("prev:" ، prev) ؛ console.log ("next:" ، next) ؛ prev [next] = 1 ؛ return prev ؛} ، {}) ؛ المعلمة: "، passvalue ()) ؛