ملخص ومشاركة وظائف تشغيل مصفوفة JavaScript

Array Advanced

المفاهيم الأساسية للمصفوفات وبعض وظائف تشغيل عناصر المصفوفة البسيطة. في الواقع، توفر المصفوفات العديد من الوظائف.

push و pop و shift و unshift هي وظائف تعمل على طرفي المصفوفة وقد تم ذكرها أعلاه ولن يتم تكرارها في هذه المقالة.

حذف العنصر (طريقة الكائن)

لفترة وجيزة في المقالة السابقة. المصفوفة هي كائن خاص، لذا يمكننا محاولة استخدام طريقة حذف سمة الكائن: delete .

على سبيل المثال:

console.log

(arr);

انتبه إلى الموضع الأصفر في الصورة، على الرغم من حذف العنصر، إلا أن طول المصفوفة لا يزال 5 ، وهناك空إضافية في الموضع المحذوف. إذا وصلنا إلى العنصر ذو الفهرس 2 فسنحصل على النتيجة التالية:

سبب هذه الظاهرة هو أن delete obj.key يزيل القيمة المقابلة من خلال key ، أي أن حذف 2 delete arr[2] يحذف زوج القيمة الرئيسية 2:3 undefined المصفوفة .

في المصفوفة، نأمل غالبًا أنه بعد حذف عنصر ما، سيتم ملء موضع العنصر بالعناصر اللاحقة وسيصبح طول المصفوفة أقصر.

في هذا الوقت، نحتاج إلى طريقة splice() .

(

splice() ‎ متعددة الاستخدامات ولا تحذف العناصر فقط. بناء الجملة التالي هو:

arr.splice(start[,deleteCount,e1,e2,...,eN] )

طريقة splice بدءًا من موضع start ، احذف عناصر deleteCount ، ثم أدخل e1,e2,e3 وعناصر أخرى في مكانها.

حذف عنصر

يمكن للمثال التالي حذف عنصر من المصفوفة:

Let arr = [1,2,3,4,5]arr.splice(0,1);// احذف العنصر الأول 1console.log(arr

) يحذف الكود أعلاه 1 في الموضع الأول في المصفوفة، وتكون نتائج التنفيذ كما يلي:

حذف عناصر متعددة

هو نفس حذف عنصر واحد، ما عليك سوى تغيير المعلمة الثانية إلى الرقم المحدد:

Let arr = [1,2,3,4,5];arr. ;// احذف العناصر الثلاثة الأولى console.log(arr);//[4,5]

نتائج تنفيذ التعليمات البرمجية هي كما يلي:

قم باقتطاع المصفوفة.

إذا start بتوفير معلمة واحدة فقط، فسيتم حذف جميع العناصر بعد موضع start المصفوفة. على سبيل المثال:

Let arr = [1,2,3,4,5]arr.splice(2); //حذف Console.log(arr);//[1,2] 
نتائج تنفيذ التعليمات البرمجية
 من الحرف 2 وجميع العناصر اللاحقة

استبدال العنصر

إذا قدمنا ​​أكثر من معلمتين، فيمكننا استبدال عناصر المصفوفة، على سبيل المثال:

Let arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]

نتائج تنفيذ التعليمات البرمجية هي كما يلي:

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

إدراج العنصر

إذا قمنا بتغيير المعلمة الثانية (عدد عمليات الحذف) إلى 0 ، فيمكننا فقط إدراج العناصر دون حذف العناصر، على سبيل المثال:

Let arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]

قيمة الإرجاع

ستُرجع الدالة splice() مصفوفة العناصر المحذوفة، على سبيل المثال:

Let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]

نتائج تنفيذ الكود:

الفهرس السالب

يمكننا استخدام الأرقام السالبة للإشارة إلى الموضع الذي تبدأ فيه عناصر التشغيل، على سبيل المثال:

Let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']

نتائج تنفيذ التعليمات البرمجية هي كما يلي:

الشريحة ()

slice() مصفوفة في نطاق محدد، وتكون الصيغة كما يلي:

arr.slice([start],[end])

مصفوفة جديدة تبدأ من start وتنتهي عند end , ولكن لا يشمل end .

مثال:

Let arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3) )//[2,3]

نتيجة تنفيذ الكود:

يمكن أن تستخدم slice() أيضًا اشتراكات سلبية:

