پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

ورود / عضویت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

۲۲
آبان

جلسه ۱۹ : آرایه ها در جاوا اسکریپت

دسته‌بندی‌ها :

جلسه ۱۹ : آرایه ها در جاوا اسکریپت

جزئیات
نوع محتواآموزش تصویریی

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم به آرایه ها در جاوا اسکریپت JavaScript و ساخت آرایه در جاوا اسکریپت بپردازیم.

همانطور که قبلا نیز اشاره کردیم، آرایه ها در جاوا اسکریپت (به طور کلی در تمام زبان ها) برای ذخیره چندین داده در یک متغیر استفاده می شود.

آموزش آرایه ها در جاوا اسکریپت

فهرست

آرایه چیست؟

یک آرایه متغیر خاصی هست که در یک زمان می تواند چندین مقدار را در خود جای دهد.

مثال : تعریف آرایه در جاوا اسکریپت

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

1	var cars = ["Saab", "Volvo", "BMW"];

خودتان امتحان کنید »

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

مثال :

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

1

2

3

var car1 = "Saab";

var car2 = "Volvo";

var car3 = "BMW";

حال اگر بخواهید دنبال یک اتومبیل خاص بگردید چه کار خواهید کرد؟ و اگر تعداد اتومبیل ها ۳۰۰ دستگاه بود چه؟

پاسخ سوال استفاده از آرایه است.

یک آرایه بسیاری از مقادیر را تحت یک نام ذخیره می کند و برای دسترسی به اعضای آرایه کافیست از اندیس آرایه استفاده کنیم.

ساخت آرایه در جاوا اسکریپت

عناصر آرایه داخل براکت تعریف شده و با , از یکدیگر جدا می شوند.

ساختار دستور:

مثال :

 var array_name = [item1, item2, ...];

1	var array_name = [item1, item2, ...];

مثال:

مثال : ساختار تعریف آرایه

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

1	var cars = ["Saab", "Volvo", "BMW"];

خودتان امتحان کنید »

فضاهای و خطوط شکسته مهم نیستند. یک اعلامیه می تواند خطوط چندگانه داشته باشد:

مثال : خطوط چندگانه

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

1

2

3

4

5

var cars = [

"Saab",

"Volvo",

"BMW"

];

خودتان امتحان کنید »

مثال : خطوط چندگانه

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

1

2

3

4

5

var cars = [

"Saab",

"Volvo",

"BMW"

];

خودتان امتحان کنید »

نکته : قرار دادن کاما بعد از آخرین عنصر (مانند “BMW”)، در مرورگرها متناقض است. در IE 8 و قبل از آن پشتیبانی نمی شود.

استفاده از کلمه ی کلیدی new

مثال زیر نیز یک آرایه ایجاد می کند و مقادیر را به آن اختصاص می دهد:

مثال : استفاده از کلمه کلیدی new

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

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

خودتان امتحان کنید »

دسترسی به عناصر آرایه در جاوا اسکریپت

برای بدست آوردن یک عنصر آرایه از اندیس آن عنصر استفاده می کنیم:

مثال :

 var name = cars[0];

1	var name = cars[0];

همچنین می توانیم با استفاده از اندیس عناصر مقدار آن ها را تغییر دهیم:

مثال :

cars[0] = "Opel";

1	cars[0] = "Opel";

نکته: اندیس ها در آرایه از ۰ شروع می شوند.

تغییر یک عنصر آرایه

این دستور ارزش عنصر اول در cars تغییر می دهد:

مثال :

cars[0] = "Opel";

1	cars[0] = "Opel";

مثال : تغییر عنصر اول آرایه

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

1

2

3

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

cars[0] = "Opel";

document.getElementById("demo").innerHTML = cars[0];

خودتان امتحان کنید »

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

برای دسترسی به تمام عناصر آرایه تنها کافیست از نام آرایه به تنهایی استفاده کنیم:

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

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

1 2	var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars;

خودتان امتحان کنید »

خروجی به شکل زیر خواهد بود:

مثال :

Saab,Volvo,BMW

1	Saab,Volvo,BMW

آرایه ها شئ object هستند

آرایه ها نوع خاصی از اشیا هستند. عملگر typeof نوع object را برای آرایه ها بر میگرداند.
اما بهتر است به عنوان همان آرایه توصیفش کنیم.

