درسنامه آرایه جاوا اسکریپت – نحوه کار متدهای آرایه JS را با مثال ها و برگه تقلب بیاموزید

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

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

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

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

یک آرایه می تواند عناصری از انواع داده های مختلف را در خود جای دهد و اندازه آرایه ثابت نیست. این بدان معناست که شما می توانید هر تعداد عنصر را که می خواهید به یک آرایه اضافه کنید.

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

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

یک آرایه می تواند عناصری از انواع داده های مختلف را در خود جای دهد و اندازه آرایه ثابت نیست. این بدان معناست که شما می توانید هر تعداد عنصر را که می خواهید به یک آرایه اضافه کنید.

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

  • با استفاده از پرانتز مربع[]
  • با استفاده از Array()سازنده

براکت مربع []یک نماد تحت اللفظی است که برای ایجاد یک آرایه استفاده می شود. عناصر آرایه در داخل براکت ها تعریف می شوند و هر عنصر با استفاده از کاما از هم جدا می شود ,.

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

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let myArray = [29, 'Nathan', true];

[/dm_code_snippet]

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

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let myNumbers = [5, 10, 15];

[/dm_code_snippet]
می توانید هر تعداد عنصر را که می خواهید در داخل براکت ها مشخص کنید.

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

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let myArray = Array(29, 'Nathan', true);

// or
let myNumbers = new Array(5, 10, 15);

[/dm_code_snippet]

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

در بیشتر نمونه‌های کد و پایگاه‌های کد، به احتمال زیاد می‌بینید که توسعه‌دهندگان به جای استفاده از سازنده، از براکت‌های مربع برای ایجاد یک آرایه استفاده می‌کنند. []این به این دلیل است که به جای تایپ کردن سریعتر است Array().

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

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

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

به عنوان مثال، نحوه دسترسی به اولین عنصر myArray:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let myArray = [29, 'Nathan', true];

console.log(myArray[0]); // 29
console.log(myArray[1]); // Nathan
console.log(myArray[2]); // true

[/dm_code_snippet]

عدد شاخص آرایه از ۰ شروع می شود و برای هر عنصر اضافه شده به آرایه ۱ افزایش می یابد.

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

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let myArray = [29, 'Nathan', true];

console.log(myArray[3]); // undefined
console.log(myArray[4]); // undefined
console.log(myArray[100]); // undefined

[/dm_code_snippet]

همچنین می توانید با استفاده از =عملگر انتساب، عنصری را در یک شماره شاخص خاص با یک عنصر جدید جایگزین کنید.

مثال زیر نحوه جایگزینی عنصر سوم (بولی) را با یک رشته نشان می دهد:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let myArray = [29, 'Nathan', true];

// Replace the third element
myArray[2] = 'Sebhastian';

console.log(myArray); // [ 29, 'Nathan', 'Sebhastian' ]

[/dm_code_snippet]

در مثال بالا، می بینید که trueمقدار بولی با رشته ‘Sebhastian’ جایگزین شده است. در ادامه بیایید نگاهی به lengthملک بیاندازیم.

lengthویژگی آرایه

ویژگی lengthنشان می دهد که یک آرایه چند عنصر دارد. می توانید با استفاده از علامت نقطه .مانند شکل زیر به این ویژگی دسترسی داشته باشید:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let myArray = [29, 'Nathan', true]; console.log(myArray.length); // 3 let animals = ['Dog', 'Cat']; console.log(animals.length); // 2
[/dm_code_snippet] 

lengthهر بار که عناصری از یک آرایه را اضافه یا حذف می کنید، این ویژگی به روز می شود.

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

برای افزودن یک یا چند عنصر به یک آرایه، می توانید از آرایه push()و unshift()متدها استفاده کنید.

متد push()عناصر جدیدی را به انتهای آرایه اضافه می کند، در حالی که unshift()متد عناصر جدیدی را در ابتدای آرایه درج می کند:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['Dog', 'Cat']; animals.push('Horse', 'Fish'); console.log(animals); // [ 'Dog', 'Cat', 'Horse', 'Fish' ] animals.unshift('Bird'); console.log(animals); // [ 'Bird', 'Dog', 'Cat', 'Horse', 'Fish' ]
[/dm_code_snippet] 

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

