آموزش عملگرها Operators در ES6

آموزش عملگرها (Operators) در ES6:

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

• عملگرها (Operators): وظیفه انجام برخی عملیات ها روی عملوندها را بر عهده دارند.
• عملوند (Operands): در برگیرنده اطلاعات (data) برنامه هستند.

انواع عملگرها (Operator) در جاوا اسکریپت ES6:

عملگرهای جاوا اسکریپت را می توان به دسته های زیر تقسیم کرد:

• عملگرهای ریاضی (Airthmetic Operators).
• عملگرهای رابطه ای (Relational Operators).
• عملگرهای منطقی (Logical Operators).
• عملگرهای مقداردهی مقایسه (Assignment Operators).
• عملگرهای بیت (Bitwise Operators).
• عملگرهای نوع داده ای (Type Operators).
• عملگرهای متفرقه (Miscellaneous Operators).

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

آموزش کار با عملگرهای ریاضی ES6:

عملگرهای محاسباتی (Arithmetic Operators)، اپراتورهای اصلی عملیات های ریاضی هستند که در ES6 و جاوا اسکریپت در دسترس می باشند. این عملگرها، وظیفه انجام کلیه عملیات های ریاضی مثل جمع، تفریق و ... را در اسکریپت ها بر عهده دارند. جدول زیر لیست کامل عملگرهای ریاضی جاوا اسکریپت را شرح داده است:

مثال: در کد مثال عملی زیر، تمامی عملگرهای محاسباتی جاوا اسکریپت را به کار برده ایم:

var x = 30;   
var y = 20 ;  
  
console.log("Addition: " + (x + y) );  
console.log("Subtraction: " + (x - y) );  
console.log("Multiplication: " + (x * y) );  
console.log("The Division will give you the quotient: " + (x / y) );  
console.log("Modulus will give you the Remainder: " + (x % y) );  
// pre-increment   
console.log("Value of x after pre-increment: "  + (++x) );  
// post-increment   
console.log("Value of x after post-increment: " + (x++) );  
// pre-decrement   
console.log("Value of y after pre-decrement: "  + (--y) );  
// post-decrement   
console.log("Value of y after post-decrement: " + (y--) ); 
            

پس از اجرای کد مثال فوق، خروجی زیر نمایش داده می شود:

Addition : 50
Subtraction: 10
Multiplication: 600
The division will give you the quotient: 1.5
Modulus will give you the Remainder: 10
Value of x after pre-increment: 31
Value of x after post-increment: 31
Value of y after pre-decrement: 19
Value of y after post-decrement: 19
            

آموزش کار با عملگرهای رابطه ای ES6:

از عملگرهای رابطه ای (Relational Operators) برای مقایسه دو مقدار (Value) و برگرداندن نتیجه درست (true) یا غلط (false) آن بر حسب عبارت به کار رفته، استفاده می شود. این عملگرها گاهی اوقات عملگرهای مقایسه ای (Comparison Operators) نیز نامیده می شوند.در جدول زیر، لیست کامل عملگرهای رابطه ای ES6 را آموزش داده ایم:

مثال: در کد مثال عملی زیر، کلیه عملگرهای رابطه ای (Relational Operator) زبان ES6 که در جدول بالا تشریح کرده ایم را به کار برده ایم:

var x = 20;   
var y = 15;   
  
console.log("Value of x: " + x);   
console.log("Value of y: " + y);   
var result = x > y;   
console.log("x is greater than y: " + result);   
result = x < y;   
console.log("x is smaller than y: " + result);   
result = x >= y;   
console.log("x is greater than or equal to  y: " + result);   
result = x <= y;   
console.log("x is smaller than or equal to y: " + result);   
result = x == y;   
console.log("x is equal to y: " + result);   
result = x != y;   
console.log("x not equal to  y: " + result);  
            

پس از اجرای دستورات مثال فوق و انجام مقایسه بین مقادیر، خروجی زیر توسط برنامه تولید می شود:

Value of x: 20
Value of y: 15
x is greater than y: true
x is smaller than y: false
x is greater than or equal to  y: true
x is smaller than or equal to y: false
x is equal to y: false
x not equal to  y: true
            

آموزش کار با عملگرهای منطقی ES6:

عملگرهای منطقی (Logical Operators) معمولا برای ترکیب دو یا چند عبارت رابطه ای یا محاسباتی استفاده شده و در نهایت مقادیر بولی (درست یا غلط Boolean Value) شامل درست (true) یا غلط (false) را بر می گردانند. لیست زیر انواع عملگرهای منطقی ES6 و کاربرد آنها را شرح داده است:

