JavaScript 數組排序

avaScript 數組排序

JS 數組方法
JS 數組迭代

sort() 方法是最強大的數組方法之一。

數組排序

sort() 方法以字母順序對數組進行排序：

實例

var fruits=["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 對 fruits 中的元素進行排序

親自試一試

解 async/await 的原理和使用方法是理解現代JavaScript異步編程的關鍵。這里我會提供一個詳細的實例，涵蓋原理、流程、使用方法以及一些注意事項。代碼注釋會盡量詳盡，確保你理解每個步驟。

實例：使用async/await進行異步操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async/Await 示例</title>
</head>
<body>
  <!-- 創建一個按鈕，點擊觸發異步操作 -->
  <button id="asyncButton">點擊觸發異步操作</button>

  <script>
    // 異步函數1：模擬獲取用戶信息的異步操作
    async function getUserInfo(userId) {
      return new Promise((resolve)=> {
        setTimeout(()=> {
          // 模擬異步操作完成后返回用戶信息
          resolve({ id: userId, username: `User${userId}` });
        }, 1000);
      });
    }

    // 異步函數2：模擬獲取用戶權限的異步操作
    async function getUserPermissions(userId) {
      return new Promise((resolve)=> {
        setTimeout(()=> {
          // 模擬異步操作完成后返回用戶權限
          resolve({ id: userId, permissions: ['read', 'write'] });
        }, 800);
      });
    }

    // 主邏輯：點擊按鈕后觸發異步操作
    document.getElementById('asyncButton').addEventListener('click', async ()=> {
      try {
        // 使用await調用異步函數，這里按順序執行，相當于同步代碼
        const userInfo=await getUserInfo(1);
        console.log('用戶信息:', userInfo);

        const userPermissions=await getUserPermissions(userInfo.id);
        console.log('用戶權限:', userPermissions);

        // 這里可以進行更多的操作，使用上面兩個異步操作的結果

        console.log('全部異步操作完成！');
      } catch (error) {
        // 捕獲可能的錯誤
        console.error('發生錯誤:', error);
      }
    });
  </script>
</body>
</html>

詳細解釋和注釋：

異步函數定義：

async function 聲明一個異步函數，函數內部可以包含 await 表達式。這個例子中，getUserInfo 模擬了一個異步操作，通過 Promise 返回用戶信息。

async function getUserInfo(userId) {
  // ...異步操作...
}

異步操作觸發：

通過事件監聽，當按鈕點擊時觸發異步操作。

document.getElementById('asyncButton').addEventListener('click', async ()=> {
  // ...異步操作...
});

使用 await 調用異步函數：

await 操作符用于等待 Promise 對象的解析。在這里，我們等待 getUserInfo 函數完成，然后將結果賦給 userInfo。await 使得異步代碼看起來像同步代碼一樣。

const userInfo=await getUserInfo(1);

錯誤處理：

使用 try/catch 塊來捕獲可能的錯誤。在異步操作中，錯誤可以通過 throw 語句拋出，然后通過 catch 塊捕獲和處理。

try {
  // ...異步操作...
} catch (error) {
  // ...錯誤處理...
}

注意事項：

await 只能在 async 函數內部使用。
async/await 并不會替代 Promise，它只是一種更優雅的語法糖。
異步函數返回的是一個 Promise 對象。

這個實例演示了 async/await 的基本用法，原理是利用 Promise 對象的特性，使得異步代碼可以更直觀、易讀。在實際項目中，可以進一步嵌套、組合異步操作，以實現更復雜的異步流程。

JavaScript誕生之初Netscape 瀏覽器要解決一個重要的問題就是如何讓JavaScript和html頁面共存，經過嘗試、爭論最終決定為web增加統一的腳本支持，并被正式納入HTML規范之中。

本篇主要介紹如何在html網頁中使用<script> 標簽元素引入腳本，關于<script>元素有以下屬性：

src：可選，表示引入的外部js文件。
type：可選，表示編寫代碼的腳本語言內容類型（MIME類型）。目前此屬性都使用text/javascript,這個屬性值也是默認的值，如果不設置type屬性就使用這個默認值。除此之外也可以使用 text/ecmascript或 application/javascript等，因為各瀏覽器兼容性問題，在此不建議使用。
language：已廢棄。早期用來表示腳本語言類型，比如（JavaScript、JavaScript1.2或VBScript），現已不再使用。
charset：可選。表示通過src指定的代碼的字符集。大多數瀏覽器會忽略這個屬性，因此很少使用。
defer：可選。表示腳本延遲到文檔完全被解析和顯示后再執行。只有在加載外部js文件時才可用。
async：可選。表示應該立即下載腳本，但不阻礙頁面其它部分的操作，比如下載其它資源或等待加載其它腳本。只有在加載外部js文件時才可用。

腳本使用方法

一般都會在<head>元素中使用<script>標簽，分別有內嵌式腳本和外部腳本兩種用法，具體如下：

內嵌式：

<html>
<head>
<script type="text/javascript">
  function hello(){
	  alert('hello world!')
  }
  hello();
  </script>
</head>
<body></body>
</html>

如上面的代碼，內嵌式就是將js代碼寫在<script>標簽內，這里的type屬性可以省略。

外部腳本：

<html>
<head>
<script type="text/javascript" src="hello.js"></script>
</head>
<body></body>
</html>

如上代碼，外部腳本通過src屬性引入，這里的src屬性和img圖片的src一樣，它的值是一個URL，可以使相對路徑，絕對路徑，甚至是來自第三方域的地址。

外部腳本的優點就是，它可以把不同業務的代碼放入到指定的外部js文件中，依次引入到頁面，這樣當頁面的業務邏輯復雜時便于管理組織代碼。如今，在各現代瀏覽器中已經部分支持原生的模塊語法，意味著可以在js文件中直接引入其它js文件，關于模塊化后期再單獨介紹。

script標簽的位置

默認情況下，瀏覽器會按照script標簽在頁面中出現的順序從前到后依次進行解析。也就是說，后面的script要等前面的script解析完后再執行。所以有時就會因為腳本錯誤，導致頁面無法繼續往下執行，頁面就會出現空白或顯示部分，所以一般約定將script標簽放在</body>標簽之前，這樣即使腳本出錯，也不會影響html的解析。

如下示例：

<html>
<head>
</head>
<body>
<p>引入外面腳本文件</p>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript" src="demo2.js"></script>
 </body>
</html>

把腳本放在最后，還有個好處就是使頁面打開的速度變快，這是因為js腳本的解析是同步的，會阻塞后面的代碼。

延遲腳本

使用defer屬性延遲腳本，這個屬性的用途是指在腳本執行時不會影響頁面html或css的解析。直到整個頁面解析完畢后再運行。因此，defer屬性就是告訴瀏覽器立即下載js文件，但延遲執行它。

如下示例：

<html>
<head>
<script type="text/javascript" defer="defer" src="demo1.js"></script>
<script type="text/javascript" defer="defer" src="demo2.js"></script>
</head>
<body>
<p>延遲引入外面腳本文件</p>
 </body>
</html>

在這個例子中,雖然腳本放在head元素中，但其包含的腳本會延遲到瀏覽器解析完整個頁面后才執行。這里要注意，html5 規范中要求腳本按照先后順序執行，理論上第一個延遲腳本會先于第二個，但是實際情況并不是這樣的，因此一般頁面中盡量只有一個延遲腳本。關于延遲腳本，后面會繼續詳細介紹。

前面說過，defer屬性只對外部腳本起作用，內嵌式不支持，除非早期的ie瀏覽器才支持，在這里不再具體探討，畢竟是過時的東西，沒必要學習。

異步腳本

和延遲腳本一樣，使用async可以改變處理腳本的行為。異步腳本只適用于外部js文件，它表示告訴瀏覽器立即下載文件，和defer不同之處就是異步腳本不保證會按照先后順序執行腳本。

如下示例：

<html>
<head>
<script type="text/javascript" async src="demo1.js"></script>
<script type="text/javascript" async src="demo2.js"></script>
</head>
<body>
<p>異步加載腳本文件</p>
 </body>
</html>

上面代碼中，第二腳本可能會在第一個腳本文件之前執行。因此保證它們相互之間不依賴非常重要。

建議異步腳本不要在加載中修改DOM,在xhtml文檔中使用async=“async”才起作用。

<noscript>元素

早期瀏覽器面臨一個特殊的情況，就是當瀏覽器不支持JavaScript時如何讓頁面平穩的顯示。因此為了解決這個問題創造了一個<noscript>元素，用來在不支持JavaScript時在頁面中顯示代替的內容。這個元素中可以包含任何html元素，除了<script>外。

當瀏覽器禁用JavaScript時，也可以使用這個標簽，如下示例：

<html>
<head>
<script type="text/javascript" async src="demo1.js"></script>
<script type="text/javascript" async src="demo2.js"></script>
</head>
<body>
<noscript>本頁面需要瀏覽器支持或啟用JavaScript。</noscript>
 </body>
</html>

在不支持或禁用JavaScript的瀏覽器頁面中就會看到上面這段文字。

總結

在html頁面中使用<script>標簽可以使用嵌入式或外部js文件，這里我們要注意幾點：

在包含外部腳本文件時，必須將src屬性設置為指向相應的文件URL。這個文件可以是同一個服務器上的或其它域中的文件。
所有<script>元素都會按照在頁面中出現的先后順序被依次解析。在不適應延遲或異步屬性時，只有在所有<script>標簽代碼解析完后，才繼續后面的代碼。
將<script>元素放在頁面最后，即body結束標簽之前。
使用defer屬性延遲腳本在頁面完全呈現之后再執行。延遲腳本一般會按照順序執行。
使用async異步加載腳本，表示腳本不必等待其它腳本，也不會阻塞文檔呈現。但異步腳本不能保證按照先后順序執行。
<noscript>元素，在不支持JavaScript或禁用JavaScript的瀏覽器中顯示替代內容。

本文主要介紹了，JavaScript的基本使用方法，詳細介紹了<script>元素的語法，后面我們將正式開始JavaScript學習，JavaScript的語法是一個類似c語言或其它高級語言（如java、perl等），如果你有其它語言的基礎，學習起來非常容易。

感謝您的關注，歡迎指正。

在線咨詢

上一篇：dom-to-image庫是如何將html轉換成圖片
下一篇：走心文案高質量的愛情語錄

您的項目需求

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

整合營銷服務商

JavaScript 數組排序

數組排序

實例

腳本使用方法

script標簽的位置

延遲腳本

異步腳本

<noscript>元素

總結

您的項目需求