JavaScript筆記整合(1)

1語法

2數據類型

3變量

4字符串操作,數組操作,對象操作

5控制檯打印消息

6判斷語句(和java一樣)

7循環語句(和java一樣,多的for in類似foreach)(for in遍歷key,for of遍歷value)

8Map和Set

9數據遍歷(forEach和for of)

 

語法

由<script>...</script>包含的代碼就是JavaScript代碼，它將直接被瀏覽器執行。

//第一種寫法,直接寫
<script>
    alert('Hello, world');
</script>
//第二種寫法
<script src="/static/js/abc.js"></script>

有些時候你會看到<script>標籤還設置了一個type屬性,但這是沒有必要的，因爲默認的type就是JavaScript，所以不必顯式地把type指定爲JavaScript。

<script type="text/javascript">
  ...
</script>

JavaScript的語法和Java語言類似，每個語句以;結束，語句塊用{...}。但是，JavaScript並不強制要求在每個語句的結尾加;，瀏覽器中負責執行JavaScript代碼的引擎會自動在每個語句的結尾補上;。註釋也和java一樣

請注意，JavaScript嚴格區分大小寫，如果弄錯了大小寫，程序將報錯或者運行不正常。

 

下面的一行代碼就是一個完整的賦值語句：

var x = 1;

 

數據類型:

Number(不分整型和浮點型),字符串,布爾值,null和undefined,數組(包含多個元素),對象(由鍵值組成的無序的集合)

 

===比較，它不會自動轉換數據類型，如果數據類型不一致，返回false，如果一致，再比較。推薦用這個

變量

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 a = 123; // a的值是整數123
a = 'ABC'; // a變爲字符串

//Java
int a = 123; // a是整數類型變量，類型用int申明
a = "ABC"; // 錯誤：不能把字符串賦給整型變量

這種變量本身類型不固定的語言稱之爲動態語言，與之對應的是靜態語言。例如Java是靜態語言。

 

字符串操作

多行字符串用反引號``

模板字符串用${name}在字符串中引用變量

字符串常見的操作如下：

var s = 'Hello, world!';
s.length; // 13

要獲取字符串某個指定位置的字符，使用類似Array的下標操作，索引號從0開始：

var s = 'Hello, world!';

s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出範圍的索引不會報錯，但一律返回undefined

需要特別注意的是，字符串是不可變的，如果對字符串的某個索引賦值，不會有任何錯誤，但是，也沒有任何效果：

var s = 'Test';
s[0] = 'X';
alert(s); // s仍然爲'Test'

JavaScript爲字符串提供了一些常用方法，注意，調用這些方法本身不會改變原有字符串的內容，而是返回一個新字符串：

常用方法:轉大小寫,搜索指定字符串的索引,截取指定索引之間的字符串

 

數組操作

JavaScript的Array可以包含任意數據類型，並通過索引來訪問每個元素。

要取得Array的長度，直接訪問length屬性：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

