تفاوت میان نسخه‌های «JavaScript:آرایه‌ها در جاوااسکریپت»

از ویکی کد
پرش به ناوبری پرش به جستجو
سطر ۲۰۵: سطر ۲۰۵:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
== آرایه‌های Associative ==
+
==آرایه‌های Associative==
 
بسیاری از زبان‌های برنامه‌نویسی از اندیس‌های نامگذاری شده پشتیبانی می‌کنند.
 
بسیاری از زبان‌های برنامه‌نویسی از اندیس‌های نامگذاری شده پشتیبانی می‌کنند.
  
سطر ۲۷۱: سطر ۲۷۱:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
== چطور یک آرایه را تشخیص دهیم ==
+
==چطور یک آرایه را تشخیص دهیم==
 
مهم‌ترین سؤال این است: من چطور می‌توانم بفهمم یک متغیر، یک آرایه است؟
 
مهم‌ترین سؤال این است: من چطور می‌توانم بفهمم یک متغیر، یک آرایه است؟
  
سطر ۲۸۵: سطر ۲۸۵:
 
</syntaxhighlight>مشکلی که در این روش وجود دارد این است که ECMAScript 5 '''در مرورگرهای قدیمی پشتیبانی نمی‌شود.'''
 
</syntaxhighlight>مشکلی که در این روش وجود دارد این است که ECMAScript 5 '''در مرورگرهای قدیمی پشتیبانی نمی‌شود.'''
  
=== '''راه حل دوم :''' ===
+
==='''راه حل دوم :'''===
 
برای حل این مشکل شما می‌توانید تابع{{Code|code=isArray()|lang=javascript}}خودتان را تعریف کنید:<syntaxhighlight lang="javascript">
 
برای حل این مشکل شما می‌توانید تابع{{Code|code=isArray()|lang=javascript}}خودتان را تعریف کنید:<syntaxhighlight lang="javascript">
 
function isArray(x) {
 
function isArray(x) {
سطر ۲۹۴: سطر ۲۹۴:
 
و یا به صورت دقیق‌تر: تابع فوق در صورتی که prototype آرگومان ورودی شامل کلمه "Array" باشد مقدار True را بازمی‌گرداند.
 
و یا به صورت دقیق‌تر: تابع فوق در صورتی که prototype آرگومان ورودی شامل کلمه "Array" باشد مقدار True را بازمی‌گرداند.
  
=== '''راه حل سوم:''' ===
+
==='''راه حل سوم:'''===
 
عملگر{{Code|code=instanceof|lang=javascript}}در صورتی که عملوند اول که همان شیء ما است از عملوند دوم که همان سازندهٔ ما است ساخته شده باشد مقدار true را بازمی‌گرداند.<syntaxhighlight lang="javascript">
 
عملگر{{Code|code=instanceof|lang=javascript}}در صورتی که عملوند اول که همان شیء ما است از عملوند دوم که همان سازندهٔ ما است ساخته شده باشد مقدار true را بازمی‌گرداند.<syntaxhighlight lang="javascript">
 
var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
var fruits = ["Banana", "Orange", "Apple", "Mango"];

نسخهٔ ‏۱۰ آبان ۱۳۹۸، ساعت ۲۱:۱۳

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

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

محتویات

مثال

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"
];


Using the JavaScript Keyword new

استفاده از کلمه کلیدی 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

منابع آموزشی