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

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

آرایه چست؟

آرایه ها متغیرهای پیچیده ای هستند که به ما اجازه می دهند. بیش از یک مقدار یا گروهی از مقادیر را تحت نام یک متغیر واحد ذخیره کنیم.آرایه ها در جاوا اسکریپت می توانند هر مقدار معتبری از جمله رشته ها، اعداد، اشیاء، توابع و حتی آرایه های دیگر را ذخیره کنند. بنابراین ایجاد ساختارهای داده پیچیده تری مانند آرایه ای از اشیا یا آرایه ای از آرایه ها را ممکن می سازد.

فرض کنید می خواهید نام رنگ ها را در کد جاوا اسکریپت خود ذخیره کنید. ذخیره کردن نام رنگ ها یک به یک در یک متغیر می تواند چیزی شبیه به این باشد:

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

اما چه اتفاقی می‌افتد اگر بخواهید نام ایالت یا شهر یک کشور را در متغیرها ذخیره کنید و این بار نه تنها سه نام بلکه ممکن است تعداد ان به عدد صد برسد.ذخیره هر یک از آنها در یک متغیر جداگانه بسیار سخت و خسته کننده است.همچنین، استفاده از متغیرهای زیادی به طور همزمان و پیگیری همه آنها کار بسیار دشواری خواهد بود.و در اینجا آرایه وارد بازی می شود.آرایه ها این مشکل را با ارائه یک ساختار مرتب برای ذخیره مقادیر متعدد یا گروهی از مقادیر حل می کنند.

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

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

نحوه ایجاد یک آرایه در جاوا اسکریپت

ساده ترین راه برای ایجاد یک آرایه در جاوا اسکریپت محصور کردن لیستی از مقادیر جدا شده با کاما درون براکت ([ ]) است.که سینتکس ان به شکل زیر می باشد.

var myArray = [element0, element1, ..., elementN];

آرایه همچنین می تواند با استفاده از سازنده ()Array همانطور که در سینتکس زیر نشان داده شده است ایجاد شود. با این حال، به خاطر سادگی، سینتکس  قبلی توصیه می شود.

var myArray = new Array(element0, element1, ..., elementN);

چند مثال برای ارایه

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

نکته:آرایه مجموعه ای  از مقادیر است. هر مقدار در یک آرایه یک عنصر نامیده می شود و هر عنصر دارای یک موقعیت عددی در یک آرایه است که به عنوان شاخص آن شناخته می شود.

نحوه دسترسی به عناصر یک آرایه در جاوا اسکریپت

عناصر آرایه را می توان با شاخص آنها با استفاده از علامت کروشه مربع([ ]) در دسترس قرار داد. شاخص عددی است که موقعیت یک عنصر را در یک آرایه نشان می دهد.شاخص های آرایه بر پایه صفر هستند.این بدان معنی است که اولین مورد از یک آرایه در شاخص 0 ذخیره می شود نه 1، آیتم دوم در شاخص 1 ذخیره می شود و غیره. شاخص های آرایه از 0 شروع می شود و به تعداد عناصر منهای 1 می رسد.بنابراین، آرایه ای از پنج عنصر دارای شاخص هایی از 0 تا 4 خواهد بود.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Access Individual Elements of an Array</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
    document.write(fruits[0] + "<br>"); // Prints: Apple
    document.write(fruits[1] + "<br>"); // Prints: Banana
    document.write(fruits[2] + "<br>"); // Prints: Mango
    document.write(fruits[fruits.length - 1]); // Prints: Papaya
    </script>
</body>
</html>

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

نحوه بدست آوردن طول یک آرایه در جاوا اسکریپت

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get the Length of an Array</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    document.write(fruits.length); // 0utputs: 5
    </script>
</body>
</html>

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

برای دسترسی به هر عنصر آرایه به ترتیب متوالی می توانید از حلقه for استفاده کنید، به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Loop Through an Array Using For Loop</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
    // Iterates over array elements
    for(var i = 0; i < fruits.length; i++){    
        document.write(fruits[i] + "<br>"); // Print array element
    }
    </script>
</body>
</html>

