學習 JavaScript （三）核心概念：語法、變數、數據類型

来源:https://www.cnblogs.com/kurryluo/archive/2018/09/02/9572781.html
-Advertisement-
Play Games

JavaScript 的核心概念主要由 語法、變數、數據類型 、操作符、語句、函數組成，這篇文章主要講解的是前面三個，後面三個下一篇文章再講解。 01 語法 熟悉 JavaScript 歷史的人應該都知道，JavaScript 的很多語法和 Java、C 語言類似，所以一些做後端的程式員上手前端很快 ...


JavaScript 的核心概念主要由語法、變數、數據類型、操作符、語句、函數組成，這篇文章主要講解的是前面三個，後面三個下一篇文章再講解。

01 語法

熟悉 JavaScript 歷史的人應該都知道，JavaScript 的很多語法和 Java、C 語言類似，所以一些做後端的程式員上手前端很快。但是，畢竟是另一門語言，隨著時間的推移，很多靈活的特性是 Java 或者 C 語言不能滿足的。同樣的，學完 JavaScript 的人去看其他語言也會比剛接觸編程的人要容易。

如果要推薦一門語言，我的建議是學 JavaScript。

區分大小寫

ECMAScript 中的一切（變數、函數名、操作符）都要區分大小寫。

標識符

標識符指的是變數、函數、屬性的名字，或者函數的參數。我們中國人取名字不能叫李 C ，不符合規則，在 JS 中，我們在構造標識符的時候，也要遵循一定規則：

  1. 第一個字元必須是字母（aA）、**下劃線（_）、美元符號$**。比如 abc，_a12，$123
  2. 其他位置的字元除了第一點中的三個類型外，還可以是數字
  3. 使用駝峰式命名方法：第一個字母小寫，其他有意義的單詞首字母大寫，比如 oneYear
  4. 不能使用關鍵字、保留字、true、false、null作為標識符。

註釋

//這是單行註釋

/*
* 這是多行
* 註釋
*/

嚴格模式

ES5 引入了嚴格模式( strict mode )，使用方法是在 <script> 內的代碼頂部添加:

"use strict"

或者，在函數體內：

function justDisplay(){
    "use strict";
    //其餘代碼
}

在嚴格模式下，一些 ES3 中的一些不確定行為會得到相應的處理，對一些不安全的操作也會拋出相應的錯誤，說白了就是規則更加清楚，哪些代碼可以存在，哪些不可以存在。

語句

JS 代碼以“；”結尾，也可以不寫，建議寫上。

02 定義變數

JavaScript 的變數是鬆散類型的，可以用來保存任何類型的數據，也就是每個變數可以理解為臨時工，占著一個工位，等招聘到合適的員工的時候，新來的員工就取代原來的臨時工。ES6 的新特性引入了 let 和 const 兩個操作符，用來區別常量和變數，具體的細節在後續的 ES6 新特性中會闡述，如下所示：

let a;

這個時候，初始變數 a 代表的是一個特殊的值——undefined，a 這個臨時工在記憶體空間占據了一個工位，接下來就等著正式員工進來取代它。比如這樣：

let a;
a = "hi";

或者直接簡潔一點，直接寫成：

let a = "hi";

const 則規定了一個變數的值在給定後就不能再賦值給它，可以理解成經過 const 操作後，變數變成只讀。

const b = 'hi'
b = 'world'
//報錯：TypeError: Assignment to constant variable.

03 數據類型

5 種簡單數據類型：Undefined(未定義)，Null(空對象)，Boolean(布爾值)，Number(數字)，String(字元串)。

1 種複雜數據類型：Object(對象)，無序的名值對，也叫鍵值對。
面量？

（應該還有 1 種: Array(數組)）

### typeof 操作符

typeof 可以檢查各個數據類型和函數，函數不是一種數據類型，然而函數確實有些特殊的屬性和對象類似，所以我們有時候有必要用 typeof 檢測以下數據的具體類型。使用起來非常簡單，直接：