請注意，直接給Array的length賦一個新的值會導致Array大小的變化：

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr變爲[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr變爲[1, 2]

Array可以通過索引把對應的元素修改爲新的值，因此，對Array的索引進行賦值會直接修改這個Array：

var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr現在變爲['A', 99, 'C']

請注意，如果通過索引賦值時，索引超過了範圍，同樣會引起Array大小的變化：

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr變爲[1, 2, 3, undefined, undefined, 'x']

大多數其他編程語言不允許直接改變數組的大小，越界訪問索引會報錯。然而，JavaScript的Array卻不會有任何錯誤。在編寫代碼時，不建議直接修改Array的大小，訪問索引時要確保索引不會越界。

常用方法:查找指定元素索引,截取部分索引元素,隊尾添加刪除元素,隊首添加刪除元素,排序(無設置按默認),反轉,指定索引位置添加刪除元素,兩個數組連接,數組轉字符串(可以設置中間符號)

多維數組就是數組的元素中也是數組

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

對象操作

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

通過變量xiaoming來獲取小明的屬性了：

xiaoming.name; // '小明'
xiaoming.birth; // 1990

也可以用xiaohong['name']來訪問xiaohong的name屬性，不過xiaohong.name的寫法更簡潔。

如果訪問一個不存在的屬性會返回什麼呢？JavaScript規定，訪問不存在的屬性不報錯，而是返回undefined：

 

由於JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性：

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯

如果我們要檢測xiaoming是否擁有某一屬性，可以用in操作符：

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

不過要小心，如果in判斷一個屬性存在，這個屬性不一定是xiaoming的，它可能是xiaoming繼承得到的：

'toString' in xiaoming; // true

因爲toString定義在object對象中，而所有對象最終都會在原型鏈上指向object，所以xiaoming也擁有toString屬性。

要判斷一個屬性是否是xiaoming自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

 

控制檯打印消息

console.log('輸出內容');

控制檯打印消息

判斷語句

JavaScript的條件判斷和Java一樣,if,else if,else,這裏不做介紹

var s = '123';
if (s.length) { // 條件計算結果爲3
    //
}

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

循環語句

JavaScript的循環也和java一樣,就是for,while,do-while,就多了一個for...in,類似java中的foreach循環

for ... in

for循環的一個變體是for ... in循環，它可以把一個對象的所有屬性依次循環出來：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

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

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由於Array也是對象，而它的每個元素的索引被視爲對象的屬性，因此，for ... in循環可以直接循環出Array的索引：

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

請注意，for ... in對Array的循環得到的是String而不是Number。

 

Map和Set

JavaScript的默認對象表示方式{}可以視爲其他語言中的Map或Dictionary的數據結構，即一組鍵值對。

但是JavaScript的對象有個小問題，就是鍵必須是字符串。但實際上Number或者其他數據類型作爲鍵也是非常合理的。

爲了解決這個問題，最新的ES6規範引入了新的數據類型Map。要測試你的瀏覽器是否支持ES6規範，請執行以下代碼，如果瀏覽器報ReferenceError錯誤，那麼你需要換一個支持ES6的瀏覽器：

 

Map

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

舉個例子，假設要根據同學的名字查找對應的成績，如果用Array實現，需要兩個Array：

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

給定一個名字，要查找對應的成績，就先要在names中找到對應的位置，再從scores取出對應的成績，Array越長，耗時越長。

如果用Map實現，只需要一個“名字”-“成績”的對照表，直接根據名字查找成績，無論這個表有多大，查找速度都不會變慢。用JavaScript寫一個Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一個二維數組，或者直接初始化一個空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

由於一個key只能對應一個value，所以，多次對一個key放入value，後面的值會把前面的值沖掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set

Set和Map類似，也是一組key的集合，但不存儲value。由於key不能重複，所以，在Set中，沒有重複的key。

要創建一個Set，需要提供一個Array作爲輸入，或者直接創建一個空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

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

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意數字3和字符串'3'是不同的元素。

通過add(key)方法可以添加元素到Set中，可以重複添加，但不會有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

通過delete(key)方法可以刪除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

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

 

數據遍歷

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

具有iterable類型的集合可以通過新的for ... of循環來遍歷。

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
    console.log(x);
}
for (var x of s) { // 遍歷Set
    console.log(x);
}
for (var x of m) { // 遍歷Map
    console.log(x[0] + '=' + x[1]);
}

你可能會有疑問，for ... of循環和for ... in循環有何區別？

for ... in循環由於歷史遺留問題，它遍歷的實際上是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每個元素的索引被視爲一個屬性。

當我們手動給Array對象添加了額外的屬性後，for ... in循環將帶來意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

for ... in循環將把name包括在內，但Array的length屬性卻不包括在內。

for ... of循環則完全修復了這些問題，它只循環集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

這就是爲什麼要引入新的for ... of循環。

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

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象本身
    console.log(element + ', index = ' + index);
});
//結果:
A, index = 0
B, index = 1
C, index = 2

Set與Array類似，但Set沒有索引，因此回調函數的前兩個參數都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Map的回調函數參數依次爲value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

如果對某些參數不感興趣，由於JavaScript的函數調用不要求參數必須一致，因此可以忽略它們。例如，只需要獲得Array的element：

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});