程序員都必掌握的前端教程之JavaScript基礎教程（上）

讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。

本篇文章成哥繼續帶大家來學習前端教程之JavaScript，網頁的動態事件基本上都是靠它來實現的。下面我們就一起來學習內容吧！

01 JavaScript簡介

JavaScript通常縮寫為 JS，是一種高級的，解釋執行的編程語言。

JavaScript 是一門基于原型、函數先行的語言，是一門多范式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持 I/O，比如網絡、存儲和圖形等，但這些都可以由它的宿主環境提供支持。

它已經由 ECMA（歐洲計算機制造商協會）通過 ECMAScript 實現語言的標準化。

它被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、Firefox、Safari、Opera）支持。

JavaScript具有如下特點:

1）JavaScript是一種動態語言，用于在客戶端設計網頁。

2）它是區分大小寫的語言。

3）它是非類型語言，即變量可以保存任何類型的值，Python語言也有相同的特點。

02 JavaScript文件

JavaScript的語句可以寫在HTML文件中，也可以單獨寫在.js文件中，其具體如下所示

1）HTML文件

JavaScript寫在HTML文件中時必須寫在HTML文件中的'script'標簽中，下面我們在HTML文件中通過JavaScript輸出"Hello World"，具體示列如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.    <script>  
9.      document.write("Hello World from JavaScript!<br>");  
10.    </script>  
11. </body>  
12. </html>

2）js文件

現在我們創建一個單獨的js文件，然后在HTML文件中應用具體示列如下：

1. // js文件  
2. document.write("Hello World from JavaScript!<br>");  
3.   
4. // html文件  
5. <!DOCTYPE html>  
6. <html>  
7. <head>  
8.   <meta charset="UTF-8">  
9.   <title>JavaScript基礎教程</title>  
10. </head>  
11. <body>  
12.   <!-- 引入js文件  -->  
13.   <script src="test.js"></script>  
14. </body>  
15. </html>

03 JavaScript的關鍵字、數據類型、變量與常用操作

（1）JavaScript關鍵字

JavaScript包含了許多關鍵字，我們在編寫語句時要注意避開這些關鍵字，以免引起不必要的錯誤。其常用關鍵字如下表所示：

（2）JavaScript數據類型

JavaScript包含了三種數據類型具體如下：

1）數值類型，如'123，12.1'在JavaScript中所有的數值類型其實都是浮點數

2）字符串類型，如'JavaScript基礎教程'

3）布爾類型，如'true, false'

（3）JavaScript變量

JavaScript的變量一般用var這個關鍵字來定義，在ES6中變量一般用let定義。JavaScript是非類型化語言，即變量可以包含任何數據類型。JavaScript具體變量使用示列如下：

1. // 1.js文件  
2.  // document會在文章渲染后再執行，所以看到其在js文件中是在前面，但HTML頁面輸出的內容在最后  
3. document.write("Hello World from JavaScript!<br>");  
4.   
5.  // 定義變量your_name與age  
6. var your_name = "成哥";  
7. var age = 30;  
8.   // 在HTML中找到p_name的id標簽，然后在內部插入html內容  
9. document.getElementById("p_name").innerHTML= "Hello "+ your_name + "<br>Age : " + age;  
10.   
11. // 2. HTML文件  
12. <!DOCTYPE html>  
13. <html>  
14. <head>  
15.   <meta charset="UTF-8">  
16.   <title>JavaScript基礎教程</title>  
17. </head>  
18. <body>  
19.   <p id='p_name'></p>  
20.   <script src="test.js"></script>  
21. </body>  
22. </html>

我們還可以通過prompt方法獲取用戶在頁面的輸入的變量具體示列如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // prompt方法用于獲取用戶在頁面輸入的內容  
10.     var x = prompt("請輸入一個數字，計算其10倍的結果");  
11.     document.write("其10倍結果為：10 * ", x, " = ", 10*x + "<br>");  
12.   </script>  
13. </body>  
14. </html>

（4）JavaScript運算符

1）算術運算符

2）賦值運算符

3）比較運算符

4）條件運算符

