[JavaScript知识库] JavaScript 练习1（历史，基础语法，常用对象）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript 练习1（历史，基础语法，常用对象） -> 正文阅读

[JavaScript知识库]JavaScript 练习1（历史，基础语法，常用对象）

JavaScript 练习上（历史，基础语法，常用对象）

1. JS的历史

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 
		 JS: 很早之前，互联网刚刚兴起，那个时候，网速很慢。类似于现在的2G网速
		   上网体验差，输入了用户名和密码，登录一个论坛，就可以出去抽根烟，
		   回来也不一定登录上，回来发现后台返回了用户名格式错误。
		   用户名和密码的规则校验，能不能放在前台校验，而不是发送给后台校验，因为网速慢，如果放在后台校验用户体验极差。
		   有一家公司Nombas 开发了要给语言叫做 C-- 
		   浏览器器厂商网景浏览器，借鉴了C-- 这个思想。
		   推出了脚本语言 LiveScript 使用到网景浏览器中，把表单数据的校验放在浏览器端进行校验，提高了用户的上网体验，先占领了
		   浏览器市场，后来找到SUN 继续完善，后改名为 JavaScript 从此网景浏览器就火起来了
		   
		   微软这个时候，也要进军浏览器市场，推出了IE浏览器，他也搞出来了要给浏览器脚本语言叫做 JScript
		   
		   为了制定同样的浏览器脚本语言的规范，这些浏览器厂商，就找到 ECMA 欧洲计算机协会，
		   由他来制定一套 浏览器脚本语言的规范 ECMA 大部分还是照搬了 JavaScript
		   推出这个叫做   ECMAScript规范，以后的浏览器脚本语言，就得遵循这个规范
		   
		   ECMAScript4 ECMAScript5 ECMAScript6 ECMAScript7
		 
		 
		    JS:最早的推出，就是为了做表单数据的校验，来提高用户的上网体验，随着不断的发展，JS可以做出很多网页特效。
			
			
		
		 -->
	</body>
</html>

2. Js 与 html 结合的3种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的js脚本文件，开发首选方式 -->
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<!-- 内部方式：在HTML页面提供一对 script标签，在标签内部，写JS -->
		<script type="text/javascript">
			var num=100;
			alert(num)
		</script>
	</head>
	<body>
		<!-- 
		JS跟HTML结合的方式
		 
		 //1.内联方式：将JS代码直接写在HTML标签上
		 //2.内部方式：在HTML页面提供一对 script标签，在标签内部，写JS
		 这一对 script标签，他可以放在 HTML页面的任何地放，那你目前先放在 head标签之间
		 //3. 外部方式：把JS代码单独放在一个文件中，页面进行引用，开发首选方式
		 <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		 
		 -->
		 
		 <!-- 内联方式：将JS代码直接写在HTML标签上 不常用-->
		 <button type="button" onclick="alert('点击了')">一个按钮</button>
	</body>
</html>

index.js: 放在js文件夹下

var str="Hello";
alert(str);

3. 数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Java的基本数据类型：四类八种
			//整数型 byte short int long
			//小数型 float  double
			//字符型 char
			//布尔型 boolean
			
			//ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。

			//JS:原始数据类型：数字型 Number 布尔 Boolean  字符串 String  未定义 undefined  对象占位符 Null
			
			//JS是一门弱类型语言，他定义变量时 采用 var 关键字来定义 不需要明确数据类型
			//定义数字
			
			 var num=100 //注意：后面的分号，可写可不写，语法不报错，我们写Java习惯了，那建议还是写上。
			 var a=3.24
			 //定义字符串，单引号，双引号都可以使用
			 var s="abc"
			 var str='hehe'
			 
			 //定义boolean类型
			 
			 var flag=true
			 var flag2=false
			 
			 //定义了一个变量，没有赋值，就是 undefined
			 var v;
			 
			 //null对象的占位符。
			 var obj=null;
			 
			 
			 //使用弹框的方法，来弹出一下变量的值
			 alert(num);
			 alert(a);
			 alert(s);
			 alert(str);
			 alert(flag);
			 alert(flag2);
			 alert(v);
			 alert(obj);
			 
			 
			 //有一个typeof 运算符可以获取变量的原始数据类型
			 		 
			 alert(typeof num);
			 alert(typeof a);
			 alert(typeof s);
			 alert(typeof str);
			 alert(typeof flag);
			 alert(typeof flag2);
			 alert(typeof v);
			 alert(typeof obj);
		
		</script>
	</head>
	<body>
		
	</body>
