Array in JavaScript
ساختمان داده آرایه در جاوا اسکریپت به نوع داده ای که یک سری مقدار با نوع داده های متفاوت یا یکسان پشت سر هم در قالب یک متغیر قرار می گیرند.آرایه ها و اشیا در جاواسکریپت یک ماهیت دارند و تقریبا شبیه به آرایه های انجمنی و آرایه های عددی می باشند.
Declare Array
ضمن این که ما در جاواسکریپت قادر به تعریف نوع داده های مختلف از المان ها هستیم اما دسته المان ها باید ماهیت نزدیک به هم داشته باشند.
const cars = ["Saab", "Volvo", "BMW"]; /*-------------------------------------*/ const cars = []; cars[0]= "Saab"; cars[1]= "Volvo"; cars[2]= "BMW"; /**************************************/ const cars = new Array("Saab", "Volvo", "BMW");
- روش اول تعریف و مقدار دهی
- روش دوم تعریف و بعد از آن گام به گام مقدار دهی ( این روش با استفاده از ایندکس و یا توابع مختلف push,pop, shift,unshift هم امکان پذیر است)
- روش سوم با استفاده از کلید
new Array
در توضیح تصویر بالا باید گفت که جاواسکریپت از آرایه های انجمنی پشتیبانی نمی کند و تنها ایندکس عددی دارد و اگر سبک انجمنی نیاز داشتید از object استفاده کنید.
Array Class
اگر یک آرایه را از روی کلاس Array بسازید تفاوت آن با متغیری که به صورت ساده تعریف شده است به این شکل تعیین می گردد.
var a = [1,2,3,4] var b = new Array(1,2,3,4) a == b //false a === b //false a //Array(4) [ 1, 2, 3, 4 ] b //Array(4) [ 1, 2, 3, 4 ] a instanceof Array //true b instanceof Array //true typeof a //"object" typeof b //"object"
همچنین کلاس Array یک سری متد های static دارد که به وسیله کلاس قابل تعیین می باشند.
var a = [1,2,3] Array.isArray(a) //true
نکته مهم این که هم آرایه ها و هم اشیا ماهیتی یکسان دارد و Typeof Array برابر است(Arrays are a special type of objects. or Array are object) با object . در ساختار هم نزدیک به هم هستند و به صورت ترکیبی قابل استفاده می باشند (json array).
برای تفکیک صحیح آرایه از شی راه های متفاوتی وجود دارد.
static method isArray
Array.isArray(variable)
instanceof
variable instanceof Array
Accessing Array elements
برای تعریف یک آرایه بهتر است آن را در const قرار بدهیم . بنا به ساختار const قابلیت ویرایش المان های آرایه وجود دارد ولی قابلیت تعریف مجدد برای آن نیست . از آنجایی که ماهیت let نیز نزدیک به const است در let هم قرار می دهند.
برای دسترسی به آرایه های فهرستی (indexed array) از عدد برای دسترسی به المان آرایه استفاده می کنیم. همچنین در آرایه ها ما قادر به پیمایش با استفاده از متده های آن ها و همچنین JavaScript loop statements هستیم.
car[0] //saab car[1] //volvo car[2] //bmw
برای دسترسی به المان اول از ایندکس 0 و برای دسترسی به المان آخر مقدار طول آرایه یکی کم ایندکس گذاری می کنیم:
const fruits = ["Banana", "Orange", "Apple", "Mango"]; let lastFruit = fruits[fruits.length - 1]; let firstFruit = fruits[0];
JavaScript Array Methods
Mehods | Description |
concat | اتصال دو یا چند آرایه به هم (Join Arrays) در این متد خروجی یک آرایه است.
const arr1 = ["Cecilie", "Lone"]; const arr2 = ["Emil", "Tobias", "Linus"]; const children = arr1.concat(arr2); //Cecilie,Lone,Emil,Tobias,Linus |
every | برای چک کردن یک callback روی تمامی عناصر آرایه است . به طور مثال می خواهیم چک کنیم که عناصر آرایه یک بازه خاص باشند.
const ages = [32, 33, 16, 40]; ages.every(function(age) { return true; }); |
filter | این متد یک callback روی آرایه اعمال می کند و همچنین بعد از اعمال این فیلتر خروجی را آرایه جدید بر می گرداند. به طور مثال ماه های معتبر در لیست آرایه را برگردانید.
var month = [32,12,6,2,9]; let validateMonth = month.filter((m)=>{ return m < 13; }); console.log(validateMonth) //[12,6,2,9]; |
find | بسیار نزدیک به every می باشد با این تفاوت که در این تابع مقدار یافت شده برمی گردد. مثلا سن قانونی را برگردان. این متد اولین مقدار را برمی گرداند و اگر میخواهید کل المان های مشروط را برگرداند از filter استفاده کنید.
const ages = [3, 10, 18, 20, 25, 33]; let validAges = ages.find(function(age) { return age > 18; }); console.log(validAges); //20 |
findIndex | دقیقا مطابق با find عمل می کند با این تفاوت که ایندکس المان یافت شده را برمیگرداند به جای مقدار آن. |
forEach | روی تمامی المان های آرایه پیمایش می کند. می توان به جای for و یا for…in از آن استفاده کرد.
const fruits = ["apple", "orange", "cherry"]; fruits.forEach(function (item, index) { console.log(item,index); }); |
includes | جستجو در میان مقادیر یک آرایه و برگرداندن true,false مطابق با نتیجه جستجو
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.includes("Mango"); //true |
indexOf | مطابق با متد includes این بار به جای برگرداندن true, false شماره index آرایه را برمیگرداند.تقاوت آن با find این است که این متد جستجو می کند اما filter , find یک الگوریتم مشخص در قالب یک callback را روی آرایه اجرا می کردند.
const fruits = ["Banana", "Orange", "Apple", "Mango"]; let index = fruits.indexOf("Apple"); //2 |
join | المان های یک آرایه را در قالب یک رشته به هم متصل می کند. متد toString نیز مانند این متد عمل می کند. تفاوت آن با concat این است که concat یک آرایه بر می گرداند. عکس این عمل split است.
const fruits = ["Banana", "Orange", "Apple", "Mango"]; let text = fruits.join(); // Banana,Orange,Apple,Mango |
splite | تبدیل یک سری رشته به ارایه . معادل implode , explode در زبان جاوا اسکریپت join , split است.
let fruits = ['apple','mango'] fruits.join() //"apple,mango" let fruitsString = fruits.join() fruitsString.split(',') //['apple','mango'] |
map | این تابع کل عناصر ارایه را پیمایش می کند و شما در این پیمایش می توانید یک سری پردازش روی عناصر انجام بدهید و در نهایت ارایه جدید برمی گرداند.
const numbers = [65, 44, 12, 4]; const newArr = numbers.map(function (num) { return num * 10; }); console.log(newArr); //650,440,120,40 تقاوت این متد با متد filter در این است که متد filter یک شرط را روی عناصر اعمال می کرد و اگر برقرار بود عنصر را برمیگرداند و عملا عناصر ارایه را فیلتر می کرد. ولی این متد روی کل المان ها یک پردازش انجام می دهد . با استفاده از این متد می توان مطمئن شده که تمامی عناصر number است اگر callback برابر با parsInt باشد. |
pop | حذف آخرین عنصر |
push | اضافه کردن عنصر به آخر یک آرایه |
shift | حذف اولین عنصر |
unshift | افزودن یک عنصر به اول یک آرایه |
splice | به صورت موقعیت درج یا حذف کردن یک عنصر در آرایه
const fruits = ["Banana", "Orange", "Apple", "Mango"]; // At position 2, add 2 elements: fruits.splice(2, 0, "Lemon", "Kiwi") /* Banana,Orange,Lemon,Kiwi,Apple,Mango */ /*---------------------------------------------------------------------*/ const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"]; // At position 2, remove 2 items: fruits.splice(2, 2); /* Banana,Orange,Kiwi */ یکی دیگرکاربرد های splice حذف یک عنصر از یک آرایه است. let ids = [15,34,20,41,62,71] ids.indexOf(34) // 1 ids.splice(1,1) // Array [ 34 ] ids // Array(5) [ 15, 20, 41, 62, 71 ] |
sort | مرتب سازی ارایه . اگر اعضا تمام عددی باشند بر اساس ترتیب اعداد alphbetic اگر اعضا رشته ای باشند بر اساس ترتیب alphabetic |
slice | برای گرفتن قسمتی از یک آرایه در قالب یک آرایه جدید . گرامر این متد array.slice(start, end) است .start ایندکس شروع است و end تعداد مورد نظر با شروع از اولین عنصر.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(2, 4); //Lemon,Apple در این مثال اگر از ابتدا ۴ عنصر جلو برویم به Apple می رسیم و اگر نقطه شروع ایندکس 2 یعنی Lemon باشد نتیجه عناصر Lemon,Apple است. |
Array.prototype.flat
Array.prototype.flatMap |
برای تغییر عمق یک آرایه است . مبنای تغییر عمق و تغییر به حالت خطی به صورت یک عدد در پارامتر ورودی این متد قرار می گیرد.
let roomItems = [ [ {id: 10,title: 'hilton-5',day: '2022-23-05'}, {id: 10,title: 'hilton-4',day: '2022-23-06'} ], [ {id: 11,title: 'hilton-4',day: '2022-23-07'}, {id: 11,title: 'hilton-4',day: '2022-23-08'} ] ] roomItems.flat().map( (item,index) => { console.log(item,index) }) flatMap یک تابع به عنوان ورودی می گیرد که می تواند در آن علاوه بر تغییر عمق یک سری ادغام های دیگر نیز انجام داد. عملا flatMap برابر است با flat + map |
JavaScript Array Properties
Property | Description |
length | طول آرایه را برمی گرداند . همچنین متد lastIndexOf نیز آخرین ایندکس را بر می گرداند که کمی رفتار مشابه دارد. |
prototype | برای افزودن ویژگی خاص به ساختمان داده استفاده دارد. این ویژگی در ساختمان داده بخش اول توضیح داده شده است. |
Looping Array
برای پیمایش میان آرایه ها از loop statements و همچنین متدهای داخلی ساختمان داده آرایه می توان استفاده کرد. به طور مثلا از for استفاده می کنیم.
const fruits = ["Banana", "Orange", "Apple", "Mango"]; let arrayLength = fruits.length; for(let i=0;i<arrayLength;i++){ console.log(fruits[i]); }
پیمایش آرایه ها با استفاده از for..in
for (let i in cars) { console.log(cars[i]) }
امکان پیمایش با استفاده از forEach ,map , filter نیز فراهم است.
Adding Array
برای افزودن یک المان به آرایه اگر به انتها بیفزاییم کافی است طول آرایه را بدانیم . اگر قرار است به ابتدا بیفزاییم نیاز به یک حلقه و بازبینی ساختار آرایه است.
const fruits = ["Banana", "Orange", "Apple"]; fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
اگر در ساختار این آرایه مقداری اضافه کنیم که بیش از طول آرایه است از طول آرایه تا ایندکس جدید برابر با undefined است.
برای افزودن یک المان به آرایه از متد های push , unshift نیز می توان استفاده کرد.
دیدگاهتان را بنویسید