شیء آرایه یک نوع خاص از متغیر هاست که می تواند چندین داده را در قالب یک نام در خود ذخیره کند.
ایجاد و مقداردهی یک آرایه:
مثال (آرایه ها در 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()
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 چاپ کن
n[1] until n[20]
کد مورد نظر در یک ادیتور آنلاین ایجاد شده است پس به لینک داده شده مراجعه کنید.
document.write(a+""[n]);
لینک کد جدید: codepen.io/sbaloot/pen/MwqqBm
x[i].style.color="blue";
}
}
</script>
</body>
</html>
خدا قوت وخسته نباشید
در خط 31
x.style.color="blue";
من متوجه این ترتیب واستفاده از خصوصیات نشدم یعنی به قسمت استایل وبعدرنگ مراجعه میکنه حتی اگر css برای آرایه تعریف نکرده باشید؟
اگر ممکنه بگید این مبحث در کدام قسمت جاوا توضیح داده میشه
ممنون
ابتدا با دستور زیر به یک عنصر div با آی دی "element" دسترسی پیدا می کنیم و آن را در متغیر x ذخیره می کنیم:
x = document.getElementById("element")
حالا می خواهیم با استفاده از جاوااسکریپت به شیء 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.getElementsByClassName('ftarget');
با این دستور مشخص می کنیم که طول آرایه دقیقاً به تعداد عناصری باشد که getElementsByClassName بر می گرداند و نه عدد 5 یا هر عدد دیگری که به صورت استاتیک خودمان تعریف کرده باشیم.
گفتیم که خروجی getElementsByClassName یک آرایه از عناصر است.
فرض کنید تعداد 8 عنصر در صفحه html داریم که داری کلاس ftarget هستند. دستور فوق تمام 8 عنصر را به صورت یکی یکی در آرایه ای ذخیره می کند و آن آرایه را بر می گرداند، در این حالت طول آرایه ی ما 8 و همان تعداد عناصر ماست.
در مورد trackOutboundLink اشاره می کنیم که به این دلیل است که می خواهیم دیگر href مربوط به لینک انجام نشود و دستور جاوا اسکریپتمان اجرا شود. به طور پیش فرض با کلیک روی لینکی که دارای href است صفحه ی مربوط به آن لینک اجرا می شود و اجرای کد جاوا اسکریپت مشخص نمی شود. با این کار کد جاوا اسکریپت مربوط به رویداد کلیک این لینک اجرا می شود و لینک دنبال نمی شود.
---------------------------------------------
با یک مثال بیان می کنم:ما یک لیست داریم که شامل 5تا li هست و هر li کلاس مثلا target را دارد
می خواهیم رنگ این 5 تا li را با استفاده از خاصیت class در جاوا اسکریپت تغییر دهیم
چه کار باید بکنیم؟!
<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="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
for(var i=0 ; i<x.length; i++)
{
x[i].innerHTML = "Hello World!";
x[i].style.color="blue";
}
}
</script>
</body>
</html>
اگر شما بخواهید بیشتر از یک یخ داشته باشد درست کردن تمام یخ ها در ظرف کوچک و جداجدا کار غیرممکن است
ولی اگر شما از یک ظرف یخ استفاده کنید به راحتی به میزان لازم از همان یخ وبه یک شکل و اندازه دارید