javascript基础/math对象

最新推荐文章于 2021-12-18 09:18:11 发布

冲呀web

最新推荐文章于 2021-12-18 09:18:11 发布

阅读量303

点赞数 1

分类专栏：前端三剑客文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44698566/article/details/105955645

版权

前端三剑客专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、javascript简介

1.1 用途：
数据验证
读写HTML元素
与浏览器窗口及其内容的交互效果
网页特效
WEB游戏制作
基于Node.js技术进行服务器端编程

1.2 Javascript简史
在WEB日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种简单的验证。
1995年，就职于Netscape 公司的布兰登·艾奇（Brendan Eich），开始着手为即将于1996年2月发布的Netscape Navigator 2浏览器开发一种名为LiveScript 的脚本语言。为了尽快完成LiveScript 的开发，Netscape 与Sun 公司建立了一个开发联盟。在Netscape Navigator 2 正式发布前夕，Netscape 为了搭上媒体热炒Java 的顺风车，临时把LiveScript 改名为JavaScript。
由于JavaScript1.0获得的关注度越来越高，1996年，微软就在其Internet Explorer 3 中加入了名为JScript 的JavaScript 实现，这意味着有了两个不同的JavaScript 版本，导致JavaScript没有一个标准化的语法和特性。
1997 年，以JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）。该协会指定39 号技术委员会（TC39，Technical Committee #39）负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了ECMA-262标准，定义一种名为ECMAScript的新脚本语言。

布兰登·艾奇（1961年～），JavaScript的发明人，目前（2005年至2014年）在Mozilla公司担任CTO。2014年4月3日，出任Mozilla的CEO十天就被迫辞职。

1.3 ECMAScript版本发展
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。

1.4 ECMAScript脚本语言
Javascript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。
在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。
JavaScript是由ECMAScript，DOM和BOM三者组成的。
在这里插入图片描述

二， js基础

2.1 js书写位置
1.可以通过script标签直接书写js,该标签可以书写在body底部；还可以书写在head标签
该标签有一个type属性值“text/javascript”表示js是纯文本文件

⦁	<script type="text/javascript">
⦁	alert("弹出框");
⦁	</script>

2 .可以通过js文件外部引入

js文件扩展名.js

1.	<script type="text/javascript" src="01.js">
2.	</script>

2.2 注释
单行注释：ctrl + /

	//只能注释单行文本

多行注释：ctrl + shift + /

⦁	/*   
⦁	    多行注释
⦁	
⦁	*/

2.3 alert
js内置的方法。弹出框
window是js内置对象
window.alert() ---- 对象.方法()

⦁ alert(): alert后面直接书写小括号，小括号内部书写内容文本，用双引号包裹文本内容。

1.	alert("alert是弹出框");

⦁ js分号重要性
js语句结束必须书写分号。
js解析器解析原理：逐条解析js语句，遇见分号表示语句结束。如果没有分号不能正确判断语句结束。

1.	// js语句结束必须添加分号
2.	// 去掉分号下面语句也可以正常执行
3.	alert("第一句")
4.	alert("第二句")
5.	alert("第三句")

js在提交时，需要将所有语句压缩，去掉空格，缩进，换行，语句报错

1.	// 去掉换行语句报错
2.	alert("第一句")alert("第二句")alert("第三句")

在这里插入图片描述

分号作用：语句结束，提高解析器效率

⦁ js执行顺序从上到下顺序执行
⦁ js语句对空格，缩进，换行也不敏感

⦁	// alert()方法
⦁	// js语句对空格，缩进，换行不敏感  逐条书写语句
⦁	alert("提示文本1");     
⦁	alert("提示文本2");					
⦁	alert("提示文本3");

2.4 console控制面板
console控制面板：
汇总js错误信息：js错误类型，js错误数量，js错误位置

在这里插入图片描述

console是js内置对象。
具有一个log()方法日志
console.log(): 在console面板输出内容
在这里插入图片描述

可以直接写在面板中
在这里插入图片描述

可以进行运算
在这里插入图片描述

2.5 字面量
字面量：表示固定的值，字面看到什么就是什么
分类：数字，字符串，布尔值，undefined,null
数字是蓝色，字符串黑色
⦁ 数字
分类：整数，浮点数，特殊值
⦁ 整数
整数表示方法：十进制，八进制，十六进制
在console面板输出的结果和参与数学运算时都是十进制

八进制：0,0o,0O (逢八进一) 有效数字0-7

1.	console.log(01);
2.	console.log(010);
3.	// 数位：从最后一位开始8的0方，8的1次方，8的2次方，……
4.	// 将八进制换成十进制  前面数字*对应的数位相加
5.	console.log(0100);
6.	console.log(0o321);