ECMAScript 6 راه ساده تری را برای تکرار روی عنصر آرایه معرفی کرده است که حلقه for-of  می باشد. در این حلقه نیازی نیست که متغیر شمارنده حلقه (i) را مقداردهی اولیه کنید و دنبال کنید.

 مثال بالا که با استفاده از حلقه for-ofبازنویسی شده است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Loop Through an Array Using For-Of Loop</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
    // Iterates over array elements
    for(var fruit of fruits){    
        document.write(fruit + "<br>"); // Print array element
    }
    </script>
</body>
</html>

همچنین می توانید با استفاده از حلقه for-in روی عناصر آرایه حلقه بزنید،به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Loop Through an Array Using For-In Loop</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
    // Loop through all the elements in the array 
    for(var i in fruits)  {  
        document.write(fruits[i] + "<br>");
    }
    </script>
</body>
</html>

توجه: حلقه for-in نباید برای تکرار روی آرایه ای که ترتیب شاخص مهم است استفاده شود. حلقه for-in برای تکرار روی خصوصیات شی بهینه میباشد، بهتر است از یک حلقه for با شاخص عددی یا حلقه for-of استفاده کنید.

نحوه اضافه کردن عناصر جدید به یک آرایه

برای اضافه کردن یک عنصر جدید در انتهای یک آرایه، به سادگی از متد  ()push  مانند زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Add a New Element at the End of an Array</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"]; 
    colors.push("Yellow");
     
    document.write(colors + "<br>"); // Prints: Red,Green,Blue,Yellow
    document.write(colors.length); // Prints: 4
    </script>
</body>
</html>

همچنین، برای اضافه کردن یک عنصر جدید در ابتدای یک آرایه از متد  ()unshift  مانند زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Add a New Element at the Beginning of an Array</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"]; 
    colors.unshift("Yellow");
     
    document.write(colors + "<br>"); // Prints: Yellow,Red,Green,Blue
    document.write(colors.length); // Prints: 4
    </script>
</body>
</html>

همچنین می‌توانید با استفاده از متدهای ()push و ()unshift چندین عنصر را به طور همزمان اضافه کنید، به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Add Multiple elements to an Array At Once</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
    colors.push("Pink", "Voilet");
    colors.unshift("Yellow", "Grey");
     
    document.write(colors + "<br>"); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet
    document.write(colors.length); // Prints: 7
    </script>
</body>
</html>

نحوه حذف عناصر از یک آرایه در جاوا اسکریپت

برای حذف آخرین عنصر از یک آرایه می توانید از متد  ()pop  استفاده کنید. همچنی این متد مقدار عنصر حذف شده را  برمی گرداند.به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Remove the Last Element from an Array</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
    var last = colors.pop();
     
    document.write(last + "<br>"); // Prints: Blue
    document.write(colors.length); // Prints: 2
    </script>
</body>
</html>

همچنین، می توانید اولین عنصر را از یک آرایه با استفاده از متد  ()shift حذف کنید. این متد همچنین مقدار حذف شده را برمی گرداند. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Remove the First Element from an Array</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
    var first = colors.shift();
     
    document.write(first + "<br>"); // Prints: Red
    document.write(colors.length); // Prints: 2
    </script>
</body>
</html>

نکته: متدهای ()push و ()pop سریعتر از  ()unshiftو ()shift اجرا می شوند. از آنجا که متدهای()push و ()pop به سادگی عناصر را در انتهای یک آرایه اضافه و حذف می کنند، بنابراین عناصر حرکت نمی کنند، در حالی که ()unshiftو ()shiftعناصری را در ابتدای آرایه اضافه و حذف می کنند که نیاز به شاخص گذاری مجدد دارند. 

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

متد ()splice  یک روش همه کاره است که به شما امکان می دهد عناصر را از هر شاخصی با استفاده از سینتکس arr.splice(startIndex, deleteCount, elem1, ..., elemN) اضافه یا حذف کنید.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Add or Remove Array Elements at any Index</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
    var removed = colors.splice(0,1); // Remove the first element
     
    document.write(colors + "<br>"); // Prints: Green,Blue
    document.write(removed + "<br>"); // Prints: Red (one item array)
    document.write(removed.length + "<br>"); // Prints: 1
     
    removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one
    document.write(colors + "<br>"); // Prints: Green,Pink,Yellow,Blue
    document.write(removed + "<br>"); // Empty array
    document.write(removed.length + "<br>"); // Prints: 0
     
    removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one
    document.write(colors + "<br>"); //Prints: Green,Purple,Voilet,Yellow,Blue
    document.write(removed + "<br>"); // Prints: Pink (one item array)
    document.write(removed.length); // Prints: 1
    </script>
