第2章_基本數據類型&數組&循環&條件表達式

基本數據類

1.變量

變量都是用來存儲數據的容器,在使用變量時又分以下兩個步驟:

  • 聲明變量

  • 初始化變量

var a;//聲明一個變量
var b = 10;//聲明的同時并給這個變量初始化

當變量第一次賦值時,我們稱之為變量初始化

不同的寫法

var a = 1;//聲明的同時初始化
var b,c,d = 'hello',v1 = 32,v2;

var v1,
    v2,
    v3 = 'hello',
    v4 = 42,
    v5;

變量名可以由字母、數字、下劃線及美元符號組合而成。但不能以數字開頭,像下面這樣是不被允許的

var 2three4five;

區分大小寫

var casematters = 'lower';

var CASE_MATTERS = 'upper';

console.log(casematters);//lower
console.log(CASE_MATTERS);//upper

2.操作符

所謂操作符,通常指的是能對一兩個輸入執行某種操作,并返回結果的符號

1 + 2;//3

//變量的例子
var a = 1;
var b = 2;

a + 1;//2

操作符有:+、—、、/、%、++、——*

復合操作符:+=、-=、=、/=、%=*

3.基本數據類型

JavaScript僅有以下幾大基本數據類型

  1. 數字—包括浮點數與整數,例如這些都屬于數字:1、100、3.14。

  2. 字符串—包括由任意數量字符組成的序列,例如:"a"、"one"、"one 2 three"。

  3. 布爾值—包括true和false。

  4. undefined—當我們試圖訪問一個不存在的變量時,就會得到一個特殊值:undefinedJavaScript會自動將變量在初始化之前的值設定為undefined。

  5. null—這是另一種只包含一個值的特殊數據類型。通常是指沒有值或空值,不代表任何東西。null與undefined最大的不同在于,被賦予null的變量通常被認為是已經定義了的,只不過它不代表任何東西。

任何不屬于上述五種基本類型的值都會被認為是一個對象。

4.查看類型操作符—typeof

該操作符會返回一個代表數據類型的字符串,以下是其可能返回的結果:
"number";
"string";
"boolean";
"undefined";
"object";
"function"。

5.數字

> var n = 1;
> typeof n;
"number"

> n = 1234;
> typeof n;
"number"

浮點數(即含小數部分的數字)顯然也是Number類型的一種:

> var n2 = 1.23;

> typeof n2;
"number"

> typeof 123;
"number"
  1. 指數表示法
> 1e1;
10

> 1e+1;
10

> 2e+3;
2000

> typeof 2e+3;
"number"

一個數字可以表示成1e1(或者1e+1、1E1、1E+1)這樣的指數形式,意思是在數字1后面加1個0,也就是10。同理,2e+3的意思是在數字2后面加3個0,也就是2000。

  1. Infinity

在JavaScript中,還有一種叫做Infinity的特殊值。它所代表的是超出了JavaScript處理范圍的數值。但Infinity依然是一個數字

//JavaScript所能處理的最大值是1.7976931348623157e+308,而最小值為5e-324
> Infinity;
Infinity

> typeof Infinity;
"number"

> 1e309;
Infinity

> 1e308;
1e+308

//另外,任何數除以0結果也為Infinity:
> var a = 6 / 0;
> a;
Infinity

Infinity相加,我們也不會得到0,而是會得到一個叫做NaN(Not A Number的縮寫,即不是數字)
的東西。

> Infinity - Infinity;
NaN

> -Infinity + Infinity;
NaN

另外,Infinity與其他任何操作數執行任何算術運算的結果也都等于Infinity。

> Infinity - 20;
Infinity

> -Infinity*3;
-Infinity

> Infinity / 2;
Infinity

> Infinity – 99999999999999999;
Infinity
  1. NaN

NaN 盡管該值的名字叫做“不是數字”,但事實上它依然屬于數字類型,只不過是一種特殊的數字罷了。

> typeof NaN;
"number"

> var a = NaN;
> a;
NaN

數字10與字符"f"相乘時,結果就會為NaN,因為"f"顯然是不支持乘法運算的

> var a = 10*"f";
> a;