مثال: در کد مثال عملی زیر، کلیه عملگرهای منطقی ES6 را در عبارات مختلف به کار برده ایم:

var x = 30;   
var y = 80;   
  
console.log("Value of x = " + x );  
console.log("Value of y = " + y );  
  
var result = ((x < 40) && (y <= 90));   
console.log("(x < 40) && (y <= 90): ", result);   
  
var result = ((x == 50) || (y > 80));   
console.log("(x == 50) || (y > 80): ", result);   
  
var result = !((x > 20) && (y >= 80));   
console.log("!((x > 20) && (y >= 80)): ", result);  
            

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

Value of x = 30
Value of y = 80
(x < 40) && (y <= 90):  true
(x == 50) || (y > 80):  false
!((x > 20) && (y >= 80)):  false
            

آموزش کار با عملگرهای مقداردهی ES6:

عملگرهای مقداردهی یا انتسابی (Assignment Operators) در ES6 برای تخصیص یک مقدار (Value) به یک متغیر (Variable) به کار می روند. عملوند سمت چپ عبارت یک متغیر (Variable) و عملوند سمت راست آن یک مقدار (Value) است که مقدار در متغیر قرار داده می شوند. نوع داده ای (Data Type) عملوند سمت چپ و راست باید با هم یکسان باشند (مثلا هر دو متنی String )، در غیر اینصورت کامپایلر خطا اعلام می کند.
لیست زیر کلیه عملگرهای مقداردهی ES6 را شرح داده است:

مثال: در کد مثال عملی زیر، کلیه عملگرهای انتسابی ES6 را به کار برده ایم:

var x = 20;   
var y = 40;   
  
x = y;  
console.log("After assignment the value of x is:  " + x);   
  
x += y;   
console.log("x+=y: " + x);   
  
x -= y;   
console.log("x-=y: " + x);   
  
x *= y;   
console.log("x*=y: " + x);   
  
x /= y;   
console.log("x/=y: " + x);   
  
x %= y;   
console.log("x%=y: " + x);  
            

پس از انجام عملیات های ریاضی و انتسابی فوق، برنامه خروجی زیر را تولید می کند:

After assignment the value of x is:  40 
x+=y: 80
x-=y: 40
x*=y: 1600
x/=y: 40
x%=y: 0
            

آموزش کار با عملگرهای بیت ES6:

عملگرهای بیتی (Bitwise Operators) در ES6 برای انجام عملیات روی اعداد دو دویی یا الگوهای بیتی که شامل تغییر بیت ها به صورت یک به یک می شود، استفده می گردد. عملگرهای بیتی عملیات را بر روی نمایش یا خروجی آرگومان ها انجام می دهند.
به طور کلی عملگرهای بیتی بسیار کم مورد استفاده قرار گرفته و در برنامه هایی که می خواهند عملکرد سریع و بالایی داشته باشند (hyper performance) کاربرد دارند.
لیست زیر، تمامی عملگرهای بیتی ES6 را به همراه کاربرد آنها شرح داده است:

مثال: در کد مثال زیر، تمامی عملگرهای بیتی ES6 که در جدول فوق شرح دادیم را در عمل به کار برده ایم:

var x = 70; /* 70 = 0100 0110 */  
var y = 80; /* 80 = 0101 0000 */  
var res = 0;  
  
console.log("Value of 70 in binary 0100 0110" );  
console.log("Value of 80 in binary 0101 0000" );  
  
  
res = x & y;       /* 64 = 0100 0000 */  
console.log("Value of x & y = %d\n", res );  
  
res = x | y;       /* 86 = 0101 0110 */  
console.log("Value of x | y = %d\n", res );  
  
res = x ^ y;       /* 22 = 0001 0110 */  
console.log("Value of x ^ y = %d\n", res );  
  
res = ~x;          /*-71 = -0100 0111 */  
console.log("Value of ~ x = %d\n", res );  
  
res = x << 2;     /* 280 = 1000 11000 */  
console.log("Value of x << 2 = %d\n", res );  
res = x >> 2;     /* 17 = 0001 0001 */  
console.log("Value of x >> 2 = %d\n", res );   
            

پس از اجرای دستورات فوق و تغییر بیت ها، خروجی زیر به دست می آید:

Value of 70 in binary 0100 0110
Value of 80 in binary 0101 0000
Value of x & y = 64

Value of x | y = 86

Value of x ^ y = 22

Value of ~ x = -71

Value of x << 2 = 280

