JavaScript入门第四章（运算符与表达式上 ）

Posted 海海呐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript入门第四章（运算符与表达式上 ）相关的知识，希望对你有一定的参考价值。

1.js中+号的作用

  • 字符串连接符 ：连接字符串

  • * 条件 ： +号两边只要有一边是string类型
* 算术加法

  • 条件 : +号两边都是number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /* js中+号  两个作用 
        1. 字符串连接符 ： 连接字符串
            * 条件 ： +号两边只要有一边是string类型
        2. 算术加法
            * 条件 : +号两边都是number类型
    */

    //1 字符串连接符：将 + 号 两边的字符串连接在一起组成一个新的字符串
    //前提条件：  + 号的两边，只要有一边是string类型
    let name = '海海';
    //console.log ( "我的名字是name" );//此时name是字符串的一部分，无法取到变量的值
    console.log ( "我的名字是:" + name);

    //示例：
    let res1 = '10' + 10;
    console.log ( res1 );//1010

    //2.数学加法
    //前提条件： 当 + 号两边都是number类型的时候，代表数学加法运算
    let res2 = 10 + 10;
    console.log ( res2 );//20

</script>
</body>
</html>

 2.算术运算符与算术表达式

  • 运算符只是一种运算的符号，由运算符参与的式子称之为表达式

  • 表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存

<script>
    /**1.算术运算符：数学中的算术运算
     +：加法
     -：减法
     *：乘法
     /：除法
     %：求余（求模运算）

     2.运算符只是一种运算的符号，由运算符参与的式子称之为表达式
     3.算术表达式（运算式）：由算术运算符组成的式子    例如： 数字1 + 数字2
     4.表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存
     5.算术运算符的优先级与小学数学学的一致：小括号>乘除模>加减
     */

    /**加法*/
    console.log ( 1 + 1 );		//直接打印算术表达式的结果
    let num = 100 + 50;			//用变量保存表达式的结果
    console.log ( num );		//150

    /**减*/
    console.log ( 2 - 1 );		//1 数值

    /**乘法*/
    console.log ( 20 * 3 );		//60

    /**除法
     * 1.如果两数相除的结果是一个无理数（无限不循环小数）或者无限循环小数，则无法完整的表示所有的小数
     一般这种情况不影响开发，可以忽略
     * 2.数学中0不能作为除数，JS里也一样
     如果作为除数会得到一个关键字：Infinity，代表无穷大的意思
     */
    console.log ( 10 / 3 );		//3.333333
    console.log ( 10 / - 2 );	//-5
    console.log ( 10 / 0 );		//Infinity无穷大

    /**求模*/
    console.log ( 10 % 3 );		//1



</script>

3.复合算术运算符

  • 符合算术运算符是算术运算符的一种简写形式

  • num += 5 只是 num = num + 5的简写形式，他们之间完全等价

  • +=: 在自身值的基础上再加多少

  • -=：在自身值的基础上减多少

  • *=: 在自身值的基础上乘多少

  • /=: 在自身值的基础上除多少

  • %=：在自身值的基础上模多少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /**复合算术运算符：简化算术运算的代码
        +=: 在自身值的基础上再加多

        -=：在自身值的基础上减多

        *=: 在自身值的基础上乘多

        /=: 在自身值的基础上除多
        
        %=：在自身值的基础上模多少
     */
    // +=
    let num1 = 10;
    num1 += 10;				//这行代码相当于 num1 = num1 + 10 的简写形式
    console.log ( num1 );	//20
    
    // -=
    let num2 = 70;
    num2 -= 10; 			//相当于  num2 = num2 - 10;
    console.log(num2);		//60
    
    // *=
    let num3 = 20;
    num3  *=  4;  			//相当于  num3 = num3 * 4;
    console.log(num3);		//80
    
    // /=
    let num4 = 90;
    num4 /= 3;				//相当于 num4 = num4 / 3
    console.log(num4);		//30

    // %=
    let num5 = 10;
    num5 %= 3; 				// num5 = num5 % 3;
    console.log(num5);		//1
    
	// 注意：不管是哪种复合运算，都是左边与右边的结果进行运算
    let num6 = 10;
    num6 -= 10 - 5;			//相当于 num6 = num6 - (10 - 5)
    console.log(num6);		//5

</script>

</body>
</html>

 4.自增/自减运算符

  • 1.自增/自减都称之为自操作运算

    • ++：自增，自己+1

    • --：自减，自己-1

  • 2.自操作运算都是一元表达式，即只有一个变量参与运算

  • 3.自操作运算不能用于直接量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    //1.自增运算符 ++
    //后置自增表达式:   num++
    let num1 = 10;
    num1++;					//这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );	//11
    
	//2.前置自增
    let num2 = 20;
    ++num2;					//这行代码相当于 num2 = num2 + 1 的简写形式
    console.log( num2 );	//21
   
    
	//注意：以上内容说明：如果自操作是独立一行代码，不参与其他运算或者输出，那么
	//前置和后置没有区别    
    
    //3.前置和后置区别
    let num3 = num4 = 1;	//1赋值给num4，然后赋值给num3，相同值的不同变量简写初始化
    console.log(num3++);	//1 先保留num3的原始值1，用于输出，然后自增为2
    console.log(++num4);	//2 先运算num4自增，num4为2，然后2用于输出
    
    console.log(num3,num4);	//2 2
    //注意：以上内容说明：如果自操作是与其他操作一起运算，那么
    //前置会先改变自己，后参与其他运算；后置是先保留自己参与运算，后改变自己
    
    
