Android實現懸浮圖片
一、基礎語法
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表示。例如0/0。
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示為Infinity。例如2/0。
（2）字串
字串是以單引號'或雙引號"括起來的任意文字，比如'abc'
"xyz"等等。
（3）布林值
true 和 false。
【注1】JavaScript在設計時，有兩種比較運算子：
第一種是==比較，它會自動轉換資料型別再比較，很多時候，會得到非常詭異的結果；
第二種是===比較，它不會自動轉換資料型別，如果資料型別不一致，返回false，如果一致，再比較。
由於JavaScript這個設計缺陷，不要使用==比較，始終堅持使用===比較。
【注2】另一個例外是NaN這個特殊的Number與所有其他值都不相等，包括它自己：
NaN === NaN; // false
唯一能判斷NaN的方法是通過isNaN()函式：
isNaN(NaN); // true
【注3】最後要注意浮點數的相等比較：
1 / 3 === (1 - 2 / 3); // false
這不是JavaScript的設計缺陷。浮點數在運算過程中會產生誤差，因為計算機無法精確表示無限迴圈小數。要比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
（4）null 和 undefined
null表示一個“空”的值，它和0以及空字串''不同，0是一個數值，''表示長度為0的字串，而null表示“空”。
在其他語言中，也有類似JavaScript的null
null，Swift用nil，Python用None表示。但是，在JavaScript中，還有一個和null類似的undefined，它表示“未定義”。
JavaScript的設計者希望用null表示一個空的值，而undefined表示值未定義。事實證明，這並沒有什麼卵用，區分兩者的意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函式引數是否傳遞的情況下有用。
（5）陣列
JavaScript的陣列可以包括任意資料型別。例如：
[1, 2, 3.14, 'Hello', null, true];
上述陣列包含6個元素。陣列用[]表示，元素之間用,分隔。
另一種建立陣列的方法是通過Array()函式實現：
new Array(1, 2, 3); // 建立了陣列[1, 2, 3]
然而，出於程式碼的可讀性考慮，強烈建議直接使用[]。
陣列的元素可以通過索引來訪問。請注意，索引的起始值為0：
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引為0的元素，即1
arr[5]; // 返回索引為5的元素，即true
arr[6]; // 索引超出了範圍，返回undefined
（6）物件
JavaScript的物件是一組由鍵-值組成的無序集合，例如：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
JavaScript物件的鍵都是字串型別，值可以是任意資料型別。
要獲取一個物件的屬性，我們用物件變數.屬性名的方式：
person.name; // 'Bob'
person.zipcode; // null
2. 變數
變數在JavaScript中就是用一個變數名錶示，變數名是大小寫英文、數字、$和_的組合，且不能用數字開頭。宣告一個變數用var語句，比如：
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申明一次，例如：
var a = 123; // a的值是整數123
a = 'ABC'; // a變為字串
這種變數本身型別不固定的語言稱之為動態語言，與之對應的是靜態語言。靜態語言在定義變數時必須指定變數的資料型別，如果賦值的時候型別不匹配，就會報錯。例如Java是靜態語言，賦值語句如下：
int a = 123; // a是整數型別變數，型別用int宣告
a = "ABC"; // 錯誤：不能把字串賦給整型變數
3. 字串
（1）轉義字元
JavaScript的字串就是用''或""括起來的字元表示。
如果'本身也是一個字元，那就可以用""括起來，比如"I'm OK"包含的字元是I，'，m，空格，O，K這6個字元。
如果字串內部既包含'又包含"怎麼辦？可以用轉義字元\來標識，比如：
'I\'m \"OK\"!';
表示的字串內容是：I'm "OK"!
轉義字元\可以轉義很多字元，比如\n表示換行，\t表示製表符，字元\本身也要轉義，所以\\表示的字元就是\。
（2）多行字串
用 \n 來表示換行。
（3）字串連線
可以用 + 號來連線多個字串。
（4）操作字串
-
var s = 'Hello, world!'; s.length; // 13 -
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為字串提供了一些常用方法，注意，呼叫這些方法本身不會改變原有字串的內容，而是返回一個新字串：
-
toUpperCase() : 把一個字串全部變為大寫：
var s = 'Hello'; s.toUpperCase(); // 返回'HELLO' -
toLowerCase() : 把一個字串全部變為小寫：
var s = 'Hello'; var lower = s.toLowerCase(); // 返回'hello'並賦值給變數lower lower; // 'hello' -
indexOf() : 會搜尋指定字串出現的位置：
var s = 'hello, world'; s.indexOf('world'); // 返回7 s.indexOf('World'); // 沒有找到指定的子串，返回-1 -
substring() : 返回指定搜尋區間的字串：
var s = 'hello, world' s.substring(0, 5); // 從索引0開始到5（不包括5），返回'hello' s.substring(7); // 從索引7開始到結束，返回'world'
-
4. 陣列
（1）基本概念
JavaScript的Array可以包含任意資料型別，並通過索引來訪問每個元素。
要取得Array的長度，直接訪問length屬性：
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6
Array可以通過索引把對應的元素修改為新的值，因此，對Array的索引進行賦值會直接修改這個Array：
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr現在變為['A', 99, 'C']
大多數其他程式語言不允許直接改變陣列的大小，越界訪問索引會報錯。然而，JavaScript的Array卻不會有任何錯誤。在編寫程式碼時，不建議直接修改Array的大小，訪問索引時要確保索引不會越界。
（2）常用方法
-
indexOf() : 與String類似，
Array也可以通過indexOf()來搜尋一個指定元素的位置：var arr = [10, 20, '30', 'xyz']; arr.indexOf(10); // 元素10的索引為0 arr.indexOf(20); // 元素20的索引為1 arr.indexOf(30); // 元素30沒有找到，返回-1 arr.indexOf('30'); // 元素'30'的索引為2 -
slice() :
slice()就是對應String的substring()版本，它擷取Array的部分元素，然後返回一個新的Array：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']注意到
slice()的起止引數包括開始索引，不包括結束索引。如果不給
slice()傳遞任何引數，它就會從頭到尾擷取所有元素。利用這一點，我們可以很容易地複製一個Array：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() :
push()向Array的末尾新增若干元素，pop()則把Array的最後一個元素刪除掉：var arr = [1, 2]; arr.push('A', 'B'); // 返回Array新的長度: 4 arr; // [1, 2, 'A', 'B'] arr.pop(); // pop()返回'B' arr; // [1, 2, 'A'] arr.pop(); arr.pop(); arr.pop(); // 連續pop 3次 arr; // [] arr.pop(); // 空陣列繼續pop不會報錯，而是返回undefined arr; // [] -
unshift() 和 shift() : 如果要往
Array的頭部新增若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：var arr = [1, 2]; arr.unshift('A', 'B'); // 返回Array新的長度: 4 arr; // ['A', 'B', 1, 2] arr.shift(); // 'A' arr; // ['B', 1, 2] arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次 arr; // [] arr.shift(); // 空陣列繼續shift不會報錯，而是返回undefined arr; // [] -
sort() :
sort()可以對當前Array進行排序，它會直接修改當前Array的元素位置，直接呼叫時，按照預設升序排序：var arr = ['B', 'C', 'A']; arr.sort(); arr; // ['A', 'B', 'C'] -
reverse() :
reverse()把整個Array的元素給掉個個，也就是反轉：var arr = ['one', 'two', 'three']; arr.reverse(); arr; // ['three', 'two', 'one'] -
splice() :
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'] -
concat() :
concat()方法把當前的Array和另一個Array連線起來，並返回一個新的Array：var arr = ['A', 'B', 'C']; var added = arr.concat([1, 2, 3]); added; // ['A', 'B', 'C', 1, 2, 3] arr; // ['A', 'B', 'C']請注意，
concat()方法並沒有修改當前Array，而是返回了一個新的Array。實際上，
concat()方法可以接收任意個元素和Array，並且自動把Array拆開，然後全部新增到新的Array裡：var arr = ['A', 'B', 'C']; arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4] -
join() :
join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字串連線起來，然後返回連線後的字串：var arr = ['A', 'B', 'C', 1, 2, 3]; arr.join('-'); // 'A-B-C-1-2-3'如果
Array的元素不是字串，將自動轉換為字串後再連線。
（3）多維陣列
如果陣列的某個元素又是一個Array，則可以形成多維陣列，例如：
var arr = [[1, 2, 3], [400, 500, 600], '-'];
上述Array包含3個元素，其中頭兩個元素本身也是Array。
5. 物件
由於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
6. 條件判斷
如果if的條件判斷語句結果不是true或false怎麼辦？例如：
var s = '123';
if (s.length) { // 條件計算結果為3
//
}
JavaScript把null、undefined、0、NaN和空字串''視為false，其他值一概視為true，因此上述程式碼條件判斷的結果是true。
7. Map 和 Set
JavaScript的預設物件表示方式{}，但是JavaScript的物件有個小問題，就是鍵必須是字串。但實際上Number或者其他資料型別作為鍵也是非常合理的。為了解決這個問題，最新的ES6規範引入了新的資料型別 Map 和 set。
（1）Map
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
（2）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}
8. iterable
（1）遍歷Array
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當前元素的值
// index: 指向當前索引
// array: 指向Array物件本身
console.log(element + ', index = ' + index);
});
（2）遍歷Set
Set與Array類似，但Set沒有索引，因此回撥函式的前兩個引數都是元素本身：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
（3）遍歷Map
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);
});
未完待續……