JavaScript學習筆記（五）——類型、轉換、相等、字元串

来源:https://www.cnblogs.com/weimingai/archive/2019/02/03/10350312.html
-Advertisement-
Play Games

第六章 類型 相等 轉換等 一、類型 1 typeof(); typeof是一個內置的JavaScript運算符，可用於探測其操作數的類型。 例： 2 undefined 說明：對於任何還沒有值（即未初始化）的東西，都會將undefined賦給它；undefined的類型是undefined 【未初 ...


第六章 類型 相等 轉換等

 一、類型

1 typeof();

typeof是一個內置的JavaScript運算符，可用於探測其操作數的類型。

例：

 1 <script language="JavaScript" type="text/JavaScript">
 2 
 3 var test1="abcdef";                                        //string
 4 
 5 var test2=123;                                                //number
 6 
 7 var test3=true;                                                //boolean
 8 
 9 var test4={};                                                //object
10 
11 var test5=[];                                                //object
12 
13 var test6;                                                //undefined
14 
15 var test7={"asdf":123};                                //object
16 
17 var test8=["asdf",123];                                //object
18 
19 function test9(){return "asdfg"};        //function
20 
21  
22 
23 console.log(typeof test1);//string
24 
25 console.log(typeof test2);//number
26 
27 console.log(typeof test3);//boolean
28 
29 console.log(typeof test4);//object
30 
31 console.log(typeof test5);//object
32 
33 console.log(typeof test6);//undefined
34 
35 console.log(typeof test7);//object
36 
37 console.log(typeof test8);//object
38 
39 console.log(typeof test9);//function
40 
41 </script>

 

2 undefined

說明：對於任何還沒有值（即未初始化）的東西，都會將undefined賦給它；undefined的類型是undefined

【未初始化的變數、訪問不存在或已刪除的屬性、使用不存在的數組元素】

優點：undefined讓你能夠判斷是否給變數（屬性、數組元素）賦值了

應用：

 1 //變數
 2 
 3 var x;
 4 
 5 if(x==undefined)
 6 
 7 {
 8 
 9 處理程式;
10 
11 }
12 
13 //對象的屬性
14 
15 var customer={
16 
17 name:"Jenny"
18 
19 };
20 
21 if(customer.phonenumber==nudefined)
22 
23 {
24 
25 處理程式
26 
27 }

 

3 null

說明：表示沒有對象可以賦給變數；

與undefined對比：undefined：在變數未初始化、對象沒有指定屬性、數組沒有指定元素；

     null：在應該提供一個對象，但無法創建或找到時；

再次說明：返回null未必意味著出現了問題，這可能只是意味著有什麼東西不存在，需要創建它或可以忽略它。

例：

1 var weather=document.getElementById("weatherDiv");
2 
3 if(weather!=null)
4 
5 {
6 
7 //為div元素weather創建內容
8 
9 }

 

4 NaN

說明：不是數字的數字【它的類型為number】，表示 0/0 等不可以被表示的數字，

*是一個數字，只是無法表示；

*NaN！=NaN 【sqrt(-1)與sqrt(-2)】；

*判斷函數是isNaN();返回值為布爾類型；

*向isNaN()傳遞一個不能轉換為數字的字元串時返回true；

*typeof null返回值為object【與說明相對應】

*NaN與Infinity區別：Infinity是指任何超過浮點數上限1.7976931348623157E+1.038的值，

（-Infinity是小-1.7976931348623157E+1.038）

二、 相等

1 理解相等

如果兩個值類型相同，就直接進行比較；

如果兩個值類型不同，就嘗試將他們轉換為相同的類型再進行比較；

返回值：相等true不等false

2 相等運算符轉換操作數：

*比較數字和字元串，將字元串轉換為數字，(如將“99”轉換為 99 )；如果不能轉換為數字則轉換為NaN

*比較布爾類型和其他類型，將布爾中true=1，false=0；

*undefined==null；

*""空字元串轉換為數字0；

拓：嚴格相等：===【類型和值都相等】

沒有<==和>==但是有!===

應用："true"==true;//返回false因為簽前面為字元串後邊布爾轉換為數字

  "banana"<"melon";//返回true，因為按照字母排列順序Unicode排序，開頭b<m,拓M<m

三、類型轉換

1 涉及轉換的運算符

·        +  數字遇到字元串，將數字轉換為字元串；如1+2+"pizzas"="3 pizzas";1+(2+"pizzas")="12 pizzas";true轉換為字元串

·        *數字遇到字元串，將字元串轉換為數字

·        /數字遇到字元串，將字元串轉換為數字

·        - 數字遇到字元串，將字元串轉換為數字

四、 判斷兩個對象是否相等

·        運算符：==和===等價

