社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 歸納整理JavaScript基礎之語法

歸納整理JavaScript基礎之語法

WBOY
發布： 2022-08-03 18:18:58
轉載
2072 人瀏覽過

這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於基礎語法的相關問題，JavaScript是互聯網上最流行的腳本語言，下面就一起來看一下，希望對大家有幫助。

歸納整理JavaScript基礎之語法

【相關推薦：javascript影片教學、web前端】

##介紹

JavaScript是網路上最受歡迎的腳本語言，這門語言可用於HTML 和web，更可廣泛用於伺服器、PC、筆記型電腦、平板電腦和智慧型手機等裝置。

JavaScript特點

    JavaScript 是一門腳本語言。
  • JavaScript 是一種輕量級的程式語言。
  • JavaScript 是可插入 HTML 頁面的程式碼。
  • JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
  • JavaScript 很容易學習。
JavaScript 已經由 ECMA（歐洲電腦製造商協會）透過 ECMAScript 實現語言的標準化。

年份名稱描述1997ECMAScript 1第一個版本#1998ECMAScript 2版本變更#1999ECMAScript 3新增正規表示式 ## 2009新增JSON 支援2011##2015ECMAScript 6新增類別和模組2016ECMAScript 7增加指數運算子(**)#

用法

HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。腳本可放置在 HTML 頁面的 和 部分。

通常，我們需要在某個事件發生時執行程式碼，例如當使用者點擊按鈕時。如果我們把 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(&#39;demo&#39;).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關鍵字。
新增try/catch
ECMAScript 4 沒有發布
ECMAScript 5 新增"strict mode"，嚴格模式
ECMAScript 5.1 版本變更
增加Array.prototype.includes
##do
JavaScript關鍵字（按字母順序）
#abstractelseinstanceofsuper
booleanenum #intswitch
breakexportinterfacesynchronized
#byteextendsletthis
casefalse longthrow
catch#finalnativethrows
charfinallynewtransient
floatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debugger# gotoprotectedvar
defaultifpublicvoid
deleteimplementsreturn#volatile
##################################################################################################################################################################################### # ##import######short######while#############double######in######static################################################################################## with############

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(&#39;Mike&#39;,&#39;18&#39;,&#39;Beijing&#39;)">点击这里</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(&#39;demoOne&#39;).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
##比較傳回值==等於x==8##falsex==5true#===falsex ===5true!=true!==truex!==5##false>false<true>=false<=
JavaScript常見比較運算子（x=5）
運算子描述
#絕對等於（值與型別相等）x==="5"
 不等於x!=8
# 不絕對等於（值和型別有一個不相等，或兩個都不相等）x!=="5"
# 大於x>8
 小於x<8
 大於或等於x>=8
 小於或等於true## <= 小於或等於x<=8
x<=8
#true
########################################################################################################################################### ###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: &#39;john&#39;, 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视频教程、web前端】

以上是歸納整理JavaScript基礎之語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
javascript
來源：csdn.net
上一篇：完全掌握javascript流程控制結構（順序結構、分支結構與循環結構） 下一篇：JS迴圈學習：for迴圈語句的使用（範例詳解）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}
來自於 2024-04-06 19:25:49
0
1
505
放大 d3.js 時散佈圖點不會保持值 這是我第一次使用d3.js，所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止，我幾乎一切正常，但當我縮放時，...
來自於 2024-04-06 18:16:26
0
1
403
供應商特定偽元素上的 JavaScript 懸停事件 我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...
來自於 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀 我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中，它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....
來自於 2024-04-06 12:53:11
0
1
376
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板