JavaScript的條件運算符為問號加冒號組合（？：），其規則是問號前面條件是否為true如果為true則執行冒號前面的表達式，如果為false則執行冒號后面的表達式，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // prompt方法用于獲取用戶在頁面輸入的內容  
10.     var x = prompt("請輸入一個數判斷其是奇數還是偶數");  
11.     // 通過條件運算符來進行判斷奇偶數  
12.     var result = x % 2 === 0 ? '偶數': '奇數';  
13.     document.write("數值(", x, ")為", result);  
14.   </script>  
15. </body>  
16. </html>

5）邏輯運算符

（5）類型轉換

1）字符串傳數值類型

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 字符串轉數值型通過Number方法實現  
10.     document.write("2 + Number('3.4') = ", 2 + Number('3.4'), "<br>");  
11.   </script>  
12. </body>  
13. </html>

2）整型轉換

浮點的數值類型與字符串的數值類型可以通過parseInt方法轉成整形具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 整型轉換  
10.     document.write("2 + parseInt('3.4') = ", 2 + parseInt('3.4'), "<br>"); // 字符串轉整型  
11.     document.write("2 + parseInt(3.4) = ", 2 + parseInt(3.4), "<br>"); // 浮點數轉整型  
12.   </script>  
13. </body>  
14. </html>

3）浮點數轉換

數值型字符串與數值類型可以通過parseFloat方法轉成浮點數，具體示列如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 浮點數轉換  
10.     document.write("2 + parseFloat('3.4') = ", 2 + parseFloat("3.4"), "<br>");   
11.   </script>  
12. </body>  
13. </html>

（6）字符串方法

JavaScript內置了好多針對字符串操作的方法，下面我們就演示一些常用的字符串方法具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 字符串示例  
10.     document.write("hello".toUpperCase(), "<br>") // 轉換為大寫字母  
11.     w = "JavaScript"  
12.     document.write(w.toLowerCase(), "<br>") // 轉換為小寫  
13.     document.write(w.small(), "<br>") // 變小字體  
14.     document.write(w.bold(), "<br>") // 變粗字體  
15.     document.write(w.strike(), "<br>") // 給文字加上橫線  
16.     document.write(w.fontsize("5em"), "<br>") // 設置字號大小  
17.     document.write(w.link("http://www.baidu.com"), "<br>") // 給其增加url鏈接  
18.     document.write(w.fontcolor("red").fontsize("12em"), "<br>") // 連續使用多個方法設置  
19.   </script>  
20. </body>  
21. </html>

（7）數組

JavaScript的數組類型可以包含不同的數據類型，比如一個數組同時包含字符串與數值類型，其跟Python非常類似，具體使用示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>JavaScript基礎教程</title>  
6. </head>  
7. <body>  
8.   <script>  
9.     // 數組示例  
10.     arr = [15, 30, "Meher"]  
11.   
12.     // 遍歷數組方式一：  
13.     document.write("遍歷數組方式一：", "<br>");  
14.     for(a in arr)  
15.       document.write(arr[a], " ");  
16.     document.write("<br>");  
17.   
18.     // 遍歷數組方式二：  
19.     document.write("遍歷數組方式二：", "<br>");  
20.     for (var i=0;i<arr.length;i++){  
21.       document.write(arr[i], " ");  
22.     }  
23.     document.write("<br>");  
24.   
25.     document.write(arr.pop(), "<br>"); // 移除數組最后一個元素  
26.     arr.push("JavaScript"); // 在數組最后增加一個元素  
27.     document.write(arr.pop(), "<br>");  
28.     document.write("該數組長度為: ", arr.length, "<br>");  
29.   </script>  
30. </body>  
31. </html>

04 總結

至此我們《JavaScript基礎教程上篇》就講完了，下篇內容主要講解JavaScript的控制語句、函數編程及異常處理等相關知識，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

程序員都必掌握的前端教程之HTML基礎教程（上）

念：通過判斷指定表達式的值來決定執行還是跳過某些語句，用于基于不同條件執行不同的動作。

JavaScript的條件語句，在我的理解中可以分為四種情況：

一種是單純的if判斷
其次是 if-else 如果給定一個表達式，然后判斷是否匹配，否則輸出什么
然后是 if-else if-else，可以選擇多個代碼塊之一來執行操作
最后是 switch 語句，它同樣可以用來選擇多個代碼塊之一來執行操作

if