</body>
</html>

روش  ()splice آرایه ای از عناصر حذف شده را برمی گرداند، یا اگر هیچ عنصری حذف نشده باشد، آرایه خالی را برمی گرداند، همانطور که در مثال بالا مشاهده می کنید. اگر آرگومان دوم حذف شود، تمام عناصر از ابتدا تا انتهای آرایه حذف می شوند. برخلاف متدهای  ()slice و ()concat  متد ()splice آرایه ای را که بر روی آن فراخوانی می شود تغییر می دهد.

نحوه ایجاد رشته از آرایه در جاوا اسکریپت

ممکن است شرایطی وجود داشته باشد که شما به سادگی بخواهید با به هم متصل شدن عناصر یک آرایه یک رشته ایجاد کنید. برای این کار می توانید از متد  ()join استفاده کنید. این روش یک پارامتر اختیاری می گیرد که یک رشته جداکننده است که بین هر عنصر اضافه می شود. اگر جداکننده را حذف کنید، جاوا اسکریپت به طور پیش فرض از کاما (,) استفاده می کند. مثال زیر نحوه عملکرد آن را نشان می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Join All Elements of an Array into a String</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
 
    document.write(colors.join() + "<br>"); // Prints: Red,Green,Blue
    document.write(colors.join("") + "<br>"); // Prints: RedGreenBlue
    document.write(colors.join("-") + "<br>"); // Prints: Red-Green-Blue
    document.write(colors.join(", ")); // Prints: Red, Green, Blue
    </script>
</body>
</html>

همچنین می توانید با استفاده از  ()toString  یک آرایه را به رشته ای جدا شده با کاما تبدیل کنید. این متد پارامتر جداکننده مانند ()join را نمی پذیرد. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Convert an Array into a Comma-separated String</title>
</head>
<body>
    <script>
    var colors = ["Red", "Green", "Blue"];
    document.write(colors.toString()); // Prints: Red,Green,Blue
    </script>
</body>
</html>

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

