JavaScript學習筆記01(包含ES6語法)

来源:https://www.cnblogs.com/Kiiakia/archive/2023/07/19/17566927.html
-Advertisement-
Play Games

Vue文件解析 什麼是<template/>標簽 template是html5新元素,主要用於保存客戶端中的內容,表現為瀏覽器解析該內容但不渲染出來,可以將一個模板視為正在被存儲以供隨後在文檔中使用的一個內容片段。 關於單文件組件 vue的單文件相當於一個頁面中的組件,包含了關於該組件的html-c ...


Js 簡介

什麼是 Js?

Js 最初被創建的目的是“使網頁更生動”。

Js 寫出來的程式被稱為 腳本,Js 是一門腳本語言。

  • 被直接寫在網頁的 HTML 中,在頁面載入的時候自動執行
  • 腳本被以純文本的形式提供和執行,不需要特殊的準備或編譯即可運行(JIN compiler)

Js 不僅可以在瀏覽器中執行,也可以在服務端執行,本質上是它可以在任意搭載了Js 引擎的設備中執行。

瀏覽器中嵌入了 Js 引擎,有時也稱作“JavaScript 虛擬機”,不同的引擎有不同的“代號”,例如:

  • V8 —— Chrome、Opera 和 Edge 中的 Js 引擎。
  • SpiderMonkey —— Firefox 中的 Js 引擎。
  • Chakra —— IE
  • JavaScriptCore、Nitro 、 SquirrelFish —— Safari

eg:如果 “V8 支持某個功能” ,那麼我們可以認為這個功能大概能在 Chrome、Opera 和 Edge 中正常運行。

引擎是如何工作的?

引擎很複雜,但是基本原理很簡單。

  1. 引擎(如果是瀏覽器,則引擎被嵌入在其中)讀取(“解析”)腳本。
  2. 然後,引擎將腳本轉化(“編譯”)為機器語言。
  3. 然後,機器代碼快速地執行。

引擎會對流程中的每個階段都進行優化。它甚至可以在編譯的腳本運行時監視它,分析流經該腳本的數據,並根據獲得的信息進一步優化機器代碼。

瀏覽器中的 Js

能做什麼?

現代的 Js 是一種“安全的”編程語言。它不提供對記憶體或 CPU 的底層訪問,因為它最初是為瀏覽器創建的,不需要這些功能。

Js 的能力很大程度上取決於它運行的環境。例如,Node.js 支持允許 Js 讀取/寫入任意文件,執行網路請求等。

瀏覽器中的 Js 可以做下麵這些事:

  • 在網頁中添加新的 HTML,修改網頁已有內容和網頁的樣式。
  • 響應用戶的行為,響應滑鼠的點擊,按鍵的按動。
  • 向遠程伺服器發送網路請求,下載和上傳文件(所謂的 AJAXCOMET 技術)。
  • 獲取或設置 cookie,向訪問者提出問題或發送消息。
  • 記住客戶端的數據(“本地存儲”)。

不能做什麼?

為了用戶的(信息)安全,在瀏覽器中的 Js 的能力是受限的。

目的是防止惡意網頁獲取用戶私人信息或損害用戶數據。

此類限制的例子包括:

  • 網頁中的 Js 不能讀、寫、複製和執行硬碟上的任意文件。它沒有直接訪問操作系統的功能。

    現代瀏覽器允許 Js 做一些文件相關的操作,但是這個操作是受到限制的。

    僅當用戶做出特定的行為,Js 才能操作這個文件。eg:用戶把文件“拖放”到瀏覽器中,或者通過 <input type='file'> 標簽選擇了文件。

    有很多與相機/麥克風和其它設備進行交互的方式,但是這些都需要獲得用戶的明確許可。

  • 不同的標簽頁/視窗之間通常互不瞭解。

    有時候,也會有一些聯繫,例如一個標簽頁通過 Js 打開的另外一個標簽頁。

    但即使在這種情況下,如果兩個標簽頁打開的不是同一個網站(功能變數名稱、協議或者埠任一不相同的網站),它們都不能相互通信。這就是所謂的“同源策略”。

    為瞭解決“同源策略”問題,兩個標簽頁必須都包含一些處理這個問題的特定的 Js 代碼,並均允許數據交換。

  • Js 可以輕鬆地通過互聯網與當前頁面所在的伺服器進行通信。但是從其他網站/域的伺服器中接收數據的能力被削弱了。儘管可以,但是需要來自遠程伺服器的明確協議(在 HTTP header 中)。這也是為了用戶的信息安全。

數據類型

在 Js 中有 8 種基本的數據類型(7 種原始類型和 1 種引用類型)

Number 類型

代表整數和浮點數,可以有很多操作,eg:乘法 *、除法 /、加法 +、減法 - 等等。

除了常規的數字,還包括所謂的“特殊數值”:Infinity-InfinityNaN

科學計數法

  • "e" 和 0 的數量附加到數字後。就像:123e6123 後面接 6 個 0 相同。
  • "e" 後面的負數將使數字除以 1 後面接著給定數量的零的數字。例如 123e-6 表示 0.000123123 的百萬分之一)。

多種進位

  • 可以直接在十六進位(0x),八進位(0oor00)和二進位(0bor0B)系統中寫入數字。

  • 使用Number()方法將含有對應首碼的字元串數值轉為十進位

    Number('0b111')  // 7
    Number('0o10')  // 8
    
  • parseInt(str, base) 將字元串 str 解析為在給定的 base 數字系統中的整數,2 ≤ base ≤ 36

  • num.toString(base) 將數字轉換為在給定的 base 數字系統中的字元串。

常規數字檢測

全局方法

  • isNaN(value) —— 將其參數轉換為數字,然後檢測它是否為 NaN
  • isFinite(value) —— 將其參數轉換為數字,如果它是常規數字,則返回 trueNaN/Infinity/-Infinity返回false)

定義在Number上的方法 (ES6)

  • Number.isNaN() ——檢查一個值是否為NaN。如果參數類型不是NaNNumber.isNaN一律返回false

  • Number.isFinite() —— 檢查一個數值是否為有限的。如果參數類型不是數值,Number.isFinite一律返回false

區別

傳統的全局方法isFinite()isNaN()先調用Number()將非數值的值轉為數值,再進行判斷,而這兩個新方法只對數值有效,Number.isFinite()對於非數值一律返回false, Number.isNaN()只有對於NaN才返回true,非NaN一律返回false

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false

不規則字元串轉換為數字

任務:將 12pt100px 之類的值轉換為數字

全局方法

  • 使用 parseInt/parseFloat 進行“軟”轉換,它從字元串中讀取數字,然後返回在發生 error 前可以讀取到的值。

定義在Number上的方法 (ES6)

  • ES6 將全局方法parseInt()parseFloat(),移植到Number對象上面,行為完全保持不變。這樣做的目的,是逐步減少全局性方法,使得語言逐步模塊化。

Math 對象的擴展

  • 使用 Math.floorMath.ceilMath.truncMath.roundnum.toFixed(precision) 進行舍入。其中Math.trunc() —— 用於去除一個數的小數部分,返回整數部分(內部使用Number方法將其先轉為數值)

  • Math.sign() —— 用來判斷一個數到底是正數、負數、還是零。對於非數值,會先將其轉換為數值。

    • 參數為正數,返回+1
    • 參數為負數,返回-1
    • 參數為 0,返回0
    • 參數為-0,返回-0;
    • 其他值,返回NaN
  • Math.cbrt() —— 計算一個數的立方根

  • Math.clz32() —— 將參數轉為 32 位無符號整數的形式,然後返回這個 32 位值裡面有多少前導 0

  • Math.imul() —— 返回兩個數以 32 位帶符號整數形式相乘的結果,返回的也是一個 32 位的帶符號整數。

  • Math.fround() —— 返回一個數的32位單精度浮點數形式

  • Math.hypot() —— 返回所有參數的平方和的平方根

使用兩個點來調用一個方法

請註意 123456..toString(36) 中的兩個點不是打錯了。如果我們想直接在一個數字上調用一個方法,比如上面例子中的 toString,那麼我們需要在它後面放置兩個點 ..

如果我們放置一個點:123456.toString(36),那麼就會出現一個 error,因為 Js 語法隱含了第一個點之後的部分為小數部分。如果我們再放一個點,那麼 JavaScript 就知道小數部分為空,現在使用該方法。

也可以寫成 (123456).toString(36)

如果是小數:可以直接寫為0.13.toFixed(1)

數值分隔符

ES2021,允許 Js 的數值(所有進位)使用下劃線(_)作為分隔符,這個數值分隔符沒有指定間隔的位數。

使用註意點:

  • 不能放在數值的最前面或最後面。
  • 不能兩個或兩個以上的分隔符連在一起。
  • 小數點的前後不能有分隔符。
  • 科學計數法裡面,表示指數的eE前後不能有分隔符。
  • 分隔符不能緊跟著進位的首碼0b0B0o0O0x0X(eg:0_b1100,0b_0100)

下麵三個將字元串轉成數值的函數,不支持數值分隔符:

  • Number()
  • parseInt()
  • parseFloat()

BigInt 類型

number 類型無法安全地表示大於 (253-1),或小於 - (253-1)的整數。

更準確的說:

“number” 類型可以存儲更大的整數,但超出安全整數範圍 ±(253-1)會出現精度問題,因為並非所有數字都適合固定的 64 位存儲。因此,可能存儲的是“近似值”。

// 尾部的 "n" 表示這是一個 BigInt 類型
const bigInt = 1234567890123456789012345678901234567890n;

String 類型

三種包含字元串的方式:

  1. 雙引號:"Hello"

  2. 單引號:'Hello'

  3. 反引號:`Hello`

    反引號是 功能擴展 引號,稱為模板字元串。

    它允許我們通過將變數和表達式包裝在 ${…} 中,來將它們嵌入到字元串中,並且可以在裡面直接換行。

  • Js 中的字元串使用的是 UTF-16 編碼。

  • Js 中字元串不可以被改變

  • length 屬性表示字元串長度

  • 可以使用像 \n 這樣的特殊字元或通過使用 \u... 來操作它們的 Unicode 進行字元插入。

    其中\uxxxx是字元的Unicode表示法,這種表示法只限於碼點在\u0000~\uFFFF之間的字元。超出這個範圍的字元,必須用兩個雙位元組的形式表示。ES6 對這一點做出了改進,只要將碼點放入大括弧,就能正確解讀該字元。

    "\uD842\uDFB7" 	// "
    
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 點亮Star⭐️ · 支持我們 https://github.com/apache/dolphinscheduler ![file](https://img2023.cnblogs.com/other/2685289/202307/2685289-20230719174824082-15652781 ...
  • 對於GaussDB來說,在今天引入數據壓縮,究竟能夠給客戶帶來什麼不一樣的價值,是過去一段時間我們一直在思考的問題。 ...
  • ## 背景概述 在一次客戶的資料庫實例連接不上了,需要我們排查一下原因,通過查看資料庫實例進程已經不存在了,在錯誤日誌中沒有發現其他報錯信息,發現有`shutdown`的字樣出現,懷疑是某個用戶手動關閉了實例。我們通過以下測試,發現是由於用戶關閉了主機所導致的。 ## 問題復現 本次測試基於`Gre ...
  • 原文: [Android 妙用TextView實現左邊文字,右邊圖片 - Stars-One的雜貨小窩](https://stars-one.site/2023/07/19/android-tv-and-right-img) 有時候,需要文字在左邊,右邊有個箭頭,我個人之前會有兩種做法: > 使用線 ...
  • 鏈接(URL):https://www.hygrey.com/burpsuite-can-not-capture-https-packet-in-android7.html 來源(Source):渡緣人 渡緣人大佬的教程詳細的列出來Android 7 配置bp抓包的流程,也可以一同參考下麵的鏈接 h ...
  • > 原文地址: [Android LinearLayout快速設置每個item間隔](https://stars-one.site/2023/07/19/android-linearlayout-item-margin) 平常使用LinearLayout的時候,有時候會需要對每個item設置間距,但 ...
  • 博客推行版本更新,成果積累制度,已經寫過的博客還會再次更新,不斷地琢磨,高質量高數量都是要追求的,工匠精神是學習必不可少的精神。因此,大家有何建議歡迎在評論區踴躍發言,你們的支持是我最大的動力,你們敢投,我就敢肝 ...
  • 文件流下載轉Blob時類型匹配,例如: ```javascript let blob = new Blob([data], {type: 'audio/mpeg'}); ``` Blob配置類型如下表所示,[詳細介紹](https://developer.mozilla.org/zh-CN/docs ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...