JavaScript（第二天）—全栈前端培训

一、Math对象
JS中对象：内置对象、宿主对象、自定义对象

对象是属性与功能的集合。例如把张三看做是一个对象，那么他有身高、体重等等特征，那么这就是属性；还有吃饭、学习、救人的功能，这就是方法。

属性和方法的调用

对象.属性

对象.方法()

Math对象属于内置对象，用来执行数学运算

Math对象的属性：

PI 返回圆周率，3.1415926…

Math对象的方法：

abs() 返回绝对值

ceil() 向上舍入

floor() 向下舍入

round() 四舍五入

max() 获取几个值中的最大值

min() 获取几个值中的最小值

random() 获取0-1之间的随机数

pow(x,y) 返回x的y次幂

sqrt() 返回数的平方根

// Math将自己本身作为对象，来直接调用属性和方法

// 获取圆周率 PI

console.log(Math.PI);// ==> 3.141592653589793

// abs() 获取绝对值

console.log(Math.abs(-10)); //==> 10

console.log(Math.abs(-10.12)); //==> 10.12

// round() 获取四舍五入的值

console.log(Math.round(10.23));// ==> 10

console.log(Math.round(-10.23));// ==> -10 负号后面的值四舍五入之后，再将负号添加上去

console.log(Math.round(10.83));// ==> 11

console.log(Math.round(-10.83));// ==> -11

console.log(Math.round(-1.2));// ===> -1

// ceil() 向上取整

console.log(Math.ceil(10.23));// ==> 11

console.log(Math.ceil(-10.23));// ==> -10

console.log(Math.ceil(10.83));// ==> -11

console.log(Math.ceil(-10.83));// ==> -10

// floor() 向下取整

console.log(Math.floor(10.23));// ==> 10

console.log(Math.floor(-10.23));// ==> -11

console.log(Math.floor(10.83));// ==> 10

console.log(Math.floor(-10.83));// ==> -11

// random() 获取0-1之间的随机数

console.log(Math.random());

// 获取0-10之间的随机数

var ranNum = (Math.random() * 10).toFixed(2); /toFixed(num) 设置保留的小数位数，参数num取值0-20之间，执行的是四舍五入/

console.log(“ranNum:”+ranNum);

// 获取10-20之间随机整数

ranNum = Math.round(Math.random() * (20-10))+10;

console.log(“ranNum:”+ranNum);

// 获取50-100之间的随机整数

// pow(x,y) 获取x的y次幂

console.log(“2的3次方：”+Math.pow(2,3));//==> 2的3次方：8

console.log(“2的100次方：”+Math.pow(2,100));//==> 2的100次方：1.2676506002282294e+30

// sqrt() 获取平方根

console.log(“4的平方根：”+Math.sqrt(4));//==> 4的平方根：2

console.log(“10的平方根：”+Math.sqrt(10));//==>10的平方根：3.162277660168379

// max() min() 获取一系列数字的最大最小值

console.log(“10,20,30,40,1,3,100最大值为：”,Math.max(10,20,30,40,1,3,100));//==>10,20,30,40,1,3,100最大值为： 100

console.log(“10,20,30,40,1,3,100最小值为：”,Math.min(10,20,30,40,1,3,100));//==>10,20,30,40,1,3,100最小值为： 1

练习：

获取10-100之间的随机整数
已知圆的半径r为10，求圆的面积。公式：π*r² 要求最终保留两位小数
已知圆锥的底面半径r为10，圆锥的高度为100，求圆锥的体积。并将这个结果输出到页面

计算圆锥体积的公式是：体积V=1/3πr2*h

二、运算符的介绍
表达式的构成：由运算元和运算符组成；

2.1 算术运算符

- - / %(取模，取余) ++(自增) --(自减)

// 算术运算符 + - * / %(取模，取余) ++(自增) --(自减)

// 纯数值类型之间运算

// console.log(10+20);

// console.log(10-20);

// console.log(10*20);

// console.log(10/20);

// console.log(10%20);

// 数值类型与字符串类型的运算 + 字符串拼接除+外，数字字符串会默认转成数值类型进行数学运算

// console.log(10+“20”);//1020

// console.log(“10”+20);//1020

// console.log(“10”+“20”);//1020

// console.log(10+“hello”);//10hello

// console.log(10+“hello”+20);//10Hello20

// console.log(10-“20”);//-10

// console.log(10-“hello”*20);//NaN

// 数值类型与布尔类型 true隐式转换成1 false隐式转换成0

// console.log(10+true);

// console.log(10+false);

// console.log(10-true);

// console.log(10-false);

// console.log(10/true); // 10

// console.log(10/false);// Infinity 无限大

// console.log(10*true);// 10

// console.log(10*false);// 0

// console.log(10%true);//0

// console.log(10%false);//NaN

// null 和数值类型 null默认转为0进行运算

// console.log(null + 10);//10