let a;
typeof a；//Undefined

返回的就是對應的數據類型名稱，如 Undefined。

未定義類型 Undefined

包含 Undefined 值的變數和沒有定義的變數不一樣的。比如：

let message;
alert(message);
alert(age) //會報錯

通過顯示地定義 Undefined 一個變數，就能夠區分變數是否已經被定義了，下麵這樣做會省下我們排除錯誤的時間。

let message = Undefined;

空對象類型 NULLL

空指針對象，使用 typeof 檢測，會返回 “object”。如果在將來，這個變數要保存 object，那麼就最好將變數初始化為 null ,而不是其他值。這樣檢查一個對象是否是 null 就只可以確定這個對象有沒有值。這跟上面的 Undefined 一個道理。

布爾類型 Boolean

數據類型 結果為 true 結果為 fasle
Boolean true false
String 任何空字元串 “”（空字元串）
Number 任何非零數字值 0 和 NaN
Object 任何對象 null
undefined 不適用 undefined

註意：{} 轉換成 Boolean 類型是 true。

以上規則在我們寫判斷條件的時候特別有用，程式自動將數據轉換成 Boolean 類型，省掉了我們去判斷一個變數是否為存在正常的值。

let message = "I am KurryLuo"
if(message){
    //直接利用 message 的值作為判斷條件
}

這也是一個小坑，加上 JavaScript 中的變數是弱類型，中間過程可能改變變數的類型，從而使得判斷條件失效，需要我們在實際應用中多加小心。

數值型 Number

1.整數和浮點數

JavaScript 的數值型有兩種：整數型(int)和浮點型(float)。

整數型的數值可以用十進位、八進位、十六進位來表示，八進位數值前面有“0”，而十六進位數值前面有“0x”。比如：

let a = 12; //十進位
let b = 070; //八進位，轉換成十進位為 56 
let c = 0xA; //十六進位，轉換成十進位為 10

浮點數也被稱之為雙精度數值，也就是我們平時見到的小數。比如：

let a = 0.1
let b = 1.1

浮點數占用的記憶體是整數的兩倍，所以 JavaScript 會抖機靈地把下麵兩種情況的浮點數當成是整數存起來：

  • 小數點後面沒有數字： let a = 1.
  • 小數點後面是 0 ： let b = 1.0

這些都是我們比較普通的數值，如果遇到像十億、百億、千億這樣極大或者極小值，我們該如何表示？用浮點數 e 表示法！

e 表示法就是用 e 前面的數值乘以 10 的指數次冪。如：

123000: 1.23e5 
0.0000456： 4.56e-5

浮點數有個很有趣的地方就是，其最高精度是 17 位小數，計算精度遠遠不如整數，因為整數計算根本用不到精度。然而，浮點 0.1 加上 0.2 ，並不等於 0.3，而是等於 0.30000000000000004。這就讓下麵的 if 條件失效：

if(0.1 + 0.2 == 0.3){
    // 做點啥
}

不光 JavaScript ，其他編程語言也這個問題，這是基於 IEEE754 格式的浮點計算的通病。

2.數值的範圍

JavaScript 在 Chrome 瀏覽器中，最小的值是：

> Number.MIN_VALUE
> 5e-324

最大值：

> Number.MAX_VALUE
> 1.7976931348623157e+308

超出最小值和最大值範圍的，JavaScript 會轉換成 -Infinity （無窮小）或者 Infinity（無窮大），對應的代碼是 Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY。使用 isFinite() 判斷是否在合理的範圍內，如果是則返回 true。

3.NaN

這是一個特殊的數值型，表示非數值。聽起來有點暈乎，非數值怎麼還叫數值型呢？原因是它本身想返回的是一個數值型的數據，但是沒有返回成功，只能返回一個 NaN 告訴我們不能這麼乾。其他程式中，遇到這種情況直接停止運行，但是 JavaScript 靈活啊，不耽誤其他程式的正常運行。

