آرایه ها در JavaScript
شیء آرایه یک نوع خاص از متغیر هاست که می تواند چندین داده را در قالب یک نام در خود ذخیره کند.
ایجاد و مقداردهی یک آرایه:
مثال (آرایه ها در JavaScript)
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
مثال های بیشتری را در انتهای این مطلب خواهید دید.
آرایه چیست؟
آرایه یک متغیر خاص است که می توانید بیشتر از یک مقدار را در یک زمان در آن ذخیره نمایید.
اگر لیستی از آیتم ها داشته باشید (برای مثال، یک لیست از نام ماشین ها)، و بخواهید هر آیتم را در یک متغیر تنها ذخیره نمایید، می توان مانند زیر عمل نمود:
var car2="Volvo";
var car3="BMW";
حالا:
- اگر لیست شما بیشتر از 3 آیتم باشد مثلاً 300تا چه کار می کنید.
- اگر در این لیست به دنبال یک ماشین خاص باشید چه کار می کنید.
در اینجا بهترین راه حل استفاده از آرایه ها است.
یک آرایه می تواند مقادیر متغیرها را تحت یک نام برای شما نگه دارد. و شما از طریق ایندکس آرایه می توانید به مقادیر دسترسی داشته باشید.
هر آیتم در آرایه ایندکس منحصر به فردی برای خود دارد که به راحتی از طریق ایندکس می توانید به مقادیر دسترسی پیدا کنید.
ایجاد آرایه
آرایه ها به سه روش ایجاد می شوند:
1: با قاعده:
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: خلاصه شده:
3: تحت الفظی:
در کدهای بالا، یک شیء آرایه با نام myCars ایجاد می شود.
دسترسی به عناصر آرایه
هر آیتم در آرایه ایندکس منحصر به فردی برای خود دارد که به راحتی از طریق ایندکس می توانید به مقادیر دسترسی پیدا کنید.
کد زیر، مقدار اولین عنصر آرایه myCars را در متغیر name قرار می دهد:
کد زیر، اولین عنصر آرایه myCars را تعریف می کند:
توجه: ایندکس آرایه از صفر شروع می شود، یعنی اولین آیتم [0] است، دومین آیتم [1] و ...
ذخیره اشیاء مختلف در یک آرایه
تمام متغیرها، عناصر آرایه و توابع در JavaScript، شیء محسوب می شوند.
شما می توانید، انواع مختلف متغیرها، خروجی یک تابع و یا یک آرایه را در آرایه ای دیگر ذخیره نمایید:
myArray[1]=myFunction;
myArray[2]=myCars;
خصوصیتlength و متد indexof
در مثال زیر، خصوصیت length، تعداد عناصر آرایه myCars را در متغیر x قرار می دهد و تابع ()indexof، ایندکس عنصر مشخص شده را بر می گرداند:
var y=myCars.indexOf("Volvo") // the index position of "Volvo"
ایجاد متدهای جدید
prototype، یک سازنده (constructor) عمومی در JavaScript است. از این طریق می توان، برای هر شیءای در JavaScript یک خصوصیت یا متد جدید ساخت.
مثال: ساخت یک متد جدید برای آرایه ها
{
for (i=0;i<this.length;i++)
{this[i]=this[i].toUpperCase();}
}
در مثال بالا، یک متد جدید با نام ucase ساخته شده است که مقادیر عناصر آرایه را به حروف بزرگ تبدیل می کند.
مثال - خودتان امتحان کنید
تمام عناصر آرایه در یک متغیر - join()
اضافه کردن یک عنصر جدید به انتهای آرایه - push()
معکوس کردن ترتیب عناصر آرایه - reverse()
حذف اولین عنصر آرایه - shift()
برش و انتخاب یک قسمت از آرایه - slice()
مرتب کردن آرایه بر اساس حروف الفبا و صعودی - sort()
مرتب کردن آریه عددی و صعودی - sort()
مرتب کردن آرایه عددی و نزولی - sort()
اضافه کردن یک عنصر جدید در مکان 2 یک آرایه - splice()
تبدیل یک آرایه به یک رشته - toString()
اضافه کردن یک عنصر جدید به ابتدای یک آرایه - unshift()
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 29550
دیدگاه‌ها
با سلام و عرض ادب
fruits.splice(2,0,"Lemon","Kiwi");
در این متد اون 2تا عدد اول که وارد میکنیم به چه منظور هستن؟
با تشکر از سایت بسیار خوبتون
سلام.
عدداول مشخص می کنه که از کدوم عضو آرایه به بعد، باید آیتم ها اضافه بشن. و یا اینکه حذف عضوها، از اون عنصر به بعد، باید باشه.
عدد دوم، تعداد آیتم هایی هست که میخایم از اون عضو به بعد حذف کنیم. و اگه اون رو 0 قرار بدیم، یعنی هیچ عضوی رو حذف نمیخایم بکنیم، بلکه میخایم اضافه کنیم.
با سلام و خسته نباشید
در متد sort این خط رو متوجه نشدم
points.sort(function(a,b){return b-a});
البته فهمیدم که منظورش اینه به صورت نزولی ترتیب بندی کنه
ولی کاربرد اون فانکشن و ریترن رو نفهمیدم
سلام.
تابع sort به طور پیش فرض مقادیر رو بر اساس حروف الفبا مرتب می کنه. یعنی بر اساس حرف اول اون کلماتی که بهش داده شده تا مرتب کنه. در رشته ها این کار به درستی انجام میشه، اما اگه با اعداد سرو کار داشتیم چی؟ نمیشه! برای انجام این کار، یعنی برای مقایسه ی اعداد و مرتب کردن اونها، از یک تابع به نام تابع مقایسه(compare function) استفاده می کنیم.
به تابعی که بین متد sort قرار می گیره، تابع مقایسه گفته میشه. که یک تابع اختیاری هست. این تابع باید اعداد منفی
یا مثبت یا 0 رو برگردونه. اگه بخایم بدونیم که یک عدد از دیگری بزرگتر هست یا نه، اول باید عدد اول رو از عدد دوم تفریق کنیم. یعنی a (عدد اول) رو منهای b کنیم. اگه حاصل مثبت بود که معلومه a از b بزرگتره و اگه منفی بود، a از b کوچیکتره.
بنابراین با استفاده از این تابع، ما به تابع sort می فهمونیم که ما میخایم از اعداد استفاده کنیم و اونها رو مقایسه کنیم.
حالا اگه در این تابع بنویسم a-b اون وقت اعداد رو به صورت صعودی مرتب می کنه. و اگه بنویسیم b-a اعداد رو به صورت نزولی مرتب می کنه.
با سلام.تشکر بابت مطالب ارزنده ای که منتشر میکنید.
سوالی داشتم..اگر بخواهیم یک جدول که در html ساخته ایم و ستونهایش را هم تعریف کرده ایم با جاوا اسکریپت و استفاده از آرایه سطرهایش را مقدار دهی کنیم،چه کدی استفاده کنیم تا اطلاعات واقعا در سطرها رفته و به صورت یک خط نوشته در زیر جدول ظاهر نشوند؟با تشکر
سلام بخواهیم بگیم ارایه 0 تا مثلا 10 چاپ کن باید تک تک بنویسیم
راهی نداره بگیم ارایه 0 تا 10 چاپ کن
n[1] until n[20]
فرض کنید یک آرایه به نام a داریم که 10 تا عنصر دارد و می خواهیم این 10 عنصر را چاپ کنیم. به راحتی از حلقه ی for استفاده می کنیم: codepen.io/sbaloot/pen/MwqqBm
کد مورد نظر در یک ادیتور آنلاین ایجاد شده است پس به لینک داده شده مراجعه کنید.
یا عرض معذرت اگر بخوایم مثلا یک خط فاصله بینشان بندازیم کجا باید "-" را بذاریم چون امتحان کردم نشد
document.write( a+""[n]);
خواهش می کنم .
لینک کد جدید: codepen.io/sbaloot/pen/MwqqBm
x[i].in nerHTML = "Hello World!";
x[i].style.color="blue";
}
}
</script>
</body>
</html>
خدا قوت وخسته نباشید
در خط 31
x.style.color="blue";
من متوجه این ترتیب واستفاده از خصوصیات نشدم یعنی به قسمت استایل وبعدرنگ مراجعه میکنه حتی اگر css برای آرایه تعریف نکرده باشید؟
اگر ممکنه بگید این مبحث در کدام قسمت جاوا توضیح داده میشه
ممنون
در مدل DOM می توان به شیء style به وسیله ی دستورات جاوااسکریپت دسترسی پیدا کرد. به عنوان مثال :
ابتدا با دستور زیر به یک عنصر div با آی دی "element" دسترسی پیدا می کنیم و آن را در متغیر x ذخیره می کنیم:
x = document.getEle mentById("eleme nt")
حالا می خواهیم با استفاده از جاوااسکریپت به شیء style از این عنصر دسترسی پیدا کنیم و رنگ متن آن را به blue تغییر دهیم :
x.style.color="blue"
برای اطلاعات بیشتر می توانید به لینک زیر رجوع کنید:
www.w3schools.com/jsref/dom_obj_style.asp
ببینید اگر بخام به تمامی عناصر آرایه دسترسی پیدا کنم تکلیف چیست؟
(x.item(n که فقط یک مقدار را برمی گردونه که ما بهش می دهیم.
مثلاً میخام یک خصوصیتی را به تمام عناصر آرایه اختصاص بدهم آیا باید دونه به دونه عناصر آرایه را انتخاب کنم و بهشان تک تک مقدار دهم؟!
به مثالی که قبلاً با همدیگر بحث کرده ایم توجه کنید:
var elements = document.getElementsByClassName('ftarget');
for(var i = 0, len = elements.length ; i < len; i++) {
elements[i].onclick = function () {
document.getElementById("target").style.display="block";
trackOutboundLi nk(this.href);
return false;
}
}
باید به ازای تک تک عناصر با استفاده از حلقه ی for این خصوصیت را انتساب بدهید.
ولی ببخشید؛یک چند تا ابهام دارم:
شما یک حلقه تعریف کردید و شرط حلقه این است این حلقه به اندازه طول آرایه اجرا شود.
اگر طول حلقه مثلاً5باشد شما فقط 5بار این دستور را تکرار کردید.نه برای تمام عناصر آرایه
در مورد دستور (trackOutboundLink(this.href
return false;چیزی متوجه نشدم
با تشکر از زحمات شما
وقتی در خط اول گفته ایم که
var elements = document.getElementsByCl assName('ftarget');
با این دستور مشخص می کنیم که طول آرایه دقیقاً به تعداد عناصری باشد که getElementsByCl assName بر می گرداند و نه عدد 5 یا هر عدد دیگری که به صورت استاتیک خودمان تعریف کرده باشیم.
گفتیم که خروجی getElementsByCl assName یک آرایه از عناصر است.
فرض کنید تعداد 8 عنصر در صفحه html داریم که داری کلاس ftarget هستند. دستور فوق تمام 8 عنصر را به صورت یکی یکی در آرایه ای ذخیره می کند و آن آرایه را بر می گرداند، در این حالت طول آرایه ی ما 8 و همان تعداد عناصر ماست.
در مورد trackOutboundLi nk اشاره می کنیم که به این دلیل است که می خواهیم دیگر href مربوط به لینک انجام نشود و دستور جاوا اسکریپتمان اجرا شود. به طور پیش فرض با کلیک روی لینکی که دارای href است صفحه ی مربوط به آن لینک اجرا می شود و اجرای کد جاوا اسکریپت مشخص نمی شود. با این کار کد جاوا اسکریپت مربوط به رویداد کلیک این لینک اجرا می شود و لینک دنبال نمی شود.
اصن این موضوع و مثال را فراموش کنید.
---------------------------------------------
با یک مثال بیان می کنم:ما یک لیست داریم که شامل 5تا li هست و هر li کلاس مثلا target را دارد
می خواهیم رنگ این 5 تا li را با استفاده از خاصیت class در جاوا اسکریپت تغییر دهیم
چه کار باید بکنیم؟!
<!DOCTYPE html>
<html>
<body>
<ul>
<li class="example" > ffsffdfsfs</li>
<li class="example" > fdsb</li>
<li class="example" > gwewt</li>
<li class="example" > twetert</li>
</ul>
<p>Click the button to change the text and color of li elements with class="example" (index 0).</p>
<button onclick="myFunc tion()">Try it</button>
<p><strong>Note:</strong> The getElementsByCl assName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getEle mentsByClassNam e("example");
for(var i=0 ; i<x.length; i++)
{
x[i].in nerHTML = "Hello World!";
x[i].style.color="blue";
}
}
</script>
</body>
</html>
داداش خیلی آقایی ؛تو زحمت افتادی ؛جبران میکنم :)
همیشه من این مثال را میزنم ؛آرایه ها مانند ظرف یخ هستند(البته از اون ظرف های یخ قدیمی)که تمامشان به یک اندازه و یک شکل و یک خصوصیت هستند
اگر شما بخواهید بیشتر از یک یخ داشته باشد درست کردن تمام یخ ها در ظرف کوچک و جداجدا کار غیرممکن است
ولی اگر شما از یک ظرف یخ استفاده کنید به راحتی به میزان لازم از همان یخ وبه یک شکل و اندازه دارید