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>
