技術文章 » 歸納整理JavaScript基礎之語法

歸納整理JavaScript基礎之語法

2022-08-03 22:01:00
本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於基礎語法的相關問題，JavaScript是網際網路上最流行的指令碼語言，下面就一起來看一下，希望對大家有幫助。

【相關推薦：、】

介紹

JavaScript是網際網路上最流行的指令碼語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、筆記型電腦、平板電腦和智慧手機等裝置。

JavaScript特點

  • JavaScript 是一門指令碼語言。
  • JavaScript 是一種輕量級的程式語言。
  • JavaScript 是可插入 HTML 頁面的程式設計程式碼。
  • JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
  • JavaScript 很容易學習。

JavaScript 已經由 ECMA（歐洲電腦製造商協會）通過 ECMAScript 實現語言的標準化。

年份名稱描述
1997ECMAScript 1第一個版本
1998ECMAScript 2版本變更
1999ECMAScript 3新增正規表示式
新增 try/catch
ECMAScript 4沒有釋出
2009ECMAScript 5新增 "strict mode"，嚴格模式
新增 JSON 支援
2011ECMAScript 5.1版本變更
2015ECMAScript 6新增類和模組
2016ECMAScript 7增加指數運運算元 (**)
增加 Array.prototype.includes

用法

HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。指令碼可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

通常，我們需要在某個事件發生時執行程式碼，比如當使用者點選按鈕時。如果我們把 JavaScript 程式碼放入函數中，就可以在事件發生時呼叫該函數。

範例1：head中的script函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head標籤中script</title>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "這是我的函數";
        }
    </script>
</head>
<body>
<h1>我的函數</h1>
<p id="demo">一段話</p>
<button type="button" onclick="myFunction()">這是函數</button>
</body>
</html>

範例2：body中的script函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body中的script</title>
</head>
<body>
<h1>我的函數</h1>
<p id="demo">我的函數</p>
<button type="button" onclick="myFunction()">點選一下</button>
<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "這是我的函數"
    }
</script>
</body>
</html>

JavaScript也可以放在外部供呼叫，注意外部拓展名為.js。

範例3：外部呼叫JavaScript

外部呼叫.js

function myFunction() {
    document.getElementById('demo').innerHTML = "這是我的函數"
}

呼叫外部script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>呼叫外部script</title>
</head>
<body>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
<script src="外部指令碼.js"></script>
</body>
</html>

輸出

JavaScript 可以通過不同的方式來輸出資料：

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法將內容寫到 HTML 檔案中。
  • 使用 innerHTML 寫入到 HTML 元素。
  • 使用 console.log() 寫入到瀏覽器的控制檯。

範例1：aler()彈窗輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert輸出</title>
</head>
<body>
<h1>alert輸出</h1>
<script>
    window.alert(5 + 6)
</script>
</body>
</html>

範例2：document.write()輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document.write輸出</title>
</head>
<body>
<h1>document.write輸出</h1>
<script>
    document.write(Date());
    document.write("Hello,Web!");
</script>
</body>
</html>

範例3：寫到HTMl檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>寫到HTMl檔案</title>
</head>
<body>
<h1>寫到HTMl檔案</h1>
<script>
    function myFunction() {
        document.write("函數輸出");
    }
</script>
<button onclick="myFunction()">點選這裡</button>
</body>
</html>

範例4：使用 console.log() 寫入到瀏覽器的控制檯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用console.log()寫入到瀏覽器的控制檯</title>
</head>
<body>
<h1>console.log()寫入到瀏覽器的控制檯</h1>
<script >
    a = 5;
    b = 6;
    c = a + b;
    console.log(c)
</script>
</body>
</html>

語法介紹

JavaScript 是一個指令碼語言，它是一個輕量級，但功能強大的程式語言。

字面量

在程式語言中，一般固定值稱為字面量。

  • 數位（Number）字面量：可以是整數或者是小數，或者是科學計數(e)。如3.14，5.88等。
  • 字串（String）字面量：」可以使用單引號或雙引號。如"Hello"，"Web"等
  • 表示式字面量：用於計算的固定值。3 + 2.2,3.14 * 2等。
  • 陣列（Array：字面量：定義一個陣列。如[1,2,3,4,5,6]。
  • 物件（Object：字面量：定義一個物件。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。
  • 函數（Function）字面量：定義一個函數。如function myFunction(a, b) { return a * b;}。

