[ JavaScript ] 基礎知識

1. 數據類型

（1）Number

JavaScript 不分區整數和浮點數，統一用Number表示，如下都是合法的Number類型：

123; // 整數123
0.456; // 浮點數0.456
1.2345e3; // 科學計數法表示1.2345x1000，等同於1234.5
-99; // 負數
NaN; // NaN表示Not a Number，當沒法計算結果時用NaN表示
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示爲Infinity

 

Number能夠直接作四則運算，規則和數學一致：

1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5

 

（2）字符串

字符串是以 單引號 或 雙引號括起來的任意文本。好比： 'abc', 'xyz' 等等。

 

（3）布爾值

一個布爾值只有 true、false 兩種值。

&& 表示 與 的關係，只有全部都爲 true，&&運算結果纔是true
|| 表示 或 的關係，只要其中一個爲 true，則 || 結果爲 true
！ 運算是非運算，是把 true 變爲 false， false 變爲 true

 布爾值常常用於條件判斷中：

var age = 15;
if (age >= 18) {
    alert('adult');
} else {
    alert('teenager');
}

 

（4） 比較運算符

當咱們對 Number 作比較時，能夠經過運算符獲得一個布爾值：

2 > 5; // false 5 >= 2; // true 7 == 7; // true

 

 

== 和 === 的區別

第一種 == 比較，它會自動轉換數據類型再比較，不少時候，會獲得很是奇怪的結果；

第二種 === 比較，它不會自動轉換數據類型，若是數據類型不一致，返回 false，若是一致，再比較。

有這兩種不一樣的結果，所以在比較中，應當堅持使用 ===

 

null 和 undefined 的區別

null 是一個 ‘空’ 的值，它和0以及空字符串 ‘’ 不一樣，0是一個數值，‘’表示長度爲0的字符串，而null表示‘空’。

在 javascript 中，null表示一個空值，而 undefined 表示值未定義。在大多數狀況下，咱們都應該用 null，undefined 僅僅在判斷函數參數是否傳遞的狀況下有用。

 

（5）數組

數組是一組按順序排列的集合，集合的每一個值稱爲元素。JavaScript的數組能夠包括任意數據類型。

兩種建立數組的方式：

var arr = [1, 2, 3.14, 'Hello', null, true];
var arr1 = new Array(1,2,3);

處於代碼的可讀性考慮，強烈建議採用直接賦值的方式（第一種方式）

 數組的元素能夠經過索引來訪問。索引的起始值爲 0 ：

 

（6）對象

JavaScript的對象是一組由鍵-值組成的無序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

 JavaScript對象的鍵都是字符串類型，值能夠是任意數據類型。

 要獲取對象的屬性，用 對象變量.屬性名 的方式：

 

（7）變量

變量不只能夠是數字，還能夠是任意數據類型。

var a; // 申明瞭變量a，此時a的值爲undefined
var $b = 1; // 申明瞭變量$b，同時給$b賦值，此時$b的值爲1
var s_007 = '007'; // s_007是一個字符串
var Answer = true; // Answer是一個布爾值true
var t = null; // t的值是null

在JavaScript中，使用等號 = 對變量進行賦值。能夠把任意數據類型賦值給變量，同一個變量能夠反覆賦值，並且能夠是不一樣類型的變量，可是要注意只能用var申明一次。

要顯示變量的內容，可使用 console.log(x)打印

var a = 'beijing';

console.log(a);
VM714:1 beijing

 

1.1 字符串

 JavaScript的字符串就是用''或""括起來的字符表示。

 多行字符串用反引號表示：

 

 模板字符串

要把多個字符串鏈接起來，能夠用+號鏈接：

 

若是有不少變量須要鏈接，用+號就比較麻煩。ES6新增了一種模板字符串，表示方法和上面的多行字符串同樣，可是它會自動替換字符串中的變量：

 

操做字符串

 （1） 計算字符串的長度

var a = 'hello world.';

a.length
12

 （2）獲取字符串指定位置的字符，使用索引號來操做

var a = 'hello world.';
a[4]
"o"
a[10]
"d"

 

須要注意的是，字符串是不可變的，若是對字符串的某個索引賦值，不會有任何錯誤。所以字符串的經常使用方法並不會改變原字符串內容，而是返回一個新的字符串。

var s = 'test';

s[0] = 'T';
"T"
s
"test"

 

（3）toUpperCase

toUpperCase()把一個字符串所有變爲大寫：

var s = 'Hello';

s.toLocaleUpperCase();
"HELLO"

 

（4）toLowerCase

toLowerCase()把一個字符串所有變爲小寫：

var s = 'Hello';

s.toLocaleLowerCase();
"hello"

 

（5）indexOf

indexOf()會搜索指定字符串出現的位置：

 

（6）substring

substring()返回指定索引區間的子串：

 

（7）slice

slice() 方法可從已有的數組中返回選定的元素。

slice() 、substring() 、substr() 三者比較使用總結以下：

string.slice(x, y) 提取一個字符串；