NaN

而且NaN是有傳染性的,只要我們的算術運算中存在一個NaN,整個運算就會失敗

> 1 + 2 + NaN;
NaN

6.字符串

在JavaScript中,一對雙引號或單引號之間的任何值都會被視為一個字符串。也就是說,如果說1是一個數字的話,那么"1"就是一個字符串了,在一個字符串前使用typeof操作符會返回"string"

> var s = "some characters";
> typeof s;

"string"

//字符串中可以包含數字,例如:

> var s = '1';
> typeof s;

"string"

//如果引號之間沒有任何東西,它所表示的依然是一個字符串(即空字符串):
> var s = ""; typeof s;
"string"
  1. 字符串拼接
var s1 = "web";
var s2 = "site";
var s = s1 + s2;

s;
"website"
  1. 字符串轉換

當我們將一個數字字符串用于算術運算中的操作數時,該字符串會在運算中被當做數字類型來使用。(由于加法操作符的歧義性,這條規則不適用于加法運算。)

> var s = '1';
> s = 3*s;
> typeof s;
"number"
> s;
3

> var s = '1';
> s++;
> typeof s;
"number"
> s;
2

如果轉換操作失敗了,我們就會得到一個NaN值。

var movie = '101 dalmatians';
movie*1;
NaN

  1. 特殊字符串
  • \ 轉義字符

  • \n 換行符

  • \r 回車符

  • \t 制表符

  • \u Unicode編碼

7.布爾值

布爾類型中只有兩種值:true和false。它們使用時不需加引號。

> var b = true;
> typeof b;
"boolean"

> var b = false;
> typeof b;
"boolean"

//如果true或false在引號內,它就是一個字符串。

> var b = "true";
> typeof b;

"string"
  1. 邏輯運算符

JavaScript中有三種邏輯運算符

  • !—邏輯非(取反)

  • &&—邏輯與

  • ||—邏輯或

如果我們對一個非布爾值執行邏輯運算,那么該值就會在計算過程中被轉換為布爾值:

var b = "one";
!b;

false

上例中的字符串"one"是先被轉換為布爾值true然后再取反的,結果為false。如果我們對它取反兩次,結果就會為true。

借助雙重取反操作,可以很輕易地將任何值轉換為相應的布爾值.除了下面所列出特定值以外(它們將被轉換為false),其余大部分值在轉換為布爾值時都為true。

  • 空字符串""

  • null

  • undefined

  • 數字0

  • 數字NaN

  • 布爾值false

這6個值有時候也會稱為falsy值,而其他則被稱為truthy值(包括字符串“0”,“ ”,“false”等)

短路&&、||

  • && 兩邊表達式都為true時,結果才為true

  • || 兩邊表達式一方為ture時,結果才為true

  1. 操作符優先級

!的優先級最高,因此在沒有括號限定的情況下它將會被最先執行。接下來的優先順序是&&,最后才是||。

> false && false || true && true;
true

//與下面表達式等效:

> (false && false) || (true && true);
true

注意事項

  • 即如果變量mynumber已經被定義了,就保留其原有值,否則就將它初始化為10。
> var mynumber = mynumber || 10;
> mynumber;
10

這種做法簡單而優雅,但是請注意,這也不是絕對安全的。如果這里的mynumber之前被初始化為0(或者是那6個falsy值中的任何一個),這段代碼就不太可能如我們所愿了。

> var mynumber = 0;
> var mynumber = mynumber || 10;
> mynumber;
10
  1. 比較運算符
  • == 相等運算符

  • === 嚴格相等運算符:兩個操作數的值和類型都回

    true

  • != 不相等運算符

  • !== 嚴格不相等運算符:此操作內不允許類型轉換。且當兩個操作數的值或類型不相等時返回true

  • ">="

  • <

  • <=

NaN不等于任何東西,包括它自己

NaN == NaN;
false

8.undefined與null

當我們嘗試使用一個不存在的變量時,控制臺中就會產生以下錯誤信息:

> foo;

ReferenceError: foo is not defined

但當對不存在的變量使用typeof操作符時則不會出現這樣的錯誤,而是會返回一個字符串"undefined"