Value of x >> 2 = 17
            

آموزش کار با عملگرهای نوع داده ES6:

عملگر نوع داده ای (Type Operators) یک عملگر تک عملوندی است که نوع داده عملوند خود را بر می گرداند. ساختار دستوری استفاده از عملگر Type به صورت زیر است:

typeof(operand)  
            

در جدول زیر، مقدار (Value) ای که برای هر نوع داده ای توسط عملگر Type of در ES6 و جاوا اسکریپت بر می گردد را نشان داده ایم:

مثال: در کد مثال زیر نحوه استفاده از عملگر Type و خروجی تولید شده توسط آن را نشان داده ایم:

var a = 20;  
var b = true;  
var c = 'Hello';  
var d = 'true';  
var e;  
console.log("Variable a is " +typeof(a));  
console.log("Variable b is " +typeof(b));  
console.log("Variable c is a " +typeof(c));  
console.log("Variable d is a " +typeof(d));  
console.log("Variable e is " +typeof(e));  
            

Variable a is number
Variable b is boolean
Variable c is a string
Variable d is a string
Variable e is undefined
            

در کد مثال فوق، متغیر e مقداردهی و در نتیجه تعیین نوع نشده (initialized) و به همین دلیل است که عملگر type of نوع آن را در خروجی غیر مشخص (undefined) نشان داده است.
اگر مقادیر درست یا غلط (Boolean Values) را درون " " یا ' ' قرار دهید، ES6 همانند نوع متنی String با آن برخورد می کند، لذا همانطور که در خروجی کد مثال فوق مشاهده می کنید، با وجود اینکه متغیر d را برابر با ‘true’ قرار داده اید، اما عملگر type of نوع آن را در خروجی String تعیین کرده است.

آموزش سایر عملگرهای زبان ES6:

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

در ادامه هریک از عملگرهای فوق را با ارائه مثال عملی آموزش داده ایم:

کاربرد عملگر منفی (-) در ES6:

این عملگر علامت مقدار (Value) عملوند خود را برعکس می کند، از منفی به مثبت و برعکس. در کد مثال زیر، ابتدا متغیر num1 را برابر 80 قرار داده و سپس توسط عملگر منفی، آن را به 80- تبدیل کرده ایم:

var num1 = 80;  
var num2 = -num1;  
console.log("Value of num1 = " +num1); // It will give 80  
console.log("Value of num2 = " +num2); // It will give -80  
            

Value of num1 = 80
Value of num2 = -80
            

کاربرد عملگر الحاق (+) در ES6:

عملگر الحاق (+) در ES6، عبارت متنی (String) دوم را به عبارت متن اول می چسباند و یک رشته String جدید ایجاد می کند. در کد مثال عملی زیر کاربرد این عملگر را نشان داده ایم:

var str1 = 'Hello' + 'World';  
var str2 = 'Welcome ' + 'Back';  
console.log(str1);  
console.log(str2);  
            

HelloWorld
Welcome Back
            

عملگر الحاق (+) فاصله خالی (Space) بین رشته ها اضافه نمی کند. این عملگر چندین رشته متنی (String) را به هم چسبانده و یک متن جدید تولید می کند. اگر می خواهید بین متن های رشته ای (String) خود، فاصله وجود داشته باشد، بایستی آن را به صورت دستی، خودتان تغیر دهید. در مثال بالا، رشته “Hello Word” فاقد هرگونه فاصله است، اما رشته دوم “Welcome Back” دارای فاصله خالی بین دو کلمه است زیرا خودمان به صورت دستی آن را به رشته اول اضافه کرده ایم.

کاربرد عملگر شرطی ؟ در ES6:

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

variablename = (condition) ? value1 : value2  
            

• شرط (Condition): این بخش شرط عبارت را تعیین می کند که درست یا غلط است.
• Value1: اگر شرط عبارت درست (true) باشد، مقدار Value1 بر می گردد.
• Value2: اگر شرط عبارت غلط (false) باشد، مقدار آن را بر می گرداند.

مثال: در کد مثال زیر دو متغیر num1 و num2 را تعریف و مقداردهی کرده ایم. در شرط عملگر ؟ گفته ایم آیا num1 از num2 بزرگتر است یا خیر. چون جواب شرط درست (true) است، مقدار عبارت اول در خروجی جواب شده است (“yes 30 is greater than zero”):

var num1 = 30;  
var num2 = 20;  
var res = num1 > num2 ? "Yes 30 is greater than 20" : "No It's not";  
console.log(res);  
            

خروجی :

Yes 30 is greater than 20