ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript
توصیه می‌کند:
متد ها در جاوا اسکریپت: آرایه ها
09 بهمن 1397
درس 19 از سری آموزش جاوا اسکریپت | Javascript
با سلام،
در این قسمت و قسمت بعدی از دوره ی آموزشی جاوا اسکریپت به سراغ بررسی متد های کار با آرایه ها در این زبان می پردازیم. بهتر است بدون مقدمه به سراغ اصل بحث برویم.
متد ()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
توصیه می‌کند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
22 اردیبهشت 1401
16 اردیبهشت 1401
21 اسفند 1400
17 اسفند 1400
16 اسفند 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.