JavaScript -- API学习（二）

最新推荐文章于 2024-02-06 07:45:00 发布
最新推荐文章于 2024-02-06 07:45:00 发布
阅读量210 收藏 2
点赞数
分类专栏： JavaScript 文章标签： Web JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39456689/article/details/89081008
版权

一、类型转换

1.Number ->  String 

①String(123)          

②(123).toString

2.String  ->   Number

①Number("123")

3.Boolean  ->  String

①(true).toString

②String(true)

4.String  ->  Boolean

①Boolean("true")

5.Date  ->  String

①String(new Date())

②

   

6.Date  ->  Number

①new Date().getTime()            //获取时间，number类型

7.Boolean   ->  Number

①Number(true)  :  1

②Number(false)  :  0

二、正则表达式

http://www.runoob.com/jsref/jsref-obj-regexp.html

三、异常

            异常是导致程序停止运行的错误代码。

1.一般结构

try{

}catch(error){
    
    //自定义异常
    if(...) {
       throw "错误哦!";
    }
}finally{

}

四、JavaScript的变量提升

           所谓的变量提升，其实就是js在加载js代码的时候，会将所有的声明变量全部提升到js最顶部。

1.代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var y = 6;
			x = 5;
			alert("x = " + x + "  y = " + y);
			
			var x = 5;
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：可以看到，声明在最前还是在最后，都能达到声明的效果。

2.变量提升不是初始化提升（初始化必须在使用之前进行）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var x,y;
			x = 5;
			alert("x = " + x + "  y = " + y);
			y = 6;
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：可以看到初始化，还应在使用前进行

注意：js官方指定，即使拥有变量提升，但是声明最好还是在js的最顶端进行，这样才符合最为规范的编码方式。

五、严谨模式（use  strict）

1.严谨模式只能声明在js和函数的顶部

2.严谨模式下不能展示变量提升，因为严谨模式是对编码的一种规范，为了更好的适应新版本的js

3.使用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			"use strict";
			x = 6;     //报错
			alert(x);
			var x;
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：

4.支持浏览器

六、表单验证

1.前台不进行方法验证，使用表单验证

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form method="post" action="demo-form.php" name="myform">
			<input type="text" name="username" required="required"/>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

演示结果：

