دوره آموزش JavaScript قسمت پنجم: آرایه ها و آبجکت ها

نوشته شده توسط:
قسمت های دیگر این مطلب:

آرایه‌ها در زبان‌های برنامه نویسی برای جمع آوری دسته‌ای از اطلاعات کاربرد دارند. هر آیتم موجود در آرایه از صفر به بالا شماره گذاری می‌شود.

مثال:

<html>
	<head>
		<script>
			var fruits = ['apple', 'banana', 'orange', 'mango'];
			console.log(fruits[0]);
			console.log(fruits[1]);
			console.log(fruits[2]);
			console.log(fruits[3]);
		</script>
	</head>
	<body>
	</body>
</html>

نتیجه اجرای کد فوق نام چهار میوه به ترتیب موجود در آرایه است.

البته راه دیگری نیز وجود دارد که در آن از عبارت کلیدی new Array و پرانتز به جای براکت استفاده می‌کنیم. مانند زیر:

var fruits = new Array('apple', 'banana', 'orange', 'mango');

عملکرد و استفاده از آیتم‌های آرایه فوق مانند حالت قبل است و تفاوتی با آن ندارد.

 دو دستور جالب برای نمایش محتویات درون یک آرایه عبارتند از join()  و toString()  که در ظاهر عملکرد یکسانی دارند. نتیجه اجرا را ببینید:

var fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.join());

 که نتیجه اجرا مانند زیر خواهد بود:

apple,banana,orange,mango

 دستور join قابلیت جالبی دارد و آن این است که می‌توان درون پرانتز آن یک کاراکتر ویژه گذاشت تا عملیات جدا کردن بین آیتم‌ها متفاوت باشد:

var fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.join("-"));

که نتیجه اجرا مانند زیر خواهد بود:

apple-banana-orange-mango

حال سعی می‌کنیم آیتم‌های درون آرایه را تغییر دهیم. سورس زیر را ببینید:

var fruits = ['apple', 'banana', 'orange', 'mango'];
fruits[0]= "lemon"
console.log(fruits.join());

نتیجه اجرا مانند زیر خواهد بود:

lemon,banana,orange,mango

همانطور که می‌بینید جای apple حذف و به جای آن lemon ذکر شد.

نکته: برای افزایش خوانایی می‌توان هر آیتم آرایه را در یک سطر قرار دهیم:

var fruits = [
              'apple',
              'banana',
              'orange',
              'mango'];
console.log(fruits.join());

آرایه چند بعدی

اساسا می‌توان آرایه‌ها را به صورت چند بعدی نیز تعریف کرد. به این معنا که یک آرایه را درون آرایه دیگر قرار داد:

var fruits = [
              'apple',
              ['banana', 'apricot'],
              'orange',
              'mango'];
console.log(fruits[1][1]);

همانطور که در بالا می‌بینید آیتم شماره یک آرایه در واقع خود یک آرایه است. برای دسترسی به آیتم apricot از درون آرایه درون آرایه اصلی به شکلی که در سطر آخر می‌بینید عمل می‌کنیم.

اشیا یا آبجکت‌ها در جاوا اسکریپت

در واقع آرایه‌ها خود نوعی شی هستند، ولی برای تعریف یک شی به صورت خاص مانند زیر عمل می‌کنیم:

var info = {type:"website", name:"hitos.ir"};
console.log(info.type);

همانطور که در بالا می‌بینید اطلاعات درون اشیاء با نام آن‌ها فراخوانی می‌شود. البته می‌توان از person['type'] نیز بهره برد.

می توان مقدار درون اشیا را نیز تغییر داد:

var info = {type:"website", name:"hitos.ir"};
info.type= "web";
console.log(info);

متدهای مفید در کار با جاوا اسکریپت

متد length: از این متد برای یافتن طول آرایه استفاده می‌شود:

var fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.length);

متد concat: برای ترکیب دو آرایه استفاده می‌شود:

var fruits1 = ['apple', 'banana'];
var fruits2 = ['orange', 'mango'];
var fruits= fruits1.concat(fruits2);
console.log(fruits.toString());

متد push: برای اضافه کردن آیتم به آرایه استفاده می‌شود:

var fruits = ['apple', 'banana'];
fruits.push('orange', 'mango');
console.log(fruits.toString());

متد pop: برای حذف آخرین آیتم از آرایه استفاده می‌شود:

