今天小编给大家分享一下avaScript基本的语法规则是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
一、运算符
js中的+-*/运算与c语言较为相似,简写方式也类似
++、--、+=、%=等运算规则也相同
在js中===代表绝对等于(值与类型都相同才算相同)
!==(不绝对等于)值和类型有一个不相同或者都不相同为真
js中还支持三目运算符
a>b?'a大于b':'b大于a'
二、分支语句
js中的条件语句 :
if分支:
if
if...else...
if...else if..else...
switch分支:
switch()
{
case 1:
{}
break;
case 2:
{}
break;
default:{}//默认情况
}
三、循环语句
for(初始条件;终止条件;循环变量的变化)
for/in循环遍历对象的属性
while
do/while
break
continue
与c语言非常类似
<!--
break的另一种用法
label:
语句块
...
break labelname;
跳出指定的标签块
-->
四、异常的捕获与处理
捕捉异常
try{
}
捕捉到异常后执行的语句
catch(err){
}
无论是否会有异常,最后执行的语句
finally{
}
五、js中的this关键字
面向对象语言中 this 表示当前对象的一个引用。 但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。在方法中,this 表示该方法所属的对象。 如果单独使用,this 表示全局对象。
apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var p1={
firname:"阿萨德",
age:"28",
f:function() {
return this.firname+" "+this.age;
}
}
var p2={
firname:"张三",
age:"20"
}
x=p1.f.call(p2)
xx=p1.f.call(p1)
document.getElementById("demo").innerHTML=x
document.getElementById("demo1").innerHTML=xx
</script>
</body>
</html>
六、let与const定义变量使用规则
const定义常量与使用let 定义的变量相似:
两者还有以下两点区别:
let声明的变量:
在不同的{}内可以使用let定义不同的变量,var不行,而且let定义的变量不能使用var再次定义,var定义的变量也不能使用let再次定义, const与var、const与let同样,使用var关键字声明的全局作用域变量属于window对象。
使用let关键字声明的全局作用域变量不属于window对象。
使用var关键字声明的变量在任何地方都可以修改。
const可以一次定义多个常量值,并且每个常量值的名字不相同
const指向的对象不可以改变,但是对象指向的东西可以改变
myarray=["1","2","3"]
myarray[0]="100"//正确
myarray=["2","3"]//错误
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
let x=10;
var x1=10;
// 用const修饰的变量被修改后会报错
const x2=10
x=11;
x1=11;
// x2=11;
document.getElementById("demo").innerHTML=x;
document.getElementById("demo1").innerHTML=x1;
document.getElementById("demo2").innerHTML=x2;
</script>
</body>
</html>
七、js中的void链接
javascript:void(0)与#+id的本质区别
语法格式如下:
void func()
javascript:void func()
或者:
void(func())
javascript:void(func())
如果你要定义一个死链接请使用 javascript:void(0)
。可以使用javascript:void()
执行想要的函数,弹窗,等等
语法规则:
<a href="javascript:void(0);" rel="external nofollow" >点我</a>
<a href="#demo" rel="external nofollow" >回顶部</a>
八、异步编程setTimeout
异步(Asynchronous, async)
是与同步(Synchronous, sync)
相对的概念。在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。
回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。启用回调函数 setTimeout("函数名",间隔时间(毫秒))可以将函数定义到setTimeout函数内
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
// 第一种方式
function print() {
document.getElementById("demo").innerHTML="666";
}
//这里是定时三秒
setTimeout(print, 3000);
// 第二种方式
setTimeout(function () {
document.getElementById("demo1").innerHTML="666";
}, 3000);
// 测试
// 主线程先打印出来,子线程继续接上
setTimeout(function () {
document.getElementById("demo3").innerHTML="-1!";
}, 3000);
document.getElementById("demo4").innerHTML="-2!";
console.log("2");
</script>
</body>
</html>
九、函数闭包
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var add = (function () {
var count = 0;
return function(){return count+=1;}
})();
function f(){
document.getElementById("demo").innerHTML=add();
}
</script>
<div id="demo"></div>
<button type="button" onclick="f()">点击加一</button>
</body>
</html>
以上就是“avaScript基本的语法规则是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注天达云行业资讯频道。