注意，在JavaScript中，語句需要加結束符「；」。

JavaScrip變數

在程式語言中，變數用於儲存資料值。JavaScript 使用關鍵字var來定義變數， 使用等號來為變數賦值，變數之間可以相互操作：

var y = false                                     // 布林值
var length = 16;                                  // 數位
var points = x * 10;                              // 數位計算
var lastName = "Johnson";                         // 字串
var cars = ["Saab", "Volvo", "BMW"];              // 陣列
var person = {firstName:"John", lastName:"Doe"};  // 物件字典

JavaScript函數

為了能夠重複參照相同的功能，減少程式碼的書寫和維護的方便，JavaScript提供函數功能，由關鍵字function引導：

function myFunc(a, b) {
    return a + b; // 返回a+b結果
}

JavaScript特點

相對其它語言，JavaScript具有下列特點：

  • JavaScript對大小寫敏感。
  • JavaScript使用Unicode字元集。
  • JavaScript推薦使用駝峰命名法定義變數，命名避免關鍵字。
  • JavaScript屬於弱型別語言，定義變數都是var關鍵字。
JavaScript關鍵字（按字母序）
abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

JavaScript註釋（與Java相同）

// 這是程式碼：單句註釋，在編輯器一般是ctrl + L鍵。

/* 這是程式碼 */：多行註釋，在編輯器一般是ctrl + shift + L鍵。

語句

JavaScript語句向瀏覽器發出的命令，告訴瀏覽器該做什麼。下面的JavaScript語句向id="demo"的 HTML元素輸出文字"Hello World!" ：

document.getElementById("demo").innerHTML = "Hello World!";

與Python不同的是，JavaScript程式碼塊都是在大括號中的，這點像極了Java。

Java識別符號

常見JavaScript識別符號
語句描述
break用於跳出迴圈。
catch語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。
continue跳過迴圈中的一個迭代。
do ... while執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。
for在條件語句為 true 時，可以將程式碼塊執行指定的次數。
for ... in用於遍歷陣列或者物件的屬性（對陣列或者物件的屬性進行迴圈操作）。
function定義一個函數
if ... else用於基於不同的條件來執行不同的動作。
return退出函數
switch用於基於不同的條件來執行不同的動作。
throw丟擲（生成）錯誤 。
try實現錯誤處理，與 catch 一同使用。
var宣告一個變數。
while當條件語句為 true 時，執行語句塊。

大部分語言能夠自動補全空格，我們建議在運運算元兩邊加上空格，這樣清晰美觀，但是要注意在HTML中空格的是要留意用法的，切勿混談。在JavaScript中，下面兩句話是一樣的：

var a = 10;
var b=10;

與Python相似，JavaScript也是指令碼語言，屬於解釋型。

物件

定義物件

任何事物都是物件，具有相同特點的事物中抽象出來的一個特點範例。如人類中的小明。

在JavaScript中，物件就是是屬性變數的容器，類似Python中的字典，Java中的雜湊對映，其中定義了物件的屬性。

var people = {
    firstName: "Mike",
    lastName: "Smith",
    age: "18",
    address: "Beijing",
    job: "Student"
};

以上就是物件定義，當然你也可以寫作一行，我這樣是為了美觀，以後也強烈大家這樣寫。

存取物件屬性

可以說 "JavaScript 物件是變數的容器"。但是，我們通常認為 "JavaScript 物件是鍵值對的容器"。鍵值對通常寫法為key : value(鍵與值以冒號分割)，鍵值對在JavaScript物件通常稱為物件屬性。我們存取屬性也是通過萬能的" . "（大部分語言都是用的這個）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>這是網站</title>
</head>
<body>
<h1>存取類屬性</h1>
<!--下面語句一定要在script之前-->
<p id="demo"></p>
<script>
    var people = {
        firstName: "Mike",
        lastName: "Smith",
        age: "18",
        address: "Beijing",
        job: "Student"
    };
    document.getElementById("demo").innerHTML =
        people["firstName"] + "." + people.lastName;
</script>
</body>
</html>

兩種存取方式,你可以使用 物件名 .property 或 物件名.["property"] 。

函數

函數是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。當呼叫該函數時，會執行函數內的程式碼。可以在某事件發生時直接呼叫函數（比如當使用者點選按鈕時），並且可由 JavaScript 在任何位置進行呼叫。