·        意義：檢查兩個對象變數是否相等時，比較的是指向對象的引用，僅當兩個引用指向的是同一個對象時，他們才相等；

·        例：

  1 <!doctype html>
  2 
  3 <html lang="en">
  4 
  5 <head>
  6 
  7 <title>look for car</title>
  8 
  9 <meta charset="utf-8">
 10 
 11 <style type="text/css">
 12 
 13  
 14 
 15 </style>
 16 
 17 <script language="JavaScript" type="text/JavaScript">
 18 
 19 function findCarInLot(car)
 20 
 21 {
 22 
 23 for(var i=0;i<lot.length;i++)
 24 
 25 {
 26 
 27 if(car===lot[i])//== 一樣
 28 
 29 return i+1;
 30 
 31 }
 32 
 33 return -1;
 34 
 35 }
 36 
 37 var chevy={
 38 
 39 make:"Chevy",
 40 
 41 model:"Bel Air"
 42 
 43 };
 44 
 45 var taxi={
 46 
 47 make:"Webville Motors",
 48 
 49 model:"Taxi"
 50 
 51 };
 52 
 53 var fiat1={
 54 
 55 make:"Fiat",
 56 
 57 model:"500"
 58 
 59 };
 60 
 61 var fiat2={
 62 
 63 make:"Fiat",
 64 
 65 model:"500"
 66 
 67 };
 68 
 69  
 70 
 71 var lot=[chevy,taxi,fiat1,fiat2];
 72 
 73 var loc1=findCarInLot(taxi); //2
 74 
 75 var loc2=findCarInLot(fiat1);//3
 76 
 77 var loc3=findCarInLot(chevy);//1
 78 
 79 var loc4=findCarInLot(fiat2);//4
 80 
 81  
 82 
 83 console.log(loc1);//2
 84 
 85 console.log(loc2);//3
 86 
 87 console.log(loc3);//1
 88 
 89 console.log(loc4);//4
 90 
 91 </script>
 92 
 93 </head>
 94 
 95 <body>
 96 
 97 <h1>Look for cars in the parking lot</h1>
 98 
 99 </body>
100 
101 </html>

 

五 、真值和假值

·        說明：在JavaScript中有些值並非true和false但是用於條件表達式中時被視為true和false。

·        記住五個假值，其餘就是真值：undefined null 0 空字元串 NaN