Let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr . شريحة(-5,-1))//[1,2,3,4]

نتائج تنفيذ التعليمات البرمجية هي كما يلي:

إذا قمت بتوفير معلمة واحدة فقط للطريقة slice() ، فسيتم اقتطاعها إلى نهاية المصفوفة تمامًا مثل splice() .

concat()

يمكن لوظيفة concat() تسلسل صفائف متعددة أو أنواع أخرى من القيم في صفيف طويل، ويكون بناء الجملة كما يلي:

arr.concat(e1, e2, e3)

سيُرجع الكود أعلاه مصفوفة جديدة. يتم ربط المصفوفة الجديدة بواسطة arr ويتم تشكيلها بواسطة e1 و e2 و e3 .

مثال:

Let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))

نتيجة تنفيذ التعليمات البرمجية هي كما يلي:

الكائنات العادية، حتى لو كانت تبدو بنفس شكل الكائنات، يتم إدراجها في المصفوفة ككل، على سبيل المثال:

Let arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj))

نتائج تنفيذ التعليمات البرمجية:

ومع ذلك، إذا كان الكائن يحتوي على خاصية Symbol.isConcatSpreadable ، فسيتم التعامل معه كمصفوفة:

Let arr = [1,2]let obj = {0:'x',
           1:'ص'،
           [Symbol.isConcatSpreadable]: صحيح،
           length:2 }console.log(arr.concat(obj))

نتائج تنفيذ التعليمات البرمجية:

forEach()

المصفوفة بأكملها ويوفر دالة تشغيل لكل عنصر من عناصر المصفوفة:

Let arr = [1,2]arr.forEach((itm,idx,array)=>{.
    ...})

مثال تطبيقي:

Let arr = [1,2,3,4,5]arr.forEach((itm)=>{
    console.log(itm)})

نتائج تنفيذ التعليمات البرمجية:

دع arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
    console.log(`arr[${idx}] في [${array}] هو ${itm}`)})

نتائج تنفيذ التعليمات البرمجية:

IndexOf وlastIndexOf وincludes

مع السلاسل النصية. يمكن استخدام indexOf و lastIndexOf و includes مع رمز العنصر المحدد في مصفوفة الاستعلام:

1. arr.indexOf(itm,start) : ابحث itm بدءًا من موضع start . إذا تم العثور عليه، قم بإرجاع الحرف المنخفض، وإلا قم بإرجاع -1 ؛
2. arr.lastIndexOf(itm,start) : ابحث في المصفوفة بأكملها بترتيب عكسي حتى start ، وقم بإرجاع الحرف المنخفض الأول الذي تم العثور عليه (أي آخر عنصر مطابق في المصفوفة). إذا لم يتم العثور عليه، قم بإرجاع -1 ؛
3. arr.includes(itm,start) : ابحث itm من موضع start ، وقم بإرجاع true إذا تم العثور عليه، وإلا فسيتم إرجاع false :

Let