在这里插入图片描述

如果前缀是0后面有超过7数字，js不报错，
例如：089-》89强制转为十进制
在这里插入图片描述

如果前缀是0o,0O后面有超过7数字，js报错

在这里插入图片描述

十六进制：0x,0X（逢十六进一）
0 - 9
10 -> a
11 -> b
12 -> c
13 -> d
14 -> e
15 -> f

1.	console.log(0x1);
2.	console.log(0x10);
3.	console.log(0x100);

在这里插入图片描述

十六进制有效数字0-9,a-f超过有效数字直接报错

在这里插入图片描述

浮点数：表示方法只能是十进制

1.	console.log(0.3333);

还可以使用幂的表示法

1.	// 还可以使用幂的计算
2.	console.log(0.000045);
3.	console.log(4.5e-5);

特殊值：
Infinity:由于计算机能力有效，超过极限时显示无穷Infinity(非常大的数字)

// 非0数字除以0
console.log(3/0);
console.log(-3/0);

NaN(not a number)

console.log(NaN);
console.log(0/0);

⦁ 字符串
字符串字面量：指的是生活说的各种话。比如各种语言，语言中的一些数字，标点等
字符串字面量： “”

1.	console.log("小明今年几岁了");
2.	console.log("18");

字符串中可以包含多个特殊字符

\n   换行
\t   制表符
1.	console.log("字符串中可以含有多个特殊字符\n还可以书写制表符\t。");

js中一些功能性标点，如果想输出必须添加
比如\“”和\

console.log(“这是一个双引号\“””);

⦁ 变量
⦁ 体会变量
变量是一个存放数据的容器。可以保存任何数据类型，比如数字，字符串，数组，函数等
使用容器之前必须先声明变量。

1.	var a;

存放数据：赋值

1.	// 声明变量
2.	var a;
3.	// 将数据保存在容器中 赋值
4.	a = 10;
5.	
6.	// 变量在输出时输出的结果是变量保存的数据，而不是输出变量名称
7.	console.log("a");  a
8.	console.log(a);   10

变量可以多次赋值，将最后一次结果保留，旧值被舍弃

1.	// 将数据保存在容器中 赋值
2.	var a = 10;
3.	// 变量可以多次赋值
4.	a = "你好世界";

⦁ 声明变量
使用关键字var 进行声明。空格隔开变量名称。

1.	var a;

变量名（标识符）命名规则：
第一个字符可以是字母（js区分大小写），下滑线（_）,美元符号 $后面字符可以是字母，_,$ ,数字不能开头
不可以是关键字或者保留字
关键字：js具有一些功能性的词语。
保留字：目前没有特殊功能，保留下来未来可能是关键字

关键字：
break　　do　　instanceof　　typeof　　case　　else　　new　　var　　catch　　finally　　return　　void　　continue　　for　　switch　　while　debugger　　 function　　this　　with　　　　default　　if　　throw　　delete　　in　　try　
保留字：
abstract　　enum　　int　　short　　boolean　　export　　interface　　static　　byte　　extends　　long　　super　　char　　final　　native　　class
synchronized　　float　　package　　throws　　const　　goto　　private　　transient　　debugger　　implements　　protected　　volatile　　double　　
import　　public

合法变量名

1.	var a;
2.	var _________;
3.	var $___$;

不合法变量名：

1.	var 1a;   //数字不能在开头
2.	var this; //this是关键字
3.	var a%;   //变量字符可以是字母,_,$,数字

⦁ 声明变量，没有赋值，直接使用，不会报错，结果是undefined(没有定义的值)

1.	var a;
2.	console.log(a);

⦁ 没有声明变量，直接使用，报错。

1.	// 没有声明a变量，直接使用a
2.	console.log(a);

⦁ 赋值
使用=表示赋值
表示将右侧的数据保存在左侧的变量中

1.	// 声明变量
2.	var a;
3.	var b;
4.	// 赋值
5.	// 将10保存在a变量中
6.	a = 10;
7.	// 变量在使用时用的是变量保存的值
8.	// 10 + 5 = 15
9.	// 将15保存在b变量中
10.	b = a + 5;
11.	console.log(b);  //15

一般我们习惯将变量声明和赋值书写在一起。(初始值)

1.	var a = 10;

⦁ 变量声明提升
我们可以先使用后面声明的变量，不会报错，即使变量后面有赋值结果仍然是undefined.

1.	// 先使用后面声明的变量
2.	console.log(a);
3.	// 后面声明，即使有赋值也是undefined
4.	var a = 10;

js预解析：将js中所有的声明语句提升到所有语句的最前面。

