JavaScript變數，資料型別，運算子
阿新 • • 發佈：2019-01-11
一.直接量和變數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> 1.直接量：字面量 數值 ：1,2,3,4,5,1.1，1.11,1.356，-1，-2，-3 字串：由單雙引號包裹起來的內容 'hello world' "hello world" 其他：布林 true/false null 直接量 alert(111); alert(1.19); alert(-5); alert('hello world'); alert('3.14');字串 alert(3.14);數值 alert(true); alert(false); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>變數</title> <script type="text/javascript"> 1.變數：變化的量 2.定義變數：變數需要先定義在使用 var 變數名; 變數名的命名規則： 1)變數名必須以字母、下劃線、$開頭 2)變數名可以包含數字、字母、下劃線、$ 3)變數名區分大小寫 4)不能使用關鍵字和保留字 3.變數的賦值(變數的初始化)： 變數名=值; 4.讀取變數中的資料(變數的取值) 變數名 5.若變數只定義，未賦值 undefined 6.定義變數的本質：在記憶體中開闢空間並且命名(變數名),將資料存入此空間(變數名所代表的空間) 7.變數的賦值是一種值的傳遞（變數是獨立的空間） 變數的定義 var a;定義一個變數，並且命名為a a=10;賦值 變數的初始化 變數的取值 console.log(a);在控制檯中輸出日誌 1.先定義一個變數，再初始化 var a;定義一個變數 變數初始化 a=20; 取出變數的值 console.log(a); 2.var a=10,b=30,c=10;定義變數的同時即初始化 console.log(a); console.log(b); console.log(c); 3.多變數定義 var a,b,c; a=10; b=20; c=30; 變數不可以重複定義 var a=20;在記憶體中開闢空間命名為a，並且將20存入a這塊空間中 var a=30; console.log(a); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> JS是一門弱型別語言,在變數定義的時候，不需要指定資料型別 var a='hello world'; var b=123; console.log(a); console.log(b); var a=20; console.log(a); a=30;變數的重複賦值（覆蓋） console.log(a); a='hello world'; console.log(a); var a=10; var b=a;變數的賦值僅僅是一種值的傳遞 console.log(a); console.log(b); a=30; b=20; console.log(a);30 console.log(b);10 20 </script> </head> <body> </body> </html>
二.資料型別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
資料型別：
（1）基本資料型別(原始資料型別)
數值型別(number) 數字 1,2,3,10,1.1，2.1,1.222，-10
字串型別(string) 由"" '' 字串內容會原樣輸出
布林型別(boolean) false(假) true(真)
undefined 變數定義但未初始化
null 空 引用型別
（2）引用型別
Object Array(陣列) Date(日期) Function (函式) RegExp(正則)
檢測變數資料型別
typeof 變數名;
注意：typeof表示式本身的結果是一個字串型別
"string" "number" "boolean" "undefined" "null"
var a=10;
console.log(a);
console.log(typeof a);number
var a='hello';
a='10';
a='3.14';
a="10+20";
console.log(a);
console.log(typeof a);string
var isBoy=false;
console.log(isBoy,typeof isBoy);
var a=10;
console.log(typeof a);
var b=typeof a;將a的資料型別儲存在變數b中
console.log(b);"number"
console.log(typeof b);先運算在輸出
console.log(typeof typeof a);string
變數的資料型別取決變數裡儲存的資料
var a=10;number
var b=20;
console.log(typeof a,typeof b);
a=true;boolean
console.log(typeof a);
a='hello';string
console.log(typeof a);
</script>
</head>
<body>
</body>
</html>
三.運算子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
運算子：
運算子根據運算元的個數可以分為：一元(一目)運算子、二元運算子、三元運算子
根據運算子的作用：
（1）算術運算子：
+ - * / %(取餘)
一元運算子：
自增:++
自減:--
注意：未賦值時，前置和後置 無區別
賦值時：
1.後置：先賦值，後運算
2.前置：先運算，後賦值
注意：+ 兩邊有一個為字串型別時，則執行拼接操作,結果為字串型別
（2）賦值運算子
= (賦值) += -= *= /= %= 先運算，再賦值
(3)比較運算子
運算結果為boolean型別
>= <= > < ==(等於) !=(不等於) ===（全等）
注意：
== 只比較數值
=== 不僅比較數值，還比較資料型別
(4)邏輯運算子
一般情況下，運算結果為布林型別
&&(邏輯與) : 並且
若運算子兩邊均為真(true),則結果為真(true),其它均為假
||(邏輯或) : 或者
運算子兩邊有一個為真，則為真；兩邊均為假，則為假
!(邏輯非) : 取反 一元
（5）條件運算子 三元運算子
?:
var a=10;
var b=20;
console.log(a+b);先運算、再輸出
十進位制、二進位制、八進位制、十六進位制
JavaScript小數運算有問題：精度損失
console.log(0.2*0.2);0.04000000000000001
var a=0.2*0.2;
var b=a.toFixed(2);保留小數點後兩位數
console.log(b);
科學計數法
var a1=0.000005;
var a11=5e-6;
var a2=300000000;
var a3=3e8;
console.log(a1);
console.log(a11);
console.log(a2);
console.log(a3);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
先賦值，後運算
var a=10;
var b=a++;
var b=a--;
console.log(a);
console.log(b);
1. var a=5;
var b=3;
var c=a+b+(a++);5+3+5
console.log(a,b,c);
2. var a1=a++;
var c=(a++)+(a+b)+(b--);5+9+3
console.log(a,b,c);
3. var a=2;
var b=4;
var a1=a++;2
var b1=b--;4
var b2=b++;3
var c=(a++)+(b--)+(a+b)+(b++);2+4+6+3
console.log(a,b,c);a=3 b=4 c=15
先運算，後賦值
var a=5;
var c=++a;
var b=--a;
console.log(c);6
console.log(b);5
1. var a=3;
var b=5;
var c=(++a)+a+b;4+4+5
console.log(a,b,c);
2. var a=3;
a+=2; a=a+2
a-=2; a=a-2
a*=2;
console.log(a+=2);5
console.log(a*=2);10
console.log(a/=2);5
console.log(a%2);1
console.log(a);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var a=3;
var b=5;
同時成立則為true，有一項不成立則為false
1. var c=a>b&&a<b;false
var c1=a<b&&a<=b;true
var c2=a<b&&a>b;false
var c3=a>b&&a>=b;false
其中滿足一項則為true
2. var c=a>b||a<b;true
var c1=a<b||a<=b;true
var c2=a<b||a>b;true
var c3=a>b||a>=b;false
console.log(c,c1,c3);
式子c成立取第一項反之取第二項。
3. var a=10;
var b=5;
var c=a>b?100:50;
console.log(c);
</script>
</head>
<body>
</body>
</html>
四.運算子擴充套件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
1.算術運算子
數值型別
var a=10;
var b=5;
console.log(a+b);
字串
var a='hello';
var b=' 哈哈';
console.log(a+b);字串拼接
布林型別
var a=true;
var b=false;
不同型別之間進行算術運算
var a=10;
var b='hello';
var c='5';
var d=true;
var d1=false;
console.log(a+b);拼接操作
console.log(a+c);拼接
數字型字串與數值按照數值進行運算
console.log(a-c);按照數值運算
console.log(a*c);
console.log(a/c);
布林型別在參與數學運算時，true 1 false 0
console.log(a+d);11
console.log(a+d1);10
console.log(b+d);拼接操作
console.log(c+d);拼接
console.log(c-d);
2.比較運算子擴充套件
數值型別
console.log(3>5);
console.log(3==5);
字串型別
console.log('19'>'5');false 比較首位
console.log(3==3);
console.log('hello '=='hello');
var a=5;
var a1='hello';
var b='10';
var c='5';
console.log(a>b);按照數值比較
console.log(a==c);數值
console.log(a===c);數值和型別
3.邏輯運算子
若邏輯運算子兩邊有運算元不為布林型別，則運算結果不一定為布林型別
布林型別擴充套件：0，'',undefined ,null均為假，其他都為真
邏輯或：
1.若第一個運算元為真，則第二個運算元不執行（結果為第一個運算元）
2.若第一個運算元為假，則結果為第二個運算元
邏輯與：
1.若第一個運算元為假，則第二個運算元不執行
2.若第一個運算元為真，則結果為第二個運算元
1. console.log(true||false);
var a=5;
var b=4;
var c=a>=b||(a++)>b;
var c=a<=b||5;
var c=1||2;
var c=0||5;
console.log(c);
console.log(a,b,c);
2. var a=5;
var b=4;
var c=a>=b&&(a--)>b;
var c1=a<=b&&(a--)>b;
console.log(a,b,c);
console.log(a,c1);
console.log(a&&b);
</script>
</body>
</html>