語法：

if(condition){
    // 當條件為 true 時執行的代碼
}

示例：

賬號為華為云開發者社區官方運營賬號，提供全面深入的云計算前景分析、豐富的技術干貨、程序樣例，分享華為云前沿資訊動態

本文分享自華為云社區《如何寫出漂亮的條件表達式 - JavaScript 實現篇》，原文作者：查爾斯。

條件表達式，是我們在coding過程中永遠躲不開的問題，也是我們騙代碼行數最方便的東西（狗頭.jpg），但作為一名程序員，我們也要追求自己的“信達雅”，下面就讓我們看看以下幾種常見的條件表達場景，如何寫的漂亮！

多條件語句
多屬性對象
替換Switch語句
默認參數與解構
匹配所有或部分條件
使用可選鏈和 Nullish 合并

多條件語句

多條件語句使用Array.includes

舉個例子

function printAnimals(animal) {
  if (animal === "dog" || animal === "cat") {
    console.log(`I have a ${animal}`);
  }
}

console.log(printAnimals("dog")); // I have a dog

這種寫法在條件比較少的情況下看起來沒有問題，此時我們只有 2 種動物，但是如果我們有更多的條件需要判斷（更多的動物）呢？如果我們繼續拓展判斷的條件，那么代碼將會變得難以維護，而且邏輯會不清晰。

解決方法

可以使用Array.includes來重寫條件語句

function printAnimals(animal) {
  const animals = ["dog", "cat", "hamster", "turtle"];

  if (animals.includes(animal)) {
    console.log(`I have a ${animal}`);
  }
}

console.log(printAnimals("hamster")); // I have a hamster

在這里，我們創建了一個動物數組，以便將條件與代碼的其余部分分開提取。現在，如果我們想要檢查任何其他動物，我們需要做的就是添加一個新的數組項。

我們還可以在這個函數的范圍之外使用 animals 變量，以便在代碼的其他地方重用它。這是一種編寫更清晰、更容易理解和維護的代碼的方法。不是嗎?

多屬性對象

這是一個非常好的技巧來壓縮你的代碼，使它看起來更簡潔。讓我們以前面的示例為例，添加更多的條件。如果這個動物不是一個簡單的字符串，而是一個具有某些屬性的對象呢?

所以現在的要求是:

如果沒有動物，拋出一個錯誤
打印動物的類型
打印動物的名字
打印動物的性別

const printAnimalDetails = (animal) => {
  let result; // declare a variable to store the final value

  // condition 1: check if animal has a value
  if (animal) {
    // condition 2: check if animal has a type property
    if (animal.type) {
      // condition 3: check if animal has a name property
      if (animal.name) {
        // condition 4: check if animal has a gender property
        if (animal.gender) {
          result = `${animal.name} is a ${animal.gender} ${animal.type};`;
        } else {
          result = "No animal gender";
        }
      } else {
        result = "No animal name";
      }
    } else {
      result = "No animal type";
    }
  } else {
    result = "No animal";
  }

  return result;
};

console.log(printAnimalDetails()); // 'No animal'

console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'

console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'

console.log(
  printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'

上面的代碼它工作得很好，但是代碼很長，很難維護。如果不使用提示工具，可能會浪費一些時間來確定右括號的位置。想象將會發生什么如果代碼更復雜的邏輯。很多if...else的語句!

我們可以使用三元操作符、&&條件等來重構上面的函數，但是讓我們使用多個返回語句來編寫更精確的代碼。

const printAnimalDetails = ({ type, name, gender } = {}) => {
  if (!type) return "No animal type";
  if (!name) return "No animal name";
  if (!gender) return "No animal gender";

  // Now in this line of code, we're sure that we have an animal with all //the three properties here.

  return `${name} is a ${gender} ${type}`;
};

console.log(printAnimalDetails()); // 'No animal type'

console.log(printAnimalDetails({ type: dog })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, name: "Lucy", gender: "female" })); // 'Lucy is a female dog'

在重構版本中，還包括解構和默認參數。默認參數確保如果我們將 undefined 作為參數傳遞給方法，我們仍然有一個要解構的值，這里是一個空對象 {}。

通常，代碼是在這兩種方法之間編寫的。

舉個例子