例如：if([]){//代碼;}中[] 表示數組為真值

六 、字元串

·        前奏：每種類型都歸屬兩個陣營之一，基本類型和對象；

·        字元串/數字/布爾也可以是既有基本類型又是對象，但是後兩者的屬性和方法較前一者少很多；

·        string屬性和方法介紹：

·        屬性str.length:返回字元串的長度即字元個數；

·        方法str.charAt():參數範圍是0-長度-1 的整數，返回為該索引的字元；

·        方法str.indexOf("cat");返回第一個cat中c的索引；

str.indexOf("the",5);從索引為5開始搜索，返回the中t的索引；

如果沒有找到返回-1；

·        方法str.substring(5,10);返回索引5（包括）到10（不包括）之間的字元串；

substring(5);返回從索引5到字元串結尾的字元串；

·        方法str.slice(5,7);刪除字元串的一部分並返回結果；和substring返回結果相同

·        方法str.split("|");返回以|為界分隔的字元串數組；

·        方法str.toLowerCase();返回將字元串的所有大寫轉換成小寫；

·        方法str.toUpperCase();返回將字元串中的所有小寫轉換成大寫；

·        方法str.concat(str2);返回將str2拼接在str後的字元串；參數可以是多個即繼續向後拼接；

·        方法str.replace("fgh","12");查找子串fgh並替換成另外一個字元串12；

·        方法str.lastIndexOf();與indexOf類似但是查找最後一個子串；

str="asd,fgh,jkfg  ";str3=str.lastIndexOf("fg",4);//返回4

str="asd,fgh,jkfg  ";str3=str.lastIndexOf("fg");//返回10

·        方法match：在字元串中查找與正則表達式匹配的子串

 1 <script type="text/javascript">
 2 
 3  
 4 
 5 var str="Hello world!"
 6 document.write(str.match("world") + "<br />")
 7 document.write(str.match("World") + "<br />")
 8 document.write(str.match("worlld") + "<br />")
 9 document.write(str.match("world!"))
10 
11 </script>

 

輸出：

world
null
null
world!

·        方法str.trim()：刪除字元串開頭和末尾的空白字元；

七、舉個慄子：

  1 <!doctype html>
  2 
  3 <html lang="en">
  4 
  5 <head>
  6 
  7 <title>Check phone number</title>
  8 
  9 <meta charset="utf-8">
 10 
 11 <style type="text/css">
 12 
 13  
 14 
 15 </style>
 16 
 17 <script language="JavaScript" type="text/JavaScript">
 18 
 19 //要求檢驗7位數字的電話號，中間第四位-可有可無
 20 
 21 //方法一：
 22 
 23 function validate1(phonenumber)
 24 
 25 {
 26 
 27 if(phonenumber.length>8||phonenumber.length<7)
 28 
 29 return false;
 30 
 31 for(var i=0;i<phonenumber.length;i++)
 32 
 33 {
 34 
 35 if(i==3)
 36 
 37 {
 38 
 39 if(phonenumber.length===8&&phonenumber.charAt(i)!=='-')
 40 
 41 return false;
 42 
 43 else if(phonenumber.length==7&&isNaN(phonenumber.charAt(i)))
 44 
 45 return false;
 46 
 47 }
 48 
 49 else if(isNaN(phonenumber.charAt(i)))
 50 
 51 return false;
 52 
 53 }
 54 
 55 return true;
 56 
 57 }
 58 
 59 //方法二：還有bug嗎？
 60 
 61 function validate2(phonenumber)
 62 
 63 {
 64 
 65 if(phonenumber.length>8||phonenumber.length<7)
 66 
 67 return false;
 68 
 69 var first=phonenumber.substring(0,3);
 70 
 71 var second=phonenumber.substring(phonenumber.length-4);
 72 
 73 if(isNaN(first)||isNaN(second))
 74 
 75 return false;
 76 
 77 if(phonenumber.length===8)
 78 
 79 return (phonenumber.charAt(3)=='-');
 80 
 81 return true;
 82 
 83 }
 84 
 85 //方法三：正則表達式
 86 
 87 function validate3(phonenumber)
 88 
 89 {
 90 
 91 return phonenumber.match(/^\d{3}-?\d{4}$/);
 92 
 93 }
 94 
 95  
 96 
 97 var str1="6724025";
 98 
 99 var str2="672-4254";
100 
101 var str3="72554896"
102 
103 console.log(validate1(str1));
104 
105 console.log(validate2(str2));
106 
107 console.log(validate3(str3));
108 
109 </script>
110 
111 </head>
112 
113 <body>
114 
115 <h1>Verify that the phone number is correct</h1>
116 
117 </body>
118 
119 </html>

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 01-css的引入方式
    【轉】01-css的引入方式 引入css方式（重點掌握） 行內樣式 內接樣式 外接樣式 3.1 鏈接式 3.1 導入式 css介紹 現在的互聯網前端分三層： HTML：超文本標記語言。從語義的角度描述頁面結構。 CSS：層疊樣式表。從審美的角度負責頁面樣式。 JS：JavaScript 。從交互的角 ...
  • 02-HTML5新的input屬性
    【轉】02-HTML5新的input屬性 本節重點 HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證 本節介紹新的輸入類型： date datetime datetime-local email month number range search tel time url ...
  • 01-html介紹和head標簽
    【轉】01-html介紹和head標簽 主要內容 web標準 瀏覽器介紹 開發工具介紹 HTML介紹 HTML顏色介紹 HTML規範 HTML結構詳解 web標準 瀏覽器介紹 開發工具介紹 HTML介紹 HTML顏色介紹 HTML規範 HTML結構詳解 一、web標準 web準備介紹： w3c：萬維 ...
  • HTML的概念和三大基石以及標準文檔結構
    HTML的概念： 概念： HTML：超文本標記語言 作用： 需要將java在後臺根據用戶請求處理的請求結果在瀏覽器中顯示給用戶。 在瀏覽器中數據需要使用友好的格式展示給用戶。 HTML是告訴瀏覽器接收到的數據使用什麼樣的數據組織形式進行顯示 使用： HTML的文檔規範 HTML的標簽 互聯網的三大基 ...
  • Vue學習之路第十七篇：過濾器的使用
    1、過濾器 ①：Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：插值表達式和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號（“|”）指示。使用方式為：{{ msg | form ...
  • 基於 Webpack 4 和 React hooks 搭建項目
    面對日新月異的前端，我表示快學不動了
  • 看到一個想收藏的的AJAX小列子
    用戶登錄的驗證可以使用 form 表單提交，也可以使用 ajax 技術非同步提交。 AJAX 即 Asynchronous Javascript And XML（非同步 JavaScript 和 XML），是一種用於創建快速動態網頁的技術。 通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現異 ...
  • Vue學習之路第十六篇：車型列表的添加、刪除與檢索項目
    又到了大家最喜歡的項目練習階段，學以致用，今天我們要用前幾篇的學習內容實現列表的添加與刪除。 學前準備： ①：JavaScript中的splice(index,i)方法：從已知數組的index下標開始，刪除i個元素。 ②：JavaScript中的findIndex() 方法：為數組中的每個元素都調用 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類