1.	预解析：var a;
2.	console.log(a);  //undefined
3.	a = 10;

预解析：只提升变量的声明语句，赋值语句保留在原位置。

⦁ 声明多个变量
一个var 可以同时声明多个变量，用逗号隔开。

1.	var a = 10, b = 20;

⦁ 2.6数据类型
任何数据都有数据类型，比如数字，字符串，数组，函数等
数据类型名称：
简单数据类型：
number: 任意的数字
string: 任意的字符串
boolean: true /false
undefined: 只包含一个值undefined
null: null

1. undefined与null的区别?

  * undefined代表变量没有赋值

  * null: 代表变量赋值了, 只是值为null

2. 什么时候将变量赋值为null?

  * 初始化赋值: 将要作为引用变量使用, 但对象还没有确定

  * 结束时: 将变量指向的对象成为垃圾对象

3. 理解变量类型与数据类型?

  * js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型

  * 变量类型:

    * 基本类型: 保存基本类型数据的变量

    * 引用类型: 保存对象地址值的变量

  * 数据对象

    * 基本类型

    * 对象类型

引用数据类型：
object: 任意对象
function：一种特别的对象（可执行）
arry: 一种特别的对象（数值下标，内部数据是有序的

⦁ 数据类型检测
typeof操作符，检测数据类型(不能判断：null与object，Arry与object)
1：将要检测数据书写在typeof后面，用空格隔开

1.	typeof 10;

2:将要检测数据书写在typeof后面用小阔号包裹

1.	typeof(10);

变量也有数据类型，是动态变化，根据保存数据实时改变

1.	// 3变量数据类型
2.	var a = 10;
3.	console.log(typeof a);   //number
4.	// 变量可以多次赋值
5.	a = "你好";
6.	console.log(typeof(a)); //string

2.7 number转为string
+: 当+两侧都是数字字面量表示加法
当+两侧不都是number类型时，尤其数字和字符串书写，+表示拼接作用。

方法：数字 + “ ”

1.	// 数字
2.	var b = 10;
3.	// number转为string  数字 + ""
4.	b = b + "";
5.	// 输出b数值
6.	console.log(b);
7.	// 输出b数据类型
8.	console.log(typeof b);

在这里插入图片描述
⦁ string转为number
prompt( ) js内置方法
类似于alert()弹出框，表示可以输入一个弹出框

window.prompt() 一般我们省略window
prompt(): 2个参数
1参数：提示文本
2参数：默认文本

prompt的到结果是string

⦁	// 一般我们习惯将prompt赋值给变量
⦁	var age = prompt("请输入您的年龄",18);
⦁	// 输入age
⦁	console.log(age);
⦁	// 检测age数据类型
⦁	console.log(typeof age)；

在这里插入图片描述

将string转为number方法：parseInt( ),parseFloat( ) (驼峰命名)

⦁ parseInt( )：将字符串转为整数

1.	// 参数：书写字符串
2.	console.log(parseInt("12.1212"));
3.	console.log(parseInt("2333e10"));
4.	console.log(parseInt("2333a10"));

在这里插入图片描述
⦁ 结果有可能是NaN

1.	console.log(parseInt("a12"));
2.	console.log(parseInt("十二"));
3.	console.log(parseInt("你好"));

在这里插入图片描述

⦁ 参数还可以是数字，表示取整

1.	console.log(parseInt(12.12));

⦁ 还可以设置两个参数。由于ECMAscript3和ECMAscript5版本有分歧，如果想转进制数字，需要设置两个参数
第一个参数：要转换的字符串
第二个参数：进制参数（不用在书写进制前缀0,0x,0o）

1.	// 两个参数1字符串  2进制参数
2.	console.log(parseInt("10", 10));
3.	console.log(parseInt("10", 8));
4.	console.log(parseInt("10", 16));

在这里插入图片描述
parseFloat( ): 将字符串转为浮点数
只有一个参数，书写字符串

1.	// 检测数据类型
2.	console.log(typeof(parseFloat("12.12.1.22444")));
3.	console.log(parseFloat("12.12.1.22444"));
4.	// 浮点数可以使用幂
5.	console.log(parseFloat("1.2e-4"));
6.	// 结果也有可能是NaN
7.	console.log(parseFloat("你好12"));

在这里插入图片描述

⦁ 2.8运算符
运算符（Operators，也翻译为操作符），是发起运算的最简单形式。
分类：
数学运算符(Arithmetic operators)
比较运算符(Comparison operators)
逻辑运算符(Logical operators)
赋值运算符(Assignment operators)
按位运算符(Bitwise operators)
条件 (三元) 运算符(Conditional operator)