var fruits = ['apple', 'banana'];
fruits.pop();
console.log(fruits.toString());

متد shift: برای حذف اولین آیتم از آرایه استفاده می‌شود:

var fruits = ['apple', 'banana'];
fruits.shift();
console.log(fruits.toString());

متد unshift: برای اضافه کردن آیتم به اول آرایه استفاده می‌شود:

var fruits = ['apple', 'banana'];
fruits.unshift('mango');
console.log(fruits.toString());

متد splice: برای حذف آیتم و یا اضافه کردن آیتم از هر کجای آرایه مورد استفاده قرار می‌گیرد.

var fruits = ['apple', 'banana', 'orange', 'mango'];
fruits.splice(1,2);
console.log(fruits.toString());

ورودی اول متد splice اعلام می‌کند که تغییرات باید از آیتم یکم و ورودی دوم تعداد موارد حذفی را مشخص می‌کند. بنابراین خروجی مانند زیر خواهد بود:

apple,mango

در مثال زیر قصد اضافه کردن آیتم به آرایه را داریم:

var fruits = ['apple', 'banana', 'orange', 'mango'];
fruits.splice(1,0,"two","three");
console.log(fruits.toString());

ورودی اول اعلام می‌کند که از آیتم شماره یک عملیات شروع شده، و ورودی دوم تعداد مواردی که باید حذف شوند را مشخص می‌کند و دو آیتم بعدی مواردی که باید اضافه شود را مشخص می‌کند:

apple,two,three,banana,orange,mango

متد sort: برای مرتب کردن آیتم‌های آرایه استفاده می‌شود:

var numbers = [5, 1, 3, 6, 2, 4];
numbers.sort();
console.log(numbers.toString());

نتیجه اجرای کدهای فوق اعداد مرتب از یک تا پنج است.

متد reverse: برای بر عکس کردن ترتیب آیتم‌های آرایه استفاده می‌شود:

var numbers = [5, 1, 3, 6, 2, 4];
numbers.sort();
numbers.reverse();
console.log(numbers.toString());

در بالا ابتدا آرایه با sort مرتب و سپس با reverse از آخر به اول یعنی از 6 تا 1 به نمایش در می‌آید.

متد every: این متد در ورودی خود یک تابع می‌گیرد که بررسی کند یک آرایه از شرط خاصی پیروی می‌کند یا خیر:

var arr= [2, 4, 6, 7];
function check(item){
	return item % 2 === 0;
}
console.log(arr.every(check));

در سطر اول یک آرایه به نام arr داریم که سه عدد زوج و یک عدد فرد در آن است.

یک تابع به نام check نیز در خط بعدی ایجاد کردیم که یک ورودی به نام آیتم دارد و در خروجی خود بررسی می‌کند که این item یک عدد زوج هست یا خیر.

در سطر آخر در console.log با متد every و ورودی check بررسی می‌کنیم که آیا کل آیتم‌های آرایه زوج هستند یا خیر.

 متد filter: این متد تنها مقادیر خاصی را از آرایه فیلتر می‌کند. مثلا در مثال اعداد فرد حذف شده و تنها اعداد زوج باقی می‌مانند:

var arr= [2, 4, 6, 7];
function check(item){
	return item % 2 === 0;
}
console.log(arr.filter(check));

متد map: از این متد برای ویرایش آیتم‌های یک آرایه استفاده می‌شود:

var arr= [2, 4, 6, 7];
function increase(item){
	return ++item;
}
console.log(arr.map(increase));

در مثال فوق با استفاده از متد map به کلیه آیتم‌های آرایه arr یک عدد اضافه می‌شود.

متد forEach: این متد نیز عمل خاصی را روی تمام آیتم‌ها انجام می‌دهد، به علاوه این که امکان نشان دادن اندیس آرایه را نیز دارد:

var arr= [2, 4, 6, 7];
function test(item, index){
	console.log(index + ":" + item);
}
arr.forEach(test);

نتیجه خروجی فوق مانند زیر خواهد بود:

0:2
1:4
2:6
3:7

امیدوارم این آموزش برای شما مفید بوده باشد. 

نظر خود را برای این مطلب وارد کنید
دریافت خبرنامه
کامران
مفید بود ...ممنون

موضوعات بخش برنامه نویسی و نرم افزار

مطالب برگزیده جاوا اسکریپت

مطالب برگزیده سایت