function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  // condition 1: vegetable should be present
  if (vegetable) {
    // condition 2: must be one of the item from the list
    if (vegetables.includes(vegetable)) {
      console.log(`I like ${vegetable}`);

      // condition 3: must be large quantity
      if (quantity >= 10) {
        console.log("I have bought a large quantity");
      }
    }
  } else {
    throw new Error("No vegetable from the list!");
  }
}

printVegetablesWithQuantity(null); //  No vegetable from the list!
printVegetablesWithQuantity("cabbage"); // I like cabbage
printVegetablesWithQuantity("cabbage", 20);
// 'I like cabbage`
// 'I have bought a large quantity'

現在,我們有:

過濾無效條件的 if/else 語句
3 層嵌套的 if 語句(條件 1、2 和 3)
一個通用的規則是當發現無效條件時盡早返回。

一個通用的規則是發現無效的條件時盡早返回

function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  // condition 1: throw error early
  if (!vegetable) throw new Error("No vegetable from the list!");

  // condition 2: must be in the list
  if (vegetables.includes(vegetable)) {
    console.log(`I like ${vegetable}`);

    // condition 3: must be a large quantity
    if (quantity >= 10) {
      console.log("I have bought a large quantity");
    }
  }
}

通過這樣做，我們減少了一個嵌套語句的級別。這種編碼風格很好，特別是當使用長if語句時。通過反轉條件并提前返回，我們可以進一步減少嵌套if。

請看下面的條件 2 是怎么做的:

function printVegetablesWithQuantity(vegetable, quantity) {
  const vegetables = ["potato", "cabbage", "cauliflower", "asparagus"];

  if (!vegetable) throw new Error("No vegetable from the list!");
  // condition 1: throw error early

  if (!vegetables.includes(vegetable)) return;
  // condition 2: return from the function is the vegetable is not in
  //  the list

  console.log(`I like ${vegetable}`);

  // condition 3: must be a large quantity
  if (quantity >= 10) {
    console.log("I have bought a large quantity");
  }
}

通過反轉條件 2 的條件，代碼不再具有嵌套語句。當我們有很多條件并且希望在任何特定條件不滿足時停止進一步的處理時，這種技術是有用的。

因此，總是以減少嵌套和盡早返回為目標，但不要過度。

替換Switch語句

讓我們看一下下面的例子,我們想要根據顏色打印水果:

function printFruits(color) {
  // use switch case to find fruits by color
  switch (color) {
    case "red":
      return ["apple", "strawberry"];
    case "yellow":
      return ["banana", "pineapple"];
    case "purple":
      return ["grape", "plum"];
    default:
      return [];
  }
}

printFruits(null); // []
printFruits("yellow"); // ['banana', 'pineapple']

上面的代碼實現沒有錯誤，但是很冗長，同樣的結果可以使用更簡潔的語法來實現。

// use object literal to find fruits by color
const fruitColor = {
  red: ["apple", "strawberry"],
  yellow: ["banana", "pineapple"],
  purple: ["grape", "plum"],
};

function printFruits(color) {
  return fruitColor[color] || [];
}

同樣的，也可以使用 Map 來實現：

// use Map to find fruits by color
const fruitColor = new Map()
  .set("red", ["apple", "strawberry"])
  .set("yellow", ["banana", "pineapple"])
  .set("purple", ["grape", "plum"]);

function printFruits(color) {
  return fruitColor.get(color) || [];
}

Map是 ES5 以來可用的對象類型，它允許存 key-value。

對于上面的示例，可以使用 Array.filter 實現相同的結果。

const fruits = [
  { name: "apple", color: "red" },
  { name: "strawberry", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "pineapple", color: "yellow" },
  { name: "grape", color: "purple" },
  { name: "plum", color: "purple" },
];

function printFruits(color) {
  return fruits.filter((fruit) => fruit.color === color);
}

默認參數與解構

在使用 JavaScript 時，我們總是需要檢查 null/undefined 并分配默認值或編譯中斷。

function printVegetablesWithQuantity(vegetable, quantity = 1) {
// if quantity has no value, assign 1

  if (!vegetable) return;
    console.log(`We have ${quantity} ${vegetable}!`);
  }
  //results
}

printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
printVegetablesWithQuantity('potato', 2); // We have 2 potato!