⦁ 数学运算符
+，-，*， /, %(取余) 先算乘除，取余，再算加减，如果有小括号在算小括号
⦁ 运算符两侧都是number类型

1.	console.log(1 + 2);

**⦁ 纯数字字符串参与运算，**纯数字字符串不用书写parseInt(),parseFloat（），自动会隐式转换，转为对应的数字参与运算。（加法除外，加法仍然是拼接作用）
在这里插入图片描述
⦁ true,false,null，参与运算也会隐式转换。(加法也会隐式转换)
true = 1
false= 0
null = 0

⦁ Infinity（非常大的数字）参与运算，结果还是infinity
⦁ NaN结果都是NaN
⦁ undefined参与运算结果都是NaN
⦁ 非纯数字字符串参与运算结果都是NaN，+还是拼接作用

比较运算符

大于
< 小于
= 大于等于
<= 小于等于
== 等于
=== 全等于
!= 不等于
!== 不全等于
（只要是比较运算符，结果一定是布尔值）

两侧都是数字参与结果是布尔值，
null参与运算时，隐式转换。true(1) false(0) null(0), 特别的null参与==，===时不是转换0
在这里插入图片描述

纯数字字符串参与时也是隐式转换。
==等于，在判断两侧关系尽可能让两侧相等。只判断数值是否相同，不判断数据类型是否相等。

1	console.log("2" == 2);

===全等于，尽可能让两侧关系不等。同时判断数值和数据类型是否相同
!=  不等于，和==是对立面。只要==是true，那么!=一定是false；只要==是false，那么!=一定是true
!==  不全等于，和===是对立面。只要===是true，那么!==一定是false；只要===是false，那么!==一定是true

计算：3 > 2 > 1 (顺序：从左到右)

1	= true > 1
2	= false

两侧都是字符串比较，不是比较字符串长短，而是比较字符的Unicode。编码顺序越靠后，越大

顺序：数字（0-9），大写字母（A-Z），小写字母（a-z）

在这里插入图片描述
逻辑运算符
&& :逻辑与运算符
|| 逻辑或运算符
! 逻辑非运算符

**布尔值参与运算，结果一定是布尔值**

逻辑与真值表

在这里插入图片描述

逻辑或运算符
在这里插入图片描述

逻辑非运算符
!true 结果false
!false 结果true

非布尔值参与逻辑运算结果不一定是布尔值

赋值运算符
赋值运算符是赋一个基于它右边操作数值的值给它左边的操作数。最简单的赋值运算符是等于 =，将右边的操作数值赋给左边的操作数。那么 x = y 就是将 y 的值赋给 x。
含义：将右侧的数据运算之后，赋值给左边。

+= 加等于
-= 减等于
*= 乘等于
/= 除等于
%= 取余等于
++ 递加
– 递减
在变量原基础上，进行右侧的运算，将运算的值再赋值给左边的变量。

1	// 声明变量
2	var a = 10, b = 20, c = 30;
3	var sum = (a ++) + (++ b) + (c ++) + (++ a);
4	/*
5			= 10 + 21 + 30 + (++ a)   第二次出现就是再次使用，再次使用都是自加1后的结果
6			= 61 + 12
7			= 73
8	*/
9	console.log(sum);
10	console.log(a);
11	console.log(b);
12	console.log(c);

综合运算
优先级顺序：贴身的（! ++ --）→ 数学 → 比较 → 逻辑 → 赋值

1	/*
2	1优先级：  贴身，数学，比较(结果一定是布尔值)，逻辑(与，或)，赋值
3	2a++  :使用变量当前值参与运算，a第二次使用是自加1后的结果
4	3真：非0数字，非空字符串
5		a&&b:
6		a||b: 
7	*/
8	var a = 4;
9	var sum = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || 9;
10	/*
11			= 1 * (2 + 3) && 4 || 5 > 6 && 7 < 8 || 9;
12			= 5 && 4 || 5 > 6 && 7 < 8 || 9;
13			= 5 && 4 || false && true || 9
14			= 4 || false && true || 9
15			= 4 || false || 9
16			= 4 || 9
17			= 4
18	*/
19	console.log(sum);
20	// 第二次出现a = 5
21	console.log(a);
22	console.log(++ a);

三， math

Math是js内置对象
Math.random( ): 随机数； 参数：不书写; 结果是0-1之间的浮点数
在这里插入图片描述
Math.pow( a,b): 幂的运算； 参数：一个参数底数二个参数指数结果是幂的计算数值结果

Math.sqrt( ): 开方运算 参数：一个参数，要开方的数字结果：开方数值

Math.PI 圆周率π（属性）