در مرحله بعد، بیایید ببینیم چگونه می توانید عناصر را از یک آرایه حذف کنید.

نحوه حذف یک عنصر از آرایه

برای حذف یک عنصر از یک آرایه، بسته به موقعیت عنصری که می‌خواهید حذف کنید، می‌توانید از روش shift()و استفاده کنید.pop()

از shift()روش برای حذف اولین عنصر و pop()برای حذف آخرین عنصر در آرایه استفاده کنید:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['Dog', 'Cat', 'Horse', 'Fish']; animals.shift(); console.log(animals); // [ 'Cat', 'Horse', 'Fish' ] animals.pop(); console.log(animals); // [ 'Cat', 'Horse' ]
[/dm_code_snippet] 

هر دو shift()و pop()فقط می توانند یک عنصر را در یک زمان حذف کنند. اگر می خواهید عنصری را در وسط یک آرایه حذف کنید، باید از splice()روش استفاده کنید.

نحوه استفاده splice()برای حذف یا افزودن عنصر(ها)

روش آرایه splice()برای حذف یا اضافه کردن عناصر در موقعیت های خاص استفاده می شود. شما از این روش زمانی استفاده می کنید که push، popshiftو unshiftنمی توانید کار را انجام دهید.

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

به عنوان مثال، فرض کنید می خواهید دو عنصر در شاخص ۱ و ۲ در animalsآرایه را حذف کنید. در اینجا نحوه انجام آن آمده است:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['Dog', 'Cat', 'Horse', 'Fish']; animals.splice(1, 2); console.log(animals); // [ 'Dog', 'Fish' ]
[/dm_code_snippet] 

میانگین splice(1, 2)دستکاری آرایه را از شاخص ۱ شروع می کند، سپس ۲ عنصر را از آنجا حذف می کند.

برای افزودن عناصر با استفاده از splice()، باید عناصری را که باید بعد از آرگومان دوم اضافه شوند، مشخص کنید.

به عنوان مثال، در اینجا من یک مقدار رشته “Bird” و “Squid” را در شاخص ۱ اضافه می کنم:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['Dog', 'Cat']; animals.splice(1, 0, 'Bird', 'Squid'); console.log(animals); // [ 'Dog', 'Bird', 'Squid', 'Cat' ]
[/dm_code_snippet] 

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

روش splice()ممکن است اولین باری که آن را می بینید گیج کننده باشد، اما نگران نباشید! با تمرین بیشتر نحوه عملکرد آن را حفظ خواهید کرد.

چگونه بررسی کنیم که آیا یک متغیر آرایه است یا خیر

برای بررسی اینکه آیا یک متغیر یک آرایه است، می توانید از Array.isArray()روشی استفاده کنید که آزمایش می کند که آیا آرگومان داده شده به متد یک آرایه است یا خیر.

این متد trueزمانی که یک آرایه را به آن ارسال می کنید و falseبرای هر چیز دیگری برمی گردد:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let myArray = [1, 2, 3]; let notAnArray = 'Hello!'; console.log(Array.isArray(myArray)); // true console.log(Array.isArray(notAnArray)); // false
[/dm_code_snippet] 

Arrayتوجه داشته باشید که هنگام فراخوانی متد باید کلاس را مشخص کنید isArray().

این به این دلیل isArray()است که یک متد ثابت است، بنابراین می‌توانید آن را مستقیماً از کلاسی که متد را تعریف می‌کند فراخوانی کنید.

نحوه تکرار یا حلقه روی یک آرایه

بسته به روشی که استفاده می کنید، ۴ روش وجود دارد که می توانید روی یک آرایه در جاوا اسکریپت تکرار کنید:

  1. با استفاده از یک forحلقه
  2. با استفاده از یک whileحلقه
  3. با استفاده از for...inحلقه
  4. با استفاده از for...ofحلقه
  5. با استفاده از forEach()روش

بیایید نحوه استفاده از این ۴ روش را با مثال بیاموزیم.

۱. نحوه استفاده از حلقه for

برای تکرار روی یک آرایه با استفاده از یک forحلقه، باید از آرایه lengthبه عنوان عبارت شرط استفاده کنید.

در مثال زیر، forتا زمانی که متغیر iکمتر از طول آرایه باشد، یک حلقه به کار خود ادامه خواهد داد:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['dog', 'bird', 'cat', 'horse']; for (let i = 0; i < animals.length; i++) { console.log(animals[i]); }
[/dm_code_snippet] 

شما می توانید عناصر آرایه را در forبدنه حلقه دستکاری کنید.

۲. نحوه استفاده از حلقه while

راه دیگر برای تکرار روی آرایه استفاده از whileحلقه است. شما باید از یک متغیر و طول آرایه برای کنترل زمان توقف تکرار استفاده کنید، مانند حلقه forقبلی:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['dog', 'bird', 'cat', 'horse']; let i = 0; while (i < animals.length) { console.log(animals[i]); i++; }
[/dm_code_snippet] 

در داخل حلقه while، باید iمتغیر را یک بار افزایش دهید تا از یک حلقه بی نهایت جلوگیری کنید.

۳. نحوه استفاده از حلقه for…in

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

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['dog', 'bird', 'cat', 'horse']; for (i in animals) { console.log(animals[i]); }
[/dm_code_snippet] 

حلقه در مقایسه با حلقه یا حلقه for...inمختصرتر است ، اما بهتر است هنگام تکرار روی یک آرایه از یک حلقه استفاده کنید.forwhilefor...of

۴. نحوه استفاده از حلقه for…of

حلقه for...ofرا می توان برای تکرار روی یک آرایه استفاده کرد. عنصر آرایه را در هر تکرار برمی گرداند:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['dog', 'bird', 'cat', 'horse']; for (element of animals) { console.log(element); }
[/dm_code_snippet] 

در حالی که for...inحلقه موقعیت شاخص را برمی‌گرداند، for...ofحلقه مستقیماً عنصر را برمی‌گرداند.

۵. نحوه استفاده از forEach()روش

شیء آرایه جاوا اسکریپت خود متدی به نام دارد forEach()که می توانید از آن برای تکرار روی آرایه از موقعیت ۰ تا آخرین موقعیت استفاده کنید.

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

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let animals = ['dog', 'bird', 'cat', 'horse']; animals.forEach(function (element, index) { console.log(`${index}: ${element}`); });
[/dm_code_snippet] 

خروجی خواهد بود:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
۰: dog 1: bird 2: cat 3: horse
[/dm_code_snippet] 

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

نحوه تبدیل آرایه به رشته

برای تبدیل یک آرایه به رشته می توانید از متد toString()یا join() استفاده کنید .

این toString()روش یک آرایه داده شده را به یک رشته تبدیل می کند که عناصر آن با کاما از هم جدا می شوند:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
const animals = ['cat', 'bird', 'fish']; console.log(animals.toString()); // "cat,bird,fish"
[/dm_code_snippet] 

این join()متد همچنین یک آرایه را به یک رشته تبدیل می کند، اما می توانید یک جداکننده رشته خاص را به عنوان آرگومان آن ارسال کنید.

مثال زیر نحوه استفاده از یک اسلش /و یک رشته خالی را به عنوان جداکننده رشته نشان می دهد:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
const animals = ['cat', 'bird', 'fish']; console.log(animals.join()); // "cat,bird,fish" console.log(animals.join('/')); // "cat/bird/fish" console.log(animals.join('')); // "catbirdfish"
[/dm_code_snippet] 

در پشت صحنه، toString()متد در واقع join()متد ایجاد رشته را فراخوانی می کند.

نحوه مقایسه دو آرایه

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

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

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let arrayOne = [7, 8, 9]; let arrayTwo = [7, 8, 9]; console.log(arrayOne === arrayTwo); // false
[/dm_code_snippet] 

این به این دلیل است که arrayOneو arrayTwoاشیاء مختلف در مکان های مختلف حافظه ذخیره می شوند.

تنها راهی که مقایسه آرایه برمی گردد trueزمانی است که هر دو متغیر به یک شی آرایه ارجاع می دهند. در مثال زیر، arrayTwoمتغیر مرجعی است به arrayOne:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let arrayOne = [7, 8, 9]; let arrayTwo = arrayOne; console.log(arrayOne === arrayTwo); // true
[/dm_code_snippet] 

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

آرایه ها را با تبدیل آنها به شی JSON مقایسه کنید

قبل از مقایسه دو آرایه مختلف، باید آنها را با فراخوانی JSON.stringify()متد به اشیاء JSON تبدیل کنید.

سپس می توانید دو رشته سریال شده را به صورت زیر مقایسه کنید:

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="php" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let arrayOne = [7, 8, 9]; 
let arrayTwo = [7, 8, 9]; 

console.log(JSON.stringify(arrayOne) === JSON.stringify(arrayTwo)); // true
[/dm_code_snippet] 

اما این راه‌حل آرایه‌ها را به‌طور غیرمستقیم مقایسه می‌کند و داشتن مقادیر یکسان در ترتیب‌های مختلف به falseجای true.

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

نحوه مقایسه آرایه ها با every()روش

روش دیگری که می توانید دو آرایه را با هم مقایسه کنید، استفاده از ترکیب ویژگی lengthو every()متد است.

trueابتدا طول آرایه ها را مقایسه می کنید تا زمانی که آرایه دوم عناصر بیشتری نسبت به آرایه اول داشته باشد، مقایسه برنگردد .

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

[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="dark" language="javascript" wrapped="no" height="" copy-text="Copy Code" copy-confirmed="Copied"]
let arrayOne = [7, 8, 9]; 
let arrayTwo = [7, 8, 9]; 

let result = 
arrayOne.length === arrayTwo.length && 
arrayOne.every(function (element, index) {
 // compare if the element matches in the same index 
return element === arrayTwo[index];
 });
 console.log(result); // true
[/dm_code_snippet] 

به این ترتیب، شما مقایسه می کنید که آیا عنصر در یک شاخص خاص واقعاً برابر است یا خیر.

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

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

نحوه مقایسه آرایه ها با includes()روش

برای مقایسه عناصر آرایه نامرتب می توانید از ترکیب every()و includes()متدها استفاده کنید.

این includes()روش آزمایش می کند که آیا یک آرایه عنصر خاصی را که شما به عنوان آرگومان آن مشخص کرده اید دارد یا خیر:

let arrayOne = [۷, ۸, ۹];
let arrayTwo = [۹, ۷, ۸];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element) {
    return arrayTwo.includes(element);
  });

console.log(result); // true

جایگزین دیگری برای includes()روش استفاده از متد است indexOf()که شاخص عنصر مشخص شده را برمی گرداند.

وقتی عنصر پیدا نشد، indexOf()متد برمی گردد . این به این معنی است که شما باید زمانی که مطابق شکل زیر است، every()برگردانید :trueindexOf(element) !== -1

let arrayOne = [۷, ۸, ۹];
let arrayTwo = [۹, ۷, ۸];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element) {
    return arrayTwo.indexOf(element) !== -۱;
  });

console.log(result); // true

همانطور که می بینید، مقایسه آرایه ها ساده نیست. شما باید از روش های ارائه شده توسط شی آرایه خلاقانه استفاده کنید.

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

نحوه کپی کردن یک آرایه

یکی از راه های کپی آرایه استفاده از slice()روشی است که دقیقا برای کپی کردن آرایه ارائه شده است.

شما فقط باید متد را فراخوانی کنید و آرایه برگشتی را به یک متغیر جدید مانند زیر اختصاص دهید:

let arrayOne = [۷, ۸, ۹];
let arrayTwo = arrayOne.slice();

console.log(arrayOne); // [ ۷, ۸, ۹ ]
console.log(arrayTwo); // [ ۷, ۸, ۹ ]

اما به خاطر داشته باشید که slice()روش یک کپی کم عمق را برمی گرداند، به این معنی که مقادیر کپی ارجاعاتی به آرایه اصلی هستند.

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

برای اینکه منظورم را به شما نشان دهم، مثال زیر را ببینید:

let arrayOne = [{ name: 'Jack', age: ۲۵ }];
let arrayTwo = arrayOne.slice();

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]

arrayTwo[۰].name = 'Nathan';

console.log(arrayOne); // [ { name: 'Nathan', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]

متوجه شدید چه مشکلی دارد؟ کد بالا فقط nameخاصیت را تغییر می دهد arrayTwo، اما هر دو آرایه را تغییر می دهد!

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

نحوه ایجاد یک کپی عمیق از یک آرایه

برای ایجاد یک کپی عمیق از یک آرایه، باید آرایه را با استفاده از متدهای JSON.parse()and JSON.stringify()به جای استفاده از slice()متد کپی کنید.

آرایه JSON.stringify()را به یک رشته JSON تبدیل می کند و JSON.parse()آن رشته را دوباره به یک آرایه تبدیل می کند.

از آنجایی که کپی از یک رشته JSON ایجاد شده است، دیگر اتصالی به آرایه اصلی وجود ندارد:

let arrayOne = [{ name: 'Jack', age: ۲۵ }];
let arrayTwo = JSON.parse(JSON.stringify(arrayOne));

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]

arrayTwo[۰].name = 'Nathan';

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]

در اینجا، می بینید که تغییر خاصیت of arrayTwoباعث تغییر همان ویژگی در نمی شود arrayOne. کارت خوب بود!

نحوه ادغام دو آرایه در یک

جاوا اسکریپت concat()روشی را ارائه می دهد که می توانید از آن برای ادغام دو یا چند آرایه در یک آرایه استفاده کنید. مثال زیر نحوه ادغام آرایه های catsو را birdsبه عنوان یک آرایه با نام نشان می دهد animals:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = cats.concat(birds);

console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]
console.log(cats); // [ 'tiger', 'cat' ]
console.log(birds); // [ 'owl', 'eagle' ]

در نگاه اول، به نظر می رسد نحو روش، آرایه را در آرایه concat()ادغام می کند . اما همانطور که از لاگ های کنسول می بینید، آرایه در واقع بدون تغییر است.birdscatscats

برای شهودی تر کردن کد، می توانید concat()روش را از یک آرایه خالی به جای catsآرایه فراخوانی کنید:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = [].concat(cats, birds);

اگرچه این نحو شهودی تر است، به احتمال زیاد در بسیاری از کدهای منبع جاوا اسکریپت با این نحو مواجه خواهید شد cats.concat(birds). از کدام نحو استفاده کنیم؟ این تصمیم شما و تیمتان است.

این concat()روش به شما اجازه می دهد تا آرایه های زیادی را که نیاز دارید ادغام کنید. مثال زیر سه آرایه را به صورت یک ادغام می کند:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let dogs = ['wolf', 'dog'];

let animals = [].concat(cats, birds, dogs);
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle', 'wolf', 'dog' ]

اکنون نحوه ادغام آرایه ها را با استفاده از روش یاد گرفته اید concat(). بیایید ببینیم چگونه می توانید آرایه ها را با عملگر spread ادغام کنید.

نحوه ادغام آرایه ها با عملگر spread

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

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = [...cats, ...birds];
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]

در اینجا، می‌توانید ببینید که عناصر از catsو birdsآرایه‌ها به آرایه دیگری گسترش یافته‌اند و آن آرایه به‌عنوان مقدار animalsمتغیر تعیین می‌شود.

هم concat()روش و هم عملگر spread می توانند برای ادغام چندین آرایه به خوبی استفاده شوند.

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

بسته به نتیجه ای که می خواهید به دست آورید، سه راه وجود دارد که می توانید یک آرایه را جستجو کنید:

  1. پیدا کنید که آیا یک عنصر در یک آرایه وجود دارد یا خیر
  2. موقعیت شاخص یک عنصر را در یک آرایه بیابید
  3. مقداری را پیدا کنید که معیارهای خاصی را در یک آرایه برآورده کند

بیایید هر سه روش جستجوی یک آرایه را با هم بیاموزیم. نگران نباشید، آنها ساده هستند.

۱. چگونه بفهمیم که آیا یک عنصر در یک آرایه وجود دارد یا خیر

اگر فقط می خواهید بدانید که آیا عنصر خاصی در یک آرایه وجود دارد، می توانید از includes()روش استفاده کنید. مثال زیر مقدار رشته ‘e’ را در آرایه ای از رشته ها جستجو می کند:

let letters = ['a', 'b', 'c', 'd'];

console.log(letters.include('e')); // false

این includes()متد trueزمانی که عنصر پیدا می شود یا falseزمانی که پیدا نمی شود، برمی گردد.

۲. نحوه یافتن موقعیت شاخص یک عنصر در یک آرایه

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

let letters = ['a', 'b', 'c', 'd'];

console.log(letters.indexOf('c')); // ۲

در اینجا، indexOf()متد در آرایه فراخوانی می شود lettersتا شاخص مقدار ‘c’ را جستجو کند. این متد زمانی برمی‌گردد که عنصر پیدا نشود، اما در این مورد برمی‌گردد ۲چون حرف c در دومین شاخص قرار دارد (به یاد داشته باشید، JS از نمایه‌سازی مبتنی بر صفر استفاده می‌کند، به این معنی که شمارش از ۰ شروع می‌شود، نه از ۱).

۳. نحوه یافتن عناصری که معیارهای خاصی را در یک آرایه دارند

برای یافتن عناصری که معیارهای خاصی را دارند، باید از filter()روش استفاده کنید.

این filter()روش یک روش داخلی است که برای اشیاء آرایه جاوا اسکریپت موجود است که می تواند به شما در فیلتر کردن یک آرایه کمک کند. سینتکس روش به صورت زیر است:

arrayObject.filter(callback, thisContext);

روش دارای دو پارامتر است:

  • callbackالزامی ) – تابع فیلتری که برای هر مقدار آرایه اجرا می شود
  • thisContextاختیاری ) – مقدار thisکلمه کلیدی در داخلcallback

پارامتر thisContextاختیاری است و معمولاً مورد نیاز نیست. شما فقط باید callbackتابع را تعریف کنید که سه آرگومان را می پذیرد:

  • در currentElementحال پردازش به روش
  • عنصری indexکه از آن شروع می شود۰
  • و arrayشیئی که در آن تماس می گیریدfilter()
filterCallback(currentElement, index, array){
  // ...
}

تابع فراخوانی باید شامل یک الگوی اعتبارسنجی باشد که یکی trueیا را برمی گرداند false.

نمونه های روش فیلتر

بیایید نمونه ای از filter()در عمل را ببینیم. فرض کنید یک آرایه به نام زیر دارید stockPrices:

let stockPrices = [۳, ۷, ۲, ۱۵, ۴, ۹, ۲۱, ۱۴];

می‌خواهید قیمت‌ها را فیلتر کنید تا فقط قیمت‌های بزرگ‌تر از ۵ را شامل شود.

در اینجا نحوه انجام این کار با filter()روش است:

let stockPrices = [۳, ۷, ۲, ۱۵, ۴, ۹, ۲۱, ۱۴];

let filteredPrices = stockPrices.filter(function (currentElement) {
  return currentElement > ۵;
});

console.log(filteredPrices); // [۷, ۱۵, ۹, ۲۱, ۱۴]

متد یا یا filter()را ارزیابی می کند currentElementو برمی گرداند .truefalse

اگر تابع پاسخ به تماس شما برگردد true، currentElementبه آرایه نتیجه اضافه می شود:

  • در طول اولین تکرار، the currentElementis ۳so callback برمی گرددfalse
  • در طول تکرار دوم، the currentElementis ۷so callback برمی گردد trueو مقدار به آرایه نتیجه فشار داده می شود
  • تکرار تا آخرین عنصر ادامه خواهد داشت
  • آرایه به دست آمده به filteredPricesمتغیر اختصاص داده می شود

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

نحوه فیلتر کردن آرایه ای از اشیاء

این filter()روش همچنین می تواند روی آرایه ای از اشیاء استفاده شود.

فرض کنید آرایه ای از اشیاء حاوی قیمت های تخیلی سهام و نمادهای آنها مانند شکل زیر دارید:

let stocks = [
  {
    code: 'GOOGL',
    price: ۱۷۰۰,
  },
  {
    code: 'AAPL',
    price: ۱۳۰,
  },
  {
    code: 'MSFT',
    price: ۲۱۹,
  },
  {
    code: 'TSLA',
    price: ۸۸۰,
  },
  {
    code: 'FB',
    price: ۲۶۷,
  },
  {
    code: 'AMZN',
    price: ۳۱۸۲,
  },
];

اکنون باید آرایه را فیلتر کنید تا فقط دارای سهام با priceارزش کمتر از ۱۰۰۰ باشد.

let filteredStocks = stocks.filter(function (currentElement) {
  return currentElement.price < ۱۰۰۰;
});

مقدار filteredStockswill به شرح زیر است:

۰: {code: "AAPL", price: 130}
۱: {code: "MSFT", price: 219}
۲: {code: "TSLA", price: 880}
۳: {code: "FB", price: 267}

در نهایت، شما همچنین می توانید تابع callback را با استفاده از دستور تابع فلش مانند زیر بنویسید:

