JavaScript--我發現，原來你是這樣的JS（基礎概念--靈魂篇，一起來學js吧）

来源:http://www.cnblogs.com/Ry-yuan/archive/2017/09/13/7501214.html
-Advertisement-
Play Games

介紹 這是紅寶書（JavaScript高級程式設計 3版）的讀書筆記第三篇（靈魂篇介紹），有著剩下的第三章的知識內容，當然其中還有我個人的理解。紅寶書這本書可以說是難啃的，要看完不容易，挺厚的，要看懂更不容易，要熟練js更是難，中間需要不斷的積累與重溫。因此不是讀一兩遍就能把這書吃透，需要多讀，可謂 ...


介紹

這是紅寶書（JavaScript高級程式設計 3版）的讀書筆記第三篇（靈魂篇介紹），有著剩下的第三章的知識內容，當然其中還有我個人的理解。紅寶書這本書可以說是難啃的，要看完不容易，挺厚的，要看懂更不容易，要熟練js更是難，中間需要不斷的積累與重溫。因此不是讀一兩遍就能把這書吃透，需要多讀，可謂溫故而知新，可以為師矣。

很多人看這些厚的書都是三天打魚兩天曬網，很少能看下去，能記住的東西往往前3章的內容，所以我寫博客就是為了能和大家一起來讀這本書，一起學js。

溫馨提示：筆記言辭會有主觀色彩，知識重點記錄。博客內容為基礎，適合初學者。

基本概念（靈魂篇）

上一篇是軀殼篇講的是一些瞭解性的東西，而接下來便說內涵（數據類型和操作符），換作中文來看就如同讓你理解詞和含義，語句的含義，就像將這些字和語句註入靈魂。
同系列：
第一篇：JavaScript--我發現，原來你是這樣的JS（初識、源泉）
第二篇：JavaScript--我發現，原來你是這樣的JS（基礎概念--軀殼，不妨從中文角度看js）

數據類型

js的數據結構有6種，5種基本類型和一種複雜類型。js中不支持任何自定義的數據類型，所以說就這6種就夠了。

5種基本數據類型：

  • Undefined
  • Null
  • Boolean
  • Number
  • String

1種複雜類型：

  • Object類型

1.1 typeof操作符

該操作符可以檢測某變數是什麼數據類型。

typeof返回的值：

  • "undefined" -- 表示這個值沒有被定義
  • "string" -- 表示這是一個字元串
  • "number" --表示這是一個數字類型
  • "boolean" --表示是一個布爾型
  • "object" --表示這是一個對象
  • "function " --表示這是一個函數

特別：對於null，typeof null 會返回"object",因為null表示的是一個空對象的引用

typeof使用例子：

var str = "hello";
var a;
console.log(typeof str)  //"string"
console.log(typeof 666)  //"number"
console.log(typeof a)  // "undefined"
console.log(typeof null)  // "object"

1.2 Undefined類型

undefined 類型的值只有一個，undefined。當使用var對變數聲明但沒有進行初始化的時候預設的值就是undefined。

var value ;
console.log(typeof value);   // "undefined" 

//特別:對於沒有聲明的變數typeof 返回的值也是undefined,例如：
//下麵的a沒被聲明
console.log(typeof a);    //"undefined"

1.3 Null類型

Null類型也是只用一個值null，null是一個空對象指針。所以使用typeof檢測時會返回object。

console.log(typeof null);   //"object"

註意點：

1.null的使用：在定義的變數將會用來保存一個對象時，那初始化為null，這樣我們就知道該變數將來會引用一個對象。

2.實際上undefined值是派生值null的，因此對他們進行相等性測試會返回true：

console.log(null == undefined);  //true

1.4 Boolean類型

boolean類型有兩個值 true和false，其他類型的值都有與這兩個值等價的值，就是說其他類型的值都能轉成這兩值中的其中一個。通過轉型函數Boolean()

註意點：

任何類型的數據都可以調用Boolean()方法，都能返回一個true或false，至於返回什麼，有一定的規則，規則如下：

//對於Undefined
console.log(Boolean(undefined));  //false
//對於String，非空字元串返回true，空字元串返回false
console.log(Boolean(""));   //false
console.log(Boolean("hahaha"));   //true
//對於Numble類型，任何非0數字返回true，0和NaN返回false
console.log(Boolean(123));  //true
console.log(Boolean(0));  //false
//對於Object，任何對象都返回true
console.log(new Array());  //true

