JavaScript Array Iteration

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

()Array.forEach

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

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.forEach() </h2>
    <p> Calls a function once for each array element. </p>
    <p id = "demo"> </p>
    <script>
      const numbers = [45, 4, 9, 16, 25];
      let txt = "";
      numbers.forEach(myFunction);
      document.getElementById("demo").innerHTML = txt;
      function myFunction(value, index, array) {
        txt += value + "<br>";
      }
    </script>
  </body>
</html>

خروجی:

دقت داشته باشید که در تابع نوشته شده در بالا، 3 پارامتر تعریف شده:

value
index
array

که فقط از پارامتر اول آن یعنی value استفاده شده است. بنابراین تابع بالا را می‌توان به صورت زیر هم نوشت:


        function myFunction(value) {

          txt += value + "<br>";

        }

()Array.map

map() با فراخوانی یک تابع روی تک تک عناصر آرایه، یک آرایه جدید را ایجاد می‌کند و آرایه اصلی را تغییر نمی‌دهد.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.map()</h2>
    <p> Creates a new array by performing a function on each array element. </p>
    <p id = "demo"> </p>
    <script>
      const numbers1 = [45, 4, 9, 16, 25];
      const numbers2 = numbers1.map(myFunction);
      document.getElementById("demo").innerHTML = numbers2;
      function myFunction(value, index, array) {
        return value * 2;
      }
    </script>
  </body>
</html>

خروجی:

()Array.filter

filter() یک آرایه جدید از عناصر آرایه اصلی که یک تست را پشت سر گذاشته‌اند ایجاد می‌کند. در مثال زیر آرایه‌ای جدید از عناصر ارایه اصلی که بزرگتر از 18 هستند ایجاد می‌شود.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.filter()</h2>
    <p> Creates a new array with all array elements that passes a test. </p>
    <p id = "demo"> </p>
    <script>
      const numbers = [45, 4, 9, 16, 25];
      const over18 = numbers.filter(myFunction);
      document.getElementById("demo").innerHTML = over18;
      function myFunction(value, index, array) {
        return value > 18;
      }
    </script>
  </body>
</html>

خروجی:

()Array.reduce

تابع شیء reduce() تابعی را روی همه عناصر ارایه اجرا می‌کند و در نهایت یک مقدار را به عنوان خروجی تولید می‌کند.

reduce() آرایه اصلی را تغییر نمی‌دهد.

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

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.reduce() </h2>
    <p> This example finds the sum of all numbers in an array: </p>
    <p id = "demo"> </p>
    <script>
      const numbers = [45, 4, 9, 16, 25];
      let sum = numbers.reduce(myFunction);
      document.getElementById("demo").innerHTML = "The sum is " + sum;
      function myFunction(total, value, index, array) {
        return total + value;
      }
    </script>
  </body>
</html>

خروجی:

پارامتر اول total در تکرار اول، نقش مقدار اولیه را دارد و در تکرارهای بعدی دارای مقدار مرحله قبل است. در این مثال ابتدا مقدار آن صفر است، در تکرار دوم مقدار آن 45 و سپس در تکرارهای بعدی مقدار آن به ترتیب 49، 58، 74 و در نهایت 99 است. می‌توان مقدار اولیه را به عنوان ورودی به reduce() داد. در کد زیر مقدار اولیه 100 را به آن داده‌ایم، کد را اجرا و نتیجه را مشاهده نمائید.


        const numbers = [45, 4, 9, 16, 25]; 

        let sum = numbers.reduce(myFunction, 100);

        

        function myFunction(total, value) {

          return total + value;

        }

اگر بخواهید نحوه عملکرد این تابع از راست به چپ باشد، به جای آن از تابع شیء Array.reduceRight() استفاده کنید.

()Array.every

تابع شیء every() بررسی می‌کند که آیا همه مقادیر آرایه تست تعریف شده را پاس می‌کنند یا خیر. در مثال زیر بزرگتر از 18 بودن همه مقادیر آرایه بررسی می‌شود.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.every() </h2>
    <p> The every() method checks if all array values pass a test. </p>
    <p id = "demo"> </p>
    <script>
      const numbers = [45, 4, 9, 16, 25];
      let allOver18 = numbers.every(myFunction);
      document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
      function myFunction(value, index, array) {
        return value > 18;
      }
    </script>
  </body>
</html>

خروجی:

()Array.some

تابع شیء some() بررسی می‌کند که آیا بعضی از مقادیر آرایه تست تعریف شده را پاس می‌کنند یا خیر. در مثال زیر بزرگتر از 18 بودن بعضی از مقادیر آرایه بررسی می‌شود.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.some() </h2>
    <p> The some() method checks if some array values pass a test. </p>
    <p id = "demo"> </p>
    <script>
      const numbers = [45, 4, 9, 16, 25];
      let someOver18 = numbers.some(myFunction);
      document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
      function myFunction(value, index, array) {
        return value > 18;
      }
    </script>
  </body>
</html>

خروجی:

()Array.indexOf

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

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.indexOf() </h2>
    <p id = "demo"> </p>
    <script>
      const fruits = ["Apple", "Orange", "Apple", "Mango"];
      let position = fruits.indexOf("Apple") + 1;
      document.getElementById("demo").innerHTML = "Apple is found in position " + position;
    </script>
  </body>
</html>

خروجی:

می‌توان شماره ایندکسی که می‌خواهیم از آنجا جستجو شروع شود را نیز به عنوان آرگومان به آن بدهیم:


        array.indexOf(item, start)

اگر آیتم مورد نظر پیدا نشود، تابع شیئ Array.indexOf() مقدار 1- را برمی‌گرداند و در صورتی که آیتم مورد نظر وجود داشته باشد محل اولین رخداد آن را برمی‌گرداند.

()Array.lastIndexOf

این تابع شیء هم همانند Array.indexOf() عمل می‌کند، با این تفاوت که محل آخرین رخداد آیتم مورد نظر را برمی‌گرداند.


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

        let position = fruits.lastIndexOf("Apple") + 1;

می‌توان شماره ایندکسی که می‌خواهیم از آنجا جستجو شروع شود را نیز به عنوان آرگومان به آن بدهیم:


        array.lastIndexOf(item, start)

()Array.find

تابع شیء find() مقدار اولین عنصر از آرایه که تست تعریف شده را پاس کند، برمی‌گرداند.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Array.find() </h2>
    <p id = "demo"> </p>
    <script>
      const numbers = [4, 9, 16, 25, 29];
      let first = numbers.find(myFunction);
      document.getElementById("demo").innerHTML = "First number over 18 is " + first;
        function myFunction(value, index, array) {
      return value > 18;
      }
    </script>
  </body>
</html>

خروجی:

()Array.findIndex

تابع شیء findIndex() ایندکس اولین عنصر از آرایه که تست تعریف شده را پاس کند، برمی‌گرداند.


        const numbers = [4, 9, 16, 25, 29];

        let first = numbers.findIndex(myFunction); 

        

        function myFunction(value, index, array) {

        return value > 18;

        }

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