JavaScript Arrays

آرایه‌ها

آرایه‌ها در جاوا اسکریپت برای ذخیره چندین مقدار در یک متغیر استفاده می‌شوند.


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

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

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


        let car1 = "Saab"; 

        let car2 = "Volvo"; 

        let car3 = "BMW";

اما اگر بخواهید درون این لیست دنبال یک اسم خاص بگردید چه؟ و یا اگر به جای 3 ماشین، 300 ماشین باشد؟

راه حل یک آرایه است! یک آرایه می‌تواند تحت یک اسم، مقادیر زیادی را در خود نگه دارد و شما می‌توانید با استفاده از شماره ایندکس (مکان) به هر یک از آن‌ها دسترسی داشته باشید.

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

ساده‌ترین روش ساخت آرایه استفاده از [] است.


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

مثال:


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

فاصله‌ها و شکستن خط مهم نیستند و ایجاد یک آرایه می‌تواند در چندین خط انجام شود:


        const cars = [ 

        "Saab", 

        "Volvo", 

        "BMW" 

        ];

همچنین می‌توانید ابتدا آرایه را ایجاد کنید و سپس عناصر آن را فراهم نمائید.


        const cars = []; 

        cars[0]= "Saab"; 

        cars[1]= "Volvo";

        cars[2]= "BMW";

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

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


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

        let x = cars[0];    // x = "Saab"

ایندکس آغازین یک آرایه 0 است. یعنی عنصر اول داخل آرایه [0] می‌باشد. [1] عنصر شماره دو است و الی آخر ...

تغییر یک عنصر از آرایه

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

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Arrays </h2>
    <p> JavaScript array elements are accessed using numeric indexes (starting from 0). </p>
    <p id = "demo"> </p>
    <script>
      const cars = ["Saab", "Volvo", "BMW"];
      cars[0] = "Opel";
      document.getElementById("demo").innerHTML = cars;
    </script>
  </body>
</html>

خروجی:

آرایه‌ها از نوع شیء هستند

آرایه‌ها نوع خاصی از اشیاء هستند. عملگر typeof در جاوا اسکریپت "objects" را برای آرایه‌ها برمی‌گرداند. اما بهترین توصیف برای آرایه‌های جاوا اسکریپت همان آرایه است.

ارایه‌ها از عدد برای دسترسی به عناصر خود استفاده می‌کنند. در این مثال person[0] عنصر John را برمی‌گرداند.


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

در حالیکه اشیاء از اسم برای دسترسی به اعضای (members) خود استفاده می‌کنند. در مثال زیر person.firstName اسم John را برمی‌گرداند.


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

عناصر یک آرایه می‌توانند از نوع شیء باشند

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

می‌توانید داخل آرایه شیء، تابع یا آرایه دیگری داشته باشید.


        myArray[0] = Date.now; 

        myArray[1] = myFunction; 

        myArray[2] = myCars;

خصوصیت length

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


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

        fruits.length;   // Returns 4

خصوصیت length همیشه یکی بیشتر از بالاترین شماره ایندکس آرایه است.

برای دسترسی به آخرین عنصر آرایه به مانند کد زیر می‌توانید عمل کنید:


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

        fruits[fruits.length - 1];  // Returns "Mango"

حلقه زدن روی عناصر آرایه

یکی از راه‌ها استفاده از حلقه for است:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Arrays </h2>
    <p> The best way to loop through an array is using a standard for loop: </p>
    <p id = "demo"> </p>
    <script>
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      let fLen = fruits.length;
      let text = "<ul>";
      for (let i = 0; i < fLen; i++) {
        text += "<li>" + fruits[i] + "</li>";
      }
      text += "</ul>";
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

خروجی:

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

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Arrays </h2>
    <p> Array.forEach() calls a function for each array element. </p>
    <p id = "demo"> </p>
    <script>
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      let text = "<ul>";
      fruits.forEach(myFunction);
      text += "</ul>";
      document.getElementById("demo").innerHTML = text;
      function myFunction(value) {
        text += "<li>" + value + "</li>";
      }
    </script>
  </body>
</html>

خروجی:

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

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


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

        typeof fruits;    // returns object

برای رفع این مشکل 2 راه حل وجود دارد.

راه حل اول:

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


        Array.isArray(fruits);   // returns true

راه حل دوم:

عملگر instanceof در صورتی که شیء توسط سازنده (constructor) داده شده ساخته شده باشد، مقدار true را برمی‌گرداند.


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


        fruits instanceof Array;   // returns true

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