Detailed explanation of JavaScript operators (1): assignment, arithmetic, compound operators

The JavaScript operators are:

        Assignment operators, arithmetic operators, string operators, logical operators, relational operators, bitwise operators, where assignment operators and arithmetic operators are combined to form compound operators.

1. Assignment operator

        There is only one assignment operator: "=". Used to indicate the meaning of assignment. For example, the statement c=a+b means to assign the value of "a+b" to c, not that c is equal to a+b, which should be distinguished from the concept of equality in mathematics.

2. Arithmetic operators

        There are many arithmetic operators, namely: +, -, *, /, %, ++, --. The following are examples of each operation:

      (1) "+" means "plus". For example, a=1+2, assign the sum of 1 and 2 to the variable a, and "+" can also be used as a string connector, which is explained in "String Operators" below.

        Example z=x+y:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x+y的值。</p> 
<button onclick="myFunction()">点击计算z=x+y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x+y;//计算x+y的值赋给z
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

        (2) "-" means "minus". For example a=2-1, assign the value of 2 minus 1 to the variable a.

        Example z=xy:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x-y的值。</p> 
<button onclick="myFunction()">点击计算z=x-y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x-y;//计算x-y的值赋给z
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

        (3) "*" means "multiplication". For example a=2*1, assign the value of 2 times 1 to the variable a.

        Example z=x*y:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x*y的值。</p> 
<button onclick="myFunction()">点击计算z=x*y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x*y;//计算x*y的值赋给z
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

        (4) "/" means "divide". For example a=2/1, assign the value of 2 divided by 1 to the variable a.

        Example z=x/y:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x/y的值。</p> 
<button onclick="myFunction()">点击计算z=x/y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x/y;//计算x/y的值赋给z
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

        (5) "%" means "remainder". "Remainder" is the "remainder" obtained after dividing two numbers. For example, a=2%1, assign the value of the remainder of 2 to the variable a.

        Example z=x%y:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x%y的值。</p> 
<button onclick="myFunction()">点击计算z=x%y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x%y;//计算x%y的值赋给z
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

        (6) "++" means "self-increment". "Auto increment" means that the value of the specified variable is incremented by 1 on the basis of the original value. There are two forms:

        Type 1: "++" is at the back. For example, a++ means that the variable a is incremented by 1 every time based on the original value. Assuming that a is initially 0, a=3 is obtained after executing a++ three times.

        Type 2: "++" in front. For example, ++a means that the variable a is incremented by 1 every time based on the original value. Assuming that a is initially 0, after executing ++a three times, we get a=3.

        The results obtained by the two forms are the same, the difference is: when a++, the variable a is first calculated and then incremented by 1 , and ++a is the variable a that is incremented by 1 before participating in the calculation.

        Example z=xy, then loop to increment z three times, and then output the result:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x-y的值。之后z自增3次输出</p> 
<button onclick="myFunction()">点击计算z=x-y的值,之后z自增3次输出</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x-y;//计算x-y的值赋给z
	for(var i=0;i<3;i++){
		z++;//z自增 ,换成 ++z 结果一样
	}
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

        (7) "--" means "self-decrement". "Self-decrement" means that the value of the specified variable is decremented by 1 each time on the basis of the original value. There are two forms:

        Type 1: "--" at the back. For example, a-- means that the variable a is decremented by 1 each time based on the original value. Assuming that a is initially 3, execute a-- three times to get a=0.

        Type 2: "--" in front. For example --a, which means that the variable a is decremented by 1 each time based on the original value. Assuming that a is initially 3, execute --a three times to get a=0.

        The results obtained by the two forms are the same, the difference is: a-- When the variable a is first calculated and then decremented by 1 , --a is that the variable a is decremented by 1 before participating in the operation.

        Example z=x+y, then loop to decrement z three times, and then output the result:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x+y的值。之后z自减3次输出<</p> 
<button onclick="myFunction()">点击计算z=x+y的值,之后z自减3次输出</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x+y;//计算x+y的值赋给z
	for(var i=0;i<3;i++){
		z--;//z自减 ,换成 --z 结果一样
	}
	document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>

3. Compound Operators

        Assignment operators and arithmetic operators are combined to form compound operators. Including: +=, -=, *=, /=, %=, >>=, <<=, >>>=, ^=, &=, |= 11 types in total , the first 5 are arithmetic compound operators , more commonly used ; the middle three are bit compound operators ; the last three are logical compound operators.

        Expansion such as:

        x+=y is x=x+y. x-=y is x=xy. x%=y is x=x%y. a>>=b is a=a>>b. a&=b is a=a&b.

        Other compound operators are expanded in the same way.

        The following only takes "%=" as an example for description. The operation methods of other compound operators are the same. You can try and practice by yourself.

(1) Code implementation:

<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x+y的值,之后求z%=x的值</p> 
<button onclick="myFunction()">点击计算z=x+y的值,并输出z%=x的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
	var x=3;//定义x
	var y=2;//定义y
	var z;//定义z
	z=x+y;//计算x+y的值赋给z
	document.write("z=x+y 的值为:" + z );//输出z的值
	document.write("<br>");//换行
	z%=x;//计算z取余x的值再次赋给z
	document.write("z%=x 的值为:" + z );//输出z的值
}
</script>
</body>
</html>

 

(2) Running results:

 

 

Guess you like

Origin blog.csdn.net/m0_54158068/article/details/124437085