如果蔬菜是一個對象呢?我們可以分配一個默認參數嗎?

function printVegetableName(vegetable) {
  if (vegetable && vegetable.name) {
    console.log(vegetable.name);
  } else {
    console.log("unknown");
  }
}

printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage

在上面的示例中，我們希望打印蔬菜名(如果它可用)或打印 unknown。

我們可以通過使用默認參數&解構來避免條件if (vegetable && vegetable.name){}。

// destructing - get name property only
// assign default empty object {}

function printVegetableName({ name } = {}) {
  console.log(name || "unknown");
}

printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: "cabbage", quantity: 2 }); // cabbage

因為我們只需要屬性名，所以我們可以使用 {name} 來改變參數的結構，然后我們可以在代碼中使用 name 作為變量，而不是使用 vegetable.name。

我們還將一個空對象 {} 賦值為默認值，否則在執行 printVegetableName(undefined) 時，它將給出一個錯誤—— Cannot destructure property name of undefined or null，因為在 undefined 中沒有 name 屬性。

匹配所有或部分條件

我們可以通過使用這些Array方法來減少代碼行數。

下面的代碼，我們想要檢查是否所有的水果都是紅色的:

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  let isAllRed = true;

  // condition: all fruits must be red
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = f.color == "red";
  }

  console.log(isAllRed); // false
}

上面的代碼太過冗長，我們可以通過使用 Array.every 來減少代碼行：

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  // condition: short way, all fruits must be red
  const isAllRed = fruits.every((f) => f.color == "red");

  console.log(isAllRed); // false
}

同樣的，如果我們想要測試任何一個水果是否是紅色的，我們可以使用 Array.some：

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

function test() {
  // condition: if any fruit is red
  const isAnyRed = fruits.some((f) => f.color == "red");

  console.log(isAnyRed); // true
}

使用可選鏈和 Nullish 合并

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE

這兩個功能對于 JavaScript 編寫更簡潔的條件非常有用。在編寫本文時，它們還沒有得到完全的支持，可能需要使用Babel進行編譯。

可選鏈接能夠處理類似樹的結構，而不需要顯式地檢查中間節點是否存在，并且Nullish與可選鏈接結合使用非常有效，可以確保不存在節點的默認值。

舉個例子:

const car = {
  model: "Fiesta",
  manufacturer: {
    name: "Ford",
    address: {
      street: "Some Street Name",
      number: "5555",
      state: "USA",
    },
  },
};

// to get the car model
const model = (car && car.model) || "default model";

// to get the manufacturer street
const street =
  (car &&
    car.manufacturer &&
    car.manufacturer.address &&
    car.manufacturer.address.street) ||
  "default street";

// request an un-existing property
const phoneNumber =
  car &&
  car.manufacturer &&
  car.manufacturer.address &&
  car.manufacturer.phoneNumber;

console.log(model); // 'Fiesta'
console.log(street); // 'Some Street Name'
console.log(phoneNumber); // undefined

因此，如果我們想打印出來，如果汽車制造商來自美國，代碼應該是這樣的:

const isManufacturerFromUSA = () => {
  if (
    car &&
    car.manufacturer &&
    car.manufacturer.address &&
    car.manufacturer.address.state === "USA"
  ) {
    console.log("true");
  }
};

checkCarManufacturerState(); // 'true'

可以清楚地看到，對于更復雜的對象結構，這會變得多么混亂。有一些第三方庫，如 lodash 或idx，它們有自己的功能。例如 lodash 有 _.get 方法。但是，在 JavaScript 語言本身中引入這個特性。

以下是這些新功能的工作原理:

// to get the car model
const model = car?.model ?? "default model";

// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? "default street";

// to check if the car manufacturer is from the USA
const isManufacturerFromUSA = () => {
  if (car?.manufacturer?.address?.state === "USA") {
    console.log("true");
  }
};

目前在 Stage 3 階段。

以上就是基于JavaScript實現條件表達式的一些分享，希望對你能有所幫助~

點擊關注，第一時間了解華為云新鮮技術~

在線咨詢

上一篇：優雅的使用CSS實現文字居中顯示
下一篇：網頁前端基礎教程06-HTML中body屬性和表格詳解，收藏

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商