> typeof foo;
"undefined"

如果我們在聲明一個變量時沒有對其進行賦值,調用該變量時并不會出錯,但typeof操作符依然會返回"undefined":

> var somevar;
> somevar;
> typeof somevar;
"undefined"

//這是因為當我們聲明而不初始化一個變量時,JavaScript會自動使用undefined值來初始化這個變量。

但null值就完全是另一回事了。它不能由JavaScript自動賦值,只能交由我們的代碼來完成。

> var somevar = null;
null
> somevar;
null
> typeof somevar;
"object"

盡管undefined和null之間的差別微乎其微,但有時候也很重要。例如,當我們對其分別執行某種算術運算時,結果就會截然不同:

> var i = 1 + undefined;
> i;
NaN

> var i = 1 + null;
> i;
1

//這是因為null和undefined在被轉換為其他基本類型時,方法存在一定的區別

下面我們給出一些可能的轉換類型。

  • 轉換成數字
> 1*undefined;
NaN

> 1*null;
0
  • 轉換成布爾值
> !!undefined;
false

> !!null;
false
  • 轉換成字符串
> "value: " + null;
"value: null"

> "value: " + undefined;
"value: undefined"

基本數據類型綜述

JavaScript語言中有五大基本數據類型:

  • 數字

  • 字符串

  • 布爾值

  • undefined

  • null

  1. 任何不屬于基本類型的東西都屬于對象

  2. 數字類型可以存儲的數據包括:正負整數、浮點數、十六進制數與八進制數、指數以及特殊數值NaN、Infinity、-Infinity。

  3. 字符串類型存儲的是一對引號之間的所有字符。

  4. 布爾類型的值只有兩個:true和false。

  5. null類型的值只有一個:null。

  6. undefined類型的值只有一個:undefined。

  7. 絕大部分值在轉換為布爾類型時都為true,但以下6種falsy值除外

  • ""

  • null

  • undefined

  • 0

  • NaN

  • false

數組

數組是一個用于存儲數據的列表。與一次只能存儲一個數據的變量不同,我們可以用數組來存儲任意數量的元素值

1.數組創建方式

> var a = [];//聲明一個空數組變量

> var a = [1,2,3];//定義一個帶三個元素的數組

同一數組中是以0下標去查找對應的值,如果訪問不存在的下標,則會返回undefined值

> var arr= [1,2,3,4,5];
> arr[6];

"undefined"

//只要在控制臺中輸入相應的數組名,就能打印出該數組中的所有內容:
> var arr= [1,2,3,4,5];
> arr;

Array(5) [ 1, 2, 3, 4, 5 ]

增加、更新數組元素

通過索引來更新數組中的元素,如果新元素被添加的位置與原數組末端之間存在一定間隔,則新元素與該數組末端之間的值為undefined

//通過下標賦值
> a[2] = 'three';
"three"

> a;
[1, 2,"three"]

//另外,我們也可以通過索引一個之前不存在的位置,來為其添加更多的數組元素
> a[3] = 'four';
"four"

> a;
[1, 2,"three","four"]

//新元素被添加的位置與原數組末端之間存在一定間隔,則新元素與該數組末端之間的值為undefined
> var a = [1,2,3];
> a[6] = 'new';
"new"

> a;
[1, 2, 3, undefined x 3,"new"]

刪除元素

為了刪除特定的元素,我們需要用到delete操作符,然而,相關元素被刪除后原數組的長度并不會受到影響。從某種意義上來說,該元素被刪除的位置只是被留空了而已

> var a = [1, 2, 3];
> delete a[1];
true

> a;
[1, undefined, 3]

> typeof a[1];
"undefined"

數組的數組

我們可以在數組中存放任何類型的值,當然也包括另一個數組

> var a = [1, "two", false, null, undefined];
> a;
[1, "two", false, null, undefined]

> a[5] = [1,2,3];
[1, 2, 3]

> a;
[1, "two", false, null, undefined, Array[3]]

值得注意的是,我們也可以通過這種數組訪問方式來獲取字符串中特定位置上的字符

> var s = 'one';
> s[0];
"o"

