في تطورنا اليومي ، يعد تشغيل المصفوفات وتحويلها عملية شائعة جدًا. لنلقي نظرة على مثال:
نسخة الكود كما يلي:
var descolors = [] ،
srccolors = [
{r: 255 ، g: 255 ، b: 255} ، // white
{R: 128 ، G: 128 ، B: 128} ، // Gray
{r: 0 ، g: 0 ، b: 0} // Black
] ؛
لـ (var i = 0 ، ilen = srccolors.length ؛ i <ilen ؛ i ++) {
var color = srccolors [i] ،
Format = function (color) {
إرجاع Math.round (color / 2) ؛
} ؛
descolors.push ({
R: Format (color.r) ،
G: Format (color.g) ،
ب: تنسيق (color.b)
}) ؛
}
// المخرجات:
// [
// {r: 128 ، g: 128 ، b: 128} ،
// {r: 64 ، g: 64 ، b: 64} ،
// {r: 0 ، g: 0 ، b: 0}
//] ؛
console.log (descolors) ؛
من المثال أعلاه ، يمكننا أن نرى أن جميع العمليات لها معدل تكرار مرتفع نسبيًا. كيفية تحسينه؟ لحسن الحظ ، توفر لنا ECMASCRIPT 5 طريقة خريطة ، يمكننا استخدامها لتحسين المثال أعلاه:
نسخة الكود كما يلي:
var srccolors = [
{r: 255 ، g: 255 ، b: 255} ، // white
{R: 128 ، G: 128 ، B: 128} ، // Gray
{r: 0 ، g: 0 ، b: 0} // Black
]
descolors = srccolors.map (function (val) {
var format = function (color) {
إرجاع Math.round (color/2) ؛
} ؛
يعود {
R: Format (Val.R) ،
G: Format (Val.G) ،
ب: التنسيق (Val.B)
}
}) ؛
// المخرجات:
// [
// {r: 128 ، g: 128 ، b: 128} ،
// {r: 64 ، g: 64 ، b: 64} ،
// {r: 0 ، g: 0 ، b: 0}
//] ؛
console.log (descolors) ؛
من المثال أعلاه ، يمكننا أن نرى أننا استخدمنا MAP لاستبدال جزء الحلقة ، بحيث نحتاج فقط إلى الاهتمام بمنطق تنفيذ كل عنصر نفسه. للحصول على تفاصيل حول طريقة الخريطة ، يرجى النقر هنا.
1. خريطة التعريف الأساسي:
Array.Map (رد الاتصال [، thisarg]) ؛
تستدعي طريقة الخريطة وظيفة رد الاتصال مرة واحدة بالترتيب لكل عنصر في الصفيف الأصلي. رد الاتصال يتم الجمع بين قيم الإرجاع بعد كل تنفيذ لتشكيل صفيف جديد. سيتم استدعاء وظيفة رد الاتصال فقط على الفهارس ذات القيمة ؛ لن يتم استدعاء الفهارس التي لم يتم تعيين قيم أو حذفها بحذف.
سيتم تمرير وظيفة رد الاتصال تلقائيًا في ثلاث معلمات: عنصر الصفيف ، فهرس العناصر ، والمصفوفة الأصلية نفسها.
إذا كانت معلمة ThisArg لها قيمة ، فسيشير هذا إلى هذا الكائن على معلمة Thisarg في كل مرة يتم فيها استدعاء وظيفة رد الاتصال. إذا تم حذف المعلمة thisarg ، أو تم تعيين القيمة إلى NULL أو غير محددة ، فإن هذا يشير إلى الكائن العالمي.
لا تقوم MAP بتعديل الصفيف الأصلي نفسه الذي يطلق عليه (بالطبع ، يمكنه تغيير الصفيف الأصلي عند تنفيذ رد الاتصال).
عندما تقوم صفيف بتشغيل طريقة خريطة ، يتم تحديد طول الصفيف قبل استدعاء طريقة رد الاتصال الأول. أثناء التشغيل الكامل لطريقة الخريطة ، بغض النظر عما إذا كانت العمليات في وظيفة رد الاتصال تضيف أو حذف عناصر إلى الصفيف الأصلي. لن تعرف طريقة الخريطة. إذا زاد عنصر الصفيف ، فلن يتم اجتياز العنصر المضافة حديثًا بواسطة الخريطة. إذا انخفض عنصر الصفيف ، فستعتقد طريقة الخريطة أيضًا أن طول الصفيف الأصلي لم يتغير ، مما يؤدي إلى الوصول إلى الصفيف إلى الخارج. إذا تم تغيير العناصر الموجودة في الصفيف أو حذفها ، فإن القيمة التي يتم تمريرها إلى رد الاتصال هي قيمة طريقة الخريطة التي تعبر عن لحظها.
2. مثيل الخريطة:
نسخة الكود كما يلي:
// مثال 1: طريقة خريطة الاتصال على السلسلة
var result = array.prototype.map.call ("Hello World" ، Function (x ، index ، arr) {
// String {0: "H" ، 1: "E" ، 2: "L" ، 3: "L" ، 4: "O" ، 5: "" ، 6: "W" ، 7: "O" ، 8: "R" ، 9: "l" ، 10:
console.log (arr) ؛
إرجاع x.charcodeat (0) ؛
}) ؛
// المخرجات: [72 ، 101 ، 108 ، 108 ، 111 ، 32 ، 119 ، 111 ، 114 ، 108 ، 100]
console.log (نتيجة) ؛
يوضح المثال أعلاه استخدام طريقة الخريطة على سلسلة للحصول على مجموعة من رموز ASCII المقابلة لكل حرف في سلسلة. يرجى الانتباه إلى نتائج طباعة Console.log (ARR) المطبوعة.
نسخة الكود كما يلي:
// مثال 2: ما هي نتيجة العملية التالية؟
var result = ["1" ، "2" ، "3"]. الخريطة (parseint) ؛
// المخرجات: [1 ، نان ، نان]
console.log (نتيجة) ؛
ربما سيكون لديك سؤال ، لماذا لا [1،2،3]؟ نحن نعلم أن طريقة Parseint يمكن أن تتلقى معلمتين. المعلمة الأولى هي القيمة التي يجب تحويلها ، والمعلمة الثانية هي رقم الثنائي. إذا كنت لا تفهم ، فيمكنك النقر هنا. عندما نستخدم طريقة الخريطة ، تتلقى وظيفة رد الاتصال ثلاث معلمات ، في حين أن Parseint لا يمكن إلا أن يتلقى معلمتين على الأكثر ، بحيث يتم تجاهل المعلمة الثالثة مباشرة. في الوقت نفسه ، يستخدم Parseint قيمة الفهرس التي تم تمريرها كرقم ثنائي ، وبالتالي إرجاع NAN. انظر إلى نتائج الإخراج التالية:
نسخة الكود كما يلي:
// ouputs: 1
console.log (parseint ("1" ، 0)) ؛
// ouputs: 1
console.log (parseint ("1" ، غير محدد)) ؛
// ouputs: نان
console.log (parseint ("2" ، 1)) ؛
// ouputs: نان
console.log (parseint ("3" ، 2)) ؛
من السهل فهم الاثنان الأخيران ، ولكن لماذا العائد الأولان 1؟ لشرح هذه المشكلة ، دعونا نلقي نظرة على الوصف الرسمي:
إذا كان Radix غير محدد أو 0 (أو غائب) ، فإن JavaScript يفترض ما يلي:
أ) إذا بدأت سلسلة الإدخال بـ "0x" أو "0x" ، فإن Radix هو 16 (سداسي عشري) ويتم تحليل الباقي من السلسلة.
ب) إذا بدأت سلسلة الإدخال بـ "0 ″ ، فإن Radix هي ثمانية (أوكتال) أو 10 (عشرية). بالضبط ما الذي يتم اختيار Radix يعتمد على التنفيذ. مواصفات ECMASCRIPT 5 يتم استخدامها 10 (عشري) ، ولكن لا تدعم جميع المتصفحات هذا حتى الآن. لهذا السبب تحدد دائمًا Radix عند استخدام parseint.
ج) إذا بدأت سلسلة الإدخال بأي قيمة أخرى ، فإن Radix هو 10 (عشري).
في النقطة الثالثة ، عندما تكون السلسلة قيمة أخرى ، فإن الافتراضي هو 10.
فكيف نقوم بتعديله لجعل الإخراج مثال أعلاه بشكل طبيعي؟ انظر المثال التالي:
نسخة الكود كما يلي:
var result = ["1" ، "2" ، "3"]. خريطة (دالة (val) {
إرجاع Parseint (Val ، 10) ؛
}) ؛
// المخرجات: [1 ، 2 ، 3]
console.log (نتيجة) ؛
3. توافق طريقة الخريطة:
لا يتم دعم طريقة الخريطة في IE8 وتحت المتصفحات. إذا كنت تريد أن تكون متوافقًا مع الإصدارات القديمة من المتصفحات ، فيمكنك:
أ) لا تستخدم map .B) استخدم شيئًا مثل ES5-SHIM لجعل map دعم IE الأقدم .C) استخدم طريقة _.map في السطحية أو LODASH للحصول على وظيفة الأداة المساعدة المكافئة.
ما سبق هو فهم طريقة الخريطة. آمل أن يكون من المفيد للمبتدئين. إذا كان هناك أي نقاط غير لائقة في المقالة ، آمل أن تتمكن من تصحيحها!