學習 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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類