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>