JavaScript Array 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>
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.toString();
    </script>
  </body>
</html>

خروجی:

تابع شیء 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> In this example we have used " * " as a separator between the elements: </p>
    <p id = "demo"> </p>
    <script>
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.join(" * ")
    </script>
  </body>
</html>

خروجی:

Popping and Pushing

در کار کردن با آرایه‌ها، به راحتی می‌توان عنصری را حذف یا اضافه کرد. popping و pushing اشاره به همین موضوع دارند:

Popping items out of an array, or pushing items into an array.

Popping

تابع شیء pop() آخرین عنصر یک آرایه را حذف می‌کند.


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

        fruits.pop();  // Removes "Mango" from fruits

pop() مقدار عنصر حذف شده را برمی‌گرداند.


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

        let x = fruits.pop();  // x = "Mango"

Pushing

تابع شیء push() یک عنصر را به آخر آرایه اضاف می‌کند.


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

        fruits.push("Kiwi");   // Adds "Kiwi" to fruits

push() طول آرایه جدید را برمی‌گرداند.


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

        let x = fruits.push("Kiwi");   //  x = 5

جابه‌جا کردن عناصر

جابه‌جا کردن (Shifting) معادل popping است. فقط به جای آخرین عنصر روی اولین عنصر کار می‌کند.

shift() عنصر اول یک آرایه را حذف می‌کند و بقیه عناصر را به یک ایندکس پایین‌تر جابه‌جا می‌کند.


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

        fruits.shift();   // Removes "Banana" from fruits

shift() مقدار عنصری را که حذف شده برمی‌گرداند.


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

        let x = fruits.shift();    // x = "Banana"

unshift() یک عنصر جدید را به اول آرایه اضافه می‌کند، و عناصر قدیمی را به یک ایندکس بالاتر جابه‌جا می‌کند.


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

        fruits.unshift("Lemon");    // Adds "Lemon" to fruits

unshift() طول آرایه جدید را برمی‌گرداند.


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

        let x = fruits.unshift("Lemon");    // x = 5

تغییر عناصر

با استفاده از شماره ایندکس، می‌توان به عناصر یک آرایه دسترسی داشت. بنابراین به راحتی می‌توان عنصر مورد نظر خود را به مانند مثال زیر در یک آرایه عوض کرد.


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

        fruits[0] = "Kiwi";        // Changes the first element of fruits to "Kiwi"

حذف کردن عناصر

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


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

        delete fruits[0];           // Changes the first element in fruits to undefined

استفاده از delete ممکن است جای خالی با مقدار undefined ایجاد کند. به جای آن می‌توانید از shift() یا pop() استفاده کنید.

اضافه و حذف کردن عنصر در مکان دلخواه در یک آرایه

تابع شیء splice() برای اضافه کردن یا حذف کردن عناصر در محل دلخواه یک آرایه استفاده می‌شود.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array Methods </h2>
    <h2> splice() </h2>
    <p> The splice() method adds new elements to an array. </p>
    <p id = "demo1"> </p>
    <p id = "demo2"> </p>
    <script>
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
      fruits.splice(2, 0, "Lemon", "Kiwi");
      document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
    </script>
  </body>
</html>

خروجی:

پارامتر اول یعنی 2، مکان اضافه کردن عناصر جدید را مشخص می‌کند. پارامتر دوم مشخص می‌کند که چه تعداد عنصر حذف شوند و در نهایت عناصر جدیدی که می‌خواهیم اضافه شوند را نوشته‌ایم.

تابع شیء splice() آرایه‌ای با مقدار عناصر حذف شده را برمی‌گرداند:

<!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>
    <p id = "demo1"> </p>
    <p id = "demo2"> </p>
    <p id = "demo3"> </p>
    <script>
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
      let removed = fruits.splice(2, 2, "Lemon", "Kiwi");
      document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
      fruits.splice(2, 0, "Lemon", "Kiwi");
      document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
      document.getElementById("demo3").innerHTML = "Removed Items:<br>" + removed;
    </script>
  </body>
</html>

خروجی:

اگر بخواهید با استفاده از splice() عناصری را از آرایه حذف کنید، فقط کافی است که 2 پارامتر اول را وارد کنید؛ محل حذف عناصر و تعداد عناصری که می‌خواهید حذف شوند.


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

        fruits.splice(0, 1);   // Removes the first element

ادغام کردن آرایه‌ها

تابع شیء 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>
      const myGirls = ["Cecilie", "Lone"];
      const myBoys = ["Emil", "Tobias", "Linus"];
      const myChildren = myGirls.concat(myBoys);;
      document.getElementById("demo").innerHTML = myChildren;
    </script>
  </body>
</html>

خروجی:

concat() آرایه‌های موجود را تغییر نمی‌دهد و همواره یک آرایه جدید را برمی‌گرداند.

concat() می‌تواند هر تعداد آرایه را به عنوان آرگومان خود قبول کند:


        const arr1 = ["Cecilie", "Lone"]; 

        const arr2 = ["Emil", "Tobias", "Linus"]; 

        const arr3 = ["Robin", "Morgan"]; 

        const myChildren = arr1.concat(arr2, arr3);

برش یک آرایه

تابع شیء slice() قسمت‌های یک آرایه را برش داده و در یک آرایه جدید ذخیره می‌کند.

slice() دو آرگومان را به عنوان ورودی قبول می‌کند. آرگومان اول محل شروع برش و آرگومان دوم محل اتمام برش را مشخص می‌کند.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array Methods </h2>
    <h2> slice() </h2>
    <p> When the slice() method is given two arguments, it selects array 
      elements from the start argument, and up to (but not included) the end argument: 
    </p>
    <p id = "demo"> </p>
    <script>
      const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
      const citrus = fruits.slice(1,3);
      document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
    </script>
  </body>
</html>

خروجی:

اگر آرگومان دوم نوشته نشود، slice() از مکان وارد شده (آرگومان اول) تا آخر آرایه را برش می‌دهد.

در بخش‌ بعدی در مورد چگونگی مرتب (sorting) کردن آرایه‌ها و همچنین پیدا کردن مقدار بیشینه و کمینه در یک آرایه بحث خواهیم کرد. برای مشاهده رفرنس کامل آرایه‌ها در جاوا اسکریپت اینجا را کلیک کنید.

<< مبحث قبلی مبحث بعدی >>