前言
大家能够学习到这里想必也是编程界的老鸟了,讲语法主要讲一下与其他语言的区别。
一、运算符
<!-- 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 表示全局对象。 在函数中，this 表示全局对象。 在函数中，在严格模式下，this 是未定义的(undefined)。 在事件中，this 表示接收事件的元素。 类似 call() 和 apply() 方法可以将 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 定义的变量相似： 二者都是块级作用域 都不能和它所在作用域内的其他变量或函数拥有相同的名称 两者还有以下两点区别： const声明的常量必须初始化，而let声明的变量不用 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"]//错误 const声明的常量可以在不同块作用级重新声明和赋值 可以使用Object.freeze()方法来 冻结变量 （指向与内容都不可变） const与let都是先声明后使用 -->
代码如下：
<!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的本质区别 前者不会改变网页的url，而后者会将url定位到#+id --> <!-- 语法格式如下： void func() javascript:void func() 或者 void(func()) javascript:void(func()) javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字， 该操作符指定要计算一个表达式但是不返回值。 href="#"与href="javascript:void(0)"的区别 # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。 而javascript:void(0), 仅仅表示一个死链接。 在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。 如果你要定义一个死链接请使用 javascript:void(0) 。 可以使用javascript:void()执行想要的函数,弹窗,等等 -->
语法规则：
<a href="javascript:void(0);">点我</a> <a href="#demo">回顶部</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>
总结
这些都只是js的一些入门语法,想要学好还需细细的斟酌,想要快速入门可以看本博客。