1.5 Number類型

Number 類型就是數字的類型，各種數字都是該類型，包含整數，浮點數。

常見的數字：

//整數
var intNum = 10;
//八進位0開頭
var num1 = 066;
//十六進位0x開頭
var num2 = 0xA;
//浮點數
var floatNum = 0.6;
//極大的數4123000,使用科學表示法e，e6表示10的6次方
var floatNum2 = 4.123e6;
//最大值
Number.MAX_VALUE;   //1.7976931348623157e+308
//最小值 
Number.MIN_VALUE;   //5e-324
//超出最大值時，表示為正無窮
Infinity
//超出最小值時，表示為負無窮
-Infinity
//NaN (Not a Number) 非數值
NaN
//判斷非數值的函數isNaN()
console.log(isNaN(10))  //false
console.log(isNaN("10")) //false,isNaN()會嘗試將字元串轉為數字，此處"10"能轉為10
console.log(isNaN("bey"));  //true , "bey"不能被轉成數字

1.6 String類型

String用於表示由零或多個16位Unicode字元組成的字元序列，即字元串。

字元串由單引號（' '）或雙引號（" "）包含。但首尾不能是不同的引號，比如一單一雙。

錯點:

//這樣會報錯
var str = 'javasritp";

特點：

1.拼接字元串使用'+'號

var str1 = "hello";
var str2 = str1 + "world";
console.log(str2); // "hello world"

2.其他類型的數據轉換為字元串使用toString()函數

var num = 123;
var str = num.toString();  //數字123通過toString轉為了字元串
console.log(str);  //"123"
//使用""拼接其他數據類型可以轉換成String
var s = 23+"";  //"23"

1.7 Object類型

ECMAScript中的對象其實就是一組數據和功能的集合。通過new操作符後跟要創建的對象類型的名稱來創建。

//創建一個Object對象
var  o = new Object();

關鍵：

這裡的Object相當於祖宗一樣，創建Object的實例並沒有什麼用處。他像是java中java.lang.Object 對象一樣。

特點：

每個Object類型的實例共有的屬性和方法：

  • constructor： 保存著用於創建當前對象的函數。
  • hasOwnProperty：用於檢測給定的屬性在當前對象的實例中是否存在。
  • isPrototypeOf ： 用於檢查傳入的對象是否是當前對象的原型
  • propertyIsEnumerble ： 用於檢查給定屬性能否使用for-in來枚舉
  • toLocaleString() : 返回對象的字元串表示。
  • toString() : 返回對象的字元串表示。
  • valueOf() : 返回對象的字元串，數值，或布爾表示。通常和toString() 返回的值相同。

操作符（運算符）

接下來是操作數據值的操作符。包含算術操作符，位操作符，關係操作符，相等操作符。

1一元操作符

只能操作一個值的操作符稱為一元操作符。

1.1遞增與遞減：

形式: 這就是自增自減，使用兩個加號(++)或兩個減號(--)

var num = 5;
num++;   //相當於num = num+1; 此時num = 6;
num--;   //相當於num = num-1; 此時num = 5;

註意點：遞增減的前置型（加減號在數值前面）和後置型（加減號在數值後面）；
1.沒區別的情況：當只有唯一一條遞增或遞減操作時，前後不影響結果


var num1 = 5;
var num2 = 5;
num1++;   //執行後num1的值會變成6
++num2;   //執行num2的值會變成6

2.有區別情況：當操作數在一條語句中進行不僅僅是遞增或遞減操作時

var val1= 5;
var val2 = 5;
var val3 = 20;
var sum1 = val1-- + val3;   //sum1等於25
var sum2 = --val2 + val3;   //sum2等於24
//此處的val1 和 val2 的值相同但最後結果不同.
//val1是後置，通俗點講就是放到最後才進行自減操作.所以順序是原來的val1值(5)和val3相加後賦值給sum1，最後val1才自減。
//val2是前置，通俗點講前置最大，先進行了自減操作。所以順序是val1自減，後和val3相加最後賦值給sum2

1.2一元加號和減號

形式：在一個數值前使用一個加號或減號。

var num = 100;
//用+正數還是正數，負數還是負數
+num;  //100
//用減號就變成相反數
-num;  //-100

註意點：當操作的不是數字時，使用+,-可以使其執行轉換，類似於Number() 函數。