2.前台方法进行验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//验证是否为空
			function validateUserName(){
				var result = document.forms["myform"]["username"].value;
				alert(result);
				if(result == null || /^\s*$/.test(result)){
					alert("不能为空");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form method="post" action="demo-form.php" onsubmit="validateUserName()" name="myform">
			<input type="text" name="username" required="required"/>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

演示结果：

3.后台验证，直接动过action进行后台校验。

 

七、JavaScript中 this 关键字

1.在函数中，指的是window

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var x= 9;
			function test(){
				alert(this);
			}
		</script>
	</head>
	<body>
		<button onclick="test()">test</button>
	</body>
</html>

演示结果：

2.在对象中，this 是对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var obj = {
				"name":"kuniun",
				myFunction:function(){
					return this;
				}
			}
			
			alert(obj.myFunction());
		</script>
	</head>
	<body>
		<button onclick="test()">test</button>
	</body>
</html>

演示结果：

3.在句柄中，this是该标签对象

<body>
	<button onclick="this.style.color='red'">test</button>
</body>

演示结果:

之前：                                          之后： 

4.在Js中指的是window

<script>
	alert(this);
</script>

5.在严格模式下，指的是undefined

<script>
	"use strict";
	alert(this);
</script>

 

七、Function和箭头函数的区别

1.function函数中的this指的是调用的主体

<script>
	var obj = {
			"name":"kuniun",
			myFunction:function(){
			return this;
		}
	}
			
	alert(obj.myFunction());
</script>

演示结果：这里的主体是obj

2.箭头函数中的this始终指的是Windows

<script>
	var obj = {
		"name":"kuniun",
		myFunction:() => {
		return this;
	    }
	}
			
	alert(obj.myFunction());
</script>

演示结果：Windows

 

八、JavaScript Let 和 Const

1.var的缺点

①全局变量可以对其再次声明 and 赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var x= 10;

			{
				var x = 2;
			}
			
			document.write(x);
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：显示最后一次赋值的值，不管在代码块还是全局

2.let的块级作用区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var x= 10;
			{
				let x = 2;
			}
			
			document.write(x);
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：使用了let 声明的变量只适用于代码块内，代码块外则无效

3.const 常量修饰符

           const修饰的变量是不能被修改的，但是内容是可以修改的。const和let一样是块级的，所以在不同的级别中声明是没有问题的。

①const修饰的是常量，声明的时候就要赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			const x= 10;
			{
				x = 12;
			}
			
			document.write(x);
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：

②内容是可以修改的，是因为const修饰的是地址，那么对象的话地址不变，属性是可以改变的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			const x= {
				"name":"kunkun",
				"age":12
			};
			
			{
				x.name="kunshao";
			}
			
			document.write(x.name);
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：之前声明的时候是kunkun,之后修改成kunshao。说明const修饰的是地址，而非值

③const和let一样是块级的，所以在不同的级别中声明是没有问题的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			const x= {
				"name":"kunkun",
				"age":12
			};
			
			{
				const x= {
					"name":"kunshao",
					"age":13
				};
			}
			
			document.write(x.name);
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：

4.注意声明顺序

①let或者const  全局声明，那么var就不能再次声明，不管是不是在代码块中

②let    const      var，在同一级别的作用域中不能同时声明一个变量

 

九、JavaScript 中的JSON

①json转Javascript对象    JSON.parse()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var text =  '{ "sites" : [' +
						'{ "name":"Runoob" , "url":"www.runoob.com" },' +
						'{ "name":"Google" , "url":"www.google.com" },' +
						'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
			var result = JSON.parse(text);
			document.write(JSON.stringify(result.sites[0]) + "   " + JSON.stringify(result.sites[1]) + "   " + JSON.stringify(result.sites[2]));
		</script>
	</head>
	<body>
	</body>
</html>

演示结果：

②JavaScript对象  转  json字符串    JSON。stringify()

        上面的例子已经给出了对象转json字符串了，否则页面上输出对象的形式是[Object    Object]

 

十、javascript:void(0) 含义

1.javascript:void(0) 是一个死链接，点击之后没有效果

2.javascript:void(alert("ddddd")) 点击之后弹出提示框

3.javascript:void() 指的是返回为空，也就是undefined

4.href="javascript:void(0)"与 href="#"区别  

①javascript:void(0)就是一个死链接，点击没有效果

②href="#"点击会回到该页面，如果#id那么点击之后，会出现跳转的效果。如：回到顶部

      

JavaScript基础学习已经结束，接下来是js函数学习，继续加油。学完js就可以搞一个小项目，熟悉熟悉！

坤少的IT之路
关注
专栏目录
azure-javascript-processor-api-app:用于逻辑应用 Azure 应用服务的 JavaScript 处理器 API 应用
06-15
要深入学习和使用这个项目，你需要具备基本的 JavaScript 和 Azure 平台知识，并熟悉 RESTful API 设计原则。通过研究源代码和博客文章，你可以掌握如何创建和部署自己的 JavaScript 处理器 API 应用，以满足特定的...
wp-simple-api-reader:WP-REST-API和ACF到REST API的简单JavaScript库
04-30
WP-REST-API和ACF到REST API的简单JavaScript库 装置 要在您的项目中安装 npm install --save wp-simple-api-reader 要求 （ wp版本<4 xss=removed xss=removed> { let result = await wpapi . posts ( { 'id' :...
JavaScript -- API学习（一）
坤少IT之路
04-04 528
之前我们专业进行实习的时候，接触过Javascript，也有过一定的了解。但是也就算是入门10%，要想写出好的Web还是很困难的，所以今天开始，进行我Javascript之路的学习。有的朋友有可能会认为这么简单也要记载嘛？其实这个博客嘛，主要是为自己查阅方便，第二才是供外人参考。当然，我得文笔不行，写着写着肯定会变好的，对不？好了废话不多说，来增强自己的人生价值吧！！！ 一、Jav...
“use strict“是什么? 使用它有什么优缺点？
小草莓的博客
05-04 1372
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;② 严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷；"use strict" ：指定代码在严格条件下执行；- 消除代码运行的一些不安全之处，保证代码运行的安全；- 为未来新版本的Javascript做好铺垫。有时候，相同的代码，严格模式可以比非严格模式下。- 提高编译器效率，增加运行速度；① 禁止this关键字指向全局对象。② 禁止在函数内部遍历调用栈。⑤ 不能使用未声明的变量。③ 全局变量必须显式声明。
JavaScript严格模式“use strict“
路人贾！
07-11 974
javascript 代码中的"use strict";是什么意思
use strict 是什么意思？使用它区别是什么？
weixin_62548988的博客
08-02 664
use strict 代表开启严格模式，这种模式下使得 JavaScript 在更严格的条件下运行，实行更严格解析和错误处理。
什么是“use strict”,好处和坏处
热门推荐
薛跳跳的博客
05-30 5万+
use ‘strict’： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;2. 消除代码运行的一些不安全之处，保证代码运行的安全；3. 提高编译器效率，增加运行速度；4. 为未来新版本的J...
ArcGis-for-javaScript最全中文API.pdf
06-28
二、ArcGIS JavaScript API 的特点 ArcGIS JavaScript API 的主要特点包括： * 基于 JavaScript 的开发工具，易于学习和使用 * 提供了一组强大且灵活的工具，允许开发者快速创建复杂的地图应用程序 * 兼容多种...
face-recognition-javascript-webcam-faceapi-main.zip
08-22
JavaScript作为前端开发的主要语言，它的人脸识别能力得益于各种开源库，比如这个项目可能用到的Face API，这是一个强大的JavaScript库，能够处理图像处理和机器学习任务，尤其在人脸检测和识别方面表现出色。...
人脸采集-基于face-api.js实现人脸采集-javascript-项目源码-优质项目实战.zip
最新发布
04-15
总结来说，这个"人脸采集-基于face-api.js实现人脸采集-javascript-项目源码-优质项目实战"项目是一个极好的学习资源，可以帮助开发者掌握使用JavaScript和现代Web技术进行实时人脸检测和分析的技能。通过研究源码，...
“use strict“：是JavaScript的救星还是束缚？
Web面试那些事儿的博客
01-21 1106
在接下来的部分，我们将深入探讨严格模式的各种优点，以帮助你更好地理解它为何被认为是JavaScript的救星。因此，在项目中要确保一致地使用严格模式。由于对代码执行的更严格要求，严格模式可以帮助JavaScript引擎更有效地进行优化，提高代码的性能。由于对代码的更严格要求，严格模式可以帮助JavaScript引擎更有效地进行优化，提高代码的性能。总的来说，我认为利大于弊，我从来不使用严格模式禁用的功能，因此我推荐使用严格模式。严格模式引入了一些新的保留字，强制开发者遵守更严格的规则，以确保代码的一致性。
JavaScript 严格模式(use strict)
QYgujingjing的专栏
02-04 1198
JavaScript 严格模式(use strict)
什么是 “use strict”； ? 使用它的好处和坏处分别是什么？
LuckXinXin的博客
11-21 3640
“use strict”：表示使用严格模式 优点 ● 消除Javascript语法的一些不严谨之处，减少一些怪异行为; ● 消除代码运行的一些不安全之处，保证代码运行的安全； ● 提高编译器效率，增加运行速度； ● 为未来新版本的Javascript做好铺垫 缺点 严格模式改变了语义。依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误 严格模式的限制 1）变量必须声明后再使用 2）在...
js 代码中的 “use strict“； 是什么意思 ?
温柔归故里
10-29 327
use strict 是一种 ECMAscript5 添加的（严格）运行模式，这种模式使得 Javascript 在更严格的条件下运行。 设立"严格模式"的目的，主要有以下几个：区别：use strict 指的是严格运行模式，在这种模式对 js 的使用添加了一些限制。比如说禁止 this 指向全局对象，还有禁止使用 with 语句等。设立严格模式的目的，主要是为了消除代码使用中的一些不安全的使用方式，也是为了消除 js 语法本身的一些不合理的地方，以此来减少一些运行时的怪异的行为。同时使用严格运行模式也能够
JS严格模式（use strict）详解
Mr_linjw的专栏
11-28 312
严格模式是在 ECMAScript5（ES5）中引入的，在严格模式下，JavaScript 对语法的要求会更加严格，一些在正常模式下能够运行的代码，在严格模式下将不能运行。
js代码中“use strict” 是什么意思？ 使用它的区别是什么
2401_82373036的博客
01-07 431
使用 "use strict" 会改变 JavaScript 的默认行为，它会使得代码执行更严格，并且会产生一些错误，这些错误在非严格模式下可能不会被捕获或报告。使用严格模式有助于避免一些常见的 JavaScript 编程错误，并且可以提高代码质量和可维护性。建议在开发 JavaScript 代码时始终使用严格模式。"use strict" 是 JavaScript 中的一个指令，它用于启用严格模式（strict mode）。
use strict 概念理解篇
写完这行代码打球去的博客
11-26 210
严格模式概念理解
前端JavaScript篇之use strict是什么意思 ? 使用它区别是什么？
星辰迷上大海的博客
02-06 567
use strict 是 JavaScript 中的一个指令，用于告知解释器以严格模式解析代码。在严格模式下，JavaScript 的行为会有一些变化，这样可以减少一些不规范或者不安全的语法使用，同时也使得代码更具可读性和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值