NaN 有兩個重要的特點：

  1. 凡是涉及到 NaN 的運算操作，都會返回 NaN。
  2. NaN 與任何值都不相等，包括它自己。（我就是我，不一樣的煙火）

使用 isNaN() 判斷某個參數是不是“不是數值”，其用法是：先嘗試著將待判斷的參數轉換成數值型，如果能行，返回 false，否則 isNaN() 會徹徹底底地認為這個參數不是數值型。也就是，isNaN 會給某些戴著面具的參數一個改邪歸正的機會。

isNaN(NaN); // true
isNaN("kurry"); // true
isNaN(10); // flase
isNaN("10"); // false
isNaN(true); // false(true 可以被轉換成數字 1 )

4.數值轉換函數
數值轉換有三種方式：Number()、parseInt()、parseFloat()

規則比較複雜，我做了一個表，方便查閱。

關於這三個工具，我總結的幾個要點：

  1. Number 轉換字元串過於複雜，一般採用 parseInt 比較合適，其他類型可以用 Number 轉換。
  2. parseInt() 對字元串轉換時一般要加上第二個參數，最好是 10 ，形如：parseInt(字元串，10)。
  3. parseFloat() 只對十進位進行轉換，可以簡單記憶成，專挑數字，只要數字。

字元串類型 String

字元串具有明顯的標誌就是 雙引號 “” 或者 單引號‘’，兩種表達方式都正確比如：

let a = 'bcd';
let a = "bcd";

String 類型表示的是由 0 或者多個 16 位 Unicode 字元組成的字元串。

反斜杠  具有轉義的作用，搭配有些字元，會讓字元串表達獨特的含義，比如 ‘\n’ 表達的是換行，‘\t’ 表達的是製表。這在字元串的使用過程中需要百般註意。

String 的長度可以通過 length 屬性獲得，比如：

let a = 'bcd';
a.length; // 3

如果字元內含有雙位元組字元（中文字），length 返回的長度可能不正確。

字元串的特點：
1.可以拼接：

let a = "kurry"; // kurry
a = "kurry" + "luo"; //kurryluo

真實的過程不是強行接上尾巴，而是首先創建 "kurry" ，然後 "kurry" 和 "luo" 聯合起來侵占了原本的位置，接著 JavaScript 在後臺幫我們銷毀了 “kurry” 和 "luo" 兩個變數，新人勝舊人。

2.字元的轉換

靠一個方法 toString()，註意不是函數，而是方法。用法如下：

let a = 1;
a.toString(); // 'l'

方法可以理解為，是某個參數帶有的屬性。而像 Number() 是轉換函數，參數本身不具備。可以形象地說，除了 Null 和 Undefined，其他參數都可以自己把自己變身成字元串。比如：

let a = true;
a.toString(); // 'true'

括弧可以填輸出數值的基數，當我們需要把一個十進位的數字轉換成八進位的“字元串”，我們可以這麼做：

let a = 10;
a.toString(8); //'12'

剛纔說了，有兩個不帶變身技能的參數：Null 和 Undefined 有什麼辦法轉換嗎？

我們可以用 String() 函數，這個可以看作是 toString() 的升級版，不是特殊情況的參數，它會調用參數的 toString() 方法，然後返回結果；面對 Null 和 Undefined，它是這樣處理的：

let a = null;
let b = undefined;

String(a); //'null'
String(b); //'undefined'

還有個神操作，String 類型會感染其他值成為字元串類型，這也是一種轉換方式：

let a = '1';
b = a + 2; // '12'

對象類型 Object