//對於+號
var str = "10";
str = +str;  //值會變成數字10
var str2 = "hello";
str2 = +str2 //值為NaN，因為不能轉為數字
var boo = false;
boo = +false;  //值變為0

//對於-號，也差不多，只是變成相反數
var s = "100";
s = -s; //值為-100

2.加性/乘性運算符（加，減,乘，除，取模）

1.加號（+）：進行加法運算
2.減號（-）：進行減法運算
3.乘號（*）：進行乘法運算
4.除號（/）：進行除法運算
5.求模（%）：求餘數

30+20;  //50
30-10;  //20
30*20;  //600
30/10;  //3
25/6 ;  //1`

3.布爾操作符

布爾操作符有三個：非，與，或

3.1邏輯非

1.符號：!
2.功能：非操作會返回一個布爾值，功能對布爾值取非，即相反。它會對值轉成布爾值。

console.log(!false);  //true
console.log(!0);  //0的布爾轉換是false，進行非操作後就是true
console.log(!"hh")  //非空字元串布爾是true，進行非操作後就是false

//小技巧，使用兩!!可以類似於Boolean函數，對任何數值進行布爾轉換
console.log(!!"hello");  //true
console.log(!!0);  //false

3.2邏輯與

1.符號：&&
2.功能：進行與操作需要兩個值，當兩個值布爾值都為true時才會返回true，否則返回false，並且它是一個短路操作符（當第一個值為false時，就不用再判斷第二個值）

console.log(false&&true); //false
console.log(false&&false); //false
console.log(true&&false); //false
console.log(true&&true); //true

3.註意點： &&（與）操作不一定回返回布爾值一下是特殊情況：

  • 如果第一個操作數是一個對象的時候，返回第二個操作數
  • 如果第一個操作數是null，返回null
  • 如果第一個操作數是NaN，返回NaN

  • 如果第一個操作數是undefined，返回undefined。

    //數組對象
var arr = new Array();
//字元串
var str = 'hello';
console.log(arr&&str) //'hello'
console.log(null&&str) // null
console.log(NaN&&str)  //NaN
console.log(undefined&&str) //undefined

3.3邏輯或

1.符號：||
2.功能：進行與操作需要兩個值，當存在有一個值的布爾值為true則返回true，否則false，或操作也是短路操作符，放當第一個操作值為true時，直接返回true，不用檢查第二個操作值。
3.註意點：如果有一個操作數不是布爾值， ||（或）操作不一定回返回布爾值一下是特殊情況：

  • 如果第一個是對象，則返回第一個操作數
  • 如果第一個數是false，則返回第二個數
  • 如果兩個數都是對象，返回第一個操作數
  • 如果兩個操作數是NaN，返回NaN
  • 如果兩操作數是undefined， 返回undefined。
var arr  = new Array();
console.log(arr||"str");  //返回arr空數組[]
console.log(NaN||NaN) ; //NaN
console.log(false || "str") //"str"

4 關係操作符

1.關係操作符有，大於(>)，小於(<)，小於等於(<=)，大於等於(>=)
2.註意點：

//1.對於數值轉換，直接進行比較，返回true或false
34>23;  //true
//2.對於兩個字元串比較，是通過從前往後逐個比較其字元編碼值（ascll碼）大小
"Biasd"<"adsf";  //true， 因為B字元編碼為66小於a字元編碼97
//3.對於字元串和數字比較，會將字元串轉為數字
"23"<3;  //false ， "23"會轉成23,然後和3比較
"a"<3 //false  , "a"轉為NaN，NaN和任何操作數比較都為false

5.相等操作符

相等操作符有相等(==)和不相等(!=)，全等(===)和不全等(!==)

相等和不相等是先轉換後比較，而全等和不全等是僅比較不轉換

5.1相等和不相等轉換重點：

//1.如果有一個操作值為布爾值，則將該布爾值轉為數值，true轉為1，false轉為0
true == 1 ;  //true
//2.null 和 undefined相等
null == undefined ; //true
//3.有一個操作數為NaN時，一定返回false
NaN == 1;  //false
//4.兩個NaN比較也返回false
NaN == NaN ;  //false
//5.兩個值是對象時，若不是指向同一對象就返回false

5.2全等和不全等重點：

可以看出全等是3個等號，所以比較嚴格，不會像相等一樣進行轉換。通俗的說：你不是就不是。