</script>
</body>


</html>

 --自操作与++操作一致，只是操作的结果是自身的值 - 1

<script>
	//1.自减运算符 --
    //自减表达式： num--
    let num5 = 20;
    num5--;					//这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );	//19
    
    //2.前置自减
    let num6 = 40;
    --num4;
    console.log( num6 );	//39
    
    //3.自减操作参与其他运算
    let num7 = num8 = 1;
    console.log(num7--,--num8);	//1 0
</script>

 5.Math高级数学计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /** 
     1. Math作用 ： 高级数学计算

     2. 常用
        a. Math.ceil(数字) ：向上取整 
        b. Math.floor(数字) ：向下取整 
        c. Math.max(数字1,数字2,...) ：求最大值
        d. Math.min(数字1,数字2,...) ：求最小值
        e. Math.random() ：返回 (0,1) 之间的小数
    */

    //1.圆周率
    let pi = Math.PI;
    console.log ( pi );						//3.1415926.....
    //2.绝对值:一个数字与坐标原点的距离
    console.log ( Math.abs ( - 2 ) )		//2
    //3.天花板函数：向上取整
    console.log ( Math.ceil ( 10 ) );		//整数得到自身
    console.log ( Math.ceil ( 10.1 ) );		//11,小数则向上取整
    console.log ( Math.ceil ( -10.1 ) );	//-10
    //4.地板函数: 向下取整
    console.log ( Math.floor( 8 ) );		//8 整数得到自身
    console.log ( Math.floor ( 7.9 ) );		//7,小数则向下取整
    console.log ( Math.floor ( -7.9 ) );	//-8
    //5.四舍五入取整
    console.log ( Math.round ( 4.5 ) )		//5
    console.log ( Math.round ( 3.3 ) )		//3
    console.log ( Math.round ( - 9.9 ) )	//-10
    //6.求最大值。  数值数量不限使用逗号分割
    console.log ( Math.max ( 50, 99, 888, 123 ) )	//888
    //7.求最小值。  数值数量不限使用逗号分割
    console.log ( Math.min ( 50, 99, 888, 123 ) )	//50
    //8.生成一个随机数  范围 0 - 1 之间的小数
    console.log ( Math.random () );
    //如果想得到0-100之间的整数  可以乘以一百然后向下取整即可
    console.log ( Math.floor ( Math.random () * 100 ) );
    //9.幂运算 Math.pow(x,y)  返回x的y次幂
    console.log ( Math.pow ( 2, 8 ) );				//256    2的八次方

</script>
</body>
</html>

6.常量const关键字【ES6】

  • 1.let关键字定义的叫做变量，变量的值可以随时随地随便改变

  • 2.有的数据希望一开始定义好，后面就不发生变化，那就需要用到const关键字

    • const是ES6的语法规范（为大型项目而生）

    • const声明的叫做常量（固定量）

    • 常量在声明的时候就必须赋值，且后续不再可以改变（只能使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /** 
     1. const定义常量，固定不让变化（只能使用）
    */


    //1.圆周率
    let pi = Math.PI;	 	// pi为3.141592653589793
    pi = 3.14;				// pi改为3.14
    
    const PI = Math.PI;
    //PI = 3.14;			// 语法错误


</script>
</body>
</html>

7.模板字符串【ES6】

  • ES6提供了一种新的写描述字符串的方式：反引号（数字键1旁边的英文状态下的符号）

  • 作用

    • 和引号标记字符串的效果一样

    • 可以解决引号字符串过长不能换行的问题

    • 可以解决字符串连接需要使用+号的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1.引号字符串，不方便换行（保留结构）
    /*
    	使用引号字符串实现div输出
    	<div class="goods">
    		<a href="#">你好呀</a>
    	</div>
    */
    
    //写在一行太长，且没有结构感，所以一般使用+号连接字符串
    let str = '<div class="goods">';
    str += '<a href="#">你好呀</a>';
    str += '</div>';
	
    document.write(str);
    
    //2.模板字符串就可以直接换行保护结构
    let str = `<div class="goods">
    		<a href="#">你好呀</a>
    	</div>`;
    
    document.write(str);
   
	//3.模板字符串里面可以方便解析变量，简化字符串的拼接
    let data = '你好呀';
    
    let html = `
		<div class="goods">
			<a href="#">${data}</a>
    	</div>
	`

    //注意：后面框架经常使用模板字符串方式   
	
</script>
</body>
</html>

 上一章：JavaScript入门第三章（数据类型与直接量 ）

 下一章：JavaScript入门第五章（运算符与表达式下）​​​​​​​

以上是关于JavaScript入门第四章（运算符与表达式上 ）的主要内容，如果未能解决你的问题，请参考以下文章

集中营易语言视频教程（更新到80）

编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器结语

JavaScript基础入门教程

C++从入门到入土第四篇：类与对象（中篇）

java基础第四节(表达式与运算符)

java基础第四节(表达式与运算符)