سبد (0)

تبلیغات

آرایه ها در JavaScript

شیء آرایه یک نوع خاص از متغیر هاست که می تواند چندین داده را در قالب یک نام در خود ذخیره کند.


مثال - خودتان امتحان کنید

Wiki

ایجاد و مقداردهی یک آرایه:

مثال (آرایه ها در JavaScript)

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
خودتان امتحان کنید »

مثال های بیشتری را در انتهای این مطلب خواهید دید.


آرایه چیست؟

Wiki

آرایه یک متغیر خاص است که می توانید بیشتر از یک مقدار را در یک زمان در آن ذخیره نمایید.

اگر لیستی از آیتم ها داشته باشید (برای مثال، یک لیست از نام ماشین ها)، و بخواهید هر آیتم را در یک متغیر تنها ذخیره نمایید، می توان مانند زیر عمل نمود:

var car1="Saab";
var car2="Volvo";
var car3="BMW";

حالا:

  • اگر لیست شما بیشتر از 3 آیتم باشد مثلاً 300تا چه کار می کنید.
  • اگر در این لیست به دنبال یک ماشین خاص باشید چه کار می کنید.

در اینجا بهترین راه حل استفاده از آرایه ها است.

یک آرایه می تواند مقادیر متغیرها را تحت یک نام برای شما نگه دارد. و شما از طریق ایندکس آرایه می توانید به مقادیر دسترسی داشته باشید.

هر آیتم در آرایه ایندکس منحصر به فردی برای خود دارد که به راحتی از طریق ایندکس می توانید به مقادیر دسترسی پیدا کنید.


ایجاد آرایه

Wiki

آرایه ها به سه روش ایجاد می شوند:

1: با قاعده:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: خلاصه شده:

var myCars=new Array("Saab","Volvo","BMW");

3: تحت الفظی:

var myCars=["Saab","Volvo","BMW"];

در کدهای بالا، یک شیء آرایه با نام myCars ایجاد می شود.


دسترسی به عناصر آرایه

Wiki

هر آیتم در آرایه ایندکس منحصر به فردی برای خود دارد که به راحتی از طریق ایندکس می توانید به مقادیر دسترسی پیدا کنید.

کد زیر، مقدار اولین عنصر آرایه myCars را در متغیر name قرار می دهد:

var name=myCars[0];

کد زیر، اولین عنصر آرایه myCars را تعریف می کند:

myCars[0]="Opel";

 توجه: ایندکس آرایه از صفر شروع می شود، یعنی اولین آیتم [0] است، دومین آیتم [1] و ... 


ذخیره اشیاء مختلف در یک آرایه

Wiki

تمام متغیرها، عناصر آرایه و توابع در JavaScript، شیء محسوب می شوند.

شما می توانید، انواع مختلف متغیرها، خروجی یک تابع و یا یک آرایه را در آرایه ای دیگر ذخیره نمایید:

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

خصوصیتlength و متد indexof 

Wiki

در مثال زیر، خصوصیت length، تعداد عناصر آرایه myCars را در متغیر x قرار می دهد و تابع ()indexof، ایندکس عنصر مشخص شده را بر می گرداند:

var x=myCars.length             // the number of elements in myCars
var y=myCars.indexOf("Volvo")   // the index position of "Volvo"

مرجع کامل شیء آرایه

برای مشاهده یک مرجع کامل از خصوصیت ها (Property) و متدهای (Method) مربوط به آرایه ها، به لینک زیر مراجعه نمایید:

Complete Array Object Reference


ایجاد متدهای جدید

Wiki

prototype، یک سازنده (constructor) عمومی در JavaScript است. از این طریق می توان، برای هر شیءای در JavaScript یک خصوصیت یا متد جدید ساخت.

مثال: ساخت یک متد جدید برای آرایه ها

Array.prototype.ucase=function()
{
  for (i=0;i<this.length;i++)
  {this[i]=this[i].toUpperCase();}
}
خودتان امتحان کنید »

در مثال بالا، یک متد جدید با نام ucase ساخته شده است که مقادیر عناصر آرایه را به حروف بزرگ تبدیل می کند.


مثال - خودتان امتحان کنید

اتصال دو آرایه - concat()

اتصال سه آرایه - concat()

تمام عناصر آرایه در یک متغیر - join()

حذف آخرین عنصر آرایه - pop()

اضافه کردن یک عنصر جدید به انتهای آرایه - push()

معکوس کردن ترتیب عناصر آرایه - reverse()

حذف اولین عنصر آرایه - shift()

برش و انتخاب یک قسمت از آرایه - slice()

مرتب کردن آرایه بر اساس حروف الفبا و صعودی - sort()

مرتب کردن آریه عددی و صعودی - sort()

مرتب کردن آرایه عددی و نزولی - sort()

اضافه کردن یک عنصر جدید در مکان 2 یک آرایه - splice()

تبدیل یک آرایه به یک رشته - toString()

اضافه کردن یک عنصر جدید به ابتدای یک آرایه - unshift()

دیدگاه‌ها  