//相等和全等的比較
"55" == 55 ;  //true,相等情況下，"55"可以轉換
"55" === 55 ;  //false,全等情況，"55"不轉換為數字，所以數據類型不同，直接返回false

//關於null 和 undefined，上面相等比較時時兩個值相等，但全等比較就不等
null === undefined ;  //false

6.條件操作符(三元操作符)

1.模板：表達式1?表達式2:表達式3。
2.使用說明：當表達式1為true時，返回冒號前的表達式2的結果，false就返回冒號後表達式3

//例子:
var num = 3>2?1:0;   //num的值為1

7.賦值操作符

1.簡單的賦值操作由（=）號表示

var val = 10;  //對val賦值為10

2.複合賦值操作

var num = 10;
num = num+10;
//上面那句可以用下麵一句替代
num += 10;

8.逗號操作符

1.使用逗號操作符可以在一條語句執行多條操作；
2.使用逗號操作符進行賦值，賦值時總會返回表達式最後一項

//同時對三個變數聲明並賦值
var num=1, num2 = 2 , num3 = 3;
//賦值時總會返回表達式最後一項
var n = (32,12,5,1,2);   //最後n被賦值為2

最後幾句

這次的博客篇幅比較多介紹數據類型和操作符，可以多看幾次，也可以專看註意點，重點等，已經特別標出。看完這裡基本概念已經完了。接下來還會繼續更新筆記，敬請關註。寫一篇博客不容易，花費很多心思，如果覺得寫得好，關註一下，給個贊吧，讓我有動力繼續寫博，哈哈。

本文出自博客園：http://www.cnblogs.com/Ry-yuan/
作者：Ry
歡迎轉載，轉載請標明出處


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

-Advertisement-
Play Games
更多相關文章
  • Spring Cloud Netflix多語言/非java語言支持之Sidecar
    Spring Cloud Netflix多語言/非java語言支持之Spring Cloud Netflix Sidecar Polyglot support with Sidecar 前言 公司有一個調研要做，調研如何將Python語言提供的服務納入到Spring Cloud管理中來，找到了這個S ...
  • Net分散式系統之七：日誌採集系統（1）
    日誌對大型應用系統或者平臺尤其重要，系統日誌採集、分析是系統運維、維護及用戶分析的基礎。 一、系統日誌分類 一般系統日誌可分為三大類： 1、用戶行為日誌：通過採集系統用戶使用系統過程中，一系列的操作日誌。 2、業務變更日誌：特定業務場景需要，採集某用戶在某時使用某功能，對某業務（對象、數據）進行某操 ...
  • 【轉】23種設計模式詳解
    設計模式（Design Patterns） ——可復用面向對象軟體的基礎 設計模式（Design pattern）是一套被反覆使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問，設計模式於己於他人於系統都是多贏的， ...
  • 分散式系統數據一致性的解決方案
    分散式系統數據一致性的解決方案 隨著互聯網的發展，電腦系統規模變得越來越大，常規的將所有業務單元集中部署在一個或者若幹個大型機上的集中式架構，已經越來越不能滿足當今大型互聯網系統的快速發展。分散式服務架構以及微服務架構已經越來越受到業界的青睞。而在目前的應用系統中，不管是集中式的部署架構還是分散式 ...
  • 獲取spring applicationcontext數據連接connection
    ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml"); // DataSource dataSource = (DataSource) context.getBean("da... ...
  • Electron與WEB桌面應用程式開發及其它
    這幾天在構思項目，研究了一下Electron，記錄下來。 說起WEB桌面程式，當前最火的就是Electron了。 Electron的架構用一句話總結，就是一個main.js進程加上一個或數個chrome視窗，每個視窗都包含一個獨立的Node.js。 這樣的架構，使得這種桌面應用必須是一個（或數個）單 ...
  • bootstrap 基礎（二）
    1 柵格系統偏移 2 柵格系統的排序 3 輔助類 4 表單 5 按鈕 6 縮略圖 7 下拉菜單 8 標簽頁 9 導航 10 分頁 ...
  • 2017年電話/手機號碼正則驗證
    截止2017年9月13號,手機號段為: 130 131 132 133 134 135 136 137 138 139145 146 147 148 149150 151 152 153 155 156 157 158 159166 171 172 173 174 175 176 177 17818 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類