這裡談的 Object 類型是所有對象的基礎，是源頭。用一句概括：萬物皆對象， ECMA-262 中規定的對象都由以下方法或者屬性：

  • constructor：保存創造出對象的構造函數；
  • hasOwnProperty("屬性名字")：檢查創造出來的對象是否擁有某個屬性；
  • isPrototypeOf(A)：檢查 A 是否是當前對象的原型，其中 A 是對象類型的數據；
  • propertyIsEnumerable('屬性名')：檢查創造出來的對象的屬性是否可以使用 for-in 語句，用來遍歷對象集合；
  • toString()：返回對象的字元串表示；
  • toLocaleString：返回對象的字元串表示，和執行環境的地區對應；
  • valueOf()：返回對象的字元串、數值、布爾值表示，通常和 toString() 方法的返回值相同

對象通過以下命令進行創建：

let o = Object();

後續會專門對各個數據類型進行展開，這裡只介紹核心的概念。

歡迎大家關註微信公眾號：可視化技術（ visteacher ）

不僅有前端和可視化，還有演算法、源碼分析、書籍相送

個人網站：http://blog.kurryluo.com

各個分享平臺的 KurryLuo 都是在下。

用心學習，認真生活，努力工作！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 教你如何在React及Redux項目中進行服務端渲染
    服務端渲染（SSR: Server Side Rendering）在React項目中有著廣泛的應用場景 基於React虛擬DOM的特性，在瀏覽器端和服務端我們可以實現同構（可以使用同一份代碼來實現多端的功能） 服務端渲染的優點主要由三點 1. 利於SEO 2. 提高首屏渲染速度 3. 同構直出，使用 ...
  • PoPo數據可視化周刊第一期
    PoPo數據可視化 聚焦於Web數據可視化領域, 發現前端可視化領域有意思的內容. 涵蓋前端可視化領域最新資訊, 開源可視化庫的發佈更新消息, 可視化案例分析與講解, 可視化技術文章, 可視化大神的日常, 可視化八卦等等...不想錯過前端可視化領域的精彩內容, 就快快關註我們吧 :) 行業 Data ...
  • 行為委托
    什麼是行為委托？簡單來說就是一種設計模式，不同於傳統的構造函數的“類”式設計。 在這之前先說一下原型的基本知識。什麼是原型？簡單來說就是一個對象內部關聯另外一個對象，本質來說就是對象與對象之間的關聯；一個對象本身沒有屬性或者方法會到原型對象上查找。 這裡每個例子會通過構造函數，class和行為委托來 ...
  • Uncaught TypeError: Cannot read property 'id' of undefined
    剛開始寫的i<pageInfo.total導致i的值越界。 ...
  • angular動態綁定樣式以及改變UI框架樣式的方法
    一：angular動態綁定樣式 舉個慄子： <tr *ngFor="let dataTr of tableData;let i = index" [formGroupName]="i" [ngClass]='isHideClass(i)'> .hide_tr{ display: none !impo ...
  • 面向對象 實現輪播組件
    以面向對象的方式實現無線輪播效果組件預覽地址：https://evenyao.github.io/carousel-jQuery/ 邏輯圖 我們的demo輪播為四張圖，如有多張圖，邏輯是一樣的 當初始化之前，CSS中如果撤除 overflow: hidden; ，即可看到該樣式，即四張圖排列在一起（ ...
  • 載入並全屏輪播載入的其他網站的頁面
    載入並全屏輪播載入的其他網站的頁面 一、 設計思路 1、使用iframe標簽載入其他網站頁面 2、通過js替換iframe的載入鏈接 3、通過js的定時器實現輪播 4、通過js實現全屏 二、代碼小解 1、載入頁面 <iframe src="https://www.baidu.com" width=' ...
  • jQuery中的easyui
    一，easyui datagrid綁定數據的簡單測試： 1.資料庫中的UserInfo表及數據測試： 2.DAL層： //分頁，模糊查詢（pageNum-1)*pageSize+1 從第幾條數據開始，pageNum*pageSize 查詢到那一條結束 //查詢總的條數 3.一般處理程式（UserIn ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類