avaScript基礎(chǔ)學(xué)習(xí)-基本的語(yǔ)法規(guī)則
一、運(yùn)算符
- js中的+-*/運(yùn)算與c語(yǔ)言較為相似,簡(jiǎn)寫方式也類似
- ++、--、+=、%=等運(yùn)算規(guī)則也相同
- 在js中===代表絕對(duì)等于（值與類型都相同才算相同）
- ！==（不絕對(duì)等于）值和類型有一個(gè)不相同或者都不相同為真
- js中還支持三目運(yùn)算符
- a>b?'a大于b':'b大于a'
二、分支語(yǔ)句
js中的條件語(yǔ)句 ：
if分支：
? ? ?if ? ? ?if...else... ? ? ?if...else if..else...
switch分支：
? ? ?switch()
? ? ?{
? ? ? ? ?case 1:
? ? ? ? ? ?{}
? ? ? ? ? ?break;
? ? ? ? ?case 2:
? ? ? ? ? ?{}
? ? ? ? ? ?break;
? ? ? ? ?default:{}//默認(rèn)情況
? ? ?}三、循環(huán)語(yǔ)句
- for(初始條件;終止條件;循環(huán)變量的變化)
- for/in循環(huán)遍歷對(duì)象的屬性
- while
- do/while
- break
- continue
- 與c語(yǔ)言非常類似
<!--
break的另一種用法
label:
語(yǔ)句塊
...
break labelname;
跳出指定的標(biāo)簽塊
-->
四、異常的捕獲與處理
捕捉異常
try{}
捕捉到異常后執(zhí)行的語(yǔ)句
catch(err){}
無(wú)論是否會(huì)有異常,最后執(zhí)行的語(yǔ)句
finally{}
五、js中的this關(guān)鍵字
面向?qū)ο笳Z(yǔ)言中 this 表示當(dāng)前對(duì)象的一個(gè)引用。 但在 JavaScript 中 this 不是固定不變的，它會(huì)隨著執(zhí)行環(huán)境的改變而改變。在方法中，this 表示該方法所屬的對(duì)象。 如果單獨(dú)使用，this 表示全局對(duì)象。
- 在函數(shù)中，this 表示全局對(duì)象。在函數(shù)中，在嚴(yán)格模式下，this 是未定義的(undefined)
- 在事件中，this 表示接收事件的元素。 類似 call() 和 apply() 方法可以將 this 引用到任何對(duì)象。
apply 和 call 允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對(duì)象，可以將 this 引用到任何對(duì)象。
代碼如下：
<!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定義變量使用規(guī)則
const定義常量與使用let 定義的變量相似：
- 二者都是塊級(jí)作用域
- 都不能和它所在作用域內(nèi)的其他變量或函數(shù)擁有相同的名稱
兩者還有以下兩點(diǎn)區(qū)別：
-
const聲明的常量必須初始化，而let聲明的變量不用 - const 定義常量的值不能通過(guò)再賦值修改，也不能再次聲明。
- 而 let 定義的變量值可以修改。
let聲明的變量：
在不同的{}內(nèi)可以使用let定義不同的變量,var不行，而且let定義的變量不能使用var再次定義,var定義的變量也不能使用let再次定義， const與var、const與let同樣，使用var關(guān)鍵字聲明的全局作用域變量屬于window對(duì)象。
- 使用let關(guān)鍵字聲明的全局作用域變量不屬于window對(duì)象。
- 使用var關(guān)鍵字聲明的變量在任何地方都可以修改。
- const可以一次定義多個(gè)常量值,并且每個(gè)常量值的名字不相同
- const指向的對(duì)象不可以改變,但是對(duì)象指向的東西可以改變
? myarray=["1","2","3"] ? ? ? ? myarray[0]="100"http://正確 ? ? ? ? myarray=["2","3"]//錯(cuò)誤
- const聲明的常量可以在不同塊作用級(jí)重新聲明和賦值
- 可以使用
Object.freeze()方法來(lái) 凍結(jié)變量 （指向與內(nèi)容都不可變 - 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修飾的變量被修改后會(huì)報(bào)錯(cuò)
? ? ? ? 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的本質(zhì)區(qū)別
- 前者不會(huì)改變網(wǎng)頁(yè)的url，而后者會(huì)將url定位到#+id
語(yǔ)法格式如下：
void func()
javascript:void func()
或者：
void(func())
javascript:void(func())
-
javascript:void(0)中最關(guān)鍵的是 void 關(guān)鍵字， void 是 JavaScript 中非常重要的關(guān)鍵字，該操作符指定要計(jì)算一個(gè)表達(dá)式但是不返回值。href="#"與href="javascript:void(0)"的區(qū)別# 包含了一個(gè)位置信息，默認(rèn)的錨是#top 也就是網(wǎng)頁(yè)的上端。 而javascript:void(0), 僅僅表示一個(gè)死鏈接。在頁(yè)面很長(zhǎng)的時(shí)候會(huì)使用 # 來(lái)定位頁(yè)面的具體位置，格式為：# + id。
如果你要定義一個(gè)死鏈接請(qǐng)使用 javascript:void(0) ?？梢允褂?code>javascript:void()執(zhí)行想要的函數(shù),彈窗,等等
語(yǔ)法規(guī)則：
? <a href="javascript:void(0);" rel="external nofollow" >點(diǎn)我</a> ? <a href="#demo" rel="external nofollow" >回頂部</a>
八、異步編程setTimeout
異步（Asynchronous, async）是與同步（Synchronous, sync）相對(duì)的概念。在我們學(xué)習(xí)的傳統(tǒng)單線程編程中，程序的運(yùn)行是同步的（同步不意味著所有步驟同時(shí)運(yùn)行，而是指步驟在一個(gè)控制流序列中按順序執(zhí)行）。而異步的概念則是不保證同步的概念，也就是說(shuō)，一個(gè)異步過(guò)程的執(zhí)行將不再與原有的序列有順序關(guān)系。
簡(jiǎn)單來(lái)理解就是：同步按你的代碼順序執(zhí)行，異步不按照代碼順序執(zhí)行，異步的執(zhí)行效率更高。
回調(diào)函數(shù)就是一個(gè)函數(shù)，它是在我們啟動(dòng)一個(gè)異步任務(wù)的時(shí)候就告訴它：等你完成了這個(gè)任務(wù)之后要干什么。這樣一來(lái)主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了，他自己會(huì)善始善終。啟用回調(diào)函數(shù) setTimeout("函數(shù)名",間隔時(shí)間(毫秒))可以將函數(shù)定義到setTimeout函數(shù)內(nèi)
代碼如下：
<!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>回調(diào)函數(shù)等待 3 秒后執(zhí)行。</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";
? ? }
? ? //這里是定時(shí)三秒
? ? setTimeout(print, 3000);
? ? // 第二種方式
? ? setTimeout(function () {
? ? document.getElementById("demo1").innerHTML="666";
? ? }, 3000);
? ? // 測(cè)試
? ? // 主線程先打印出來(lái),子線程繼續(xù)接上
? ? setTimeout(function () {
? ? document.getElementById("demo3").innerHTML="-1!";
? ? }, 3000);
? ? document.getElementById("demo4").innerHTML="-2!";
? ? console.log("2");
</script>
</body>
</html>九、函數(shù)閉包
- 閉包是一種保護(hù)私有變量的機(jī)制，在函數(shù)執(zhí)行時(shí)形成私有的作用域，
- 保護(hù)里面的私有變量不受外界干擾。直觀的說(shuō)就是形成一個(gè)不銷毀的棧環(huán)境。
代碼如下：
<!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()">點(diǎn)擊加一</button>
</body>
</html>總結(jié)：
這些都只是js的一些入門語(yǔ)法,想要學(xué)好還需細(xì)細(xì)的斟酌,
到此這篇關(guān)于avaScript基礎(chǔ)學(xué)習(xí)-基本的語(yǔ)法規(guī)則的文章就介紹到這了,更多相關(guān)avaScript語(yǔ)法規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js改變下拉框的顯示等實(shí)現(xiàn)代碼。2009-05-05
webpack構(gòu)建打包的性能優(yōu)化實(shí)戰(zhàn)指南
webpack是前端開發(fā)中比較常用的打包工具之一,另外還有g(shù)ulp,grunt,下面這篇文章主要給大家介紹了關(guān)于webpack構(gòu)建打包的性能優(yōu)化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
JavaScript實(shí)現(xiàn)秒數(shù)轉(zhuǎn)換時(shí)間的兩種格式
在開發(fā)過(guò)程中,經(jīng)常會(huì)遇到后臺(tái)接口返回的是以秒為單位的數(shù)據(jù),而我們需要將其轉(zhuǎn)換為一個(gè)更加易讀的格式,本文將介紹如何實(shí)現(xiàn)秒數(shù)轉(zhuǎn)時(shí)間的兩種格式,有需要的可以參考下2025-02-02
javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法,實(shí)例分析了javascript操作div層的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Easyui Tree獲取當(dāng)前選擇節(jié)點(diǎn)的所有頂級(jí)父節(jié)點(diǎn)
這篇文章主要介紹了Easyui Tree獲取當(dāng)前選擇節(jié)點(diǎn)的所有頂級(jí)父節(jié)點(diǎn),以及easyUI Tree顯示選中節(jié)點(diǎn)的所有父節(jié)點(diǎn)的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序上傳圖片到服務(wù)器的實(shí)例代碼，在文章給大家補(bǔ)充介紹了微信小程序上傳一或多張圖片 的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒加載,需要的朋友可以參考下2017-11-11
對(duì)于搶紅包來(lái)說(shuō)最重要的就是隨機(jī)性算法,如何確保每個(gè)人獲得金額是趨向于平均的,也就是有平均的概率去隨機(jī),而盡量避免兩極分化,本文給大家介紹了用JS實(shí)現(xiàn)搶紅包的三種算法,文中有相關(guān)的代碼示例,需要的朋友可以參考下2024-03-03
Bootstrap每天必學(xué)之進(jìn)度條，對(duì)Bootstrap進(jìn)度條小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap進(jìn)度條，從中得到收獲。2015-11-11
使用CSS3的scale實(shí)現(xiàn)網(wǎng)頁(yè)整體縮放
QQ郵箱的網(wǎng)頁(yè)整體縮放效果，原來(lái)實(shí)現(xiàn)方法如此簡(jiǎn)單，下面有個(gè)實(shí)現(xiàn)示例，大家可以參考下2014-03-03
document節(jié)點(diǎn)對(duì)象的獲取方式示例介紹
如果要操作一個(gè)元素，首先要獲取到它，下面為大家介紹下document節(jié)點(diǎn)對(duì)象的獲取方式，感興趣的朋友不要錯(cuò)過(guò)2013-12-12