كيفية تسطيح مصفوفة في JavaScript

دليل عملي لتسوية مصفوفات JavaScript

ES2019قدم طريقتين جديدتين لنموذج Array:flatوflatMap. كلاهما مفيد للغاية لما نريد القيام به:تتسطح مجموعة.

دعونا نرى كيف يعملون.

لكن أولاً ، كلمة تحذير: فقط Firefox 62+ و Chrome 69+ و Edge 76+ و Safari 12+ يدعمان بالفعل هاتين الطريقتين ، حيث إنهما حديثان إلى حد ما. افحص الدعم المتصفح الحالي، وتذكر أنه يمكنك استخدام ملفاتبابللنقل التعليمات البرمجية الخاصة بك إلى إصدار ES سابق ، إذا كنت بحاجة إلى دعم المتصفحات القديمة.

إذا كنت لا ترغب في التعامل مع Babel ، ولم تكن لديك خطوة بناء بالفعل ، فقد يكون من المنطقي استخدامflatten()وflattenDeep()وflattenDepth()الوظائف التي قدمتها Lodash.

الشيء الرائع في Lodash هو أنك لست بحاجة إلى استيراد المكتبة بأكملها. يمكنك استخدام هذه الوظائف بشكل فردي باستخدام تلك الحزم:

إليك كيفية تسطيح مصفوفة باستخدامlodash.flatten:

const flatten = require('lodash.flatten')

const animals = [‘Dog’, [‘Sheep’, ‘Wolf’]]

flatten(animals) //[‘Dog’, ‘Sheep’, ‘Wolf’]

دعنا نتحدث الآن عن المواطن الأصليflat()وflatMap()طرق JavaScript الآن.

flat()هي طريقة مثيل مصفوفة جديدة يمكنها إنشاء مصفوفة أحادية البعد من مصفوفة متعددة الأبعاد.

مثال:

['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

بشكل افتراضي ، "شقق" فقط حتى مستوى واحد.

يمكنك إضافة معلمة إلىflat()لتعيين عدد المستويات التي تريد تسوية المصفوفة إليها.

اضبطه علىInfinityللحصول على مستويات غير محدودة:

['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]

['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]

['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]

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

إذا لم يكن كذلك ، تحقق منخريطة JavaScript () تعليمي.

flatMap()هي طريقة نموذج أولي جديد للصفيف يجمعflat()معmap(). إنه مفيد عند استدعاء دالة تقوم بإرجاع مصفوفة في ملفmap()رد الاتصال ، لكنك تريد أن تكون المصفوفة الناتجة مسطحة:

['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

المزيد من دروس js: