‎‎تكرار در آرايه جاوااسكريپتJavaScript Array Iteration -‎

‎‎متدهاي تكرار در آرايه ها ، روي هر عنصر آرايه عملي انجام ميدهند.

‎‎متد‎forEach()‎‎ آرايهJavaScript Array forEach()‎ -‎

‎‎متد‎‎forEach( )‎‎ آرايه، براي هر عنصر تابعي را فراخواني ميكند .

‎‎مثال ـ‎forEach( ) ‎ آرايه

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎در مثال بالا فقط مقادير آرايه مورد استفاده ميگيرند، مثال فوق را بصورت زير ميتوان ‎بازنويسي كرد.

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

‎‎متد‎map()‎‎ آرايه JavaScript Array map()‎ -‎

‎متد‎‎map()‎‎آرايه اي را مطابق نتيجه كاري كه تابع روي عناصر ‎آرايه انجام ميدهد، ايجاد ميكند.

‎‎متد فوق تابع را بدون مقدار عناصر آرايه اجرا نميكند.

‎‎متد‎‎map()‎‎‎ آرايه اصلي را تغيير نميدهد .

‎‎مثال ـ عناصرآرايه در2 ضرب وآرايه جديد ساخته مي شود.

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe arayy itself -‎
‎

‎‎در هنگام برگشت تابع فقط ازvalue استفاده ميشود، وindex وarray ناديده گرفته ميشوند .

‎‎مثال ـ‎map()‎‎ با تابع فقط داراي آرگومانvalue

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

‎‎متدflatMap()‎ آرايهJavaScript Array flatMap()‎ -‎

‎‎متد‎‎flatMap()‎‎‎ براي جاوااسكريپت درES2019 اضافه شده است .

‎متد‎‎flatMap()‎‎‎در ابتدا آرايه را براساس آرگومان ‎تبديل وآرايه مسطح‎(flat)‎ جديد ايجاد ميكند.

‎‎مثالflatMap()‎ -‎

const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);

‎‎پشتيباني مرورگرBrowser Support -‎

‎متد‎‎flatMap( ) ‎‎ جاوااسكريپت از ژانويه‎2020‎ در تمام ‎مرورگرهاي مدرن پشتيباني ميشود.

‎

‎‎69.0‎ sep 2018‎	‎‎79.0‎ Jan 2020‎	‎‎62.0‎ se p 2018‎	‎‎12.0‎ sep 2018‎	‎‎56.0‎ Sep 2018‎

‎‎متد‎filter( )‎ آرايه JavaScript Array filter( ) -‎

‎متد‎‎filter( )‎‎ آرايه ، آرايه جديدي از عناصريكه در شرط صادق هستند ‎ايجاد ميكند.

‎‎مثال ـ آرايه جديدي از عناصر آرايهnumbers كه مقدار عنصر بزرگتر از8 باشد، ساخته ميشود .

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
} 

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎‎در هنگام برگشت تابع فقط ازvalue استفاده ميشود، وindex وarray ناديده گرفته ميشوند .

‎‎مثال ـ‎filter()‎‎ با تابع فقط داراي آرگومانvalue

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
} 

‎‎متد‎reduce( )‎ آرايهJavaScript Array reduce()‎ -‎

‎متد‎‎reduce( )‎‎ تابعي را روي هرعنصر آرايه اجراكرده و درنهايت ‎يك مقدار توليد مي نمايد. ‎متد فوق روي آرايه از چپ براست اقدام ميكند.

‎‎مثال ـ جمع عناصر آرايه با‎reduce()‎‎

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
} 

‎‎توجه كنيد كه تابع داراي چهار آرگومان است:

‎
• ‎‎جمع ـ‎)‎ total مقدار اوليه همان مقدار برگشتي مرحله قبلي است‎ (‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎در مثال بالا فقط مقادير آرايه مورد استفاده قرار ميگيرند .مثال فوق را بصورت زير ميتوان ‎بازنويسي كرد.

‎‎مثال ـ تابع با دو آرگومانtotal, value

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
} 

‎‎متد‎‎reduce( )‎‎ ميتواند داراي مقدار اوليه باشد .

‎‎مثال ـ متد‎reduce()‎‎ با مقدار اوليه

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
} 

‎‎متدreduceRight()‎ آرايه Javascript Array reduceRight( ) -‎

‎متد‎‎reduceRight( ) ‎‎براي هر عنصر آرايه تابع را اجرا نموده ودر ‎نهايت يك مقدار توليد وبرگشت مي دهد .حركت روي عناصر آرايه ازراست به چپ ميباشد .اين متد ‎همچنين آرايه اصلي را تغيير نمي دهد.

‎‎مثال ـ پيداكردن جمع عناصر آرايه با‎reduceRight()‎‎

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
} 

‎‎توجه كنيد كه تابع داراي چهار آرگومان است:

‎
• ‎‎جمع ـ‎)‎ total مقدار اوليه همان مقدار برگشتي مرحله قبلي است,‎ (‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎در مثال بالا تابع از پارامترهايindex وarray استفاده نكرده است .آنرا ميتوان مطابق زير ‎بازنويسي كزد.

‎‎مثال ـ تابع با دو پارامتر

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
} 

‎‎متد‎every( )‎ آرايه JavaScript Array every( ) -‎

‎متد‎‎every( )‎‎ همه عناصر آرايه كنترل كرده كه شامل تست هستند ‎يا خير.

‎‎مثال ـ عناصر آرايه درصورتيكه همه بزرگتر18 باشند، پيغامtrue برگشت ميشود .

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
} 

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe arayy itself -‎
‎

‎هنگاميكه يك تابع فراخوان فقط از اولين پارامتر‎(value)‎ استفاده ميكند، ميتوان ‎مابقي پارامترها را حذف كرد .مطابق زير:

‎‎مثال ـ استفاده ازتابع فقط باvalue

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
} 

‎‎متد‎som( )‎ آرايه JavaScript Array some( ) -‎

‎‎متد‎‎some( )‎‎كنترل ميكند كه بعضي از عناصر تست را صادق باشند .

‎‎مثال ـ تست بزرگتر از18 براي بعضي ازعناصر آرايه

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
} 

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎‎متد‎indexOf( )‎ آرايه JavaScript Array indexOf( ) -‎

‎متد‎‎indexOf( )‎‎ جستجوي عنصر درآرايه با مقدار مشخص كه انديس آنرا ‎برگشت ميدهد.

‎‎مثال ـ جستجوي يك آرايه براي مقدار‎"Apple‎"‎برگشت موقعيت عنصر

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

‎‎نحوي كلي متد‎indexOf( )‎

‎array.indexOf(item,start )

‎
• ‎item‎ـ ضروري بوده و مورد جستجو را مشخص ميكند .
• start‎ـ اختياريست ومشخص ميكند كه جستجو ازكدام محل بايد شروع شود .اگر اين منفي باشد، شمارش ‎ازانتهاست.اگر مثبت باشد، شمارش از ابتداست.
‎

‎در متد‎‎Array.indexOf( )‎‎ اگر عنصر پيدا نشود‎-‎1‎ برگشت ‎ميشود.

‎‎اگر مورد بيش از يكباروجود داشته باشد، موقعيت اولين رخداد را برميگرداند.

‎‎متد‎lastindexOf( )‎ آرايهJavaScript array lastindexOf( ) -‎

‎‎Array.lastindexOf( )‎‎‎مشابه با ‎‎Array.indexOf( ) ‎‎‎است .اما آن موقعيت آخرين وقوع تطبيق را برگشت ‎ميدهد.

‎‎مثال ـ جستجو براي عنصر‎"Apple‎"‎در آرايه

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

‎
• ‎item‎ـ ضروري بوده و مورد جستجو را مشخص ميكند .
• start‎ـ اختياريست ومشخص ميكند كه جستجو ازكدام محل بايد شروع شود .اگر اين منفي باشد، شمارش ‎ازانتهاست.اگر مثبت باشد، شمارش از ابتداست.
‎

‎‎متد‎find( )‎ آرايهJavaScript Array find( ) -‎

‎متد‎‎find( ) ‎‎مقدار اولين عنصريكه با شرط تابع منطبق باشد، برگشت ‎ميدهد.

‎‎مثال ـ اولي عنصريكه مقدارش بزرگتر‎18‎ باشد، برگشت ميدهد .

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
} 

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎متد‎‎find( )‎‎ از امكاناتES6 در جاوااسكريپت‎2019‎ است.

‎‎آن بوسيله مرورگرهاي مدرن پشتيباني ميشود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎متد فوق بوسيله انترنت اكسپلورر پشتيباني نميشود.

‎‎متد‎findIndex( )‎ آرايهJavaScript array findIndex( ) -‎

‎متد‎‎findIndex( )‎‎ ،انديس اولين عنصريكه با شرط تابع منطبق باشد ‎برگشت ميدهد.

‎‎مثال ـ انديس اولين عنصر كه مقدارش بزرگتر از‎18‎ باشد، برگشت ميشود.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
} 