0 # ali.gholami 1397-02-07 15:25
با سلام.تشکر بابت مطالب ارزنده ای که منتشر میکنید.
سوالی داشتم..اگر بخواهیم یک جدول که در html ساخته ایم و ستونهایش را هم تعریف کرده ایم با جاوا اسکریپت و استفاده از آرایه سطرهایش را مقدار دهی کنیم،چه کدی استفاده کنیم تا اطلاعات واقعا در سطرها رفته و به صورت یک خط نوشته در زیر جدول ظاهر نشوند؟با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ali_021 1394-04-31 20:42
سلام بخواهیم بگیم ارایه 0 تا مثلا 10 چاپ کن باید تک تک بنویسیم
راهی نداره بگیم ارایه 0 تا 10 چاپ کن
n[1] until n[20]
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-04-31 20:57
فرض کنید یک آرایه به نام a داریم که 10 تا عنصر دارد و می خواهیم این 10 عنصر را چاپ کنیم. به راحتی از حلقه ی for استفاده می کنیم: codepen.io/sbaloot/pen/MwqqBm
کد مورد نظر در یک ادیتور آنلاین ایجاد شده است پس به لینک داده شده مراجعه کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ali_021 1394-04-31 23:12
یا عرض معذرت اگر بخوایم مثلا یک خط فاصله بینشان بندازیم کجا باید "-" را بذاریم چون امتحان کردم نشد
document.write( a+""[n]);
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-31 23:19
خواهش می کنم .
لینک کد جدید: codepen.io/sbaloot/pen/MwqqBm
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # raghb 1394-01-31 19:02
x[i].in nerHTML = "Hello World!";

x[i].style.color="blue";
}
}
</script>

</body>
</html>

خدا قوت وخسته نباشید
در خط 31

x.style.color="blue";
من متوجه این ترتیب واستفاده از خصوصیات نشدم یعنی به قسمت استایل وبعدرنگ مراجعه میکنه حتی اگر css برای آرایه تعریف نکرده باشید؟
اگر ممکنه بگید این مبحث در کدام قسمت جاوا توضیح داده میشه
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-01-31 19:55
در مدل 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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرکیان 1393-12-24 14:53
ببینید اگر بخام به تمامی عناصر آرایه دسترسی پیدا کنم تکلیف چیست؟
(x.item(n که فقط یک مقدار را برمی گردونه که ما بهش می دهیم.
مثلاً میخام یک خصوصیتی را به تمام عناصر آرایه اختصاص بدهم آیا باید دونه به دونه عناصر آرایه را انتخاب کنم و بهشان تک تک مقدار دهم؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مظاهر نصوحی 1393-12-25 08:51
به مثالی که قبلاً با همدیگر بحث کرده ایم توجه کنید:

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 این خصوصیت را انتساب بدهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیرکیان 1393-12-25 10:29
ولی ببخشید؛یک چند تا ابهام دارم:
شما یک حلقه تعریف کردید و شرط حلقه این است این حلقه به اندازه طول آرایه اجرا شود.
اگر طول حلقه مثلاً5باشد شما فقط 5بار این دستور را تکرار کردید.نه برای تمام عناصر آرایه
در مورد دستور (trackOutboundLink(this.href
return false;چیزی متوجه نشدم
با تشکر از زحمات شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-12-25 15:15
وقتی در خط اول گفته ایم که
var elements = document.getElementsByCl assName('ftarget');
با این دستور مشخص می کنیم که طول آرایه دقیقاً به تعداد عناصری باشد که getElementsByCl assName بر می گرداند و نه عدد 5 یا هر عدد دیگری که به صورت استاتیک خودمان تعریف کرده باشیم.
گفتیم که خروجی getElementsByCl assName یک آرایه از عناصر است.
فرض کنید تعداد 8 عنصر در صفحه html داریم که داری کلاس ftarget هستند. دستور فوق تمام 8 عنصر را به صورت یکی یکی در آرایه ای ذخیره می کند و آن آرایه را بر می گرداند، در این حالت طول آرایه ی ما 8 و همان تعداد عناصر ماست.
در مورد trackOutboundLi nk اشاره می کنیم که به این دلیل است که می خواهیم دیگر href مربوط به لینک انجام نشود و دستور جاوا اسکریپتمان اجرا شود. به طور پیش فرض با کلیک روی لینکی که دارای href است صفحه ی مربوط به آن لینک اجرا می شود و اجرای کد جاوا اسکریپت مشخص نمی شود. با این کار کد جاوا اسکریپت مربوط به رویداد کلیک این لینک اجرا می شود و لینک دنبال نمی شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیرکیان 1393-12-25 16:50
اصن این موضوع و مثال را فراموش کنید.
---------------------------------------------
با یک مثال بیان می کنم:ما یک لیست داریم که شامل 5تا li هست و هر li کلاس مثلا target را دارد
می خواهیم رنگ این 5 تا li را با استفاده از خاصیت class در جاوا اسکریپت تغییر دهیم
چه کار باید بکنیم؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مظاهر نصوحی 1393-12-26 07:14
<!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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرکیان 1393-12-26 10:00
داداش خیلی آقایی ؛تو زحمت افتادی ؛جبران میکنم :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرکیان 1393-12-22 11:55
همیشه من این مثال را میزنم ؛آرایه ها مانند ظرف یخ هستند(البته از اون ظرف های یخ قدیمی)که تمامشان به یک اندازه و یک شکل و یک خصوصیت هستند
اگر شما بخواهید بیشتر از یک یخ داشته باشد درست کردن تمام یخ ها در ظرف کوچک و جداجدا کار غیرممکن است
ولی اگر شما از یک ظرف یخ استفاده کنید به راحتی به میزان لازم از همان یخ وبه یک شکل و اندازه دارید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی