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

09 بهمن 1397
javascript-arrays-methods

با سلام،

در این قسمت و قسمت بعدی از دوره ی آموزشی جاوا اسکریپت به سراغ بررسی متد های کار با آرایه ها در این زبان می پردازیم. بهتر است بدون مقدمه به سراغ اصل بحث برویم.

متد ()toString

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>toString()</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

خروجی این کد رشته ی "Banana,Orange,Apple,Mango" خواهد بود. می توانید این خروجی را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

متد ()join

این متد دقیقا مانند toString عمل می کند با این تفاوت که می توانید جدا کننده ی رشته را خودتان انتخاب کنید. مثلا به جای ویرگول انگلیسی از علامت ستاره (*) استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>join()</h2>

<p>The join() method joins array elements into a string.</p>

<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

خروجی این کد رشته ی "Banana * Orange * Apple * Mango" خواهد بود. می توانید این خروجی را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

متد های pop و push

کلمه ی pop در فارسی معانی مختلفی (مانند ترکاندن، در آوردن، جدا کردن و ..) دارد. این متد در جاوا اسکریپت آخرین عضو یک آرایه را حذف می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>pop()</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

آرایه ی اصلی شامل اعضای "Banana,Orange,Apple,Mango" بود و پس از اجرای کد شامل "Banana,Orange,Apple" می شود. می توانید این خروجی را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

در ضمن به یاد داشته باشید که اگر از خود این متد خروجی بگیرید، مقداری که pop شده (یعنی حذف شده) را بر میگرداند نه آرایه را:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>pop()</h2>

<p>The pop() method removes the last element from an array.</p>

<p>The return value of the pop() method is the removed item.</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.pop();
document.getElementById("demo3").innerHTML = fruits;
</script>

</body>
</html>

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

document.getElementById("demo2").innerHTML = fruits.pop();

این خط مقدار "Mango" یعنی مقدار حذف شده را بر میگرداند نه آرایه را. حتما این خروجی را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

کلمه ی push در فارسی معانی مختلفی (مانند هل دادن، فشار دادن، و ...) را دارد. در اینجا منظور ما از push، هل دادن یک عضو به داخل آرایه است! درست حدس زدید، این متد دقیقا بر خلاف متد pop عمل کرده و یک عضو به آخر آرایه اضافه می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>push()</h2>

<p>The push() method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Kiwi");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

خروجی این کد دارای یک دکمه ی HTML است بنابراین حتما این خروجی را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

لازم به ذکر است که دقیقا مانند متد pop، اگر خود این متد را برگردانید، به شما مقدار اضافه شده را نشان می دهد نه آرایه را:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>push()</h2>

<p>The push() method returns the new array length.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

function myFunction() {
  document.getElementById("demo2").innerHTML = fruits.push("Kiwi");
  document.getElementById("demo1").innerHTML = fruits;
}
</script>

</body>
</html>

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

متد ()shift

این متد دقیقا مانند متد pop است با این تفاوت که روی اولین عضو آرایه کار می کند. حالا چرا کلمه ی shift (به معنی تغییر و جا به جایی) برای این متد انتخاب شده است؟ به این دلیل که بعد از حذف اولین عضو آرایه، عضو بعدی (یعنی ایندکس 1) را به جای آن (عضو اولیه که حذف شده - ایندکس صفر) می نشاند. بنابراین تمام اعضا یک واحد از ایندکس شان کم می شود:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>shift()</h2>

<p>The shift() method removes the first element of an array (and "shifts" all other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

در این کد آرایه ی اصلی شامل اعضای "Banana,Orange,Apple,Mango" بوده و سپس بعد از اجرای دستور shift شامل اعضای "Orange,Apple,Mango" شده است.

می توانید این خروجی را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

مانند متد های بالا، اگر shift راه صدا بزنید به شما مقدار حذف شده را بر میگرداند. مانند:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();    // the value of x is "Banana"

بر عکس این متد، متد ()unshift است که یک عضو را به اول آرایه اضافه می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>unshift()</h2>

<p>The unshift() method adds new elements to the beginning of an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.unshift("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

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

همچنین باید تذکر داد که، برخلاف متد های بالا، اگر خود متد ()unshift را صدا بزنید به شما طول آرایه ی جدید را می دهد، نه عضو جدید را:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2> 

<h2>unshift()</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo3").innerHTML = fruits;
</script>

<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>

</body>
</html>

به این خط از کد بالا توجه کنید:

document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");

این کد مقدار 5 را بر میگرداند، نه عضو جدید را! خروجی این کد را نیز می توانید در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

تذکر: متد ()unshift در IE8 و قدیمی تر کار نمی کند.

تغییر دادن اعضای آرایه

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

یک مثال از دسترسی به اعضای آرایه بر اساس ایندکس:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

آرایه ابتدا شامل موارد "Banana,Orange,Apple,Mango" بوده و بعد از اجرای کد به "Kiwi,Orange,Apple,Mango" تغییر می کند.

شما می توانید با یک ترفند جالب و با استفاده از متد length به آرایه یک عضو دیگر اضافه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Kiwi";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

خروجی این کد شامل یک دکمه ی HTML است بنابراین برای مشاهده ی خروجی به ادیتور آنلاین جاوا اسکریپت مراجعه کنید.

این متد چطور کار می کند؟ این متد طول یک آرایه را به شما می دهد. بنابراین زمانی که طول آرایه را در براکت ها قرار دهید، همان آخرین اندکس در براکت ها قرار می گیرد.

حذف اعضای آرایه

از آن جا که آرایه ها در جاوا اسکریپت به صورت اشیاء در نظر گرفته می شوند، برای حذف یک عضو می توانید از دستور delete نیز استفاده کنید.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<p>Deleting elements leaves undefined holes in an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

هشدار: البته استفاده از این دستور به هیچ عنوان پیشنهاد نمی شود، چرا که پس از حذف عضو جای دیگر اعضا را تغییر نمی دهد و به عبارت دیگر، عضو اول آرایه ی ما را undefined خواهد کرد! برای حذف اعضا از متد های ()pop و ()shift استفاده کنید.

متد ()splice

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

<p>The splice() method adds new elements to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
function myFunction() {
  fruits.splice(2, 0, "Lemon", "Kiwi");
  document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
}
</script>

</body>
</html>

خروجی این کد شامل یک دکمه ی HTML است بنابراین برای مشاهده ی خروجی به ادیتور آنلاین جاوا اسکریپت مراجعه کنید.

اما در مورد پارامتر هایی که این متد در مثال بالا گرفته است:

  • اولین پارامتر (یعنی عدد 2): تعیین می کند که عضو جدید کجای آرایه اضافه شود. اینجا عدد دو یعنی عضو سوم (ایندکس ها از صفر شروع می شوند).
  • دومین پارامتر (یعنی عدد 0): تعیین می کند که چند عضو از آرایه حذف شوند.
  • بقیه ی پارامتر ها (به هر تعدادی که شما اضافه کنید): اعضای جدیدی هستند که قرار است در آرایه حذف شوند.

اگر خود متد را فراخوانی کنید به شما مقادیر حذف شده را می دهد:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;

function myFunction() {
  var removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
  document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
  document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
}
</script>

</body>
</html>

خروجی این کد شامل یک دکمه ی HTML است بنابراین برای مشاهده ی خروجی به ادیتور آنلاین جاوا اسکریپت مراجعه کنید.

همچنین اگر پارامتر های سوم به بعد را به این متد ندهید، می توانید از آن برای حذف اعضای آرایه استفاده کنید. مثال:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Removes the first element of fruits

در مثال بالا:

  • اولین پارامتر (0) نقطه ی شروع کار را مشخص می کند.
  • دومین پارامتر (1) می گوید چند عضو باید از نقطه ی شروع حذف شوند.
  • و به دلیل اینکه پارامتر دیگری به متد نداده ایم، در مثال بالا، عضو اول آرایه حذف می شود (از ایندکس صفر، یک عضو).

متد ()concat

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>concat()</h2>

<p>The concat() method is used to merge (concatenate) arrays:</p>

<p id="demo"></p>

<script>
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

در کد بالا دو آرایه داشتیم (myGirls و myBoys). سپس با استفاده از این متد آن ها را ادغام کرده و در یک آرایه (myChildren) قرار دادیم که شامل اعضای "Cecilie,Lone,Emil,Tobias,Linus" می شود.

نکته: این متد آرایه های اصلی را دستکاری نمی کند بلکه فقط یک آرایه ی جدید بر میگرداند.

باید بدانید که این متد می تواند، به عنوان پارامتر، مقادیر (value) ها را نیز بگیرد:

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

متد ()slice

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>slice()</h2>

<p>This example slices out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

آرایه ی fruits شامل "Banana,Orange,Lemon,Apple,Mango" و آرایه ی citrus شامل "Orange,Lemon,Apple,Mango" می شود. پارامتری که توسط این متد دریافت می شود در واقع ایندکس شروع کار است.

نکته: این متد نیز آرایه ی اصلی را تغییر نمی دهد بلکه تنها یک آرایه ی جدید برمیگرداند.

همچنین باید توجه داشت که اگر به این متد دو پارامتر بدهید، نقطه ی شروع و نقطه ی پایان (پارامتر دوم) کار را مشخص کرده اید (بر اساس ایندکس). البته پارامتر دوم شامل خودِ آن ایندکس نمی شود:

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

در کد بالا مقدار آرایه ی citrus شامل "Orange,Lemon" می شود (میبینید که خود ایندکس 3 را شامل نشده است) و اگر اصلا برای پارامتر دوم چیزی مشخص نکرده باشید، متد تا آخر آرایه اعمال می شود.

متد ()toString به صورت خودکار

اگر در جایی جاوا اسکریپت منتظر مقدار ساده ای باشد، به صورت خودکار روی آرایه ی شما از متد ()toString استفاده می کند. برای مثال هر دو کد زیر یکی هستند:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

امیدوارم از این قستم لذت برده باشید.

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

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (4 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

mehr
03 آذر 1399
سلام وقت شما بخیر لینک قسمت splice کد قبلی را در ادیتور آنلاین نمایش می دهد لطفا اصلاح فرمایید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

HOSSEIN
29 آبان 1399
عالی مطالب اموزشی شما حرف نداره

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

یوسف
31 شهریور 1398
ممنونم از این آموزش خوبتون من ک آموزش ها رو نگاه میکنم بعد از قسمت به سایت شما مراجعه می کنم ک تمام متد ها رو یاد بگیرم دوستانی ک فیلم آموزشی نگاه می کنن توجه داشته باشن توی هیچ فیلم آموزشی تمام متد ها توضیح داده نمیشن و خودتون باید برید و باقی متد ها رو از توی اینترنت پیدا کنید من ک خیلی از مطالب سایت شما استفاده می کنم و یک پیشنهادی داشتم برای شما کسی ک داره این مطلب رو می نویسه ، صد در صد یک فرد متوسط رو به بالا یا حرفه ای هستش پس فکر نکنم کار سختی براش باشه ک دو خط در مورد هر متدی بنویسه ک کاربردش کجاست دقیقا چون برای منی ک تازه کار هستم خیلی مهمه ک بدونم چیزی ک دارم یاد میگیرم کجا ها و در چ شرایطی قابل استفادست ❤

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
03 مهر 1398
سلام دوست عزیز، از پیشنهاد شما ممنونم، حتما سعی میکنم از این به بعد در مورد متد ها هم توضیح بدم.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

رها
29 اردیبهشت 1398
تشکر از مطالب خوبتان ولی کاش یکم آموزش ها پروژه محور بودن .

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

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

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.