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【與說明相對應】

*NaNInfinity區別:Infinity是指任何超過浮點數上限1.7976931348623157E+1.038的值,

-Infinity是小-1.7976931348623157E+1.038

二、 相等

1 理解相等

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

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

返回值:相等true不等false

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

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

*比較布爾類型和其他類型,將布爾中true=1false=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中有些值並非truefalse但是用於條件表達式中時被視為truefalse

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

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

六 、字元串

·        前奏:每種類型都歸屬兩個陣營之一,基本類型和對象;

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

·        string屬性和方法介紹:

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

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

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

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

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