引數與返回值

在呼叫函數時，您可以向其傳遞值，這些值被稱為引數，引數個數不限。

function myFunction(var1,var2)
{
程式碼
}

引數在呼叫時，應該嚴格按照其順序傳參，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>這是一個JavaScript網站</title>
</head>
<body>
<h1>函數引數傳遞問題</h1>
<p>點選下面按鈕呼叫</p>
<button onclick="myFunc('Mike','18','Beijing')">點選這裡</button>
<script>
    function myFunc(name, age, address) {
        alert("My name is " + name + ", age is " + age + " and my home is in " + address);
    }
</script>
</body>
</html>

JavaScript函數允許有返回值，返回關鍵字為return。當函數返回值後，函數將停止執行，在return後面的語句將不會被執行。

範例：計算兩個數的乘積並返回結果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript網站</title>
</head>
<body>
<h1>計算兩個數的值返回</h1>
<p id="demo"></p>
<script>
    function myFunc(a, b) {
        return a * b;
    }

    document.getElementById("demo").innerHTML = myFunc(3, 4);
</script>
</body>
</html>

變數

JavaScript變數分為兩種：

  • 全域性變數：在函數外宣告的變數是全域性變數，網頁上的所有指令碼和函數都能存取它。
  • 區域性變數：在JavaScript函數內部宣告的變數（使用 var）是區域性變數，所以只能在函數內部存取它。

當我們向未宣告的JavaScript變數分配值時，該變數將被自動作為window的一個屬性。如下列語句：

name = "Mike";

將宣告window的一個屬性name。非嚴格模式下給未宣告變數賦值建立的全域性變數，是全域性物件的可設定屬性，可以刪除。如：

var var1 = 1; // 不可設定全域性屬性
var2 = 2; // 沒有使用 var 宣告，可設定全域性屬性

console.log(this.var1); // 1
console.log(window.var1); // 1

delete var1; // false 無法刪除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已經刪除 報錯變數未定義

事件

描述

HTML事件是發生在HTML元素上的事情。當在 HTML 頁面中使用JavaScript時， JavaScript可以觸發這些事件。

HTML事件可以是瀏覽器行為，也可以是使用者行為。以下是HTM 事件的範例：

  • HTML 頁面完成載入
  • HTML input 欄位改變時
  • HTML 按鈕被點選

通常，當事件發生時，你可以做些事情。在事件觸發時JavaScript可以執行一些程式碼。HTML元素中可以新增事件屬性，使用JavaScript程式碼來新增HTML元素。

  • 單引號：<some-HTML-element some-event='JavaScript 程式碼'>
  • 雙引號：<some-HTML-element some-event="JavaScript 程式碼">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>
</head>
<body>
<h1>JavaScript事件處理兩種方式</h1>
<p id="demoOne"></p>
<button onclick="getElementById('demoOne').innerHTML=Date()">點選檢視時間1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">點選檢視時間2</button>
</body>
</html>

JavaScript通常是多行程式碼，比較差常見的就是通過事件屬性呼叫。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>
</head>
<body>
<h1>JavaScript事件之屬性呼叫</h1>
<p>點選執行<em>myFunc()</em>函數</p>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        document.getElementById("one").innerHTML = Date();
    }
</script>
</body>
</html>
常見HTML事件
事件描述
onchangeHTML 元素改變
onclick使用者點選 HTML 元素
onmouseover使用者在一個HTML元素上移動滑鼠
onmouseout使用者從一個HTML元素上移開滑鼠
onkeydown使用者按下鍵盤按鍵
onload瀏覽器已完成頁面的載入

後續會繼續學習更多事件。

事件作用

事件可以用於處理表單驗證，使用者輸入，使用者行為及瀏覽器動作：

  • 頁面載入時觸發事件
  • 頁面關閉時觸發事件
  • 使用者點選按鈕執行動作
  • 驗證使用者輸入內容的合法性

可以使用多種方法來執行 JavaScript 事件程式碼：

  • HTML 事件屬性可以直接執行 JavaScript 程式碼
  • HTML 事件屬性可以呼叫 JavaScript 函數
  • 你可以為 HTML 元素指定自己的事件處理程式
  • 你可以阻止事件的發生

字串

字串：一系列字元的集合。

