標識符命名規則
對于變量名,鍵值對中的鍵名應滿足如下要求:
- 開頭必須是字母、下劃線(
_
)或美元符號($
) - 除了開頭以外的字符也可以是數字
- 不可以是關鍵字和保留字
- 最好不要和全局變量/函數同名,會把原有變量/函數覆蓋的風險
這里,關鍵字就是在 js 中有特殊意義的單詞,而保留字是為了以后使用預留的詞語。但不要求背它們,隨著學習的深入,自然就都記住了。
常見的關鍵字有:
break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、debugger、finally、new、true、const、with、let、default、for、null、try、async 等等
常見的保留字有:
class、enum、export、extends、import 、super等等
本文可能會直接用到的有:
- var: 定義一個變量
- console.log(): 在瀏覽器控制臺或后臺終端輸出一個值
- alert(): 在瀏覽器彈窗輸出一個值
基本數據類型
Javascript 基本類型包括:數值,字符串,null,undefined 和布爾型。還有 ES6 中的 Symbol 類型,這篇博客暫時先不提 Symbol 類型。
比如:
var num = 1; //數值型
var str = 'hello world; //字符串,雙引號也可以
var flag = true; //布爾型,取值 true 或 false
var obj = null; //空類型
var it = undefined; //undefined
這里簡單解釋一下需要注意問題:
- 數值類型是不區分整型與浮點型的;
- 數值類型默認都是以 double 浮點數形式儲存的;
- 數值類型范圍在 5e-324 至1.7976931348623157e+308,即 `Number.MIN_VALUE 至 Number.MAX_VALUE;
- js 沒有字符類型,只有字符串類型;
- null 表示正常的、意料之中的空值,而 undefined 表示以外的空值。對于只聲明未賦值的變量,默認值為 undefined;
- 數值類型有幾個特殊值:
- Infinity: 正無窮
- -Infinity:負無窮
- NaN:非法數值(Not a Number),但他還是個數值(好矛盾)
復雜數據類型
基本數據類型對應的對象
js 中其實除了基本類型以外其他類型的本質都是對象,就算是基本類型變量,除了 undefined 和 null 以外,都有其對應的對象類型。如下:
var num = new Number(2);
var str = new String('hello');
var flag = new Boolean(true);
這里一定要清楚,其對象類型和基本類型不是一個東西,具體的看完類型轉換就一切都清楚了。
js中其他常見的對象
當然,下面繼續說對象,js 常用的對象有:Array,Object,Date,RegExp等等。定義方法如下:
var arr = new Array(); //得到一個空數組
var arr2 = new Array(5); //得到一個長度為5的數組,初值為undefined
var arr3 = new Array('b','a','c'); //得到一個長為3,對應值為'b','a','c' 的數組
var obj = new Object(); //得到一個空對象
var now = new Date(); //得到當前時間
var reg = RegExp('^[A-Za-z][\w\d]*$'); //得到一個正則表達式
對于數組、正則表達式和對象還有一種字面量的定義方法,這個方法和上面是完全等價的:
var arr = []; //得到一個空數組
var arr3 = ['b','a','c']; //得到一個長為3,對應值為'b','a','c' 的數組
var obj = {}; //得到一個空對象
var reg = /^[A-Za-z][\w\d]*$/; //得到一個正則表達式
數組和對象的訪問
這個部分直接舉例子:
- 數組:一些數據的集合,這里不要求數據必須是同樣類型的
var arr = [1, 2, 3, 'a']; //定義一個數組
arr[0]; //1 訪問數組的第1個元素,注意索引從0開始
arr[1]; //2 訪問數組的第2個元素
arr[3]; //'a' 訪問數組的第4個元素
arr[-1], arr[4], arr[1.3]; //undefined 訪問數組越界或索引不正確都返回 undefined
- 對象: 鍵值對的集合,鍵值對之間由逗號分開,鍵和值由冒號分開
var obj = {
name: 'Bob',
age: 18,
gender: 'M'
};
obj.name; //'Bob' 獲取 obj 對象的姓名
obj.age; //18 獲取 obj 對象的年齡
obj.gender; //'M' 獲取 obj 對象的性別
注意當鍵名中有符號也需要加引號。
其余的對象會在以后用到的時候再仔細講
基本運算和運算符
運算符就像我們數學中的加減乘除,也像數學中的計算規定的先后順序,這里我直接給出所以運算符的運算順序和實例,必要的解釋在表格后面,沒有解釋到的屬于比較深奧的運算符,記住它的順序即可,功能后續再理解。
優先級 | 運算符 | 結合性 | 舉例 | 說明 | |||
---|---|---|---|---|---|---|---|
20 | 圓括號 | n/a | (…) | - | |||
19 | 成員訪問 | 從左到右 | obj.name | - | |||
19 | 需計算的成員訪問 | 從左到右 | obj["name"] | - | |||
19 | new(帶參數列表) | n/a | new Person() | - | |||
18 | 函數調用 | 從左到右 | fun(args) | - | |||
18 | new(無參數列表) | 從右到左 | new fun | - | |||
17 | 后置遞增 | n/a | a++ | 相當于 a = a + 1; | |||
17 | 后置遞減 | n/a | a-- | 相當于 a = a - 1; | |||
16 | 邏輯非 | 從右到左 | !a | - | |||
16 | 按位非 | 從右到左 | ~a | - | |||
16 | 一元加法 | 從右到左 | +a | - | |||
16 | 一元減法 | 從右到左 | -a | - | |||
16 | 前置遞增 | 從右到左 | ++a | - | |||
16 | 前置遞減 | 從右到左 | --a | - | |||
16 | typeof | 從右到左 | typeof 4 | 得到值的類型 'number' | |||
16 | void | 從右到左 | void(0) | 執行表達式并返回 undefined | |||
16 | delete | 從右到左 | deleteobj.age | 刪除對象屬性 | |||
15 | 冪 | 從右到左 | 2**4 | 得 16 | |||
14 | 乘法 | 從左到右 | 2*3 | 得 6 | |||
14 | 除法 | 從左到右 | 4/2 | 得 2 | |||
14 | 取模(求余) | 從左到右 | 4%3 | 得 1 | |||
13 | 加法 | 從左到右 | 1+3 | 得 4 | |||
13 | 減法 | 從左到右 | 2-3 | 得 -1 | |||
12 | 按位左移 | 從左到右 | 32<<5 | 得 1024 | |||
12 | 按位右移 | 從左到右 | 32>>2 | 得 -8 | |||
12 | 無符號右移 | 從左到右 | -32>>>2 | 得 1073741816 | |||
11 | 小于 | 從左到右 | -1 < 2 | 得 true | |||
11 | 小于等于 | 從左到右 | -1 <= 2 | 得 true | |||
11 | 大于等于 | 從左到右 | -1 >= 2 | 得 false | |||
11 | 大于 | 從左到右 | -1 > 2 | 得 false | |||
11 | in | 從左到右 | "name" in obj | - | |||
11 | instanceof | 從左到右 | li instanceof HTMLElement | - | |||
10 | 等號 | 從左到右 | 5 == '5' | 得 true | |||
10 | 非等號 | 從左到右 | 5 != '5' | 得 false | |||
10 | 全等號 | 從左到右 | 5 === '5' | 得 false | |||
10 | 非全等號 | 從左到右 | 5 !== '5' | 得 true | |||
9 | 按位與 | 從左到右 | 10 & 40 | 得 8 | |||
8 | 按位異或 | 從左到右 | 10 ^ 40 | 得 34 | |||
7 | 按位或 | 從左到右 | 10 | 40 | 得 42 | ||
6 | 邏輯與 | 從左到右 | 0 && 3 | 得 0,不得 false | |||
5 | 邏輯或 | 從左到右 | 0 | 3 | 得 3,不得 true | ||
4 | ?: | 從右到左 | 8 !=0 ? 1 : 3 | 得 1 | |||
3 | 賦值 | 從右到左 | a = 2 | - | |||
3 | += | 從右到左 | a += 2 | 相當于 a = a + 2 | |||
3 | -= | 從右到左 | a -= 2 | 相當于 a = a - 2 | |||
3 | *= | 從右到左 | a *= 2 | 相當于 a = a * 2 | |||
3 | /= | 從右到左 | a /= 2 | 相當于 a = a / 2 | |||
3 | &= | 從右到左 | a &= 2 | 相當于 a = a & 2 | |||
3 | = | 從右到左 | a | = 2 | 相當于 a = a | 2 | |
3 | ^= | 從右到左 | a ^= 2 | 相當于 a = a ^ 2 | |||
3 | %= | 從右到左 | a %= 2 | 相當于 a = a % 2 | |||
3 | <<= | 從右到左 | a <<= 2 | 相當于 a = a << 2 | |||
3 | >>= | 從右到左 | a >>= 2 | 相當于 a = a >> 2 | |||
3 | >>>= | 從右到左 | a >>>= 2 | 相當于 a = a >>> 2 | |||
2 | yield | 從右到左 | yield returnValue; | - | |||
2 | yield* | 從右到左 | yield* returnValue; | - | |||
1 | 展開運算符 | n/a | arr1.push(...arr2) | - | |||
0 | 逗號 | 從左到右 | a=1,b=2 | 返回最后一個表達式的值 2 |
需要說明的是:
- 優先級越高的優先計算,同優先級的從左到右依次計算;
- a++ 與 ++a 的區別: 前者先返回值后自加,后者先自加再返回值(a-- 與 --a 同理);
- 涉及到位運算的部分不是十分重要,但以后的文章會細談;
- == 和 === 的區別,前者比較是發生自動類型轉換,后者不發生自動類型轉換(!= 與 !== 同理);
- 對于
exp ? val1 : val2;
如果 exp 的結果為 true,整個表達式得 val1, 否則得 val2;