JavaScript 記錄

原文

雖然 script 標籤有個type屬性,可是其默認是javascript。因此這個屬性是必要的。 

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

若是你寫js語句不加分號,瀏覽器javascript引擎會自動在js語句後加"；"號,但某些狀況下由瀏覽器加分號會改變語義。

javascript 嚴格區分大小寫。

javascript 容許對任意數據類型進行比較。要特別注意"=="和"==="。

"==" 會自動轉換數據類型進行比較的；

"===" 則不會自動轉換,若是數據類型不一樣會自動轉換,而是返回false。

false == 0; // true
false === 0; // false

和 java 相似,NaN這個特殊的數據類型與其餘數據類型都不相等,包括它本身。惟一能判斷的是使用isNaN()

isNaN(NaN); // true

浮點數在運算過程當中會產生偏差，由於計算機沒法精確表示無限循環小數。要比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值：

1 / 3 === (1 - 2 / 3); // false

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

 

javascript 對象是一組由鍵-值組成的無序集合。

var js = { title: 'Professional JavaScript',
  authers: [ 'Nicholas C. Zakas' ],
  edition: 3,
  year: 2011 }

{"title":"Professional JavaScript","authers":["Nicholas C. Zakas"],"edition":3,"year":2011} 

在網頁中顯示：js 對象是一個對象, json串是字符串。

js對象：

{"data":{"id":47,"username":"xfe","password":null,"phone":"41234224231","email":null,"created":1482237518000,"updated":1482237518000}}

json串：

{"data":"{\"id\":47,\"username\":\"xfe\",\"password\":null,\"phone\":\"41234224231\",\"email\":null,\"created\":1482237518000,\"updated\":1482237518000}"}

strict 模式

js 在設計之初,不要求用var申明變量,這個變量會成爲全局變量。這形成了錯誤。爲此,使用strict模式,申明變量必須使用var。啓用strict模式的方法是在JavaScript代碼的第一行寫上：'use strict';

\x## 表示ASCII 碼， \u####表示一個Unicode字符。

ES6標準新增一個多行字符串表示法：`多行字符串`。

ES6新增一個模板字符串表示法：`模板字符串${name}${age}`。代替了'模板字符串'+name +age。這種表示法。

var name= "xiao ming";
var age =19;
alert(`你的名字是:${name},年齡是：${age}`);

操做字符串：

var s = 'Abcde';
s[0];//A
s[2];//c
s.length;//5

字符串不可變,沒法對字符串中的一個索引賦值。

字符串對象的方法：(調用這些方法不會改變原有字符串的內容,而是返回新的字符串。

var s = "Abcd";
s.toUpperCase;
s.toLowerCase;
s.indexOf(bc);//1
s.substring(0,2);//Abc
s.substring(2);//cd

javascript 的Array 對象,與java等不一樣。沒有越界訪問錯誤。由於一旦越界,就自動改變Array的大小。

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

數組的操做方法：

indexOf 與string的方法相似。

slice方法,截取一個Array,返回一個新的Array。(功能相似於string中的substring。)

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結束: ['D', 'E', 'F', 'G']

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

push和pop。末尾添加末尾刪除。

unshift和shift。頭部添加,頭部刪除。

sort和 reverse  (直接修改當前Array元素。

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

splice()方法是修改Array的「萬能方法」，它能夠從指定的索引開始刪除指定數量的元素,並在該位置添加新的若干元素。

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,而後再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],由於沒有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

contact

把Array與Array或字符串鏈接起來,返回一個新的Array。並無修改當前Array對象。

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

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

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

javascript 對象是一個無序集合數據類型。獲取對象屬性的方法有：變量.屬性名。可是屬性名有時不是一個有效的變量名,可使用['xxx']。跟jstl相似。

訪問不存在的屬性不報錯，而是返回undefined,能夠對不存在的屬性進行賦值,來添加屬性。刪除不存在的屬性也不報錯。

var xiaohong = {
    name: '小紅',
    'middle-school': 'No.1 Middle School'
};

xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'

判斷一個屬性是否存在,可使用in操做符,或者hasOwnProperty()方法。

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

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

js中的條件語句：JavaScript把null、undefined、0、NaN和空字符串''視爲false，其餘值一律視爲true。

for循環的一個變體是for ... in循環，用於把一個javascript對象的屬性循環顯示出來。

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

或者用於顯示Array,Array也是對象,它的屬性名是索引(string 類型的數字,如："1"、"2"...)。值是元素。

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

Javascript 的對象表示法{ }與其它語言中的Map或Dictionary的數據結構,即一組鍵值對。可是javascript要求鍵 必須是字符串。ES6引入了新的數據類型Map。

Map應用了哈希散列,查詢速度比數組快。初始化一個map可使用二維數組。Set和Map相似,也是一組key的集合,但不存儲Value,key不能重複(能夠添加劇復的key,但會被自動過濾)。可使用一個數組初始化。

map方法：get、set、delete

set方法：add、delete

iterable。遍歷array可使用下標循環,遍歷set和map則不能夠。爲了統一集合,ES6引入了新的iterable類型,Array、Map和Set都屬於此類型。屬於iterable屬性的集合可使用for...of循環來遍歷。

遍歷map時,相似於java中的map.entrySet,將map包裝成一個元素來遍歷。

for...of與for...in的區別：for...in是歷史遺留問題,它只遍歷對象的屬性名稱,Array也是一個對象,其屬性名稱爲索引。for...in循環確實能夠遍歷對象,但只能獲取對象的name屬性,沒法獲取其餘屬性,for...of循環解決了此問題。

iterable除了可使用for..of循環,還可使用ES5.1標準引入的forEach()方法,使用方式爲：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象自己
    alert(element);
});

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

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

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