آرایه ها برای دسترسی به عناصر خود از اعداد استفاده می کنند. در این مثال، [person[0 مقدار John را برمی گرداند:

مثال : برگرداندن مقدار اولین عنصر

var person = ["John", "Doe", 46];

1	var person = ["John", "Doe", 46];

خودتان امتحان کنید »

آبجکت ها از name ها برای دسترسی به اعضاء استفاده می کنند، در این مثال person.firstName مقدار John را برمی گرداند:

مثال : دسترسی به اعضاء

var person = {firstName:"John", lastName:"Doe", age:46};

1	var person = {firstName:"John", lastName:"Doe", age:46};

خودتان امتحان کنید »

عناصر آرایه می توانند آبجکت باشند

در یک آرایه می توانید متغیر هایی با نوع های متفاوت داشته باشید.

می توانید اشیا را در آرایه داشته باشید.
می توانید توابع را در رایه داشته باشید و می توانید آرایه ها را در آرایه داشته باشید:

مثال :

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

1

2

3

myArray[0] = Date.now;

myArray[1] = myFunction;

myArray[2] = myCars;

Properties و متد های آرایه

قدرت واقعی آرایه ها در جاوا اسکریپت، توابع و پروپرتی های مربوط به آن هاست:

مثال :

 var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

1 2	var x = cars.length; // The length property returns the number of elements var y = cars.sort(); // The sort() method sorts arrays

بدست آوردن طول آرایه در جاوا اسکریپت

برای بدست آوردن طول آرایه در جاوا اسکریپت از پروپرتی length استفاده می کنیم:

مثال : بدست آوردن طول آرایه

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // 4

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.length; // 4

خودتان امتحان کنید »

نکته : خصوصیت length همیشه یکی از بالاترین index آرایه هاست.

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

مثال : دسترسی به اولین عنصر آرایه

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

1 2	fruits = ["Banana", "Orange", "Apple", "Mango"]; var first = fruits[0];

خودتان امتحان کنید »

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

مثال : دسترسی به آخرین عنصر آرایه

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

1 2	fruits = ["Banana", "Orange", "Apple", "Mango"]; var last = fruits[fruits.length - 1];

خودتان امتحان کنید »

پیمایش عناصر آرایه با استفاده از حلقه تکرار

بهترین راه برای پیمایش در آرایه استفاده از حلقه های تکرار می باشد:

مثال : پیمایش عناصر آرایه ها

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}

1

2

3

4

5

6

7

8

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];

fLen = fruits.length;

text = "<ul>";

for (i = 0; i < fLen; i++) {

text += "<li>" + fruits[i] + "</li>";

}

خودتان امتحان کنید »

شما همچنین می توانید از تابع ()Array.forEach استفاده کنید :

مثال : استفاده از تابع foreach

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

1

2

3

4

5

6

7

8

9

10

var fruits, text;

fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";

fruits.forEach(myFunction);

text += "</ul>";

function myFunction(value) {

text += "<li>" + value + "</li>";

}

خودتان امتحان کنید »

اضافه کردن عناصر آرایه در جاوا اسکریپت

راحت ترین راه برای اضافه کردن عناصر به آرایه استفاده از تابع ()push می باشد:

مثال : متد push

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Lemon"); // adds a new element (Lemon) to fruits

خودتان امتحان کنید »

راه دیگر برای اضافه کردن عناصر به آرایه استفاده از اندیس است:

مثال : روش دوم افزودن به عناصر آرایه

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits

خودتان امتحان کنید »

اخطار :

اضافه کردن عناصر با index های بالا می تواند “holes” نامشخص در آرایه ایجاد کند:

مثال : ایجاد شدن فضای ناشناس در آرایه

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";    // adds a new element (Lemon) to fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[6] = "Lemon"; // adds a new element (Lemon) to fruits

خودتان امتحان کنید »

آرایه های انجمنی

بسیاری از زبان های برنامه نویسی از اندیس های نامی پشتیبانی می کنند.

آرایه های با اندیس نامی، آرایه های انجمنی یا hash نامیده می شوند.

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

در همینجا یکی از تفاوت های بزرگ آرایه و اشیا مشخص می شود.

مثال : آرایه های انجمنی

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;     // person.length will return 3
var y = person[0];         // person[0] will return "John"

1

2

3

4

5

6

var person = [];

person[0] = "John";

person[1] = "Doe";

person[2] = 46;

var x = person.length; // person.length will return 3

var y = person[0]; // person[0] will return "John"

خودتان امتحان کنید »

اخطار : اگر از index های نامیده شده استفاده می کنید، جاوا اسکریپت آرایه را به آبجکت استاندارد باز تعریف می کند.
پس از آن، برخی از روش ها و خواص آرایه نتایج اشتباهی را تولید خواهند کرد.