string.substring(x, y) 提取一個字符串，可是 y 不能爲 負數；

string.substr(x, y) 提取一個長度爲 y 的字符串。

 

實例：

 

 

1.2 數組

javascript 中的 數組 能夠包含任意數據類型，並經過索引來訪問每一個元素。

要取得 數組的長度，直接使用 length 屬性：

 

注意：不要隨便給 Arry.length 賦值，不然會形成 數組元素的變化；

 

 Array能夠經過索引把對應的元素修改成新的值，所以，對Array的索引進行賦值會直接修改這個Array：

 

 

數組經常使用方法

 

（1）indexOf

與String相似，Array也能夠經過indexOf()來搜索一個指定的元素的位置：

 

（2）slice

slice()就是對應String的substring()版本，它截取Array的部分元素，而後返回一個新的Array：

注意：在 Array（數組）中沒法使用 substring()

若是不給slice()傳遞任何參數，它就會從頭至尾截取全部元素。利用這一點，咱們能夠很容易地複製一個Array

 

（3）push 和 pop

push() 向 Array 的末尾追加若干個元素，pop() 則把 Array 的最後一個元素刪除：

 

（4）unshift 和 shift

若是要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：

 

 

（5）sort

sort()能夠對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照默認順序排序：

 

（6）reverse

reverse()把整個Array的元素給掉個個，也就是反轉：

 

 

 （7） splice

splice()方法是修改Array的「萬能方法」，它能夠從指定的索引開始刪除若干元素，而後再從該位置添加若干元素：

 

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素，而後再添加2個元素
arr.splice(2, 3, 'Google', 'Facebook');
(3) ["Yahoo", "AOL", "Excite"]
arr;
(5) ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]

// 只刪除，從索引爲2開始，刪除2個元素
arr.splice(2, 2);
(2) ["Google", "Facebook"]
arr
(3) ["Microsoft", "Apple", "Oracle"]

// 不刪除，只添加，從索引爲2的位置刪除0個元素，並添加2個元素
arr.splice(2, 0, 'Google', 'Facebook');
[]
arr;
(5) ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]

 

 （8）concat

concat()方法把當前的Array和另外一個Array鏈接起來，並返回一個新的Array：

 

注意：concat() 方法並無修改當前 Array，而是返回了一個新的Array。

實際上，concat()方法能夠接收任意個元素和Array，而且自動把Array拆開，而後所有添加到新的Array裏：

 

 

（9）join

join()方法是一個很是實用的方法，它把當前Array的每一個元素都用指定的字符串鏈接起來，而後返回鏈接後的字符串：

 

若是Array的元素不是字符串，將自動轉換爲字符串後再鏈接。

 

（10）多維數組

若是數組的某個元素又是一個Array，則能夠造成多維數組，例如：

var arr = [[1, 2, 3], [400, 500, 600], '-'];

 若是須要取 500 的值：

 

 小結

Array（數組）提供了按照順序存儲一組元素的功能，並能夠經過索引取值來讀寫。

 

練習題-1：

在新生歡迎會上，你已經拿到了新同窗的名單，請排序後顯示：歡迎XXX，XXX，XXX和XXX同窗！：

var arr = ['小明', '小紅', '大軍', '阿黃'];
console.log('歡迎' + arr.slice(0, 3) + '和' + arr.slice(3) + '同窗！');

 

1.3 對象

JavaScript的對象是一種無序的集合數據類型，它由若干鍵值對組成。
JavaScript的對象用於描述現實世界中的某個對象。例如，爲了描述「小明」這個淘氣的小朋友，咱們能夠用若干鍵值對來描述他：

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};

JavaScript用一個{...}表示一個對象，鍵值對以xxx: xxx形式申明，用,隔開。

注意：最後一個鍵值對不須要在末尾加,，若是加了，有的瀏覽器（如低版本的IE）將報錯。

經過對象獲取值：

訪問一個對象不存在的屬性時，返回 undefined

 

 

訪問屬性是經過 . 操做完成的，但這要求屬性名必須是一個有效的變量名。若是屬性名包含特殊字符，就必須用 'xxx' 括起來：

在平常使用中，通常建議使用 對象.name 的方式來獲取值。

JavaScript對象的全部屬性都是字符串，不過屬性對應的值能夠是任意數據類型。

因爲JavaScript的對象是動態類型，你能夠自由地給一個對象添加或刪除屬性：

 

若是咱們要檢測xiaoming是否擁有某一屬性，能夠用in操做符：

不過要當心，若是in判斷一個屬性存在，這個屬性不必定是xiaoming的，它多是xiaoming繼承獲得的：

由於toString定義在object對象中，而全部對象最終都會在原型鏈上指向object，因此xiaoming也擁有toString屬性。

 要判斷一個屬性是不是xiaoming自身擁有的，而不是繼承獲得的，能夠用hasOwnProperty()方法：

 

1.4 條件判斷

JavaScript使用if () { ... } else { ... }來進行條件判斷。例如，根據年齡顯示不一樣內容，能夠用if語句實現以下：