اگر می خواهید بخشی از یک آرایه را استخراج کنید اما آرایه اصلی را دست نخورده نگه دارید، می توانید از روش  ()slice استفاده کنید. این روش دو پارامتر دارد: ایندکس شروع (شاخصی که در آن استخراج شروع می‌شود)، و یک شاخص پایان اختیاری (شاخصی که قبل از آن استخراج پایان می‌یابد)، مانند (arr.slice(startIndex, endIndex به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Extract Out a Portion of an Array</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    var subarr = fruits.slice(1, 3);
    document.write(subarr); // Prints: Banana,Mango
    </script>
</body>
</html>

اگر پارامتر endIndex  حذف شود، تمام عناصر تا انتهای آرایه استخراج می شوند. همچنین می‌توانید شاخص‌ها یا آفست‌های منفی را مشخص کنید – در این صورت، متد ()slice عناصر را از انتهای یک آرایه استخراج می‌کند. مثلا:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Extract All Elements from an Array beyond Specific Index</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
    document.write(fruits.slice(2) + "<br>"); // Prints: Mango,Orange,Papaya
    document.write(fruits.slice(-2) + "<br>"); // Prints: Orange,Papaya
    document.write(fruits.slice(2, -1)); // Prints: Mango,Orange
    </script>
</body>
</html>

نحوه ادغام دو یا چند آرایه در جاوا اسکریپت

متد ()concat می تواند برای ادغام یا ترکیب دو یا چند آرایه استفاده شود. این متد آرایه های موجود را تغییر نمی دهد، در عوض یک آرایه جدید برمی گرداند. مثلا:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Merge Two Arrays</title>
</head>
<body>
    <script>
    var pets = ["Cat", "Dog", "Parrot"];
    var wilds = ["Tiger", "Wolf", "Zebra"];
     
    // Creating new array by combining pets and wilds arrays
    var animals = pets.concat(wilds); 
    document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra
    </script>
</body>
</html>

متد ()concat می تواند هر تعداد آرگومان آرایه را بگیرد، بنابراین می توانید یک آرایه از هر تعداد آرایه دیگر ایجاد کنید. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Merge Multiple Arrays</title>
</head>
<body>
    <script>
    var pets = ["Cat", "Dog", "Parrot"];
    var wilds = ["Tiger", "Wolf", "Zebra"];
    var bugs = ["Ant", "Bee"];
    
    // Creating new array by combining pets, wilds and bugs arrays
    var animals = pets.concat(wilds, bugs); 
    document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee
    </script>
</body>
</html>

نحوه جست و جو در ارایه ها

اگر می خواهید در یک ارایه یک مقدار خاص را  جستجو کنید، می توانید به سادگی از  ()indexOf و ()lastIndexOf استفاده کنید.حال اگر مقدار پیدا شد، هر دو روش یک ایندکس نشان دهنده عنصر آرایه را برمی‌گردانند. اگر مقدار پیدا نشد،  1برگردانده می شود. متد ()indexOf اولین مورد یافت شده را برمی گرداند، در حالی که ()lastIndexOf  آخرین مورد یافت شده را برمی گرداند. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Search an Array for a Specific Value</title>
</head>
<body>
    <script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
    document.write(fruits.indexOf("Apple") + "<br>"); // Prints: 0
    document.write(fruits.indexOf("Banana") + "<br>"); // Prints: 1
    document.write(fruits.indexOf("Pineapple")); // Prints: -1
    </script>
</body>
</html>

هر دو روش همچنین یک پارامتر عدد صحیح اختیاری را از index می‌پذیرند که نمایه درون آرایه‌ای را که در آن جستجو آغاز می‌شود، مشخص می‌کند. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Search an Array for a Specific Value beyond Certain Index</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    // Searching forwards, starting at from- index
    document.write(arr.indexOf(1, 2) + "<br>"); // Prints: 3
     
    // Searching backwards, starting at from index
    document.write(arr.lastIndexOf(1, 2)); // Prints: 0
    </script>
</body>
</html>

دیگر روش های جستو جو در ارایه

شما همچنین می توانید از متد  ()includes  استفاده کنید تا بفهمید که آیا یک آرایه شامل یک عنصر خاص است یا خیر. این متد همان پارامترهای متدهای ()indexOfو ()lastIndexOfرا می گیرد، اما به جای عدد شاخص،true یا false را برمی گرداند. مثلا:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Find Whether an Array Includes a Certain Value</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    document.write(arr.includes(1) + "<br>"); // Prints: true
    document.write(arr.includes(6) + "<br>"); // Prints: false
    document.write(arr.includes(1, 2) + "<br>"); // Prints: true
    document.write(arr.includes(3, 4)); // Prints: false
    </script>
</body>
</html>

اگر می خواهید یک آرایه را بر اساس شرایط خاصی جستجو کنید، می توانید از متد  ()find  که به تازگی در جاوا اسکریپت ES6 معرفی شده است استفاده کنید. این روش مقدار اولین عنصری که در آرایه شرط تابع ما را ارضا میکند را برمی گرداند. در غیر این صورت مقدار undefined برمی گردد.به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Search an Array based on Certain Condition</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    var result = arr.find(function(element){
        return element > 4;
    });
    document.write(result); // Prints: 5
    </script>
</body>
</html>

یک متد  دیگر مشابه  ()findIndex()  ، find  است که به جای مقدار آن، شاخص عنصر پیدا شده در آرایه را برمی گرداند. مثلا:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Search an Array based on Certain Condition and Find Index</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    var result = arr.findIndex(function(element){
        return element > 6;
    });
    document.write(result); // Prints: 8
    </script>
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Filter an Array</title>
</head>
<body>
    <script>
    var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
    var result = arr.filter(function(element){
      return element > 4;
    });
    document.write(result + "<br>"); // Prints: 5,7
    document.write(result.length); // Prints: 2
    </script>
</body>
</html>

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

سایر مقالات

کار با رشته ها در جاوا اسکریپت

تبدیل نوع داده(Type Conversions)در جاوا اسکریپت

.

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *