一篇文章帶你搞懂JavaScript的變量與數據類型

Posted on by

前言：

我不是搞前端，而是搞後端的。本命編程語言是java。學習js的嘛，因為看到室友能做出動態網頁，而我隻能做出靜態網頁，再加上下個學期要學所以提前來學習學習。

溫馨提示：

java和javsScript沒有半毛錢關系，隻是javaScript被SUN公司收購後，把改成jaaScript，第一是因為SUN的主打產品是java，第二是利用java的知名度去javaScript做廣告，擴大javaScript的影響力。

接下來就分享今日的幹貨

變量

什麼是變量？

我們需要用編程語言去處理現實生活中的各種數據，而各種數據又是存儲在哪裡的呢？答案就是變量，變量不是什麼高大尚的東西，它就是一個裝東西的盒子把它說塑料袋也不為過。變量的本質就是在內存中開辟一塊存放數據的空間。類似的我們酒店的房間，一個房間就可以看做一個變量。

變量的使用

變量使用時分為兩個步驟，1.聲明變量，2.賦值。我們還是用同樣的思想去理解這兩個步驟，有一天我來一傢酒店，我向老板說要開一間單人房,當我付錢後，老板給我房卡，這就意味著我在某一個期限內，可以入住那個房間。(我付錢，老板給卡,相當於聲明），我入住之後，空房間有人瞭相當於賦值。

接下來看看JS中的變量的使用

1.聲明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		var age;
		</script>
	</head>
	<body>
	</body>
</html>
  • var 是js的一個關鍵字，用來聲明變量(variable變量的意思)，使用該關鍵字聲明變量後，計算機自動為變量分配內存空間
  • age程序員定義的變量名，我們要通過變量名來訪問內存中分配的空間

2.賦值

var age=19; //給age這個變量賦值為19
  • =用來把右邊的值給左邊的變量空間，這就是賦值
  • 變量值是程序員保存到空間變量裡的值

3.二個語法小細節

更新變量：一個變量被重新賦值後，它原來的值就會被覆蓋，變量值以最後一次賦的值為準

var age=18;
age=19;//最後的結果為19.因為18被19覆蓋瞭

同時聲明多個變量:隻需寫一個var ，然後變量名之間用英文逗號隔開

var age,number,average;

聲明變量的特殊情況

特殊一

		var sex;隻聲明，不賦值，程序也不知道是啥，所以結果是 undefined (未定義的)
		console.log(sex);

特殊二

	console.log(sex); 不賦值，不聲明，直接使用某個變量會報錯

特殊三

qq=90;
console.log(qq); 不聲明直接賦值直接用，不會報錯！！！
這就很離譜，但是在javaScript就是對的，因為它太自由瞭。

變量的命名規范

  • 有字母(AZ,az)，下劃線_,美元符號$組成，如userName
  • 嚴格區分大小寫。var app;和var App;是兩個變量
  • 不能以數字開頭，如12age則是錯誤的
  • 不能是關鍵字，保留字，例如：var ,for ,while.
  • 變量名必須有意義，要做到見名知意
  • 遵循駝峰命名法：首字母大寫，後面的單詞首字母需要大寫。如：myName
  • 推薦翻譯網站：有道，或者直接百度

為什麼需要數據類型？

編程語言是用來處理現實生活中的問題，我們在現實世界中要處理各種各樣的數據，其中就有整數，小數，文字等等，對應的在編程語言也有整數，浮點數，字符。在計算機中不同類型的數據所占的儲存空間也是不一樣的，為瞭方便把數據分為所需內存大小不同的數據，充分的利用儲存空間，於是就定義瞭不同的數據類型。簡單的來說，數據類型就是數據的類別型號，就是對數據分類。如姓名，“葉秋涵”，年齡18，這些數據的類型的就是不一樣的。

變量的數據類型

變量是用來儲存值的所在處，它們都有其名字和類型，變量的數據類型決定瞭如何將代表這些值的位儲存到計算機的內存中，javaScript是一種弱類型或者說動態語言，這意味著不用提前聲明變量的

類型，程序在執行過程中會自動。

var age=10;          //這是一個數字型
var name='葉秋涵';      //這是一個字符串

在代碼的運行過程中，變量的數據類型是由js引擎根據=右邊變量值的數據類型來判斷的，運行完畢之後，變量就確定瞭數據類型

js擁有動態類型，同時意味著相同的變量可以作不同的類型

var x=6;      //x為數字
var x='嗶哩嗶哩';  //x為字符串

簡單數據類型(基本數據類型）

js中的簡單數據類型及其說明

簡單數據類型 說明 默認值
Number 數字型，包括整數值和浮點數值，如12，0.2022 0
Boolean 佈爾值是類型，如true,false,等價於1和0 false
String 字符串類型，如"葉秋涵",註意在js中字符串都帶引號 “”
Undefined var a; 聲明變量a但是沒有給值，此時a=undefined undefined
Null var a=null; 聲明a變量為空值 null

數字型

1.數字型進制

最常見的進制有二進制，八進制，十進制，十六進制

//1.八進制數字序列范圍0~7
var num1=07; //對應十進制的7
var num2=019; //對應十進制的19
var num3=08  //對應十進制的8
//2.十六進制數字序列范圍：0~9以及A~F
var num=0xA;

現在我們隻要記住,在js中八進制前面加0，十六進制前面加0x

2.數字型范圍

js中數值的最大值和最小值

	alert(Number.MAX_SAFE_INTEGER);//9007199254740991
	alert(Number.MIN_VALUE);//5e-324

3.數字型三個特殊值

	alert(Infinity);//Infinity
	alert(-Infinity);//-Infinity
	alert(NaN);//NaN
  • Infinity,代表無窮大，大於任何值
  • -infinity,代表無窮小，小於任何值
  • NaN, Not a number,代表一個非數值

字符串型 String

字符串型可以是引號中的任意文本，其語法是單引號**’'和雙引號""**

			var srtAge = '18';
			var strName = '葉秋涵';
			var srtFood = '我愛垃圾食品';
			//常見錯誤
			var srtNum2 = 11; //報錯，沒有引號，會被認為是js代碼，但是js沒有這些語法

因為在HTML標簽中裡面的屬性使用的是雙引號，js這裡我們更推薦使用單引號

字符串引號嵌套

js可以用單引號嵌套雙引號，或者用雙引號嵌套單引號(外雙內單，內單外雙)

var strMsy = '我是"程序員"蕭寒';
			console.log(strMsy)
			var strMsy2 = "我是'程序員'蕭寒";
			console.log(strMsy2);
			//常見錯誤
			var badQuotes = "What on earth？"';
			console.log(strMsy2);

結果如下

在這裡插入圖片描述

在這裡插入圖片描述

字符串轉義符

類似HTML裡面的特殊字符，字符串中也有特殊字符，我們稱為轉義符

轉義符都是由\開頭，常用的轉義字符及其說明如下

轉義符 解釋說明
\n 換行符，n是newline的意思
\ \ 斜杠\
\ ’ 單引號
\ * 雙引號
\t tab縮進
\b 空格 ，b是blank的意思

佈爾型Boolean

佈爾類型有兩個值，true和false，其中true表示真，而false表示假

佈爾型和數字型相加的時候，true的值為1，false的值為0

		console.log(true+1);//2
		console.log(false+0);//0

Undefined和Null

一個聲明後沒有被賦值的變量會默認有一個默認值undefined(如果進行相加或者相連時，註意結果)

var variable;
			console.log(variable);
			console.log('你好'+variable);
			console.log(11+variable);//+起連接作用
			console.log(true+variable);

結果如下

在這裡插入圖片描述

​一個變量給null值，裡面儲存的值為空，就是啥也沒有

	var vari=null;
			console.log('你好'+vari);
			console.log(11+vari);
			console.log(true+vari);

結果如下

在這裡插入圖片描述

什麼是數據類型的轉換

使用表單，prompt獲取過來的數據默認值是字符串類型，此時就不能進行簡單的加法運算，而是需要轉換變量的數據類型，簡單來說，就是把一種數據類型轉換成另一種數據類型。

三種常用的轉換方式

  • 轉換為字符類型
  • 轉換為數字型
  • 轉換為佈爾型

1.轉換為字符串

方式 說明 案例
toString() 轉換為字符串 var num=1; alert(num.toString());
String()強制轉換 轉換為字符串 var num=1; alert(String(num));
加號拼接字符串 和字符串拼接的結果是字符串 var num=1; alert(num+“我是字符串”)；
  • toString()和String()使用放方式一樣
  • 三種轉換方式，前面兩種瞭解，第三種轉換為常用，也成為隱形轉換

2.轉換為數字型(重點)

(一)利用js提供的函數

js提供瞭parseInt()和parseFloat()兩個轉換函數。前者把值轉換成整數，後者把值轉換成浮點數。

看看代碼就明白瞭

		var age=12;
		console.log(age);
		//利用parseInt()將值轉換為整數
		console.log(parseInt(age));
		console.log(parseInt('3.12'));//取整
		console.log(parseInt('3.89'));//取整
		console.log(parseInt('10px'));
		console.log(parseInt('rem120px'))//NaN
		//利用parseFloat()將值轉換為整數
		console.log(parseFloat('3.14'));//3.14
		console.log(parseFloat('120px'));//120會去掉px這個單位
		console.log(parseFloat('rem102px'));//NaN js引擎讀到rem的時候，無法識別，直接判為空

(二)強制轉換 Number()轉換函數

		var str='123';
		console.log(Number(str));//123
		console.log(Number('12'));//12

(三)js的隱形轉換(- * /) 註意沒有+,+起拼接作用

		console.log('12'-0);//12
		console.log('122'+1);//1221
		console.log('123'*123);//15129
		console.log('123'/123);//1

轉化為佈爾型

方式 說明 案例
Boolean()函數 其它類型轉換為佈爾值 Boolean(‘true’)
  • 代表空，否定的值會被轉換為false,如’’,0,NaN,null,undefined
  • 其餘值都會轉換為true
		console.log('');//false
		console.log(0);//false
		console.log(NaN);//false
		console.log(null);//false
		console.log(undefined);//false
		console.log('小白');//true
		console.log(12);//true

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：