var a = "abc";
var b = "Hello";

與Python類似，可以使用索引來存取字串中的每個字元：

var c = b[1];           // e

length

該屬性可以計算字串的長度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字串長度</title>
</head>
<body>
<script>
    var txtOne = "Hello World!";
    document.write("<p>" + txtOne.length + "</p>");
    var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write("<p>" + txtTwo.length + "</p>");
</script>
</body>
</html>

JavaScript也有一些特殊字元，例如當我們要列印引號時，需要加上「\」來進行跳脫，否則編譯器無法解析。

JavaScript常見特殊字元
程式碼輸出
\'單引號
\"雙引號
\\反斜槓
\n換行
\r回車
\ttab(製表符)
\b退格符
\f換頁符

字串作為物件

通常，JavaScript字串是原始值，可以使用字元建立： var firstName = "Mike"，但我們也可以使用new關鍵字將字串定義為一個物件：var firstName = new String("Mike")，這點與Java類似。

字串常見屬性
屬性描述
constructor返回建立字串屬性的函數
length返回字串的長度
prototype允許您向物件新增屬性和方法
字串常見方法
方法描述
charAt()返回指定索引位置的字元
charCodeAt()返回指定索引位置字元的 Unicode 值
concat()連線兩個或多個字串，返回連線後的字串
fromCharCode()將 Unicode 轉換為字串
indexOf()返回字串中檢索指定字元第一次出現的位置
lastIndexOf()返回字串中檢索指定字元最後一次出現的位置
localeCompare()用本地特定的順序來比較兩個字串
match()找到一個或多個正規表示式的匹配
replace()替換與正規表示式匹配的子串
search()檢索與正規表示式相匹配的值
slice()提取字串的片斷，並在新的字串中返回被提取的部分
split()把字串分割為子字串陣列
substr()從起始索引號提取字串中指定數目的字元
substring()提取字串中兩個指定的索引號之間的字元
toLocaleLowerCase()根據主機的語言環境把字串轉換為小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫對映
toLocaleUpperCase()根據主機的語言環境把字串轉換為大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫對映
toLowerCase()把字串轉換為小寫
toString()返回字串物件值
toUpperCase()把字串轉換為大寫
trim()移除字串首尾空白
valueOf()返回某個字串物件的原始值

==與===區別

1、對於 string、number 等基礎型別，== 和 === 是有區別的

  • a）不同型別間比較，==之比較"轉化成同一型別後的值"看"值"是否相等，===如果型別不同，其結果就是不等。
  • b）同型別比較，直接進行 "值" 比較，兩者結果一樣。

2、對於 Array,Object 等高階型別，== 和 === 是沒有區別的

進行 "指標地址" 比較

3、基礎型別與高階型別，== 和 === 是有區別的

  • a）對於 ==，將高階轉化為基礎型別，進行 "值" 比較
  • b）因為型別不同，=== 結果為 false

4、!= 為 == 的非運算，!== 為 === 的非運算

var num=1；

var str="1"；

var test=1；

test == num   //true　相同型別　相同值 

test === num  //true　相同型別　相同值 

test !== num  //false test與num型別相同，其值也相同,　非運算肯定是false 

num == str   //true 　把str轉換為數位，檢查其是否相等。 

num != str   //false  == 的 非運算 

num === str  //false  型別不同，直接返回false 

num !== str  //true   num 與 str型別不同 意味著其兩者不等　非運算自然是true啦

運運算元

JavaScript常見運運算元（y=5）
運運算元描述例子x 運算結果y 運算結果
+加法x=y+275
-減法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模（餘數）x=y%215
++自增x=++y66
x=y++56
--自減x=--y44
x=y--54
JavaScript常見賦值運運算元（x=10，y=5）
運運算元例子等同於運算結果
=x=y x=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0
JavaScript常見比較運運算元（x=5）
運運算元描述比較返回值
==等於x==8false
x==5true
===絕對等於（值和型別均相等）x==="5"false
x===5true
!= 不等於x!=8true
!== 不絕對等於（值和型別有一個不相等，或兩個都不相等）x!=="5"true
x!==5false
> 大於x>8false
< 小於x<8true
>= 大於或等於x>=8false
<= 小於或等於x<=8true
<= 小於或等於x<=8true
JavaScript常用邏輯運運算元（x=6，y=3）
運運算元描述例子
&&and(x < 10 && y > 1) 為 true
||or(x==5 || y==5) 為 false
!not!(x==y) 為 true

