استفاده از تابع find در جاوااسکریپت
تابع find یکی از ویژگیهایی هست که از زمان ارائهی ES6 وارد جاوااسکریپت شد. این تابع یکی از چندین تابعی محسوب میشود که برای استفاده در آرایهها ارائه شد. همراه ما باشید تا با نحوهی استفاده از این تابع سودمند آشنا بشیم.
تا قبل از ارائهی ES6 برای پیدا کردن یک مورد خاص در یک آرایه، نیاز بود تا با نوشتن یک حلقهی for تک تک خونهها رو بگردیم تا به خونهی مورد نظر برسیم. کد زیر رو نگاه کنید:
var cars = [ { name: "camaro", color: "red" }, { name: "m4", color: "gold" }, { name: "f12", color: "red" }, { name: "p1", color: "yellow" } ]; var target; for (var i = 0; i < cars.length; i++) { if (cars[i].name == "m4") { target = cars[i].color; break; } } console.log(target);
در اینجا آرایهای از ماشینها داریم و میخوایم رنگ ماشین m4 رو به دست بیاریم. برای این کار حلقهای نوشتیم و در هربار تکرار چک کردیم که “اسم این ماشین m4 هست؟”، اگر بود رنگ ماشین رو در متغیر target میریزیم و از حلقه خارج میشیم.
چیزی که اینجا با اون سروکار داریم، مقدار زیادی کد تکراری هست که هردفعه بخوایم چیزی رو پیدا کنیم باید اونها رو بنویسیم. حالا بیاید همین کد رو با استفاده از find بازنویسی کنیم. کد زیر رو نگاه کنید:
var cars = [ { name: "camaro", color: "red" }, { name: "m4", color: "gold" }, { name: "f12", color: "red" }, { name: "p1", color: "yellow" } ]; var target = cars.find(function(car) { return car.name == "m4"; }); console.log(target.color);
نحوهی استفاده از find به صورت زیر هست:
- اسم آرایه رو مینویسیم و تابع find از اون رو فراخوانی میکنیم.
- تابعی رو به عنوان ورودی به find میدیم. این تابع در هربار اجرای حلقه فراخونی میشه و یکی از خونههای آرایه رو بهعنوان ورودی میگیره.
- در هربار اجرای حلقه چک میکنیم که این خونه دارای اسم m4 هست یا نه؛ اگر بود true و اگر نبود false رو برگردون. برای انجام اینکار فقط نوشتیم return car.name == m4. البته میتونستیم از if هم به شکل زیر استفاده کنیم ولی کدی که باید مینوشتیم بیشتر میشد.
var target = cars.find(function(car) { if (car.name == "m4") { return true; } return false; });
- در آخر تابع find به هر خونهای رسید که از اون true دریافت کرد، همون خونه رو بهعنوان خروجی برمیگردونه، که ما در اینجا این خونه رو در متغیر target ذخیره کردیم.
نکتهای که باید در مورد find توجه کنید، performance اون هست. اگرچه این تابع کار رو برای ما خیلی آسون کرد ولی از نظر تعداد دستوراتی که میتونه در واحد زمان انجام بده خیلی عقبتر از حلقهی for قرار داره. این مسئله برای وقتی که کد front-end مینویسید و قراره برای یک نفر روی مرورگرش اجرا بشه هیچ مشکلی ایجاد نمیکنه، ولی اگر میخواید این تابع رو در back-end به کار ببرید حتما حواستون به performance باشه.
مطالب زیر را حتما مطالعه کنید
جاوا اسکریپت چیست؟
متدهایی از جاوا اسکریپت که مهارت های شما را بالا می برد!
5 ترفند css3 با عناصر کاذب before:: و after::
آشنایی با Protobuf
7 ویژگی Sass به همراه کد
شروع کار با Sass
2 Comments
Join the discussion and tell us your opinion.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
سلام میشه بیشتر در مورد performance این حلقه توضیح بدید؟
سلام
تابع find جزو توابعی هست که برای راحتتر شدن کار با آرایهها وارد جاوااسکریپت شدن و بهشون array helper میگن. به طور کلی performance این توابع پایینتر از حلقهی for عادی هست؛ یعنی تعداد دستورهایی که میتونن در واحد زمان انجام بدن کمتره؛ مثلا اگر بخوایم یه حلقهی ۱۰۰۰۰تایی رو بگردیم و به طور عادی ۴میلیثانیه زمان ببره، با find بیشتر طول میکشه مثلا فرض کنید ۴۰میلیثانیه.
سایت jsperf یه سری از این موارد رو بررسی کرده ولی موردی مربوط به find پیدا نکردم. برای همین میتونید از لینک for vs forEach مقایسهی forEach با بقیه حلقهها رو ببینید که احتمالا خیلی شبیه find باشه.
همچنین یه تستی هم خودم برای find آماده کردم که میتونید از github دریافت کنید و نتیجه رو در console مرورگر ببینید ولی زیاد قابل اعتماد نیست و فقط برای دیدن تفاوتشون میشه ازش استفاده کرد. هرجای کد نامفهوم بود پیام بدید که توضیح بیشتری بدم.
موفق باشید