</html>

4. 逻辑语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
						语句：
							if
							switch
							while
							do...while
							for */


			var num = 200;
			if (num >= 200) {
				alert("真")
			} else {
				alert("假的")
			}
			
			
			for(var i=1;i<=10;i++){
				alert(i);
			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

5. 打印的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num=100;
			//输出数据到html页面上
			document.write(num);
			//输出HTML标签
			document.write("<h1>你好JS</h1>")
			
			//输出HTML标签
			document.write("<h1 style='color: red;'>你好世界</h1>")
			//拼接变量
			document.write("<h1 style='color:blue;'>你好世界"+num+"</h1>")
			
			
			document.write("<b style='color:blue;'>你好世界"+num+"</b>")
			//换行
			document.write("<br>")
					
			document.write("<b style='color:blue;'>你好世界"+num+"</b>")
					
		</script>
	</head>
	<body>
	</body>
</html>

5. 输出语句到控制台查看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num=100;
			var sal=3.25;
			//输出数据到浏览器的控制台  f12或查看元素--->控制台
			console.log(num);
			//输出多个变量的值
			console.log(num,sal);
		</script>
	</head>
	<body>
		
	</body>
</html>

练习：打印99乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//在页面上输出九九乘法表
			for(var i=1;i<=9;i++){
				for(var j=1;j<=i;j++){
					document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;&nbsp;&nbsp;")
				}
				document.write("<br>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

6. 算数运算符：+ - * / %

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 	*算术运算符：+ - * / %	
			
		* 其他类型转为number 
		* 
		*  1.字符串转成数字，根据字面上去转，如果字面是个有效数字，就转换成数字，如果转换不过来就转换成 NaN
		*    空串转换数字转成 0
		*  注意：NaN参与数学运算结果也NaN
		*       undefined 参与数学运算结果都NaN
		* 
		* 
		* 2. 布尔类型转换数字，true 转成1  false 转换成0
		*  
		* */

			var str = "2";
			str = "abc100";
			//NaN参与数学运算结果也NaN
			var num = str * 5; //NaN*5

			//alert(num);

			var flag = false;

			var sum2 = 2 * flag;
			alert(sum2)


			alert(5 * "");
			
			
			alert(undefined/2);
		</script>
	</head>
	<body>
	</body>
</html>

7. 一元运算符：++ – +(正) -(负)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
			 * 一元运算符
			++ --  +(正) -(负)
			
			++ 自增1 -- 自减1
			
			++ 在前，先运算，后使用  ++ 在后，先使用后运算
			 */
		
			var i=1;
			var j=++i;
			
			//数据类型的自动转换
			var a=+"100"; //+100 -100
			var sum=100+a;
			alert(sum);
			//JS中数据类型的自动转换：当运算符想要的数据类型和你给的数据类型不一致，运算符就会尝试去转换这个数据。
			
			
			var s="100"*1+"200"*1;
			alert(s)
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

8. 比较运算符： > < >= <= == 三个等于=== !=:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// * 比较运算符
			// 	 > < >= <= == === !=: 

			var v = NaN;

			//NaN 参与比较运算，结果都是false 除了 !=
			var b = v == NaN;

			alert(b);

			alert(NaN != NaN) //true

			//字符串比较：比较两个字符串字面上的值，是否相等，用 == 号来比较
			var str = "abc";
			var str2 = "heheheh";
			alert(str == str2)
			
			
			var e="100";
			var f=100;
			// == 会转换数据类型，但是有的时候，我不希望这种效果，如果数据类型不一致，就不要去比，就直接false
			var bb=e==f;
			
			alert(bb);
			
			
			// === 全等于 先比较数据类型，如果数据类型不一致，直接false,无需在比
			
			var bb2=e===f;
			alert(bb2);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

9. 逻辑运算符 && || !

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// * 逻辑运算符
			// 					&& || !
			//字符串转换布尔类型： 非空串，转换成true 空串转换成false
			
			//数字类型转换布尔： 0转换成false 非0 转换成ture
			//NaN 和 undefined 转换boolean类型，转换成false
			
			var str="abc";
			
			// var flag=!str;
			
			// alert(flag);
			//数字类型转换布尔： 0转换成false 非0 转换成ture
			var num=10;
			
			//NaN 和 undefined 转换boolean类型，转换成false
			//var vv;
			//null 转换布尔类型，转换成false 如果对象不为null转换成true
			var vv=null;
			vv=new Object();
			if(vv){
				alert("真")
			}else{
				alert("假的");
			}
			
			/* while(str){
				
			} */
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

10. 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		/* 
		 函数：类似于我们Java中的方法，封装一段功能逻辑，以实现重复调用
		 
		 //JS中定义函数的语法
		 
		 
		 
		 */
		//方式1:* var fun = new Function("参数列表","方法体"); 了解
		
		//var fun = new Function("a,b","alert(a+b)");
		//fun(10,20);
		
		//方式2：注意形参不需要写数据类型
	
		function add(a,b){
			var sum=a+b;
			return sum; //如果想返回数据，使用return返回即可
		}
		
		//调用
		var r=add(20,30);
		console.log(r);
		
		
		//匿名函数，匿名函数可以作为参数传递
		/*
		function(a,b){
			
			var sum=a+b;
			return sum; 
		}
		*/
	   //方式3：
		var show=function(a,b){
			
			var sum=a+b;
			return sum; 
		}
		
		var vv=show(36,69);
		alert(vv);
		
			
		</script>
	</head>
	<body>
	</body>
</html>

函数的注意事项：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			//1.函数的形参，不需要写数据类型
			function add(a, b) { //形参如果没有接收到值就是 undefined
			
				console.log(a);
				console.log(b);
				return a + b;
			}

			//2.调用函数时，你可以传参，也可以不传参，传多，传少都可以

			var v = add(10, 20, 30, 250);
			alert(v);
			
			//3.函数有一个length属性，可以获取形参的个数
			var  len=add.length;
			alert(len);
			
			
			//4.函数有一个内置对象，arguments 是一个伪数组，他可以接收所有的实参
			
			function show(){
				
				console.log(arguments[0]);
				console.log(arguments[1]);
				console.log(arguments[2]);
				console.log(arguments[3]);
				console.log(arguments[4]);
				var sum=0;
				for(var i=0;i<arguments.length;i++){
					sum+=arguments[i];
				}
				return sum;
			}
			
			var ss=show(20,30,52,30,85);
			console.log("结果",ss);
		</script>
	</head>
	<body>
	</body>
</html>

11. 自定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			function add(a,b){
				return a+b;
			}
			
			var sum=add(10,20)
			*/
			//自调用函数

			//	(function (形参) { /* code */ } (实参));

			var sum = (function(a, b) {

				return a + b;
			}(20, 63));


			alert(sum);
		</script>
	</head>
	<body>
	</body>
</html>

12. void运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<a href="javascript:window.open('about:blank')">Click me</a>
		
		<!-- void(函数) void会拦截函数的返回值 -->
		<a href="javascript:void(window.open('about:blank'))">Click me</a>
	</body>
</html>

只想让 a可以点，但是不要跳页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show(){
				alert("show 函数")
			}
		</script>
	</head>
	<body>
		<a href="index.html">一个链接</a>
		<!-- 只想让 a可以点，但是不要跳页面 -->
		<a href="#">一个链接</a>
		
		<!-- 只想让 a可以点，但是不要跳页面 -->
		<a href="javascript:void(0)">一个链接www.163.com</a>
		<!-- 只想让 a可以点，但是不要跳页面 -->
		<a href="javascript:;;">一个链接www.163.com</a>
		<!-- 不跳转页面，还会调用我传入的函数，把他当成一个按钮来用，来触发一个函数 -->
		<a href="javascript:void(show())">一个按钮</a>
	</body>
</html>

13. const和let关键词

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//es6引入的一个关键字 const 用来定义常量的
			const num = 200; //常量
			//num=500; //常量不能再赋值

			{
				//代码块
				var a = 1000;
				//let 用来定义块级变量
				let b = 500;
			}
			alert(a);
			//alert(b); b是块级变量，所以访问不到了
			
			if(true){
				//块级作用域
				//var c=20;
				//let 用来定义块级变量
				let c = 500;
				
			}
			
			//alert(c);
			/*
			for(var i=1;i<=10;i++){
				alert(i);
			}
			
			alert(i);
			*/
		   // let 用来定义块级变量
		   for(let i=1;i<=10;i++){
		   	alert(i);
		   }
		   
		  // alert(i);
		 
		</script>
	</head>
	<body>
	</body>
</html>

14. 局部变量和全局变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//es6引入的一个关键字 const 用来定义常量的
			const num = 200; //常量
			//num=500; //常量不能再赋值

			{
				//代码块
				var a = 1000;
				//let 用来定义块级变量
				let b = 500;
			}
			alert(a);
			//alert(b); b是块级变量，所以访问不到了
			
			if(true){
				//块级作用域
				//var c=20;
				//let 用来定义块级变量
				let c = 500;
				
			}
			
			//alert(c);
			/*
			for(var i=1;i<=10;i++){
				alert(i);
			}
			
			alert(i);
			*/
		   // let 用来定义块级变量
		   for(let i=1;i<=10;i++){
		   	alert(i);
		   }
		   
		  // alert(i);
		 
		</script>
	</head>
	<body>
	</body>
</html>

JS 提供的常用几个内置对象
ES5之前没有类这个概念，只是对象这个概念
ES6之后有了类这个概念

15. String对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// String 对象
			// String 对象用于处理文本（字符串）。
			//创建的对象的方式
			//方式1
			//当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
		 var str=new String("hello");
		  //方式2
		  //当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

		 var s=String("abc");
		 
		 //方式3
		 var ss="abc"
		 
		 
		// instanceof 判断一个引用是不是该类型的一个引用
		alert(str instanceof String); //true
		alert(s instanceof String); //false
		
		//查看原始数据类型
		alert(typeof str); //object
		alert(typeof  s); //string
		
		
		/* 3 方法：
					charAt() 返回在指定位置的字符。 
						例子：var v="abcd";
						          var a=v.charAt(2);   
		 
					concat() 连接字符串。 
						例子：var v="ab";  var a="cd";
							var z=v.concat(a);
						
					indexOf() 根据字符检索此符在字符串中的索引。 
						例子：var v="abcde";
							var z=v.indexOf("c");			
		
					lastIndexOf() 从后向前搜索字符串。 
					substring() 提取字符串中两个指定的索引号之间的字符。 
						var v="abcde";
						var z=v.substring(0,3); 含头不含尾
		
					toLowerCase() 把字符串转换为小写。
		 				例子：
					 var str = "Hello World!";
					 document.write(str.toLocaleLowerCase());
		
		
					  toUpperCase() 把字符串转换为大写。 
		
					replace() 替换字符串。
						例子： 
						var v="abceaaaa";
						var z=v.replace("a","h");  参1：被替换的字符/或字符串   参数2：替换成哪个字符/或字符串
		
					split() 把字符串分割为字符串数组。
		 				例子： 
						var v="a#b#c#d";
						var z=v.split("#");
		
					* trim():去除字符串两端的空格
						例子： 
		                                                             var v="  abcd     ";
						var z=v.trim();
 */
		</script>
	</head>
	<body>
	</body>
</html>

16. Number对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Number 对象
			//Number 对象是原始数值的包装对象。
			//类似于Java中的 Integer Double 包装类
			//创建 Number 对象的语法：
			//当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象
			var myNum=new Number(1000);
			
			//如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。
			var myNum2=Number("3.25");
			
			
			alert(myNum instanceof Number); //true
			alert(myNum2 instanceof Number); //false
			
			alert(typeof myNum); //object
			alert(typeof myNum2); //number
			
			//静态属性
			//MAX_VALUE 可表示的最大的数。 、
			//MIN_VALUE 可表示的最小的数。 
			
			var max=Number.MAX_VALUE;
			var min=Number.MIN_VALUE;
			
			//方法
			var v=new Number(3.58585858585);
			//保留有效的五位数字，包含整数部分在内,返回的是 字符串类型的数字
			//var strNum=v.toPrecision(5);
			//alert(strNum);
			
			//toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。 
			
			var ss=v.toFixed(5);
			alert(ss);
			
			
			//把字符串的数字，转成数字
			
			var yy="100";
			
			var n=yy*1;
			var n2=+yy;
			var n3=Number(yy);

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

17. Math对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Math 对象不用new 直接使用对象名Math来调用方法接口
			
			/* Math.random()；随机产生0----1 之间的随机数      var  num=Math.random()*100;
			      Math.round(2.36); 对小数进行四舍五入  得到一个整数    var n=Math.round(Math.random()*100);
			       Math.min(15,25); 取最小值
			      Math.max(15,25);取最大值
			      Math. abs(-2) 返回数的绝对值。 
			      Math.floor(2.6);向下取整
			      Math.ceil(3.82);向下取整 */
				  
				  //
				 // Math.random();
				// 生成 1-100 之间的随机整数
				//生成 6位随机验证码 
				
				  var n=Math.round(Math.random()*100)
					alert(n)

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

练习：验证码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//生成 1--100之间的整数
		for(let i=0;i<1000;i++){
			var num=Math.ceil(Math.random()*100);
			if(num==1||num==100){
				console.log(num);
			}
		}

			//生成四位随机数可以包含字母数字
			var str="0123456789abcdefghjklABCDEFGHJKLZXY";
			//生成四个随机索引
			var a=Math.floor(Math.random()*str.length);
			var b=Math.floor(Math.random()*str.length);
			var c=Math.floor(Math.random()*str.length);
			var d=Math.floor(Math.random()*str.length);
			
			var code=str.charAt(a).concat(str.charAt(b)).concat(str.charAt(c)).concat(str.charAt(d));
			alert(code);
			
			//生成6位的随机验证码，数字组成的。
			var strCode='';
			for(let i=1;i<=6;i++){
				var v=Math.ceil(Math.random()*9);
				strCode+=v
			}
			
			alert(strCode);
			
	
		</script>
	</head>
	<body>
	</body>
</html>

18. Date日期对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// Date 对象
			// Date 对象用于处理日期和时间。
			
			// 创建 Date 对象的语法：
			// var myDate=new Date()
			//注释：Date 对象会自动把当前日期和时间保存为其初始值。
			
			var myDate=new Date();
			var year=myDate.getFullYear();
			//从0开始数月份
			var month=myDate.getMonth();
			//获取的是星期
			var day=myDate.getDay();
			//获取日
			var d=myDate.getDate();
			//获取时
			var hour=myDate.getHours()
			var minu=myDate.getMinutes();
			var sec=myDate.getSeconds();
			
			//getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 
			
			var time=myDate.getTime();
			
			alert(year)
			alert(month);
			alert(day)	
			alert(d)
			alert(hour);
			alert(minu);
			alert(sec)
			alert(time)
			
			// 2022-01-05 10:27:30  自己单独获取出来拼接成自己要的的格式
			//获取当前日期字符串  2022/1/5 上午10:32:30 
			var localTime=myDate.toLocaleString();
			
			document.write(localTime);
			//alert(localTime);

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

19. 使用第三方的工具类来处理日期----moment

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入这个工具类 -->
		<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//格式化现在的日期
			var dateStr = moment().format('YYYY-MM-DD HH:mm:ss');
			alert(dateStr);
			
			//把指定的毫秒值毫秒值，格式化成日期字符串。
			var time = new Date().getTime(); //获取当前的毫秒值
			var dateStr2 = moment(time).format('YYYY-MM-DD HH:mm:ss');
			document.write("<h1>" + dateStr2 + "</h1>");
			
			
			//把日期字符串转换成毫秒值 unix()
			var a = moment('2019-08-22 12:30:23').unix()
			//1566448223
			alert(a);
		</script>
	</head>
	<body>
		
	</body>
</html>

20.全局函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//全局函数，直接使用
			//==判别不出来NaN
			//判断是不是NaN用方法判断
			var b=isNaN(NaN);
			alert(b);
			
			var b1=isNaN("abc"*1);
			alert(b1);
			
			//把字符串的数字转换成数字
			
			//把字符串的数字，转成数字
			
			var yy="100";
			
			var n=yy*1;
			var n2=+yy;
			var n3=Number(yy);
			
			//使用全局函数来转换
			//从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
			var num=parseInt("100abc");
			alert(num);
			
			var num2=parseFloat("3.25abc");
			alert(num2);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

21. 数组对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//Array 对象
			//Array 对象用于在单个的变量中存储多个值。类似于我们Java中的ArrayList
			//创建 Array 对象的语法：
			//new Array();
			//new Array(size);
			//new Array(element0, element1, ..., elementn);
			//1. JS中的数组对象，他的长度是可变，没有角标越界的异常。
			//2.JS中的数组，可以存储多种数据类型的元素。
			var arr=new Array();
			//通过角标来存元素
			arr[0]=10;
			arr[1]=20;
			arr[2]=30;
			arr[3]=40;
			arr[4]=50;
			
			var ele=arr[arr.length-1];
			alert(ele);
			//获取不到就是 	undefined 不会报角标越界
			var ele2=arr[10];
			alert(ele2);

			//定义数组的方式2 可以定义数组的长度，但是你超过了也不报错
			var arr2=new Array(3);
			arr2[0]=20;
			arr2[1]=30;
			arr2[2]=40;
			arr2[3]=200;
			
			alert(arr2[3]);
			
			//方式3：定义数组的时候，直接存储元素
		
			var arr3=new Array(10,false,"abc",304,3.25);
			
			//方式4：简写方式 注意是中括号
			var arr4=[10,false,"abc",304,3.25];
			
			//数组的遍历
			for(let i=0;i<arr4.length;i++){
				console.log(arr4[i])
			}

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

22. 数组对象常用的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr=[10,20,30,40,50,60];
			var arr2=[100,200,300,400,500,600];
			//concat() 连接两个或更多的数组，并返回连接好的新数组。
			 var newArr=arr.concat(arr2,arr2);
			 console.log(newArr);
			 
			 //join() 把数组的所有元素拼接成一个字符串。"10-20-30"
			 
			 var str=arr.join("-"); //10-20-30-40-50-60
			 console.log(str);
			 //不要分隔符，就给个空串
			 var str2=arr.join("");
			  console.log(str2);
			  
			  //pop() 删除并返回数组的最后一个元素 
			  
			  var arr3=[100,200,300,400,500,600];
			  var ele=arr3.pop();
			  ele=arr3.pop();
			  ele=arr3.pop();
			  ele=arr3.pop();
			  
			  console.log(arr3);
			  console.log(ele);
			  
			  
			 // push() 向数组的末尾添加一个或更多元素，并返回新的长度。 
			 
			 var arr4=[]; //定义一个空数组
			 arr[0]=10; //使用角标存元素
			 arr4.push(20);
			 arr4.push(100,200,300);
			 console.log(arr4);
			 
			 
			 //reverse() 颠倒数组中元素的顺序。 
			 
			 console.log(arr4.reverse());
			 
			 
			// shift() 删除并返回数组的第一个元素 
			
			var arr5=[100,200,300,400,500,600];
			var ele2=arr5.shift();
			ele2=arr5.shift();
			ele2=arr5.shift();
			console.log(ele2);
			console.log(arr5);
			 
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		    //pop() 删除并返回数组的最后一个元素 
			//shift() 删除并返回数组的第一个元素 
			//splice() 删除元素，并向数组添加新元素。 
			
			var arr = [100, 200, 300, 400, 500, 600];
			//从2索引处开始，删除1个元素
			arr.splice(2,1);
			console.log(arr);
			
			var arr2 = [100, 200, 300, 400, 500, 600];
			//从2索引处开始，删除2个元素
			arr2.splice(2,2);
			console.log(arr2);
			
			
			//替换功能 
			var arr3 = [100, 200, 300, 400, 500, 600];
			//从2索引开始删除一个元素，在插入进去一个i7000
			arr3.splice(2,1,7000);
			
			console.log(arr3)
			
			
			//替换功能
			var arr4 = [100, 200, 300, 400, 500, 600];
			//从2索引开始删除一个元素，在插入进去多个 元素 7000  8000 9000
			arr4.splice(2,1,7000,8000,9000);
			
			console.log(arr4)
		</script>
	</head>
	<body>
	</body>
</html>

23. ES6中数组对象新增的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//es6 数组新增额方法，可以参考下面网址
		 //https://www.runoob.com/jsref/jsref-obj-array.html
		
			//every() 	检测数值元素的每个元素是否都符合条件。
			//判断数组中的元素，是不是都是偶数
			var arr = [10, 20, 30, 50, 50];
			var b = arr.every(function(ele) {
				return ele % 2 == 0;
			});
			alert(b);


			//filter() 	检测数值元素，并返回符合条件所有元素的数组。

			//把数组中所有的偶数过滤出来,放到新数组中
			var arr2 = [10, 20, 30, 50, 60, 4, 3, 1, 7, 8, 11, 13, 52];
			var newArr=arr2.filter(function(ele){
				return ele%2==0; //true 表示符合条件，false表示不符合
			});
			alert(newArr);
			
			
			//find() 	返回符合传入测试（函数）条件的数组元素。
			//findIndex() 	返回符合传入测试（函数）条件的数组元素索引。
			//获取数组中第一个符合条件的元素
			var arr3 = ["张三","李四","王五","王老虎","王百万"];
			//获取数组中王开头的第一个元素
			
			var name=arr3.find(function(ele){
				return ele.startsWith('王');
			});
			alert(name);
			//遍历数组
			//forEach() 	数组每个元素都执行一次回调函数。
			arr2.forEach(function(ele,index){
				console.log(index,ele);
			})
			
			
			//indexOf() 	搜索数组中的元素，并返回它所在的位置。
			
			var arr3 = [10, 10,20, 30, 50, 50];
			//查找该元素第一次出现的索引，如果找不到返回 -1
			var index=arr3.indexOf(100);
			alert(index);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

24. ES6中数组新增的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [10, 10,20, 30, 50, 50];
			//判断是不是数组对象
			var b=Array.isArray(arr);
			alert(b);
			alert(arr instanceof Array);
			
			//map() 	通过指定函数处理数组的每个元素，并返回处理后的数组。
			
			
			var arr2 = ["abc","hello","index","hehe","haha"];
			//把数组中的元素变为大写,放到一个新数组中
			var newArr=arr2.map(function(ele){
				return ele.toUpperCase();
			});
			console.log(newArr);
			
			
			
			var numbers = [65, 44, 12, 4,10];
			 
			//把数组中的元素累加起来 total 上次累加的结果，num 数组的元素
			var sum=numbers.reduce(function(total, num,index,arr) {
				console.log("元素索引",index)
			    return total + num;
			},10);
			alert(sum);
			
		</script>
	</head>
	<body>
	</body>
</html>

25. 正则表达式对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// RegExp 对象
			// RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
			//1.直接量语法
			// /pattern/attributes
			//2.创建 RegExp 对象的语法：
			// new RegExp(pattern, attributes);
			
			//创建 RegExp 对象的语法：  "i" 可选参数，表示不区分大小写
			var regx=new RegExp("[a-b]+","i");
			//匹配的方法
			var flag=regx.test("ABC");
			alert(flag);
			
			
			//1.直接量语法，定义正则表达式对象 常用  /正则表达式/可选模式
			var regx2=/[a-b]+/i ;
			
			var flag2=regx2.test("ABC");
			alert(flag2);
			
		</script>
	</head>
	<body>
	</body>
</html>

26. Js中正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str = "hello123";
			//^开头 $结尾 这里要加上 开头和结尾，防止部分匹配
			var reg = /^[A-Z0-9]+$/;
			alert("匹配吗？" + reg.test(str));
			
			
		</script>
	</head>
	<body>
	</body>
</html>

27. 根据正则截取字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// exec()  根据正则表达式去查找字符串符合规则的内容。


			//查找出三个字符组成的单词。

			var str = "da jia YAO hao hao xue xi a";
			var reg = /\b[a-z]{3}\b/gi; //g 全文匹配，i 不区分大小写
			var s = reg.exec(str); //用来截取符合正则的字符串	
			alert(s);
			s = reg.exec(str); //用来截取符合正则的字符串
			alert(s);
			s = reg.exec(str); //用来截取符合正则的字符串
			alert(s);


			/* var line = "";
			while ((line = reg.exec(str)) != null) {
				document.write(line + "<br/>")
			} */
		</script>
	</head>
	<body>
	</body>
</html>

28. 字符串对象关于正则的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str="aaa=bbb=ccc=ddd=eee=AAA";//aaabbbccc
			//g 全文匹配
			var newStr=str.replace(/=/g,""); //根据正则替换，注意全文匹配
			alert(newStr);
		</script>
	</head>
	<body>
	</body>
</html>

29. Boolean对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* Boolean 对象
			Boolean 对象表示两个值："true" 或 "false"。
			
			创建 Boolean 对象的语法：
			new Boolean(value);	//构造函数
			Boolean(value); */
			
			var flag=Boolean("true");
			if(flag){
				alert(flag);
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-01-17 11:25:24 更:2022-01-17 11:25:45

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 12:20:04-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码