> s[1];
"n"

> s[2];
"e"

小結

  • 數組是一種數據存儲形式

  • 數組元素是可以被索引的

  • 數組中的元素索引是從0開始的,并且按照每個元素的位置依次遞增

  • 我們是通過方括號中的索引值來訪問數組元素的

  • 數組能存儲任何類型的數據,包括另一個數組

條件與循環

if條件表達式

var result = '',a = 3;
if (a > 2) {
    result = 'a is greater than 2';
}

//if-else
if (a > 2) {
result = 'a is greater than 2';
} else {
    result = 'a is NOT greater than 2';
}

檢測變量是否存在

> var result = '';
> if (somevar){
    result = 'yes';
}
ReferenceError: somevar is not defined
> result;
""

它也可以是任何一種被初始化為falsy值(如false或0)的已聲明變量。所以在檢查變量是否存在時,更好的選擇是使用typeof。

> var result = "";
> if (typeof somevar !== "undefined"){
    result = 'yes';
}
> result;
""

替代if表達式

//if-else
var a = 1;
var result = '';
if (a === 1) {
    result ="a is one";
} else {
    result ="a is not one";
}

//使用三目運算簡化
> var a = 1;
> var result = (a === 1) ?"a is one" : "a is not one";

//這種語法通常只用于一些非常簡單的條件邏輯,千萬不要濫用。因為這樣做很容易使我們的代碼變得難以理解

switch語句

當我們發現自己在if表達式中使用了太多的else if子句時,就應該要考慮用switch語句來替代if了

var a = '1';
var result = '';
switch (a) {
    case 1:result = 'Number 1';break;
    case '1':result = 'String 1';break;

    default:result = 'I don\'t know';break;

}

盡量使用default語句。因為這可以使我們在switch找不到任何匹配的情況下,也依然能返回一些有意義的結果。

while & do-while

while循環是最為簡單的一種循環,它們通常是這樣的:

var i = 0;
while (i < 10) {
    i++;
}

do-while循環實際上是while循環的一種輕微的變種。示例如下:

var i = 0;
do {
    i++;
} while (i < 10);

for & for-in

for是使用得最為廣泛的循環類型

//方式一
var punishment = '';
for (var i = 0; i < 100; i++) {
    punishment += 'I will never do this again, ';
}

//方式二
for (var i = 0, punishment = ''; i < 100; i++) {
    punishment += 'I will never do this again, ';
}

for循環還可以彼此嵌套

var res = '\n';
for(var i = 0; i < 10; i++) {
    for(var j = 0; j < 10; j++) {
        res += '*';
    }
    res+= '\n';
}

//最終,該字符串輸出如下:
"
**********
**********
**********
**********
**********
**********
**********
**********
**********
**********
"

for-in循環

for-in循環往往被用來遍歷某個數組

var a = [ 'a', 'b', 'c', 'x', 'y', 'z'];
var result = '\n';
for (var i in a) {
    result += 'index: ' + i + ', value: ' + a[i] + '\n';
}

//結果如下:
"
index: 0, value: a
index: 1, value: b
index: 2, value: c
index: 3, value: x
index: 4, value: y
index: 5, value: z
"

JavaScript注解

  • 單行注釋—以//開頭并直至該行結束。

  • 多行注釋—以/開頭,并以/結尾,其中可以包括一行或多行內容

//具體示例如下:

// beginning of line
var a = 1; // anywhere on the line
/*multi-line comment on a single line*/
/*
    comment that spans several lines
*/

本章小結

幾種基本數據類型

  • 數字

  • 字符串

  • 布爾值

  • undefined

  • null

基本的操作符

  • 算術運算符:+、-、*、/、%

  • 自增(減)運算符:++、--

  • 賦值運算符:=、+=、-=、*=、/=、%=

  • 特殊操作符:typeof、delete

  • 邏輯運算符:&&、||、!

  • 比較運算符:==、===、!=、!==、<、>、>=、<=

  • 三元運算符:?:

通過數組來存儲和訪問數據

條件執行語句

  • if-else

  • switch

循環語句

  • while

  • do-while

  • for

  • for-in

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容