多條件判斷

 若是判斷過多，可使用多個 if ... else ... 的組合：

 

JavaScript把null、undefined、0、NaN和空字符串''視爲false，其餘值一律視爲true，所以上述代碼條件判斷的結果是true。 

 

練習-1：

小明身高1.75，體重80.5kg。請根據BMI公式（體重除以身高的平方）幫小明計算他的BMI指數，並根據BMI指數：

• 低於18.5：太輕
• 18.5-25：正常
• 25-28：太重
• 28-32：肥胖
• 高於32：嚴重肥胖

var height = parseFloat(prompt('請輸入身高（m）:'));
var weight = parseFloat(prompt('請輸入體重（kg）:'));

var bmi = weight / height**2;
console.log(bmi);

// 經過邏輯判斷，在if條件判斷中，只要知足其中一個if (條件) 則終止判斷
if (bmi < 18.5) {
    alert('太輕');
} else if (bmi < 25 ) {
    alert('正常')
} else if (bmi < 28) {
    alert('太重')
} else if (bmi < 32) {
    alert('肥胖')
} else {
    alert('嚴重肥胖')
}

 

1.5 循環

JavaScript的循環有兩種：

　　（1）經過 for 循環，經過初始條件、結束條件和遞增條件來循環執行語句塊：

　　（2）經過while 循環，在已知循環的初始和結束條件時很是有用

 

（1） for 循環

 

利用 for 循環計算 1 * 2 * 3 * ... * 10 的結果：

var x = 1;
var i;
for (i=1; i <=10; i++) {
  x *= i;
}

 

for 循環最經常使用的地方是利用索引來遍歷數組：

for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
};

 

若是使用 for 循環沒有明確的退出條件，則必須使用 break 來退出：

var x = 0;
for (;;) { // 將無限循環下去
    if (x > 100) {
        break; // 經過if判斷來退出循環
    }
    x ++;
}

 

for ... in

　　for ... in 是把一個對象的屬性依次循環出來：

 

要過濾掉繼的屬性，用 hasOwnProperty() 來實現：

 

注意：在使用 for 循環遍歷 Array（數組）時，有兩種方式：

（1）經過 for ... in 遍歷數組的索引位置（在循環遍歷索引的時候，獲得的string類型，而不是Number）

（2）經過 for ... of 遍歷數組的值（沒法遍歷對象類型）

 

（1）

 

（2）

 

 

 （2）while 循環

 while 循環只有一個判斷條件，條件知足，就不斷循環，條件不知足時則退出循環。

求：1-100之和

 

 

do ... while

這種循環不是在循環開始就進行條件判斷，而是在循環完成的時候進行條件判斷（這種循環模式不經常使用）

 

 小結

循環是爲了作重複的事情，在編寫代碼時，必需要當心初始條件和判斷條件，尤爲是邊界值 。 i < 100 或 i <= 100 是不一樣的判斷邏輯。

 

1.6 Map 和 Set

JavaScript的默認對象表示方式{}能夠視爲其餘語言中的Map或Dictionary的數據結構，即一組鍵值對。可是JavaScript的對象有個小問題，就是鍵必須是字符串。但實際上Number或者其餘數據類型做爲鍵也是很是合理的。爲了解決這個問題，最新的ES6規範引入了新的數據類型Map。

 

（1）Map

Map 是一組鍵值對的結構，具備極快的查詢速度。

建立一個 Map：

 

初始化Map須要一個二維數組，或者直接初始化一個空Map。Map具備如下方法：

 

能夠看到，若是將值刪除，再經過 m.get() 獲取的話，返回的是 undefined

 

（2）Set

Set和Map相似，也是一組key的集合，但不存儲value。因爲key不能重複，因此，在Set中，沒有重複的key。

 要建立一個Set，須要提供一個Array做爲輸入，或者直接建立一個空Set：

 

重複元素在 Set 中 自動被過濾掉：

 

 能夠經過 s1.add(xxx) 來添加元素，若是添加的重複，則不會有任何變化。

 

最後，也能夠經過 delete 刪除 Set中的元素：

 

小結

 Map 和 Set 是ES6標準新增的數據類型，請根據瀏覽器的支持狀況決定是否要使用。

 

1.7 iterable

遍歷Array能夠採用下標循環，遍歷Map和Set就沒法使用下標。爲了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬於iterable類型。

具備iterable類型的集合能夠經過新的for ... of循環來遍歷。

使用 for ... of 遍歷以下：

 

然而，更好的方式是直接使用 iterable 內置的 forEach 方法，它接收一個函數，每次迭代就自動回調該函數。以 Array爲例：

a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象自己
    console.log(element + ', index = ' + index);
});

 

1.8 JavaScript 三元運算

(condition) ? (expr2) : (expr3)
(判斷條件) ? (當條件判斷爲 true 返回該結果) : (當條件判斷爲 false 返回該結果)

 在 expr1 求值爲 TRUE 時的值爲 expr2，在 expr1 求值爲 FALSE 時的值爲 expr3。