// console.log(10 + null);//10

// console.log(10/null);//Infinity

// undefined 和数值类型 undefined不会进行隐式的转换

// console.log(undefined + 10);//NaN

// console.log(10 + undefined);//NaN

// console.log(10*undefined);//NaN

// NaN 和其它进行运算

// console.log(NaN-10);//NaN

// console.log(NaN+10);//NaN

// console.log(NaN - “Hello”);//NaN

// console.log(NaN + “Hello”);//NaNHello

// Infinity 和其它进行运算

console.log(Infinity + “Hello”);//InfinityHello

console.log(Infinity + “10”);//Infinity10

console.log(Infinity + 100);//Infinity

console.log(Infinity / 100);//Infinity

console.log(Infinity == Infinity);//true

console.log(Infinity === Infinity);//true

前++ 与后++ 、前-- 与后–

var a = 10,

b = 20,

//后++ 先执行赋值运算在自增1

c = a++,//a++ ==> a = a + 1 // c = 10 a = 11

//前++ 先自增1再进行赋值运算

d = ++b,//++b ==> b = b + 1 // d = 21 b = 21

e = --a,//–a ==> a = a -1 // e = 10 a = 10

f = b–;//b-- ==> b = b -1 // f = 21 b = 20

console.log(“a:”,a,“b:”,b,“c:”,c,“d:”,d,“e:”,e,“f:”,f);//a: 10 b: 20 c: 10 d: 21 e: 10 f: 21

2.2 比较运算符

< <= >= == != === !===

面试题：“=”、“”、“=”区别

“=” 赋值运算符，进行赋值运算

“==”比较运算符，比较的是两边的值是否相同，忽略数据类型

“===”比较运算符，比较的是两边的值和数据类型是否相同

比较运算符比较的结果是一个布尔值

// console.log(10>20);//false

// console.log(10==20);//false

// console.log(10 < 20);//true

// console.log(10 <= 20);//true 10 < 20 或者 10 == 20 有一个满足条件即可

// console.log(20 >= 20);//true

// 纯数值类型和字符串

// console.log(10 == “hello”);//false

// console.log(10 == “10”);//true

// console.log(10 === “10”);//false

// 纯数值与布尔值进行比较

// console.log(20 > true);//true

// console.log(1 == true);//true

// console.log(1 === true);//false

// console.log(true >= false);//true

// console.log(10 >= “hello”);//false

// console.log(10 <= “a”);//false

// console.log(true < ‘A’);//false

// console.log(10-“a”);//NaN

// console.log(Number(‘a’));//NaN

// 字符串数字和纯数值类型的比较

// console.log(10 < “20”);//true

// console.log(10 < “5”);//false

// console.log(‘16’ < ‘5’);//true ASCII码字符串数字的比较，按照字符串中数字出现的顺序逐一按照ACSII码逐一进行比较

// console.log(‘20’ < ‘a’);//true

// 特殊的比较

// console.log(NaN == NaN);//false

// console.log(NaN > NaN);//false

// console.log(NaN < NaN);//false

// console.log(NaN < 10);//false

// console.log(Infinity === Infinity);//true

// console.log(Infinity > Infinity);//false

// console.log(null == undefined);//true

// console.log(null === undefined);//false

// console.log(null == 0);//false

// console.log(null == “”);//false

2.3 逻辑运算符
逻辑与：& &&

逻辑或：| ||

逻辑非！

&& 、 || 具有短路的效果

&& & 两边值同时为真才为真

|| | 两边只要有一个为真即为真

特殊情况：

其他非布尔值也可以参与逻辑运算，参与的时候，会自动转换成布尔值进行运算，返回的结果就不一定是布尔值。

NaN、0、null、“”、undefined会转换成false参与运算。

非0 数字、非空字符串都会转成true参与运算

// 逻辑运算符 & && | || !

// & && 两边同时为真才为真

// console.log(true && true);//true 1

// console.log(true && false);//false

// console.log(false && true);//false 0

// console.log(false && false);//false

& 与 && 区别：

&& 具有短路效果，执行效果较高；当左边值为false的时候，直接给出结果false，不再判断右边的值；但是&还会继续判断后面的值

&& 布尔值比较结果为 true 和 false ; & 布尔值比较结果 0 和 1

// | || 两个有一个满足即满足

// console.log(true || false);//true 1

// console.log(false || true);//true

// console.log(false || false);//false 0

// console.log(true || true);//true

// 逻辑运算符和比较运算符的综合：比较运算符 > 逻辑运算符

// console.log(!true);//false

// console.log(!false);//true

console.log(10 > 20 && 20 == 30);// false && false

console.log(10 <= 20 && 20 == “20”);//true && true

V_haomei0452

发布了68 篇原创文章 · 获赞 0 · 访问量 5298

私信关注

JavaScript（第二天）—全栈前端培训

猜你喜欢