مثال : استفاده از index های نام گذاری شده

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;     // person.length will return 0
var y = person[0];         // person[0] will return undefined

1

2

3

4

5

6

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length; // person.length will return 0

var y = person[0]; // person[0] will return undefined

خودتان امتحان کنید »

تفاوت بین آرایه ها و آبجکت ها

در جاوا اسکریپت، آرایه ها از index های عددی استفاده می کنند.

در جاوا اسکریپت، آبجکت به عنوان index استفاده می شود.

نکته : آرایه ها یک نوع خاص از آبجکت هستند که دارای index های عددی می باشند.

زمانیکه از آرایه و زمانیکه از آبجکت استفاده می کنید

جاوا اسکریپت از آرایه های انجمنی پشتیبانی نمی کند.
شما باید از اشیاء استفاده کنید، زمانی که می خواهید نام های عناصر رشته (متن) باشد.
شما می بایست از آرایه ها استفاده کنید، زمانی که می خواهید نام عنصر اعداد باشد.

از ()new Array پرهیز کنید

آرایه ها را می توان با کلمه کلیدی new نیز تعریف کرد اما ا این کار بپرهیزید.
زیرا این کار باعث کاهش سرعت برنامه و عملکرد آن می باشد.

مثال :

 var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good

1 2	var points = new Array(40, 100, 1, 5, 25, 10); // Bad var points = [40, 100, 1, 5, 25, 10]; // Good

کد زیر شامل دو دستور است که هر دو آرایه ای شامل ۶ عنصر عددی را ایجاد می کنند :

مثال : دو روش ایجاد آرایه

var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good

1 2	var points = new Array(40, 100, 1, 5, 25, 10); // Bad var points = [40, 100, 1, 5, 25, 10]; // Good

خودتان امتحان کنید »

استفاده از کلمه ی کلیدی new کد را پیچیده تر می کند، این همچنین می تواند نتایج غیر منتظره ای را تولید کند.

مثال :

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

1	var points = new Array(40, 100); // Creates an array with two elements (40 and 100)

اما اگر از مثال فوق یکی از عناصر مثلا ۱۰۰ را حذف کنیم، آنگاه یک آرایه با ۴۰ عنصر ناشناس ایجاد خواهد شد!!!

مثال : ایجاد شدن آرایه ای با 40 عنصر ناشناس

var points = new Array(40);

1	var points = new Array(40);

خودتان امتحان کنید »

تشخیص آرایه

با وجود شباهت های بین آرایه و اشیا، تشخیص آرایه از شئ کار سختی می باشد.

در کد زیر عملگر typeof در جاوا اسکریپت یک object را برمی گرداند:

مثال : بازگرداندن آبجکت

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;    // returns object

1

2

3

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits; // returns object

خودتان امتحان کنید »

عملگر typeof یک آبجکت را برمی گرداند، زیرا یک آرایه جاوا اسکریپت یک آبجکت است.

راه حل اول :

در ECMAScript 5 برای حل این مشکل متد جدید ()Array.isArray تعریف شده است :

مثال : متد Array.isArray

Array.isArray(fruits);   // returns true

1	Array.isArray(fruits); // returns true

خودتان امتحان کنید »

راه حل فوق در مرورگرهای قدیمی پشتیبانی نمی شود.

راه حل دوم :

برای حل این مشکل می توانید خود یک تابع isArray () ایجاد کنید:

مثال : استفاده از متد isarray

function isArray(x) {
  return x.constructor.toString().indexOf("Array") > -1;
}

1

2

3

function isArray(x) {

return x.constructor.toString().indexOf("Array") > -1;

}

خودتان امتحان کنید »

اگر آرگومان یک آرایه باشد، تابع بالا همیشه true خواهد شد.

یا دقیق تر: اگر نمونه اولیه آبجکت حاوی کلمه “Array” باشد، true می شود.

راه حل سوم:

عملگر typeof را برمی گرداند، زیرا یک آرایه جاوااسکری یک شی است.

اما با دستور instanceof می توان بررسی کرد که آیا متغیر آرایه هست یا نه:

مثال : عملگر instanceof

 var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array     // returns true

1

2

3

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array // returns true

خودتان امتحان کنید »

جلسه کار با آرایه ها در جاوا اسکریپت نیز به پایان رسید.

QR: جلسه ۱۹ : آرایه ها در جاوا اسکریپت

به اشتراک بگذارید

آرایه ها در جاوا اسکریپت ,آموزش برنامه نویسی javascript ,آموزش برنامه نویسی جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0