‎‎توجه كنيد كه تابع داراي سه آرگومان است:

‎
• ‎‎مقدار عنصر ـThe item value
• ‎‎انديس عنصرThe item index -‎
• ‎‎خود آرايهThe array itself -‎
‎

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎متد‎‎find( )‎‎ از امكاناتES6 در جاوااسكريپت‎2019‎ است.

‎‎آن بوسيله مرورگرهاي مدرن پشتيباني ميشود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎متد فوق بوسيله انترنت اكسپلورر پشتيباني نميشود.

‎ JavaScript Array.from()

‎متد‎‎Array.from( )‎‎ ازهرشئي با ويژگي length ،يا شئ تكرارپذير ‎يك شئ آرايه برگشت ميدهد.

‎‎مثال ـ ايجاد آرايه از رشته

Array.from("ABCDEFG");

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎‎from( ) ‎‎‎ازامكانات ‎ES6 (JavaScript 2015)‎ است .

‎‎متد فوق در مرورگرهاي مدرن پشتيباني مي شود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎متد فوق در انترنت اكسپلورر پشتيباني نمي شود.

‎‎متد‎Keys()‎‎ آرايه JavaScript Array Keys( ) -‎

‎‎متد‎‎Keys( )‎‎ از كليدهاي آرايه ، يك شئ آرايه ليترالي برگشت ميدهد .

‎‎مثال ـ ايجاد شئ آرايه ليترالي از كليدهاي آرايه

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎‎Keys( ) ‎‎‎ازامكانات‎ES6 (JavaScript 2015)‎ است.

‎‎متد فوق در مرورگرهاي مدرن پشتيباني مي شود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎متد فوق در انترنت اكسپلورر پشتيباني نمي شود.

‎‎متد‎entries( )‎ آرايه JavaScript Array entries()‎ -‎

‎‎مثال ـ ايجاد آرايه ليترالي از آرايه و حلقه براي خروج زوج‎key/value‎

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

‎متد‎‎entries( )‎‎يك شئ ليترالي با زوج key/value مطابق زير ايجاد ‎ميكند.

‎[0,"Banana"]

‎[1,"Orange"]

‎[2,"Apple"]

‎[3,"Mango"]

‎‎متد فوق آرايه اصلي راتغيير نمي دهد.

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎‎Keys( ) ‎‎‎ازامكانات‎ES6 (JavaScript 2015)‎ است.

‎‎متد فوق در مرورگرهاي مدرن پشتيباني مي شود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎متد فوق در انترنت اكسپلورر پشتيباني نمي شود.

‎‎متد‎includes( )‎ آرايه JavaScript array includes( ) -‎

‎متد‎‎includes( )‎‎ درECMAScript 2016 براي آرايه ايجاد شده است ‎با آن اجازه داده مي شود، كه وجودعنصري را در آرايه كنترل شود .اگر عنصر همNaN يا برخلاف indexOf‎است، نشان دهد .

‎‎مثال ـ كنترل وجود‎"Mango‎"‎در آرايه

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

fruits.includes("Mango"); // is true 

‎‎نحوي متد‎includes( ) ‎

‎‎array.includesT(serch-‎item)‎‎

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎‎includes( ) ‎‎‎ازامكانات‎ES6 (JavaScript 2015)‎ است.

‎‎متد فوق در مرورگرهاي مدرن پشتيباني مي شود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎گسترش آرايهJavaScript Array Spread(....) -‎

‎‎عملگر... يك تكرار پذير مثل آرايه را به عناصر بيشتري گسترش ميدهد.

‎‎مثال ـ گسترش آرايه

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

‎‎پشتيباني مرورگرBrowser Support -‎

‎عملگر... ازامكانات‎ES6 (JavaScript 2015)‎ است. ‎و در مرورگرهاي مدرن پشتيباني مي شود.

‎

‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎	‎Yes‎

‎‎عملگر فوق در انترنت اكسپلورر پشتيباني نمي شود.

JS Tutorial آموزش جاوااسکریپت

JS Objects اشیاء جاوااسکریپت

JS Functions توابع جاوااسکریپت

JS Classes کلاسهای جاوااسکریپت

JS Async ناهمزمانی جاوااسکریپت

JS HTML DOM شئ دام

JS Browser BOM شئ مرورگر

JS Web APIs رابط های اپی آی وب

JS AJAX آجکس وجاوااسکریپت

JavaScript JSON

JavaScript vs JQuery

JS Graphics گرافیک جاوااسکریپت

JS References فهرست مطالب