arr = [1,2,3,4,5, 6،"7"، "8"، "9" ,0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console. log(arr.includes(10))//falseconsole.log(arr.includes(9))//false

تستخدم هذه الطرق === عند مقارنة عناصر المصفوفة، لذا فإن false و 0 مختلفان.

التعامل مع NaN

NaN هو رقم خاص، وهناك اختلافات طفيفة بين الثلاثة في التعامل مع NaN :

Let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole. log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1

سبب هذه النتيجة مرتبط بخصائص NaN نفسها، أي أن NaN لا يساوي أي رقم بما في ذلك نفسه.

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

البحث وfindIndex

مصفوفات كائنات أثناء عملية البرمجة، ولا يمكن مقارنة الكائنات مباشرة باستخدام === كيف يمكن العثور على الكائنات التي تستوفي الشروط من المصفوفة؟

في هذا الوقت، تحتاج إلى استخدام طريقتي find و findIndex . بناء الجملة كما يلي:

Let result = arr.find(function(itm,idx,array){
    // عنصر صفيف itm // عنصر idx منخفض // صفيف الصفيف نفسه // تمرير دالة حكم، إذا كانت الدالة ترجع صحيحًا، قم بإرجاع الكائن الحالي itm})

على سبيل المثال، نبحث عن كائنات سمة name تساوي xiaoming :

دع آر =[
    {المعرف: 1، الاسم: 'شياومينغ'}،
    {المعرف: 2، الاسم: 'شياوهونغ'}،
    {المعرف:3، الاسم: 'xiaojunn'}،]let xiaoming = arr.find(function(itm,idx,array){
    if(itm.name == 'xiaoming')return true;})console.log(xiaoming)

نتيجة تنفيذ التعليمات البرمجية:

إذا لم يكن هناك كائن يستوفي الشروط، فسيتم إرجاع undefined .

يمكن أيضًا تبسيط الكود أعلاه إلى:

Let xiaoming = arr.find((itm)=> itm.name == 'xiaoming').

تأثير التنفيذ هو نفسه تمامًا.

الغرض من arr.findIndex(func) هو تقريبًا نفس الغرض من arr.find(func) والفرق الوحيد هو أن arr.findIndex يُرجع الحرف المنخفض للكائن المؤهل بدلاً من الكائن نفسه، وإذا لم يتم العثور عليه، فإنه يُرجعه -1 .

لمرشح

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

Let results = arr.filter(function(. إيتم، إدكس، صفيف) {
    // نفس استخدام البحث، ولكنه سيعيد مصفوفة من الكائنات التي تلبي المتطلبات // إذا لم يتم العثور عليها، فسيتم إرجاع مصفوفة فارغة})

على سبيل المثال:

Let arr =[
    {المعرف: 1، الاسم: 'شياومينغ'}،
    {المعرف: 2، الاسم: 'شياوهونغ'}،
    {المعرف:3، الاسم: 'xiaojunn'}،]let res = arr.filter(function(itm,idx,array){
    if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res)

نتيجة تنفيذ التعليمات البرمجية:

الخريطة

arr.map استدعاء دالة على كل كائن في المصفوفة ثم إرجاع المصفوفة المعالجة. وهذه إحدى أكثر طرق المصفوفات فائدة وأهمية.

بناء الجملة:

Let arrNew = arr.map(function(itm,idx,array){
    // إرجاع نتيجة جديدة})

على سبيل المثال، قم بإرجاع مصفوفة الطول المقابلة لمصفوفة السلسلة:

Let arr = ['I','am','a','student']let arrNew = arr.map((itm)

نتيجة تنفيذ التعليمات البرمجية

itm.lengthconsole.log(arrNew)//[1,2,1,7]

يقوم الأمرsort

arr.sort بفرز المصفوفة في مكانها وإرجاع المصفوفة التي تم فرزها، ومع ذلك، بما أن المصفوفة الأصلية قد تم تغييرها، فإن القيمة المرجعة لا معنى لها في الواقع.

ما يسمى بالفرز الموضعي يعني الفرز داخل مساحة المصفوفة الأصلية بدلاً من إنشاء مصفوفة جديدة،

Let arr = ['a','c','b']arr.sort()console.log(arr)

تنفيذ التعليمات البرمجية نتيجة:

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

للمصفوفات الرقمية

Let arr = [1,3,2] آر.فرز(وظيفة(أ,ب){
    إذا (أ > ب) إرجاع 1؛
    إذا (أ < ب) العودة -1؛
    إرجاع 0؛})

نتيجة تنفيذ التعليمات البرمجية:

تستخدم وظيفة sort خوارزمية الفرز السريع داخليًا، أو قد تكون خوارزمية timsort ، لكننا لا نحتاج إلى الاهتمام بها، نحتاج فقط إلى الاهتمام بوظيفة المقارنة.

يمكن أن تقوم دالة المقارنة بإرجاع أي قيمة عددية، الرقم الموجب يعني > ، والرقم السالب يعني < ، و 0 يعني يساوي، حتى نتمكن من تبسيط طريقة المقارنة العددية:

Let arr = [1,3,2]arr.sort(( a,b)=> a - b)

إذا كنت تريد الفرز بترتيب عكسي، فما عليك سوى تبديل موضعي a و b :

Let arr = [1,3,2]arr.sort((a,b)=> b - أ)

السلاسل

هل

نسيت استخدام طريقة str.localeCompare(str1) لمقارنة السلاسل؟

(ب))

نتيجة تنفيذ التعليمات البرمجية:

عكس

arr.reverse للمصفوفات العكسية

Let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]

ليس هناك ما يمكن قوله حول هذا الأمر.

str.split() و arr.join()

هل تتذكر وظيفة تقسيم السلسلة؟ يمكن لوظيفة تقسيم السلسلة تقسيم السلسلة إلى مصفوفة أحرف:

Let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']

غير شعبية المعرفة، وظيفة split لها معلمة ثانية، والتي يمكن أن تحدد طول المصفوفة التي تم إنشاؤها

Let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming',' xiaohong' ]

طريقة arr.join() ‎ هي عكس طريقة split ، حيث يمكنها دمج مصفوفة في سلسلة.

على سبيل المثال:

Let arr = [1,2,3]let str = arr.join(';')console.log(str)

نتيجة تنفيذ التعليمات البرمجية:

تقليل، تقليل صحيح،

طريقة arr.reduce تشبه طريقة arr.map ، فكلاهما يمرر طريقة ثم يستدعي هذه الطريقة على عناصر app.map بالتسلسل استدعاء العنصر مستقل، وسيقوم arr.reduce بتمرير نتيجة استدعاء العنصر السابق إلى طريقة معالجة العنصر الحالية.

بناء الجملة:

Let res = arr.reduce(function(prev,itm,idx,array){
    // السابق هي النتيجة التي تم إرجاعها بواسطة استدعاء العنصر السابق // سيكون init بمثابة نتيجة لاستدعاء العنصر السابق عند تنفيذ العنصر الأول}، [init])

تخيل فقط كيفية تنفيذ مجموع عناصر المصفوفة المكونة من أرقام؟ لا توجد طريقة لتنفيذ الخريطة في الوقت الحالي، تحتاج إلى استخدام arr.reduce :

Let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+ itm,0) console.log(res)//15

عملية تنفيذ التعليمات البرمجية هي كما يلي:

arr.reduceRight له نفس غرض arr.reduce ، باستثناء أن التوابع تُستدعى على العناصر من اليمين إلى اليسار.

Array.isArray()

المصفوفة هي حالة خاصة للكائن. لا يمكن لاستخدام typeof التمييز بدقة بين الاثنين:

console.log(typeof {})//objectconsole.log(typeof [])//object

كلاهما كائنات، نحن تحتاج إلى استخدام طريقة Array.isArray() لإصدار أحكام إضافية:

console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))// true

some, every

arr.some(func) يتم استخدام الأساليب arr.some(func) و arr.every(func) للتحقق من الأرقام، وآلية التنفيذ مشابهة لـ map .

البعض

true التي تم تمريرها على كل عنصر من عناصر المصفوفة، إذا أعادت الطريقة true ، فإنها false true على الفور.

every

الطريقة التي تم تمريرها على كل عنصر من عناصر المصفوفة، ويعيد true إذا كانت جميع العناصر ترجع true ، وإلا فإنها تُرجع false .

على سبيل المثال:

Let arr = [1,2,3,4,5]// تحديد ما إذا كانت هناك عناصر أكبر من 2 في المصفوفة console.log(arr.some((itm)=>{
    if(itm > 2)return true;}))//true// تحديد ما إذا كانت جميع العناصر أكبر من 2console.log(arr.every((itm)=>{
    if(itm > 2)return true;}))//false

thisArg

في جميع أساليب المصفوفة، باستثناء sort ، هناك معلمة ثابتة غير شائعة thisArg . بناء الجملة كما يلي:

arr.find(func,thisArg)arr.filter(. func,thisArg)arr.map(func,thisArg)

إذا مررنا في thisArg ، فسيصبح this في func .

هذه المعلمة قليلة الاستخدام في الظروف العادية، ولكن إذا كانت func عبارة عن طريقة عضو (طريقة كائن)، this استخدامها في الطريقة، فسيكون thisArg ذا معنى كبير.

على سبيل المثال:

دع obj = {
    رقم: 3،
    وظيفة (إيتم) {
        console.log(هذا)
        return itm > this.num;// ابحث عن أرقام أكبر من 3}}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log (newArr)

نتيجة تنفيذ التعليمات البرمجية:

هنا يمكننا أن نرى أن this الإخراج في func هو قيمة thisArg التي مررناها.

إذا استخدمنا أساليب عضو الكائن دون تحديد قيمة thisArg ، فسيكون this undefined ، مما يؤدي إلى حدوث خطأ في البرنامج.