از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
شروع کار با مجموعه ها در جاوا اسکریپت گروه های داده در اشکال مختلف یکی از ساختارهای داده اساسی در اکثر زبان های برنامه نویسی است. در بسیاری از موارد، به گروه‌هایی از داده‌هایی که از طریق انواع داده‌های مختلف بیان می‌شوند، مجموعه‌ها گفته می‌شود. در این راهنما – نگاهی به مجموعه ها در جاوا اسکریپت و زمان استفاده از آن خواهیم انداخت…
سرفصلهای مطلب
معرفی
گروه های داده در اشکال مختلف یکی از ساختارهای داده اساسی در اکثر زبان های برنامه نویسی است. در بسیاری از موارد، گروه های داده ای که از طریق انواع داده های مختلف بیان می شوند به عنوان نامگذاری شده اند مجموعه ها.
در این راهنما – ما نگاهی به مجموعه ها در جاوا اسکریپت و چه زمانی باید از کدام نوع مجموعه استفاده کرد. سه اصلی گروه های مجموعه نگاهی خواهیم داشت که عبارتند از:
- مجموعه های نمایه شده
- مجموعه های کلید دار
- مجموعه های DOM
مجموعه های نمایه شده
یک مجموعه نمایه شده مجموعه ای از داده ها است که می باشد بر اساس شاخص آنها فهرست شده است. شاخص های مجموعه جاوا اسکریپت هستند بر اساس 0، به این معنی که آنها در شروع می شوند 0، نه 1 و به بالا بروید n-1، n تعداد اشیاء موجود در مجموعه جاوا اسکریپت دارای دو نوع مجموعه نمایه شده است Arrayشن TypedArrayس
شی آرایه
یک Array شی در جاوا اسکریپت یک لیست مرتب شده است که با استفاده از شاخص ها می توان به عناصر آن دسترسی پیدا کرد. راه های مختلفی برای ایجاد یک وجود دارد Array شی در جاوا اسکریپت، و تفاوت زیادی در زیر هود وجود ندارد:
let myArray1 = (x1, x2, ... , xN);
let myArray2 = new Array(x1, x2, ... , xN);
let myArray3 = Array(x1, x2, ... , xN);
آرایه ها در جاوا اسکریپت مبتنی بر نوع نیستند، به این معنی که لازم نیست از قبل نوع آرایه را تعریف کنید و لازم نیست فقط عناصر همگن اضافه کنید:
let myArray = ("one", 1, "two", 2);
این نحو کاملاً معتبر است و آرایه از ذخیره ارجاعات به رشته ها و اعداد صحیح خوشحال است. بیایید سریعاً دوباره روشن کنیم که شاخص های یک آرایه واقعاً چه هستند:
let myArray = ("one", 1, "two", 2);
// 0 1 2 3 --> index values
بنابراین شروع از 0 تا n-1، جایی که n طول آرایه است.
هر آرایه دارای یک ویژگی به نام است length. را طول یک آرایه همزمان با تعیین آرایه تعیین می شود اولیه شده است. بنابراین، هنگامی که یک آرایه ایجاد می کنیم، یک مقدار به آن اختصاص داده می شود length ویژگی.
اگر ما
console.log(myArray.length)، خروجی خواهد بود4.
علاوه بر این، تغییر در طول آرایه را تغییر خواهد داد. شما به راحتی می توانید یک آرایه را با کوتاه کردن طول آن کوتاه کنید و با طولانی کردن آن را گسترش دهید:
let myArray = ("one", 1, "two", 2);
console.log(myArray);
myArray.length = 5;
console.log(myArray);
myArray.length = 1;
console.log(myArray);
این نتیجه در:
("one", 1, "two", 2)
("one", 1, "two", 2, undefined)
("one")
در جاوا اسکریپت، می توانید یک آرایه بدون هیچ عنصری اما با طولی ایجاد کنید. شما می توانید این را چیزی شبیه به آن در نظر بگیرید اختصاص دادن (رزرو) حافظه از قبل. این دقیقاً همان چیزی است که وقتی یک آرایه را با تغییر آن گسترش می‌دهیم، شروع می‌شود length بزرگتر از قبل باشد
از آنجایی که سه راه برای ایجاد یک آرایه پر از عناصر وجود دارد، سه راه نیز برای ایجاد آرایه های خالی با حافظه اختصاص داده شده وجود دارد، مانند:
let myArray1 = new Array(4); // creates an array with 4 empty spaces
console.log(myArray1.length); // 4
let myArray2 = Array(4); // similar to the previous one, just without the keyword new
console.log(myArray2.length); // 4
let myArray3 = ();
myArray3.length = 4 // this one is a bit different, we assign the value to the property length
console.log(myArray3.length); // 4
تا به حال، هیچ تفاوتی بین این سه روش ایجاد یک آرایه، به جز تغییرات در نحو وجود نداشت.
با این حال، اگر می خواهید یک آرایه با یک عنصر ایجاد کنید که a Number، به جای اندازه آرایه، باید از براکت های مربع استفاده کنید و عناصر بتنی را تعریف کنید.
این به این دلیل است که اگر یک عدد را به an ارسال کنید Array سازنده، یک آرایه خالی ایجاد می کنید و این تعداد فضا را اختصاص می دهید.
// New array with 10 spaces
let myArray1 = new Array(10)
// New array with a single element
let myArray3 = (10)
افزودن عناصر به آرایه
ما روش ایجاد یک را دیدیم Arrayخواه خالی باشد یا غیر خالی. حال بیایید ببینیم که چگونه می توان عناصر جدید را به آن اضافه کرد. از آنجایی که ما در حال کار با مجموعه های نمایه شده، ما با شاخص ها کار خواهیم کرد.
همانطور که قبلا ایجاد کرده بودیم Array از 4 عنصر خالی، بیایید با آن کار کنیم. برای افزودن یک عنصر، تنها کاری که باید انجام دهیم این است از طریق فهرست آن به عنصر دسترسی پیدا کنید و یک مقدار اختصاص دهید به آن:
let myArray1 = new Array(4)
myArray1(0) = "one"
myArray1(1) = "two"
myArray1(2) = "three"
myArray1(3) = "four"
console.log(myArray)
این خروجی خواهد بود:
('one', 'two', 'three', 'four')
حتی اگر هنگام ایجاد یک آرایه 4 فاصله برای عناصر اختصاص دادیم، در جاوا اسکریپت، Array‘ها به صورت پویا ساخته می شوند، به این معنی که می توانید در هر زمان آنها را کوچک یا گسترش دهید.
این بدان معنی است که ما می توانیم عناصر بیشتری را به خود اضافه کنیم Array، حتی اگر ما آن را با 4 فاصله “مرز” کردیم:
myArray1(4) = "five"
myArray1(5) = "six"
console.log(myArray) // Output: ('one', 'two', 'three', 'four', 'five', 'six')
ما به راحتی می توانیم از طریق یک آرایه با استفاده از a تکرار کنیم for حلقه یا a forEach حلقه:
console.log('Traditional for loop:')
for (let i = 0; i < myArray1.length ; i++) {
console.log(myArray1(i));
}
console.log('Functional forEach loop:')
myArray1.forEach( function (element){ console.log(element);});
این خروجی خواهد داشت:
Traditional for loop:
one
two
three
four
five
six
Functional forEach loop:
one
two
three
four
five
six
روش های آرایه
اکنون که به همه چیز دست پیدا کرده ایم، بیایید داخلی را آزمایش کنیم Array روش ها در جاوا اسکریپت قبلاً یکی را در مثال قبلی دیده اید – a .forEach() حلقه در حال فراخوانی روی myArray1.
بیایید به رایج ترین موارد استفاده کنیم:
push()– یک عنصر را در انتهای یک آرایه اضافه می کند
let myArray = (1,2,3);
myArray.push(4);
console.log(myArray); // outputs (1, 2, 3, 4)
pop()– آخرین عنصر یک آرایه را حذف می کند
let myArray = (1,2,3,4);
myArray.pop();
console.log(myArray); // outputs (1, 2, 3)
concat()– آرایه ها (دو یا بیشتر) را در یک آرایه واحد می پیوندد
// Concatenate 2 arrays
let myArray1 = (1,2,3)
let myArray2 = (4,5,6);
let finalArray1 = myArray1.concat(myArray2);
console.log(finalArray1); // (1,2,3,4,5,6)
// Concatenate 3 arrays
let myArray3 = (7,8,9);
let finalArray2 = myArray1.concat(myArray2, myArray3);
console.log(finalArray2); // (1,2,3,4,5,6,7,8,9)
join(delimiter)– همه عناصر را به یک رشته متصل می کند که با a مشخص شده استdelimiter
let myArray = ("Earth", "Wind", "Fire");
let arrayString = myArray.join(",");
console.log(arrayString); // outputs Earth, Wind, Fire
// Bonus example
console.log(arrayString + "- September"); // outputs Earth, Wind, Fire - September
reverse()– دقیقاً ترتیب عناصر در آرایه را معکوس می کند
let myArray = (1,2,3);
let reversed = myArray.reverse();
console.log(reversed); // (3,2,1)
slice(start, end)– بخشی از یک آرایه را کپی می کند که از شاخص شروع می شودstartتا شاخصend-1
let myArray = (1,2,3,4,5,6);
myArray = myArray.slice(3, 5);
console.log(myArray); // (4,5)
TypedArray هدف – شی
Array اشیاء برای کار با هر نوع داده ای در جاوا اسکریپت عالی هستند، زیرا می تواند انواع مختلف عناصر را در یک آرایه ذخیره کند و روش های قدرتمندی برای دستکاری آن عناصر دارد.
با این حال، زمانی که نیاز به کار با داده های باینری خام وجود دارد – آن زمان است TypedArray اشیا وارد بازی می شوند برای مثال، هنگام دستکاری صدا و تصویر، داده های خام پردازش می شوند.
معماری یک TypedArray هدف – شی
آرایه های تایپ شده جاوا اسکریپت به دو دسته تقسیم می شوند بافرها و دیدگاه ها. آ بافر یک شی است که فقط تکه ای از داده ها را ذخیره می کند، بدون هیچ روشی برای دسترسی یا دستکاری آن داده ها. برای رسیدن به آن باید از a استفاده کنید چشم انداز – که الف را فراهم می کند متن نوشته، یک نوع داده که داده ها را به a تبدیل می کند TypedArray.
آ بافر از طریق یک اجرا می شود ArrayBuffer هدف – شی. برای نمایش یک بافر داده باینری با طول ثابت استفاده می شود. برای نمایش این بافر، باید یک View ایجاد کنیم – DataView – که نشان دهنده آن بافر در قالب انتخاب شده است. انواع مختلفی از نماها وجود دارد که نشان دهنده رایج ترین انواع عددی است:
Int8Array– محدوده مقدار (-128، 127)UInt8Array– محدوده مقدار (0، 255)، u مخفف آن است بدون امضاInt16Array– محدوده مقدار (-32768، 32767)UInt16Array– محدوده مقدار (0، 65535)Float32Array– محدوده مقدار (1.2E-38، 3.4E38)
ایجاد یک TypedArray
هنگام ایجاد یک TypedArray شی از نوع خاصی، ما به آنچه قبلاً در مورد آن صحبت کردیم دست پیدا می کنیم – ایجاد یک بافر و یک نمای. هیچ سازنده صریحی برای آن وجود ندارد TypedArray شی – وجود ندارد new TypedArray() نحو – ما مستقیماً نوع آرایه مورد نیاز خود را نمونه سازی می کنیم:
let tArray = new Int8Array(8);
در اینجا، ما یک بافر و یک نمای برای یک ایجاد کرده ایم Int8Array با حجم 8 بایت تخصیص مقادیر به عناصر مانند for است Array هدف – شی:
tArray(0) = 10;
console.log(tArray);
این خروجی خواهد داشت:
Int8Array ( 10, 0, 0, 0, 0, 0, 0, 0 )
به این ترتیب، ما می توانیم پر کنیم TypedArray با مقادیری که معمولاً در هنگام پردازش صدا یا ویدیو وجود دارند، اما محدود به آن نیستند – اما این موضوعی برای یک مقاله کاملاً جدید است.
مجموعه های کلید دار
آ مجموعه کلیددار مجموعه ای از داده ها است که در ارزش کلیدی نشانه گذاری. مقادیر عناصر از طریق کلیدهای مربوطه قابل دسترسی و دستکاری هستند.
در جاوا اسکریپت دو نوع مجموعه کلیددار وجود دارد:
MapوSet.
هر دو Mapشن Sets در جاوا اسکریپت می تواند یک تک داشته باشد ارزش منسوب به یک واحد کلید، اگرچه می توانید با نسبت دادن a هک کنید List به عنوان یک مقدار، حاوی عناصر متعدد. هنوز شایان ذکر است که List خود ارزش است – نه عناصر تشکیل دهنده آن.
علاوه بر این، کلیدها باید منحصر به فرد باشند.
شی نقشه
آ Map شی در جاوا اسکریپت یک نقشه استاندارد است که شامل جفت های کلید-مقدار. برای ایجاد یک جدید Map شی، ما به سادگی سازنده را صدا می کنیم:
let myMap = new Map();
افزودن یک عنصر به نقشه
یک نقشه خالی به درد ما نمی خورد. بیایید برخی از عناصر را به آن اضافه کنیم set() روشی که الف را می پذیرد key_name که باید یک رشته باشد و a value که می تواند از هر نوع باشد:
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", "three");
console.log(myMap);
نقشه ها نیز ناهمگن هستند، بنابراین لازم نیست برای همه کلیدها یک نوع مقدار داشته باشید:
Map { 'one' => 1, 'two' => 2, 'three' => 'three' }
دسترسی به عناصر نقشه
برای دسترسی به عناصر نقشه، ما به سادگی get() آنها، عبور در key_name زیرا اینها شناسه های منحصر به فرد در نقشه هستند:
console.log(myMap.get("two")); // Output: 2
از آنجایی که این مجموعه است نه بر اساس ایندکس، ما نمی توانیم با استفاده از کروشه به مقداری دسترسی پیدا کنیم: myMap("two") یک را برمی گرداند undefined ارزش.
با این حال، اگر ما تماس بگیرید get(key_name) روش روی را کلید غیر موجود، مقدار بازگشتی خواهد بود undefined هم.
روش های نقشه برداری
دو روش اصلی که با نقشه ها استفاده می کنید عبارتند از get() و set()، اما شما همچنین می خواهید روی آنها تکرار کنید. را Map کلاس نیز دارای یک forEach() که به راحتی می توان از آن برای تکرار و انجام عملیات استفاده کرد روی تمام ورودی ها ما آن را در یک لحظه پوشش خواهیم داد.
غیر از forEach()، در اینجا متداول ترین روش ها استفاده می شود روی نقشه ها:
-
set(key_name, value)– یک جفت کلید-مقدار به آن اضافه می کندMap. -
get(key_name)– مقدار اختصاص داده شده به کلید پاس شده را برمی گرداند، اگر چنین کلیدی وجود نداشته باشد – برمی گرداندundefined. -
has(key_name)– برمی گرددtrueیاfalseبسته به روی آیا الفMapکلید داردkey_nameیا نه:
console.log(myMap.has("two")); // true
console.log(myMap.has("five")) // false
delete(key_name)– هم کلید و هم مقدار را مطابق پاس شده حذف می کندkey_name، اگر یک کلید غیر موجود ارسال شود – هیچ اتفاقی نمی افتد:
myMap.delete("two")console.log(myMap);
// Output: Map { 'one' => 1, 'three' => 'three' }
myMap.delete("five")console.log(myMap);
// Output: Map { 'one' => 1, 'three' => 'three' }
clear()– هر جفت کلید-مقدار را از قسمت حذف می کندMapهدف – شی:
myMap.clear();
console.log(myMap);
// Output: Map {}
یک خاصیت اصلی وجود دارد Map – این است size ویژگی. این شامل یک مقدار عددی است که اندازه a را نشان می دهد Map هدف – شی:
let myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
console.log(myMap.size);
// Output: 2
تکرار از طریق نقشه
تکرار از طریق a Map شی در جاوا اسکریپت کمی شبیه پایتون است. ما می توانیم استفاده کنیم for..of نحو برای رسیدن به این:
for (let (k, v) of myMap) {
console.log(k + " written in number is " + v)
}
برای هر ورودی، با ارزش کلیدی جفت ((k, v)) of myMap، انجام دادن ...:
one written in number is 1
two written in number is 2
یا می توانیم از عملکردی تر استفاده کنیم forEach() روش:
myMap.forEach(function(value) { console.log(value);});
که منجر به:
1
2
three
یا، شما می توانید هر دو را بازیابی کنید value و key:
myMap.forEach(function(value, key) { console.log(value, key);});
که منجر به:
1 one
2 two
three three
نقشه روی شی
از آنجایی که یک Object در جاوا اسکریپت نیز از نماد کلید-مقدار پیروی می کند، ممکن است تصمیم گیری برای استفاده و زمان استفاده از آن دشوار باشد.
چند نکته وجود دارد روی استفاده از این دو:
- نقشه ها زمانی باید استفاده شود کلیدها هستند تا زمان اجرا ناشناخته یا زمانی که همه کلیدها از همین نوع هستند و همه مقادیر از یک نوع هستند.
- اشیاء باید زمانی استفاده شود که منطقی وجود داشته باشد که عمل کند روی عناصر فردی، به جای روی مجموعه ای از عناصر
را نقشه ضعیف هدف – شی
آ WeakMap شی در جاوا اسکریپت مجموعه ای از جفت های کلید-مقدار است که در آن کلیدها اشیا هستند فقط و مقادیر می توانند انواع مختلفی داشته باشند. نام ضعیف ناشی از فعالیتی است که این اشیاء هدف آنها هستند مجموعه زباله – یعنی در صورت عدم ارجاع به آن حذف خواهد شد.
API برای WeakMap مثل این هست که Map‘s API، بدون هیچ تکرار روش ها به عنوان WeakMaps قابل تکرار نیستند:
let myMap = new WeakMap();
let athlete = class Athlete{}
myMap.set(athlete, 1);
console.log(myMap.get(athlete))
این نتیجه در:
1
شیء تنظیم شده
آ Set شی در جاوا اسکریپت فقط مجموعه ای از مقادیر است. این مقادیر منحصر به فرد هستند، به این معنی که هیچ تکراری مجاز نیست و تلاش برای اضافه کردن یک عنصر تکراری به سادگی چیزی اضافه نمی کند.
ما همچنین می‌توانیم این را آزمایش کنیم، زیرا مجموعه‌های چاپی عناصر خود را به ترتیب درج چاپ می‌کنند، و افزودن یک عنصر تکراری در ابتدا و انتها تنها منجر به وجود عنصر اول می‌شود.
ایجاد یک Set به سادگی فراخوانی سازنده آن است:
let mySet = new Set();
افزودن یک عنصر به یک مجموعه
برای افزودن یک عنصر جدید به یک مجموعه، از عبارت استفاده می کنیم add(value) روش.
مجموعه ها می توانند حاوی مقادیر دلخواه باشند. بیایید سعی کنیم برخی از عناصر را اضافه کنیم و عمداً موارد تکراری اضافه کنیم تا ببینیم چگونه a Set رفتار می کند:
mySet.add(1);
mySet.add("one");
mySet.add("one");
mySet.add("two");
mySet.add(1);
console.log(mySet);
مجموعه ها ترتیب درج را حفظ می کنند، بنابراین ما به راحتی می توانیم آزمایش کنیم که آیا جدید است یا خیر 1 قدیمی را نادیده می گیرد 1 یا اگر اضافه کردن آن به سادگی نادیده گرفته شود:
Set { 1, 'one', 'two' }
را Set عناصر ارزش یکسانی را تشخیص می دهد و تنها یک کپی از هر کدام را نگه می دارد. مجموعه‌ها برای فیلتر کردن مقادیر تکراری عالی هستند – می‌توانید مجموعه‌ای از مقادیر را که قرار است منحصربه‌فرد باشند قرار دهید و فیلتر می‌شوند.
اگرچه، اگر شما نیازی به یک Set در پایان، بهتر است به جای آن مجموعه مناسب تری را فیلتر کنید.
تنظیم روش ها
متدهای Set تقریباً شبیه به روش‌های Map هستند و می‌توانید به راحتی مقادیر را اضافه و حذف کنید و همچنین بررسی کنید که آیا برخی از آنها به مجموعه تعلق دارند یا خیر:
add(value)– یک مقدار جدید بهSetهدف – شیdelete(value)– پاس شده را حذف می کندvalueازSetهدف – شیhas(value)– برمی گرددtrueیاfalseبسته به روی آیاvalueهست درSetهدف – شیclear()– تمام مقادیر را از قسمت حذف می کندSetهدف – شی
let mySet = new Set()
// Add values
mySet.add(1);
mySet.add("two");
// Delete a value
mySet.delete("two")
// Check if the deleted value is present
console.log(mySet.has("two")) // false
// Clear all values
mySet.clear()
// Check if first value is present
console.log(mySet.has(1)) // false
شی WeakSet
آ WeakSet شیء یک است مجموعه ای از اشیاء. مثل Setارزش های WeakSetاشیاء باید باشند منحصر بفرد. این به اشیاء موجود در حافظه اشاره دارد، نه فیلدها یا مقادیر آنها.
تفاوت های کلیدی بین a وجود دارد Set و الف WeakSet:
WeakSetهست یک مجموعه ای از اشیاء، در حالی که الفSetمجموعه ای از مقادیر از هر نوع است.- مثل
WeakMap، در صورتی که اشاره ای بهWeakSetشی – حذف شده است.
مجموعه های HTML DOM
این نوع مجموعه مربوط به توسعه وب جلویی است.
هنگام کار روی یک وب page، می توانیم به تمام عناصر دسترسی داشته باشیم روی را page با تشکر از درخت DOM. بنابراین، هنگام دسترسی به چندین عنصر به طور همزمان، آنها به عنوان یک بازگردانده می شوند HTML Collection – مجموعه ای آرایه مانند از عناصر HTML.
اگر وب داشته باشیم page حاوی چندگانه <p> برچسب‌ها، می‌توانیم آنها را با آنها بازیابی کنیم document.getElementsByTagName("p") – که مجموعه ای از همه را برمی گرداند <p> عناصر روی را page:
let myHTMLCollection = document.getElementsByTagName("p");
console.log(myHTMLCollection(1));
اکنون می توانیم تشخیص دهیم که الف HTMLCollection یک مجموعه “نمایه شده” است، زیرا ما با استفاده از مقدار شاخص به عنصری از آن دسترسی داریم. این یک نیست درست است، واقعی مجموعه جاوا اسکریپت ایندکس شده، زیرا یک آرایه نیست، زیرا روش های آرایه را ندارد، اما دسترسی به فهرست در دسترس است.
یک HTMLCollection دارد length ویژگی، که اندازه آن را برمی گرداند.
نتیجه
بسته به روی با داده هایی که با آنها کار می کنید، تصمیم خواهید گرفت که آیا از مجموعه های فهرست شده یا مجموعه های کلیددار استفاده کنید. اگر کار می کند روی یک وب page، احتمالاً با HTMLCollections مواجه خواهید شد.
به عنوان یک جمع بندی سریع:
- مجموعه های نمایه شده:
- عناصر مبتنی هستند روی مقادیر شاخص – در جاوا اسکریپت از 0 شروع می شود.
Arrayشی وTypedArrayهدف – شی.
- مجموعه های کلیددار:
- عناصر مبتنی هستند روی جفت های کلید-مقدار (مانند JSON).
Mapشی وSetهدف – شی.
- مجموعه های HTML DOM:
- عناصر بر اساس عناصر HTML هستند روی مقادیر شاخص، دوباره از 0 شروع می شود.
منتشر شده در 1403-01-15 10:45:04
