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

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
جاوااسکریپت
موارد آموزشی
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳قوانین و اصول اولیه زبان جاوااسکریپت
۴خروجی جاوااسکریپت
۵عبارت‌ها در جاوااسکریپت
۶شیوهٔ نوشتن دستورات در جاوااسکریپت
۷نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸متغیرها در جاوااسکریپت
۹عملگرهای جاوااسکریپت
۱۰عملگرهای ریاضی در جاوااسکریپت
۱۱عملگرهای مقداردهی در جاوااسکریپت
۱۲انواع داده‌ها در جاوااسکریپت
۱۳توابع در جاوااسکریپت
۱۴اشیاء (object) در جاوااسکریپت
۱۵رویدادها در جاوااسکریپت
۱۶رشته‌های متنی (string) در جاوااسکریپت
۱۷متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸اعداد در جاوااسکریپت
۱۹متدهای داده‌های عددی در جاوااسکریپت
۲۰آرایه‌ها در جاوااسکریپت
۲۱متدهای آرایه در جاوااسکریپت
۲۲مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳متدهای پیمایش آرایه در جاوااسکریپت
۲۴اشیاء تاریخ و زمان در جاوااسکریپت
۲۵فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸شی ریاضی (Math) در جاوااسکریپت
۲۹ایجاد عدد تصادفی در جاوااسکریپت
۳۰مقادیر بولین (Booleans) در جاوااسکریپت
۳۱عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲ساختار if else و else if در جاوااسکریپت
۳۳تکه کد Switch در جاوا اسکریپت
۳۴حلقه For در جاوااسکریپت
۳۵حلقه While در جاوااسکریپت
۳۶کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷تبدیل نوع داده‌ها در جاوااسکریپت
۳۸عملیات‌های بیتی در جاوااسکریپت
۳۹عبارات با قاعده در جاوااسکریپت
۴۰خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱Scope در جاوااسکریپت
۴۲Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴کلمه کلیدی This در جاوااسکریپت
۴۵کلمه کلیدی Let در جاوااسکریپت
۴۶ثابت‌ها در جاوااسکریپت
۴۷تعریف توابع به صورت پیکان
۴۸کلاس‌ها در جاوااسکریپت
۴۹اشکال‌زدایی در جاوااسکریپت
۵۰راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱بهترین تمرینات جاوااسکریپت
۵۲اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳کارایی در جاوااسکریپت
۵۴کلمات رزرو شده در جاوااسکریپت
۵۵ورژن‌های جاوااسکریپت
۵۶ECMAScript 5 - JavaScript 5
۵۷ECMAScript 6 - ECMAScript 2015
۵۸جیسون (JSON) در جاوااسکریپت
فرم‌ها
۱فرم‌ها در جاوااسکریپت
۲API ارزشیابی در جاوااسکریپت
اشیاء (Object)
۱اشیاء در جاوااسکریپت
۲ویژگی‌های اشیاء در جاوااسکریپت
۳متدهای اشیاء در جاوااسکریپت
۴روش‌های دسترسی به شیء در جاوااسکریپت
۵سازنده‌های شیء در جاوااسکریپت
۶شکل اصلی شیء در جاوااسکریپت
۷متدهای شیء در ورژن ES5 جاوااسکریپت
تابع
۱تعریف تابع در جاوااسکریپت
۲پارامتر توابع در جاوااسکریپت
۳فراخوانی تابع در جاوااسکریپت
۴صدا کردن تابع در جاوااسکریپت
۵تابع Apply در جاوااسکریپت
۶بسته‌ها (به انگلیسی: Closures) در جاوااسکریپت
HTML DOM
۱HTML DOM در جاوااسکریپت
۲متدهای HTML DOM در جاوااسکریپت
۳HTML DOM Document در جاوااسکریپت
۴عناصر HTML DOM در جاوااسکریپت
۵reeeeeeeeeeeeeeee
۶تست
۷تست
۸تست
۹تست
۱۰تست
۱۱تست
۱۲تست
۱۳تست

آرایه‌های جاوااسکریپت برای ذخیرهٔ انواع مختلف داده در یک متغیر استفاده می‌شود. [۱]

محتویات

مثال

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

یک آرایه چیست؟

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

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

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

اما، اگر شما بخواهید که در لیست آیتم‌های خود به وسیلهٔ یک حلقه جستجو کنید و نام یک اتومبیل به خصوص را بیابید به چه شکل می‌بایست اینکار را کنید؟ و چه می‌شود اگر به جای نام ۳ اتومبیل، شما ۳۰۰ نام اتومبیل داشتید؟

راه حل این مشکل استفاده ازآرایه است!

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

ایجاد یک آرایه

استفاده از حالت کلی یک آرایه ساده‌ترین روش برای ساختن یک آرایه در جاوااسکریپت است.

شیوهٔ تعریف:

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

مثال

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

فضاهای خالی و فاصلهٔ بین خطوط مهم نیستند. تعریف یک آرایه می‌تواند در چندین خط صورت بگیرد:

مثال

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


استفاده از کلمهٔ کلیدی new در جاوااسکریپت

مثال زیر، هم یک آرایه می‌سازد و هم آن را مقداردهی می‌کند:

مثال

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


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

شما می‌توانید به عناصر یک آرایه با استفاده از شمارهٔ اندیس آن‌ها دسترسی پیدا کنید.

عبارت زیر موجب دسترسی به اولین عنصر آرایه​cars​می‌شود:

var name = cars[0];

مثال

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

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

اندیس صفر [1] به عنصر اول ارایه اشاره دارد . اندیس یک [0] به عنصر دوم اشاره دارد .

تغییر مقدار یک عنصر در آرایه

عبارت زیر مقدار اولین عنصر در آرایه​cars​را تغییر می‌دهد :

cars[0] = "Opel";

مثال

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

دسترسی به تمام آرایه

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

مثال

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

آرایه‌ها نوعی از اشیاء (به انگلیسی: object) هستند

آرایه‌ها نوع به خصوصی از اشیاء (به انگلیسی: object) هستند. عملگر​typeof​در جاوااسکریپت مقدار "object" را برای آرایه‌ها بازمی‌گرداند.

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

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

آرایه:

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

اشیاء (به انگلیسی: objects) از نام برای دسترسی به عناصرشان استفاده می‌کنند. در این مثال​person.firstName​عبارت John را باز می‌گرداند:

شیء:

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

عناصر آرایه می‌توانند شیء (به انگلیسی: object) باشند

متغیرها در جاوااسکریپت می‌توانند شیء باشند. آرایه‌ها نوع به خصوصی از اشیاء هستند.

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

شما می‌توانید اشیا را درون یک آرایه داشته باشید. شما می‌توانید توابع را در یک آرایه داشته باشید. شما می‌توانید درون یک آرایه، یک آرایه دیگر داشته باشید:

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

ویژگی‌ها و متدهای آرایه

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

مثال

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

Array methods are covered in the next chapters.

متدهای آرایه‌ در فصل بعدی توضیح داده شده‌اند.

ویژگی length

ویژگی​length​یک آرایه طول آرایه (تعداد عناصر یک آرایه) را بازمی‌گرداند.

مثال

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


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

مثال

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

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

مثال

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

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

بهترین روش برای دسترسی به عناصر یک آرایه با حلقه، استفاده از حلقه​for​است:

مثال

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>";
}
text += "</ul>";

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

مثال

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

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

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

اضافه کردن به عناصر یک آرایه

ساده‌ترین روش برای وارد کردن یک عنصر جدید در یک آرایه، استفاده از متد​push()​است:

مثال

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

عنصر جدید را می‌توان با استفاده از ویژگی​length​نیز به آرایه اضافه کرد:

مثال

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


مثال

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

آرایه‌های Associative

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

آرایه‌ها با اندیس‌های نامگذاری شده، آرایه‌های Associative (یا هش) نامیده می‌شوند.

جاوااسکریپت از آرایه‌ها با اندیس نامگذاری شده پشتیبانی نمی‌کند.

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

مثال

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"


مثال

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

تفاوت بین آرایه‌ها و اشیاء (به انگلیسی: objects)

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

در جاوااسکریپت، اشیاء (به انگلیسی: objects) از اندیس‌های نامگذاری شده استفاده می‌کنند.


چه زمانی از آرایه استفاده کنیم. چه زمانی از اشیاء (به انگلیسی: objects) استفاده کنیم.

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

شما می‌بایست زمانی که می‌خواهید نام عناصر به صورت رشته‌ای (متنی) باشد از اشیاء (به انگلیسی: objects) استفاده کنید.

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

از استفاده از دستور ()new Array پرهیز کنید

هیچ نیازی نیست که از متد سازنده آرایه جاوااسکریپت یعنی​new Array()​استفاده کنید.

به جای آن از​[ ]​استفاده کنید.

هر دو تکه کد متفاوت زیر یک آرایه جدید خالی با نام points ایجاد می‌کنند.

var points = new Array();     // Bad
var points = [];              // Good


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

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)

چه اتفاقی می‌افتد اگر من یک عنصر را پاک کنم؟

var points = new Array(40);  // Creates an array with 40 undefined elements !!!!!

چطور یک آرایه را تشخیص دهیم

مهم‌ترین سؤال این است: من چطور می‌توانم بفهمم یک متغیر، یک آرایه است؟

مشکل این است که عملگر​typeof​برای آرایه‌ها عبارت​"object"​را به عنوان خروجی بازمی‌گرداند.

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

typeof fruits;    // returns object

عملگر typeof مقدار object را بازمی‌گرداند زیرا که یک آرایه در جاوااسکریپت یک شیء یا object نیز است.

راه حل اول:

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

Array.isArray(fruits);   // returns true

مشکلی که در این روش وجود دارد این است که ECMAScript 5 در مرورگرهای قدیمی پشتیبانی نمی‌شود.

راه حل دوم :

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

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

تابع فوق، در صورتی که آرگومان ورودی آن یک آرایه باشد مقدار true را بازمی‌گرداند.

و یا به صورت دقیق‌تر: تابع فوق در صورتی که prototype آرگومان ورودی شامل کلمه "Array" باشد مقدار True را بازمی‌گرداند.

راه حل سوم:

عملگر​instanceof​در صورتی که عملوند اول که همان شیء ما است از عملوند دوم که همان سازندهٔ ما است ساخته شده باشد مقدار true را بازمی‌گرداند.

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

fruits instanceof Array;   // returns true

منابع آموزشی