??????個人簡介：以山河作禮。
??????:Python領(lǐng)域新星創(chuàng)作者，CSDN實力新星認證，阿里云社區(qū)專家博主
????:Web全棧開發(fā)專欄：《Web全棧開發(fā)》免費專欄，歡迎閱讀！
1. JavaScript 表單
1.1 JavaScript 表單驗證
??JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進行驗證。
表單數(shù)據(jù)經(jīng)常需要使用 JavaScript 來驗證其正確性：
- 驗證表單數(shù)據(jù)是否為空？
- 驗證輸入是否是一個正確的email地址？
- 驗證日期是否輸入正確？
- 驗證表單輸入內(nèi)容是否為數(shù)字型？
??以下是一個簡單的示例，演示如何驗證表單中的文本輸入字段：
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">電子郵件地址：</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
<script>
const form = document.querySelector('form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const passwordInput = document.querySelector('#password');
form.addEventListener('submit', (event) => {
// 阻止表單默認提交行為
event.preventDefault();
// 檢查姓名輸入是否為空
if (nameInput.value.trim() === '') {
alert('請?zhí)顚懶彰?);
return;
}
// 檢查電子郵件地址是否有效
if (!isValidEmail(emailInput.value)) {
alert('請輸入有效的電子郵件地址');
return;
}
// 檢查密碼是否至少包含一個數(shù)字和一個字母
if (!isValidPassword(passwordInput.value)) {
alert('密碼必須至少包含一個數(shù)字和一個字母');
return;
}
// 如果所有驗證都通過，則提交表單
form.submit();
});
// 檢查電子郵件地址是否有效的函數(shù)
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// 檢查密碼是否至少包含一個數(shù)字和一個字母的函數(shù)
function isValidPassword(password) {
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
return passwordRegex.test(password);
}
</script>
運行結(jié)果：
在這個示例中，我們使用
addEventListener方法為表單的submit事件添加了一個監(jiān)聽器，當(dāng)用戶點擊提交按鈕時，我們將執(zhí)行一些自定義驗證邏輯。如果驗證成功，我們將調(diào)用form.submit()方法提交表單。否則，我們將使用alert方法顯示一個錯誤消息。同時我們使用了兩個正則表達式來驗證電子郵件地址和密碼。正則表達式是一種強大的工具，可以用來匹配和搜索字符串。在這里，我們使用正則表達式來確保用戶輸入的電子郵件地址和密碼符合特定的格式要求。
2. JavaScript 保留關(guān)鍵字
??JavaScript 保留關(guān)鍵字是指被 JavaScript 語言保留用于特定用途的單詞。這些單詞不能用作標(biāo)識符，如變量名、函數(shù)名等。
以下是 JavaScript 中的保留關(guān)鍵字：
await
break
case
catch
class
const
continue
debugger
default
delete
do
else
enum
export
extends
false
finally
for
function
if
implements
import
in
instanceof
interface
let
new
null
package
private
protected
public
return
static
super
switch
this
throw
true
try
typeof
var
void
while
with
yield
在編寫 JavaScript 代碼時，應(yīng)避免使用這些保留關(guān)鍵字作為標(biāo)識符，以免產(chǎn)生語法錯誤。
3. JavaScript this 關(guān)鍵字
?? ?? 在 JavaScript 中，this 關(guān)鍵字用于引用當(dāng)前執(zhí)行上下文中的對象。具體來說，this 引用的是調(diào)用當(dāng)前函數(shù)的對象。
??當(dāng)函數(shù)以對象的方法的形式調(diào)用時，this 引用該對象
例如：
const person = {
name: 'Alice',
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
};
person.sayHello(); // 輸出 "Hello, my name is Alice."
在上面的例子中，sayHello 方法是以 person 對象的方法的形式調(diào)用的，因此在方法內(nèi)部，this 引用 person 對象。
??當(dāng)函數(shù)以普通函數(shù)的形式調(diào)用時，this 引用全局對象（在瀏覽器中是 window 對象，在 Node.js 中是 global 對象）。
例如：
function sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
sayHello(); // 輸出 "Hello, my name is undefined."
在上面的例子中，sayHello 函數(shù)是以普通函數(shù)的形式調(diào)用的，因此在函數(shù)內(nèi)部，this 引用全局對象。由于全局對象沒有 name屬性，因此輸出結(jié)果為 undefined。
??可以使用 call、apply 和 bind 方法來顯式地設(shè)置函數(shù)內(nèi)部的 this。
例如：
const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
function sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
sayHello.call(person1); // 輸出 "Hello, my name is Alice."
sayHello.call(person2); // 輸出 "Hello, my name is Bob."
在上面的例子中，call 方法用于調(diào)用 sayHello 函數(shù)，并將 this 設(shè)置為 person1 或 person2對象。因此在函數(shù)內(nèi)部，this 引用相應(yīng)的對象。
4. JavaScript let 和 const
?? ?? let 和 const 是 ES6 中新增的聲明變量的關(guān)鍵字，它們與傳統(tǒng)的 var 關(guān)鍵字有所不同。
4.1 let
??let 關(guān)鍵字用于聲明塊級作用域的變量。塊級作用域是指在代碼塊（如函數(shù)、循環(huán)、條件語句等）內(nèi)部聲明的變量只在該代碼塊內(nèi)部可見，外部無法訪問。
例如：
let x = 1;
if (true) {
let x = 2;
console.log(x); // 輸出 2
}
console.log(x); // 輸出 1
在上面的例子中，let x = 2 聲明了一個塊級作用域的變量，只在 if 語句塊內(nèi)部可見。外部的 x 變量仍為 1。
4.2 const
??const 關(guān)鍵字用于聲明塊級作用域的常量。與 let 類似，const 聲明的變量也是塊級作用域的。
與 let 不同的是，const 聲明的變量不能被重新賦值。一旦聲明，其值就不能再改變。
例如：
const x = 1;
if (true) {
const x = 2;
console.log(x); // 輸出 2
}
console.log(x); // 輸出 1
// 以下代碼會拋出 TypeError 錯誤
const y = 1;
y = 2;
在上面的例子中，const x = 2 聲明了一個塊級作用域的常量，只在 if 語句塊內(nèi)部可見。外部的 x 常量仍為 1。 嘗試重新賦值常量 y 會拋出 TypeError 錯誤，因為常量不能被重新賦值。
5.JavaScript JSON
?? ?? JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，基于 JavaScript 語法的子集。
??JSON 的語法規(guī)則非常簡單，它由以下三種基本類型組成：
- 對象（Object）
- 數(shù)組（Array）
- 值（Value）
??對象是一組鍵值對，鍵和值之間使用冒號分隔，鍵值對之間使用逗號分隔，對象使用花括號包裹。
例如：
const person = {
name: 'Alice',
age: 25,
address: {
city: 'Beijing',
country: 'China'
}
};
// 將對象轉(zhuǎn)換為 JSON 字符串
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // 輸出 {"name":"Alice","age":25,"address":{"city":"Beijing","country":"China"}}
??數(shù)組是一組有序的值，值之間使用逗號分隔，數(shù)組使用方括號包裹。
例如：
const fruits = ['apple', 'banana', 'orange'];
// 將數(shù)組轉(zhuǎn)換為 JSON 字符串
const jsonStr = JSON.stringify(fruits);
console.log(jsonStr); // 輸出 ["apple","banana","orange"]
??值可以是字符串、數(shù)字、布爾值、null、對象或數(shù)組。
例如：
const data = {
name: 'Alice',
age: 25,
married: false,
hobbies: ['reading', 'running'],
address: {
city: 'Beijing',
country: 'China'
},
job: null
};
// 將值轉(zhuǎn)換為 JSON 字符串
const jsonStr = JSON.stringify(data);
console.log(jsonStr); // 輸出 {"name":"JavaScript
??在JavaScript中，可以使用JSON對象來解析和生成JSON數(shù)據(jù)。
?? ?? JSON對象提供了兩個方法：
- JSON.parse()用于解析JSON字符串，將其轉(zhuǎn)換為JavaScript對象；
- JSON.stringify()用于將JavaScript對象轉(zhuǎn)換為JSON字符串。
例如，以下是一個JSON字符串的示例：
{
"name": "John Doe",
"age": 30,
"isMarried": true,
"hobbies": ["reading", "music", "sports"],
"address": {
"street": "123 Main St",
"city": "Anytown",
"state": "CA",
"zip": "12345"
}
}
??可以使用JSON.parse()方法將其轉(zhuǎn)換為JavaScript對象，
例如：
var jsonString = '{"name":"John Doe","age":30,"isMarried":true,"hobbies":["reading","music","sports"],"address":{"street":"123 Main St","city":"Anytown","state":"CA","zip":"12345"}}';
var jsonObj = JSON.parse(jsonString);
??這樣就可以使用JavaScript對象的方式訪問JSON數(shù)據(jù)了,同樣地可以使用JSON.stringify()方法將JavaScript對象轉(zhuǎn)換為JSON字符串，
例如：
var jsonObj = {
"name": "John Doe",
"age": 30,
"isMarried": true,
"hobbies": ["reading", "music", "sports"],
"address": {
"street": "123 Main St",
"city": "Anytown",
"state": "CA",
"zip": "12345"
}
};
var jsonString = JSON.stringify(jsonObj);
6.JavaScript 異步編程
?? ?? JavaScript 是一種單線程語言，這意味著它一次只能執(zhí)行一個任務(wù)。但是，JavaScript 中的異步編程模型允許我們在執(zhí)行長時間運行的任務(wù)時不會阻塞主線程。
??JavaScript 中常用的異步編程模型包括：
- ·
回調(diào)函數(shù)：回調(diào)函數(shù)是異步編程中最常用的模型之一。在這種模型中，我們將一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)，并在異步操作完成后調(diào)用該函數(shù)。 -
Promise：Promise 是一種更現(xiàn)代的異步編程模型，它提供了一種更優(yōu)雅的方式來處理異步操作。Promise
對象表示一個異步操作的最終完成或失敗，并且允許我們在異步操作完成后執(zhí)行一些代碼。 -
async/await：async/await 是一種基于 Promise 的異步編程模型。async/await使得異步代碼看起來像同步代碼，這使得代碼更易于理解和維護。
無論使用哪種異步編程模型，都需要小心處理異步代碼中的錯誤和異常。異步代碼中的錯誤可能會導(dǎo)致程序崩潰或無法正常工作。因此，一定要確保正確地處理錯誤和異常。文章來源：http://www.zghlxwxcb.cn/news/detail-474473.html
7.JavaScript 代碼規(guī)范
?? ?? 在 JavaScript 中，代碼規(guī)范是非常重要的。它可以提高代碼的可讀性和可維護性，并減少代碼錯誤和漏洞的風(fēng)險。
??以下是一些常見的 JavaScript 代碼規(guī)范：文章來源地址http://www.zghlxwxcb.cn/news/detail-474473.html
- 使用駝峰命名法來命名變量、函數(shù)和對象屬性。
- 使用 const 或 let 來聲明變量，不要使用 var。
- 在代碼塊中使用花括號，即使代碼塊只有一行。
- 在函數(shù)名和括號之間留一個空格，例如 function test() { }。
- 在操作符周圍留空格，例如 a + b。
- 在逗號后留一個空格，例如 var arr = [1, 2, 3]。
- 使用分號來結(jié)束語句。
- 避免使用全局變量，盡可能使用局部變量。
- 使用注釋來解釋代碼的目的和功能。
- 盡可能使用模塊化的代碼結(jié)構(gòu)，將相關(guān)的代碼組織在一起。
到了這里，關(guān)于從零開始學(xué)習(xí)JavaScript：輕松掌握編程語言的核心技能④的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