JavaScript 還包含了基於某些條件對變數進行賦值的條件運運算元。如：

variablename=(condition)?value1:value2

條件判斷

在 JavaScript 中，我們可使用以下條件語句：

  • if 語句 - 只有當指定條件為 true 時，使用該語句來執行程式碼
  • if...else 語句 - 當條件為 true 時執行程式碼，當條件為 false 時執行其他程式碼
  • if...else if....else 語句- 使用該語句來選擇多個程式碼塊之一來執行
  • switch 語句 - 使用該語句來選擇多個程式碼塊之一來執行

if語句

條件為true時才會執行程式碼。如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JavaScript網站</title>
</head>
<body>
<h1>這是if語句</h1>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        var x = "";
        var time = new Date().getHours();
        if (time < 20) {
            x = "Hello, Before 20:00";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

if...else語句

使用 if....else語句在條件為true時執行程式碼，在條件為false時執行其他程式碼。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JavaScript網站</title>
</head>
<body>
<h1>這是if...else語句</h1>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        var x = "";
        var time = new Date().getHours();
        if (time < 20) {
            x = "Hello, Before 20:00";
        }else {
            x = "Hello, After 20:00";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

多重if..else語句

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JavaScript網站</title>
</head>
<body>
<h1>多重if...else語句</h1>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        var x = "";
        var time = new Date().getHours();
        if (time < 12) {
            x = "上午好";
        } else if (time < 14) {
            x = "中午好";
        }
        else {
            x = "下午好";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

switch語句

使用switch語句來選擇要執行的多個程式碼塊之一。如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JavaScript網站</title>
</head>
<body>
<h1>switch語句</h1>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        var x = "";
        var time = new Date().getMonth();
        switch (time) {
            case 0:
                x = "January";
                break;
            case 1:
                x = "February";
                break;
            case 2:
                x = "March";
                break;
            case 3:
                x = "April";
                break;
            case 4:
                x = "May";
                break;
            case 5:
                x = "Jane";
                break;
            case 6:
                x = "July";
                break;
            case 7:
                x = "August";
                break;
            case 8:
                x = "September";
                break;
            case 9:
                x = "October";
                break;
            case 10:
                x = "November";
                break;
            case 11:
                x = "December";
                break;
            default:
                x = "ERROR";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

迴圈

JavaScript 支援不同型別的迴圈：

  • for - 迴圈程式碼塊一定的次數
  • for/in - 迴圈遍歷物件的屬性
  • while - 當指定的條件為 true 時迴圈指定的程式碼塊
  • do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊

for迴圈

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript迴圈</title>
</head>
<body>
<h1>點選按鈕迴圈程式碼5次。</h1>
<button onclick="myFunc()">點選這裡</button>
<p id="demo"></p>
<script>
    function myFunc() {
        var x = "";
        for (var i = 0; i < 5; i++) {
            x = x + "該數位為 " + i + "<br>";
        }
        document.getElementById("demo").innerHTML = x;
    }
</script>
</body>
</html>

fo /in迴圈

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<p>點選下面的按鈕，遍歷物件person屬性</p>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        let x;
        let text = "";
        const person = {
            firstName: "Bill",
            lastName: "Gates",
            age: 56
        };
        for (x in person) {
            text = text + " " + person[x];
        }
        document.getElementById("one").innerHTML = text;
    }
</script>
</body>
</html>

while迴圈

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<p>點選按鈕，i小於5就會列印輸出</p>
<button onclick="myFunc()">點選這裡</button>
<p id="one">顯示在這裡</p>
<script>
    function myFunc() {
        let x = "", i = 0;
        while (i < 5) {
            x = x + "這個數位為" + i + "<br>";
            i++;
        }
        document.getElementById("one").innerHTML = x
    }
</script>
</body>
</html>

do/while迴圈

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<p>點選按鈕，列印小於5的數</p>
<button onclick="myFunc()">點選這裡</button>
<p id="one"></p>
<script>
    function myFunc() {
        let x = "";
        let i = 0;
        do {
            x = x + "該數位為" + i + "<br>";
            i++;
        }
        while (i < 5);
        document.getElementById("one").innerHTML=x;
    }
</script>
</body>
</html>

for迴圈和while迴圈比較

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>這是funcOne</p>
<button onclick="funcOne()">點選funcOne</button>
<p id="one">funcOne在這裡</p>

<p>這是funcTwo</p>
<button onclick="funcTwo()">點選funcTwo</button>
<p id="two">funcTwo在這裡</p>

<script>
    function funcOne() {
        numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        let i = 0;
        let addRes = 0;
        while (numbers[i]) {
            addRes += numbers[i];
            i++;
        }
        document.getElementById("one").innerHTML = addRes + "<br>";

    }

    function funcTwo() {
        numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        let i = 0;
        let mulRes = 1;
        for (; numbers[i];) {
            mulRes *= numbers[i];
            i++;
        }
        document.getElementById("two").innerHTML = mulRes + "<br>";
    }
</script>

</body>
</html>

Break和Continue

break 語句用於跳出迴圈。continue 用於跳過迴圈中的一個迭代。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<p>這是continue和break語句</p>
<button onclick="funcOne()">點選funcOne</button>
<p id="one">這是funcOne</p>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="funcTwo()">點選funcTwo</button>
<p id="two">這是funcTwo</p>
<script>
    function funcOne() {
        let x = "";
        let i = 0;
        for (i = 0; i < 10; i++) {
            if (i < 5) {
                break;
            }
            x = x + "該數位為" + i + "<br>";
        }
        document.getElementById("one").innerHTML = x;
    }

    function funcTwo() {
        let x = "";
        let i = 0;
        for (i = 0; i < 10; i++) {
            if (i === 8) {
                continue;
            }
            x = x + "該數位為" + i + "<br>";
        }
        document.getElementById("two").innerHTML = x;
    }
</script>

</body>
</html>

typeof、null和undefined

使用typeof操作符來檢測變數的資料型別。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<p id="one"></p>
<script>
    document.getElementById("one").innerHTML =
        typeof "john" + "<br>" +
        typeof 3.14 + "<br>" +
        typeof false + "<br>" +
        typeof [1, 2, 3, 4] + "<br>" +
        typeof {name: 'john', age: 34};

</script>

</body>
</html>

在JavaScript中，陣列是一種特殊的物件型別。 因此 typeof [1,2,3,4] 返回 object。

null表示空，也就是」什麼也沒有「。當使用typeof 檢測時，返回object。物件可以使用undefined來清空。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<p>one:</p>
<p id="one"></p>
<p>two:</p>
<p id="two"></p>

<script>
    var person = {firstName: "Bill", lastName: "Gates", age: 50};
    var person = null;
    document.getElementById("one").innerHTML = typeof person;
    person = undefined
    document.getElementById("two").innerHTML = typeof person;
</script>

</body>
</html>

constructor屬性

constructor屬性返回所有JavaScript變數的建構函式。可以使用constructor屬性來檢視物件是否為陣列或者是否為日期 (包含字串 "Date")等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>constructor屬性返回變數或者建構函式</p>
<p id="one">HRER</p>
<script>
    document.getElementById("one").innerHTML =
        "Hello".constructor + "<br>" +
        3.14.constructor + "<br>" +
        false.constructor + "<br>" +
        [1, 2, 3].constructor + "<br>" +
        {name: "Hello", age: 18}.constructor + "<br>" +
        new Date().constructor + "<br>" +
        function () {
        }.constructor;
</script>

</body>
</html>

型別轉換

JavaScript 變數可以轉換為新變數或其他資料型別：

  • 通過使用JavaScript函數
  • 通過JavaScript自身自動轉換
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>String()方法可以將數位轉化為字串</p>
<p id="one">HERE</p>
<p>toString()方法可以將數位轉化為字串</p>
<p id="two">HERE</p>
<script>
    let x = 123;
    document.getElementById("one").innerHTML =
        String(x) + "<br>" +
        String(123) + "<br>" +
        String(100 + 23);
    document.getElementById("two").innerHTML =
        x.toString() + "<br>" +
        (123).toString() + "<br>" +
        (100 + 123.2).toString();
</script>

</body>
</html>

一元運運算元+

Operator+可用於將變數轉換為數位：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<P>typeof操作符返回變數或者表示式型別</P>
<button onclick="myFuncOne()">CLICK HERE ONE</button>
<p id="one">HERE</p>
<button onclick="myFuncTwo()">CLICK HERE TWO</button>
<p id="two">HERE</p>
<script>
    function myFuncOne() {
        let y = "5";
        let x = +y;
        document.getElementById("one").innerHTML =
            typeof y + "<br>" + x + "<br>" + typeof x;
    }

    function myFuncTwo() {
        let a = "Hello";
        let b = +a;
        document.getElementById("two").innerHTML =
            typeof a + "<br>" + b + "<br>" + typeof b;
    }

</script>
</body>
</html>
JavaScript型別轉換
原始值轉換為數位轉換為字串轉換為布林值
false0"false"false
true1"true"true
00"0"false
11"1"true
"0"0"0"true
"000"0"000"true
"1"1"1"true
NaNNaN"NaN"false
InfinityInfinity"Infinity"true
-Infinity-Infinity"-Infinity"true
""0""false
"20"20"20"true
"Runoob"NaN"Runoob"true
[ ]0""true
[20]20"20"true
[10,20]NaN"10,20"true
["Runoob"]NaN"Runoob"true
["Runoob","Google"]NaN"Runoob,Google"true
function(){}NaN"function(){}"true
{ }NaN"[object Object]"true
null0"null"false
undefinedNaN"undefined"false

正規表示式

正規表示式（英語：Regular Expression，在程式碼中常簡寫為regex、regexp或RE）使用單個字串來描述、匹配一系列符合某個句法規則的字串搜尋模式。

search()

用於檢索字串中指定的子字串，或檢索與正規表示式相匹配的子字串，並返回子串的起始位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>收索字串，匹配位置</p>

<button onclick="myFuncOne()">CLICK HERE ONE</button>
<p id="one">HERE</p>

<button onclick="myFuncTwo()">CLICK HERE TWO</button>
<p id="two">HERE</p>

<script>
    function myFuncOne() {
        let str = "Hello,World!";
        document.getElementById("one").innerHTML = str.search(/World/i);
    }

    function myFuncTwo() {
        let str = "Welcome to China!";
        document.getElementById("two").innerHTML = str.search("China");
    }
</script>

</body>
</html>

replace()

用於在字串中用一些字元替換另一些字元，或替換一個與正規表示式匹配的子串。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>正規表示式replace()替換</p>

<button onclick="myFuncOne()">CLICK ONE</button>
<p id="one">Hello,Java</p>

<button onclick="myFuncTwo()">CLICK TWO</button>
<p id="two">Hello,Java</p>

<script>
    function myFuncOne() {
        let str = document.getElementById("one").innerHTML;
        document.getElementById("one").innerHTML = str.replace(/Java/i, "Python");
    }

    function myFuncTwo() {
        let str = document.getElementById("two").innerHTML;
        document.getElementById("two").innerHTML = str.replace("Java","JavaScipt");
    }
</script>

</body>
</html>

正規表示式模式

正規表示式修飾符
修飾符描述
i執行對大小寫不敏感的匹配。
g執行全域性匹配（查詢所有匹配而非在找到第一個匹配後停止）。
m執行多行匹配。
正規表示式特殊字元
表示式描述
[abc]查詢方括號之間的任何字元。
[0-9]查詢任何從 0 至 9 的數位。
(x|y)查詢任何以 | 分隔的選項。
正規表示式量詞
量詞描述
n+匹配任何包含至少一個 n 的字串。
n*匹配任何包含零個或多個 n 的字串。
n?匹配任何包含零個或一個 n 的字串。

test()

用於檢測一個字串是否匹配某個模式，如果字串中含有匹配的文字，則返回true，否則返回false。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<script>
    let obj = new RegExp("e");
    let boolOne = obj.test("Hello,This is JavaScript");
    let boolTwo = obj.test("This is JavaScript");
    document.write(boolOne + "<br>" + boolTwo);
</script>

</body>
</html>

exec()

用於檢索字串中的正規表示式的匹配，該函數返回一個陣列，其中存放匹配的結果。如果未找到匹配，則返回值為 null。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<script>
    let obj = new RegExp(/e/);
    resOne = obj.exec("Hello,This is JavaScript");
    resTwo = obj.exec("This is JavaScript");
    /*沒有就是null*/
    document.write(resOne + "<br>" + resTwo);
</script>

</body>
</html>

錯誤異常

錯誤型別

  • 當 JavaScript 引擎執行 JavaScript 程式碼時，會發生各種錯誤。
  • 可能是語法錯誤，通常是程式設計師造成的編碼錯誤或錯別字。
  • 可能是拼寫錯誤或語言中缺少的功能（可能由於瀏覽器差異）。
  • 可能是由於來自伺服器或使用者的錯誤輸出而導致的錯誤。
  • 當然，也可能是由於許多其他不可預知的因素。

try...catch

try語句允許我們定義在執行時進行錯誤測試的程式碼塊，catch語句允許我們定義當try程式碼塊發生錯誤時，所執行的程式碼塊。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<input type="button" value="檢視訊息" onclick="myFunc()">
<script>
    let txt = "";

    function myFunc() {
        try {
            alert111("Hello,World!")
        }
        catch (err) {
            txt = "這裡有一個錯誤\n\n";
            txt += "錯誤描述：" + err.message + "\n\n";
            txt += "點選確定繼續\n\n";
            alert(txt)
        }
    }
</script>

</body>
</html>

throw

throw語句允許我們建立自定義錯誤。正確的技術術語是：建立或丟擲異常（exception）。如果把throw與try和catch一起使用，那麼您能夠控制程式流，並生成自定義的錯誤訊息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>請輸入一個5-10之間的數位</p>
<label for="one"></label><input id="one" type="text">
<button type="button" onclick="myFunc()">CLICK</button>
<p id="message">HERE</p>

<script>
    function myFunc() {
        let message;
        let x;
        message = document.getElementById("message");
        message.innerHTML = "";
        x = document.getElementById("one").value;
        try {
            if (x === "")
                throw "值為空";
            if (isNaN(x))
                throw "不是數位";
            x = Number(x);
            if (x < 5)
                throw "太小";
            if (x > 10)
                throw "太大";
        } catch (error) {
            message.innerHTML = "錯誤" + error;
        }
    }
</script>

</body>
</html>

函數呼叫

JavaScript 函數有 4 種呼叫方式，每種方式的不同在於this的初始化。一般而言，在Javascript中，this指向函數執行時的當前物件。

呼叫1：作為一個函數呼叫

one

function myFunc(a, b) {
    return a * b;
}

myFunc(1, 2);

two

function myFunc(a, b) {
    return a * b;
}

window.myFunc(1, 2);

呼叫2：函數作為方法呼叫

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>函數作為方法呼叫</p>
<p id="one">HERE</p>

<script>
    let myObject = {
        firstName: "Bill",
        lastName: "Gates",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("one").innerHTML = myObject.fullName();
</script>

</body>
</html>

呼叫3：使用建構函式呼叫函數

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>該範例中，myFunc()是函數的建構函式</p>
<p id="one"></p>
<script>
    function myFunc(argOne, argTwo) {
        this.Name = argOne;
        this.Number = argTwo;
    }

    let x = new myFunc("Hello", 123);
    document.getElementById("one").innerHTML = x.Name;
</script>

</body>
</html>

呼叫4：作為函數方法調動函數

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>作為函數方法調動函數</p>
<p id="one">HERE</p>

<script>
    let obj, array;

    function myFunc(a, b) {
        return a * b;
    }

    array = [5, 6];
    obj = myFunc.apply(obj, array);
    document.getElementById("one").innerHTML = obj;
</script>

</body>
</html>

閉包

內嵌函數

實際上，在JavaScript中，所有函數都能存取它們上一層的作用域。JavaScript支援巢狀函數，巢狀函數可以存取上一層的函數變數。內嵌函數plus()可以存取父函數的counter變數：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>內嵌函數</p>
<p id="one">HERE</p>

<script>
    document.getElementById("one").innerHTML = add();

    function add() {
        let counter = 0;

        function plus() {
            counter += 1;
        }

        plus();
        return counter;
    }
</script>

</body>
</html>

閉包

函數的自我呼叫稱為bibao

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<p>區域性計數器</p>
<button type="button" onclick="myFunc()">計數器</button>
<p id="one">HERE</p>

<script>
    let add = (function () {
        let counter = 0;
        return function () {
            return counter += 1;
        }
    })();

    function myFunc() {
        document.getElementById("one").innerHTML = add();
    }
</script>
</body>
</html>

【相關推薦：、】

以上就是歸納整理JavaScript基礎之語法的詳細內容，更多請關注TW511.COM其它相關文章！