تقدم هذه المقالة أن ECMASCRIPT 6 ستجلب لنا طرق تشغيل صفيف جديدة وكيفية تطبيق ميزات الصفيف الجديدة هذه في المتصفحات الحالية.
ملاحظة: سأستخدم مُنشئ المصطلحات والفئة بالتناوب.
طرق الطبقة
الطريقة التي لدى الصفيف نفسه.
Array.from (Arraylike ، mapfunc؟ ، thisarg؟)
تتمثل الوظيفة الأساسية لـ Array.from () في تحويل نوعين من الكائنات إلى صفائف.
كائنات تشبه الصفيف
هذه الفئة من الكائنات لها خصائص الطول والفهرس. تنتمي نتيجة مشغل DOM إلى هذه الفئة ، مثل document.getElementsByClassName ().
كائنات ithable
عند أخذ القيم ، يمكن أخذ عنصر واحد فقط في وقت واحد. الصفائف ITERBLE ، مثل هيكل الصفيف الجديد ، والخريطة (MAP) ومجموعة (SET) في ECMASCRIPT.
الكود التالي هو مثال على تحويل كائن صفيف إلى صفيف:
نسخة الكود كما يلي:
دع lis = document.queryselectorall ('ul.fancy li') ؛
Array.from (lis). for (function (li) {
console.log (العقدة) ؛
}) ؛
نتيجة QuerySelectorAll () ليست صفيفًا ، ولن تكون هناك طريقة foreach (). هذا هو السبب في أننا نحتاج إلى تحويل هذه الطريقة إلى صفيف قبل استخدامها.
باستخدام التعيين عبر Array.from ()
Array.from () هو أيضًا بديل للأشكال باستخدام Map ().
نسخة الكود كما يلي:
دع يمتد = document.queryselectorall ('span.name') ؛
// map () ، بشكل عام:
دع الأسماء 1 = array.prototype.map.call (تمتد ، s => s.textContent) ؛
// array.from ():
دع الأسماء 2 = array.from (تمتد ، s => s.textContent) ؛
المعلمة الثانية في الطريقتين هي وظيفة السهم.
في هذا المثال ، تكون نتيجة المستند. FerySelectorAll () كائن صفيف فئة آخر ، وليس صفيفًا. هذا هو السبب في أننا لا نستطيع استدعاء الخريطة () مباشرة. في المثال الأول ، من أجل استخدام Foreach () ، نقوم بتحويل كائن صفيف الفئة إلى صفيف. هنا نحذف الخطوات المتوسطة من خلال الطرق العامة والإصدارات المعمارية من Array.from ().
ثقوب
Array.from () يتجاهل العناصر المفقودة - الثقوب في الصفيف ، والتي سيتم التعامل معها كعناصر غير محددة.
نسخة الكود كما يلي:
> array.from ([0 ، ، 2])
[0 ، غير محدد ، 2]
هذا يعني أنه يمكنك استخدام Array.from () لإنشاء أو ملء صفيف:
نسخة الكود كما يلي:
> array.from (صفيف جديد (5) ، () => 'a')
["A" ، "A" ، "A" ، "A" ، "A" ، "A"]
> array.from (صفيف جديد (5) ، (x ، i) => i)
[0 ، 1 ، 2 ، 3 ، 4]
إذا كنت ترغب في ملء صفيف بقيمة ثابتة ، فستكون Array.Prototype.Fill () (انظر أدناه) خيارًا أفضل. الأول هو طريقتي المثال أعلاه.
من () في صفيف (صفيف) فئة فرعية
سيناريو استخدام آخر لـ Array.from () هو تحويل مثيل كائن صفيف أو كائن غير مرغوب فيه إلى فئة فرعية صفيف. إذا قمت بإنشاء myarray فئة فرعية صفيف وترغب في تحويل هذا النوع من الكائن إلى مثيل من myarray ، يمكنك ببساطة استخدام myarray.from (). السبب في أن هذا يمكن استخدامه هو أنه في ECMASCRIPT 6 ، سيرث منشئات الفئة الأصل (مُنشئ الفئة الأصل هو النموذج الأولي لمؤسس الفئات الفرعية الخاصة به).
نسخة الكود كما يلي:
فئة myarray يمتد الصفيف {
...
}
دع extureofmyarray = myarray.from (aniterable) ؛
يمكنك الجمع بين هذه الوظيفة مع رسم الخرائط لإكمال عملية الخريطة حيث يمكنك التحكم في مُنشئ النتائج:
نسخة الكود كما يلي:
// من () تحديد مُنشئ النتيجة عبر المتلقي
// (في هذه الحالة ، myarray)
دع extureofmyarray = myarray.from ([1 ، 2 ، 3] ، x => x * x) ؛
// MAP (): النتيجة هي دائمًا مثيل الصفيف
Let exateOfarray = [1 ، 2 ، 3] .map (x => x * x) ؛
Array.of (... عناصر)
إذا كنت ترغب في تحويل مجموعة من القيم إلى صفيف ، فيجب عليك استخدام نص مصدر الصفيف (الصفيف الحرفي). خاصة عندما يكون هناك قيمة واحدة فقط وهي رقم ، فإن مُنشئ الصفيف يضرب. لمزيد من المعلومات ، يرجى الرجوع إلى.
نسخة الكود كما يلي:
> مجموعة جديدة (3 ، 11 ، 8)
[3 ، 11 ، 8]
> مجموعة جديدة (3)
[، ، ،]
> مجموعة جديدة (3.1)
Rangeerror: طول صفيف غير صالح
لذلك إذا أردنا تحويل مجموعة من القيم إلى مثيل للبنية الفرعية ، فماذا يجب أن نفعل؟ هذه هي قيمة Array.of () (تذكر أن البناء الفرعي للمصفوفة سيرث جميع أساليب الصفيف ، بما في ذلك () بالطبع).
نسخة الكود كما يلي:
فئة myarray يمتد الصفيف {
...
}
console.log (myarray.of (3 ، 11 ، 8) مثيل myarray) ؛ // حقيقي
console.log (myarray.of (3) .Length === 1) ؛ // حقيقي
سيكون Array.of () مناسبًا تمامًا لالتفاف القيم في صفيف ، دون طريقة غريبة للتعامل مع Array (). ولكن أيضًا انتبه إلى Array.prototype.map () ، هناك حفرة هنا:
نسخة الكود كما يلي:
> ['a' ، 'b']. خريطة (array.of)
[['a' ، 0 ، ['a' ، 'b'] ،
['b' ، 1 ، ['a' ، 'b']]]
> ['a' ، 'b']. خريطة (x => array.of (x)) // أفضل
[['a'] ، ['b']]
> ['a' ، 'b']. خريطة (x => [x]) // الأفضل (في هذه الحالة)
[['a'] ، ['b']]
كما ترون ، ستقوم MAP () بتمرير ثلاثة معلمات في رد الاتصال. غالبًا ما يتم التغاضي عن الاثنين الأخير (التفاصيل).
طرق النموذج الأولي
هناك العديد من الطرق الجديدة المتاحة لحالات المصفوفات.
تكرار على المصفوفات
ستساعد الطريقة التالية في إكمال التكرار في المصفوفة:
نسخة الكود كما يلي:
Array.Prototype.entries ()
Array.prototype.keys ()
Array.Prototype.values ()
تُرجع كل طريقة من الطرق المذكورة أعلاه سلسلة من القيم ، ولكن لن يتم إرجاعها كصفيف. سيتم عرضها واحدًا تلو الآخر من خلال التكرار. دعونا نلقي نظرة على مثال (سأضع محتويات التكرار في صفيف باستخدام Array.from ()):
نسخة الكود كما يلي:
> array.from (['a' ، 'b'] .keys ())
[0 ، 1]
> array.from (['a' ، 'b'] .values ())
['a' ، 'b']
> array.from (['a' ، 'b'].
[[0 ، 'a'] ،
[1 ، 'b']]
يمكنك الجمع بين الإدخالات () وحلقات من أجل eCmascript 6 لتفكيك الكائن التكراري بسهولة في زوج من القيمة الرئيسية:
نسخة الكود كما يلي:
لـ (دع [الفهرس ، elem] من ['a' ، 'b']. إدخالات ()) {
console.log (الفهرس ، elem) ؛
}
ملاحظة: يمكن بالفعل تشغيل هذا الرمز في أحدث متصفح Firefox. تي فايرفوكس.
العثور على عناصر الصفيف
Array.Prototype.find (Predicate ، thisarg؟) إرجاع العنصر الأول الذي يفي بوظيفة رد الاتصال. إذا لم يكن هناك عنصر يرضي الشرط ، فإنه يعود غير محدد. على سبيل المثال:
نسخة الكود كما يلي:
> [6 ، -5 ، 8] .find (x => x <0)
-5
> [6 ، 5 ، 8] .find (x => x <0)
غير محدد
Array.Prototype.FindIndex (المسند ، thisarg؟)
إرجاع فهرس العنصر الأول الذي يفي بوظيفة رد الاتصال. إذا لم يتم العثور على عناصر مرضية ، يتم إرجاع -1. على سبيل المثال:
نسخة الكود كما يلي:
> [6 ، -5 ، 8] .FindIndex (x => x <0)
1
> [6 ، 5 ، 8] .FindIndex (x => x <0)
-1
كلتا الأساليب* تجاهل الثقوب ، أي أنهما لا ينتبهون إلى العناصر غير المحددة. توقيع وظيفة الانتهاء من رد الاتصال هو:
المسند (عنصر ، فهرس ، صفيف)
العثور على nan عبر FindIndex ()
Array.Prototype.indexof () لديه قيود معروفة ، أي أنه لا يمكن العثور على nans. لأنه يستخدم الهوية (===) للعثور على عناصر مطابقة:
نسخة الكود كما يلي:
> [nan] .indexof (nan)
-1
باستخدام FindIndex () ، يمكنك استخدام Object.is () ، والتي لن تسبب مثل هذه المشكلة:
نسخة الكود كما يلي:
> [nan] .findIndex (y => object.is (nan ، y))
0
يمكنك أيضًا استخدام طريقة أكثر عمومية لإنشاء وظيفة مساعد elemis ():
نسخة الكود كما يلي:
> وظيفة elemis (x) {return object.is.bind (object ، x)}
> [NAN] .FindIndex (Elemis (NAN))
0
Array.Prototype.fill (القيمة ، ابدأ؟ ، نهاية؟)
استخدم القيمة المحددة لملء صفيف:
نسخة الكود كما يلي:
> ['a' ، 'b' ، 'c']. fill (7)
[7 ، 7 ، 7]
لن يتم علاج الثقوب بأي معاملة خاصة:
نسخة الكود كما يلي:
> صفيف جديد (3) .fill (7)
[7 ، 7 ، 7]
يمكنك أيضًا الحد من بداية ونهاية ملء:
نسخة الكود كما يلي:
> ['a' ، 'b' ، 'c']. fill (7 ، 1 ، 2)
['a' ، 7 ، 'c']
متى يمكنني استخدام طريقة الصفيف الجديدة؟
هناك بعض الطرق التي يمكن استخدامها في المتصفح.