let filteredStocks = stocks.filter(
  currentElement => currentElement.price < ۱۰۰۰
);

هنگامی که معیارهای فیلتر ساده ای دارید، استفاده از دستور تابع فلش می تواند به شما در نوشتن کد تمیزتر کمک کند.

چگونه یک آرایه را مرتب کنیم

برای مرتب سازی یک آرایه می توانید از sort()روش ارائه شده استفاده کنید که به صورت پیش فرض یک آرایه را به ترتیب صعودی مرتب می کند:

let numbers = [۵, ۲, ۴, ۱];

numbers.sort();

console.log(numbers); // [ ۱, ۲, ۴, ۵ ]

اگر می خواهید یک آرایه را به ترتیب نزولی مرتب کنید، می توانید reverse()متد را بعد از sort()متد مانند شکل زیر فراخوانی کنید:

let numbers = [۵, ۲, ۴, ۱];

numbers.sort().reverse();

console.log(numbers); // [ ۵, ۴, ۲, ۱ ]

این reverse()روش آرایه را معکوس می کند، بنابراین اولین عنصر آرایه آخرین، آخرین عنصر اولین و غیره می شود.

نحوه ایجاد آرایه های چند بعدی

آرایه چند بعدی آرایه ای است که حاوی آرایه دیگری است. برای ایجاد یک آرایه، باید یک آرایه در داخل یک آرایه به صورت لفظی بنویسید (کراکت مربع)

مثال زیر نشان می دهد که چگونه می توانید یک آرایه دو بعدی ایجاد کنید:

let numbers = [[۵, ۶, ۷]];

برای دسترسی به آرایه، فقط باید متغیر را با دو شاخص آرایه فراخوانی کنید. شاخص اول برای آرایه بیرونی و شاخص دوم برای آرایه داخلی است:

let numbers = [[۵, ۶, ۷]];
console.log(numbers[۰][۰]); // ۵
console.log(numbers[۰][۱]); // ۶
console.log(numbers[۰][۲]); // ۷

همانطور که از مثال بالا می بینید، آرایه [۵, ۶, ۷]در اندیس آرایه ۰بیرونی ذخیره می شود []. شما می توانید عناصر بیشتری را در داخل آرایه به صورت زیر اضافه کنید:

let numbers = [[۵, ۶, ۷], [۱۰], [۲۰]];
console.log(numbers[۱][۰]); // ۱۰
console.log(numbers[۲][۰]); // ۲۰

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

توجه کنید که خواندن و دسترسی به مقدار [۲۳]درون آرایه سه بعدی زیر چقدر دشوار است:

let numbers = [[۵, ۶, ۷, [۲۳]]];
console.log(numbers[۰][۳][۰]); // ۲۳

در نهایت، همچنان می توانید از Arrayروش های شی جاوا اسکریپت مانند push()، shift()و unshift()برای دستکاری آرایه چند بعدی استفاده کنید:

let numbers = [[۵, ۶, ۷, [۲۳]]];
numbers.push([۵۰]);
console.log(numbers); // [[۵, ۶, ۷, [۲۳]], [۵۰]]

numbers.shift();
console.log(numbers); // [[۵۰]]

numbers.unshift('۱۳');
console.log(numbers); // ["۱۳", [۵۰]]

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

مثال زیر نحوه گروه بندی nameو ageمقادیر زیر یک آرایه چند بعدی را نشان می دهد:

let users = [
  ['Nathan', ۲۸],
  ['Jack', ۲۳],
  ['Alex', ۳۰],
];

مگر اینکه مجبور به استفاده از یک آرایه باشید، بهتر است از آرایه ای از اشیا برای ذخیره گروهی از داده های مرتبط استفاده کنید:

let users = [
  { name: 'Nathan', age: ۲۸ },
  { name: 'Jack', age: ۲۳ },
  { name: 'Alex', age: ۳۰ },
];

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

برگه تقلب روش های آرایه جاوا اسکریپت

مبتدی‌ها معمولاً از تعداد روش‌هایی که یک آرایه دارد غرق می‌شوند، بنابراین من یک برگه تقلب آماده کرده‌ام که می‌تواند به شما کمک کند تا یک جستجوی سریع در مورد اینکه یک روش انجام می‌دهد را پیدا کنید.

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

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

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