ما هي طريقة المصفوفة الجديدة في es6؟

طرق المصفوفة الجديدة: 1.from()، والتي يمكنها تحويل كائن يشبه المصفوفة أو قابل للتكرار إلى مصفوفة حقيقية؛ 2.of()، والتي يمكنها تحويل مجموعة من القيم إلى مصفوفة، مما يعوض أوجه القصور منشئ المصفوفة Array() ؛ 3.find() وfindIndex()، قم بإرجاع عنصر المصفوفة الأول الذي يلبي الشروط 4. fill() وما إلى ذلك.

كيفية البدء سريعًا باستخدام VUE3.0: أدخل

بيئة التشغيل الخاصة بهذا البرنامج التعليمي: نظام Windows 7، الإصدار 6 من ECMAScript، كمبيوتر Dell G3.

طريقة المصفوفة الجديدة es6

1. Array.from()

يتم استخدام طريقة Array.from لتحويل نوعين من الكائنات إلى مصفوفات حقيقية:

• كائنات تشبه المصفوفة وكائنات

• قابلة للتكرار (بما في ذلك ES6 الجديدة مجموعة بنية البيانات والخريطة)

تعني أنه طالما أثناء نشر بنية بيانات واجهة Iterator، يمكن لـ Array.from تحويلها إلى مصفوفة،

وفي التطوير الفعلي، يمكن استخدامها بشكل عام لتحويل مجموعة NodeList التي تم إرجاعها بواسطة عملية DOM، بالإضافة إلى الوسائط داخل الوظيفة.

الكائن

بتمرير معلمة، يتم استخدامه لتحويل صفيف الفئة إلى

• صفيف صفيف حقيقي لإزالة التكرار.
  

const arr = [1,2,3,3,3,2,5];
console.log(Array.from(new Set(arr))); //[1,2,3,5]
//...يمكن أيضًا تحقيق نفس التأثير console.log([...new Set(arr)]) //[1,2,3,5]

بالنسبة للمتصفحات التي لا تنشر هذه الطريقة، يمكنك استخدامها طريقة Array.prototype.slice بدلاً من

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()

يمكن أيضًا أن تتلقى معلمة ثانية، والتي يتم تمريرها إلى دالة لتحقيق تأثير مشابه لطريقة الخريطة، ومعالجة كل عنصر وإرجاع المصفوفة المعالجة

Array.from([1,2,3 ], item => العنصر *2) //[2,4,6]

• طول السلسلة التي تم إرجاعها

لتحويل السلسلة إلى مصفوفة، ثم إرجاع طول السلسلة، لأنه يمكنه التعامل بشكل صحيح مع أحرف Unicode المختلفة، وهذا يتجنب خطأ JS الخاص في حساب أحرف Unicode الأكبر من /uFFFF كحرفين

function countLength(string) {
    إرجاع Array.from(string).length
}

2. Array.of()

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

// الكود التالي يوضح الفرق Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]

صفيف جديد (3)؛ // [،،،]
مصفوفة جديدة (3، 11، 8) // [3، 11، 8]

// يمكن محاكاة طريقة Array.of بالكود التالي.

وظيفة صفيف () {
  إرجاع [].slice.call(arguments);
}

3. يقوم Find () وfindIndex ()

بإرجاع

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

تتلقى وظيفة رد الاتصال لهذه الطريقة ثلاث معلمات: القيمة الحالية، والموضع الحالي،

ومثال الصفيف الأصلي 1

[1,12,4. ,0,5] .find((item,index, arr) => عنصر الإرجاع < 1) // 0

مثال 2

// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item);// -5
// find يدعم أيضًا هذا النوع من البحث المعقد var point = [
  {
    س: 10،
    ص: 20
  },
  {
    س: 20،
    ص: 30
  },
  {
    س: 30،
    ص: 40
  },
  {
    س: 40،
    ص: 50
  },
  {
    س: 50،
    ص: 60
  }
];
Points.find (وظيفة المطابق (نقطة) {
  نقطة الإرجاع.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 } إن

findIndex()

هو في الأساس نفس طريقة find()، فهو يُرجع فقط موضع عضو المصفوفة الأول الذي يستوفي الشروط لا يوجد، فإنه يُرجع -1.

المثال 1

[1 ,2,4,15,0].findIndex((item, Index,arr) => return item > 10) //3مثال

2

var point = [
  {
    س: 10،
    ص: 20
  },
  {
    س: 20،
    ص: 30
  },
  {
    س: 30،
    ص: 40
  },
  {
    س: 40،
    ص: 50
  },
  {
    س: 50،
    ص: 60
  }
];
Points.findIndex (وظيفة المطابق (نقطة) {
  نقطة الإرجاع.x % 3 == 0 && point.y % 4 == 0;
}); // 2
Points.findIndex (وظيفة المطابق (نقطة) {
  نقطة الإرجاع.x % 6 == 0 && point.y % 7 == 0;
}); //1

4. تستخدم طريقة التعبئة (

• ) لمثيل المصفوفة قيمة معينة لملء المصفوفة.
• يمكن لطريقة التعبئة أيضًا قبول المعلمتين الثانية والثالثة، والتي يتم استخدامها لتحديد موضع البداية ونهاية التعبئة الموضع

// طريقة التعبئة تملأ المصفوفة بالقيمة المحددة.
فار fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
// يمكن أن تقبل طريقة التعبئة أيضًا المعلمتين الثانية والثالثة، والتي يتم استخدامها لتحديد موضعي البداية والنهاية للملء.
["أ"، "ب"، "ج"].fill(7, 1, 2);
// ['أ'، 7، 'ج']
// لاحظ أنه إذا كان النوع المعبأ كائنًا، فإن الكائن المعين هو نفس عنوان الذاكرة، وليس كائن النسخة العميقة.
دع arr = صفيف جديد (3).ملء ({
  الاسم: "مايك"
});
arr[0].name = "بن";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

يمكن لكلتا الطريقتين العثور على NaN في المصفوفة، لكن لا يمكن لـ IndexOf() في ES5 العثور على NaN 5.

إدخالات الأساليب () والمفاتيح () والقيم () لمثيل المصفوفة

لاجتياز المصفوفة، وكلها تُرجع كائن اجتياز. يمكن استخدام حلقة for...of لاجتياز المصفوفة

.

• المفاتيح () هي زوج من أسماء المفاتيح. اجتياز

• القيم () هو اجتياز القيم الرئيسية.

• الإدخالات () هي اجتياز أزواج القيمة الرئيسية

لـ (دع فهرس ["a"، "b").keys ()) {
  console.log(index);
}
// 0 1
for (اسمح لعنصر ["a"، "b").values()) {
  console.log(elem);
}
//أب
لـ (دع [الفهرس، العنصر] من ["a"، "b").entries()) {
  console.log(index, elem);
}
// 0 "أ"
// 1 "ب"
فار أ = [1، 2، 3]؛
[...أ. القيم ()]؛ // [1،2،3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ]

6. تُرجع الطريقة include قيمة

منطقية للإشارة إلى ما إذا كان المصفوفة تحتوي على قيمة معينة

[1، 2، 3].includes(2) // true
[(1، 2، 3)].includes(4) // false

يمكن أيضًا أن تتلقى معلمة ثانية تشير إلى موضع بداية البحث، الافتراضي هو 0. إذا كانت المعلمة الثانية رقمًا سالبًا، فإنها تشير إلى موضع الرقم. إذا كانت المعلمة الثانية أكبر من طول المصفوفة، فإن طريقة التضمين تبدأ من منخفض 0

للتعويض عن أوجه القصور في طريقة فهرس التي ليست دلالية بما فيه الكفاية وتخطئ في تقدير NaN

[1, 23, NaN].includes(NaN)

طريقة متوافقة

حقيقية

تحتوي الوظيفة على = ( () => {
    Array.prototype.includes
    	?(arr , val) => arr.includes(val)
    	:(arr , val) => arr.some(item => return item === val)
})()

7. Flat() لمثيلات المصفوفة،

• يتم استخدام flatMap() flat() "لتسوية" المصفوفات المتداخلة في مصفوفات أحادية البعد. تقوم هذه الطريقة بإرجاع مصفوفة جديدة وليس لها أي تأثير على البيانات الأصلية. تمثل المعلمة التي تم تمريرها عدد الطبقات التي سيتم تسطيحها، والقيمة الافتراضية هي أن طبقة واحدة
• يمكن أن تقوم flatMap() بتوسيع طبقة واحدة فقط من المصفوفة. تنفذ هذه الطريقة دالة على كل عضو في المصفوفة الأصلية (أي ما يعادل تنفيذ Array.prototype.map())، ثم تنفذ طريقة flat() على المصفوفة المكونة من القيمة المرجعة. تقوم هذه الطريقة بإرجاع مصفوفة جديدة دون تغيير المصفوفة الأصلية

// flat()
  [1، 2، [3، [4، 5]]].flat()
  // [1، 2، 3، [4، 5]]
  [1، 2، [3، [4، 5]]].مسطح(2)
  // [1، 2، 3، 4، 5]
  // خريطة مسطحة ()
  [2, 3, 4].flatMap((x) => [x, x * 2])
  // بعد تنفيذ الخريطة، فهي [[2، 4]، [3، 6]، [4، 8]]
  // ثم قم بتنفيذ الطريقة المسطحة () للحصول على النتيجة التالية // [2, 4, 3, 6, 4, 8]
  // يمكن لـ flatMap () توسيع مستوى واحد فقط من المصفوفة.
  // يعادل .flat()
  [1، 2، 3، 4].flatMap(x => [
    [×*2]
  ])
  // بعد تنفيذ الخريطة، تكون [[[2]]، [[4]]، [[6]]، [[8]]]
  // ثم قم بتنفيذ طريقة flat() للحصول على النتائج التالية // [[2]، [4]، [6]، [8]] انسخ الكود

8. سيقوم Copywithin () لمثيل المصفوفة

بنسخ العضو في الموضع المحدد داخل المصفوفة الحالية. انسخ إلى مواضع أخرى، ثم ارجع إلى المصفوفة الحالية، والتي ستغير المصفوفة الأصلية

لتلقي ثلاث معلمات:

1. الهدف (مطلوب) يبدأ في استبدال البيانات من هذا الموضع

2. ابدأ (اختياري) ابدأ قراءة البيانات من هذا الموضع، الافتراضي هو 0، إذا كان رقمًا سالبًا، فهذا يعني

التوقف عن قراءة البيانات قبل الوصول إلى الرقم 3 والانتهاء (اختياري). إذا كان رقمًا سالبًا، فهذا يعني أن

جميع المعلمات الثلاثة يجب أن تكون أرقامًا، وإذا لم يكن الأمر كذلك، فسيتم تحويلها تلقائيًا إلى قيم رقمية

[1,2,3,4,5].copywithin(0,3); /[4,5,3 ,4,5] يعني أنه يتم نسخ الأعضاء من المنخفض 3 إلى النهاية (4,5) إلى الموضع الذي يبدأ من المنخفض 0، ويتم استبدال الأصلين 1 و2.