1. 程式人生 > >JavaScript基礎語法+數據類型

JavaScript基礎語法+數據類型

not 不存在 sort cti mic 新的 如果 包含 執行

我們都把JavaScript代碼放到<head>中
1.JavaScript代碼寫在<script>...</script>內部
2.把JavaScript代碼放到一個單獨的.js文件,然後在HTML中通過<script src="..."></script>引入這個文件
<script type="text/javascript">這是沒有必要的,因為默認的type就是JavaScript,所以不必顯式地把type指定為JavaScript。

但由於瀏覽器的安全限制,以file://開頭的地址無法執行如聯網等JavaScript代碼,
最終,你還是需要架設一個Web服務器,然後以http://開頭的地址來正常執行所有JavaScript代碼。

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

單行註釋 // 多行註釋 /*...*/

基礎數據類型

技術分享圖片
Number:JavaScript不區分整數和浮點數,統一用Number表示
    NaN; // NaN表示Not a Number,當無法計算結果時用NaN表示
    Infinity; // Infinity表示無限大,當數值超過了JavaScript的Number所能表示的最大值時,就表示為Infinity
    十六進制用0x前綴和0-9,a-f表示,

NaN這個特殊的Number與所有其他值都不相等,包括它自己
唯一能判斷NaN的方法是通過isNaN()函數
-----isNaN(NaN); // true 字符串是以單引號或雙引號"括起來的任意文本 布爾值 只有true、false兩種值 &&運算是與運算 ||運算是或運算 !運算是非運算 實際上,JavaScript允許對任意數據類型做比較 要特別註意相等運算符==。JavaScript在設計時,有兩種比較運算符: 第一種是==比較,它會自動轉換數據類型再比較,很多時候,會得到非常詭異的結果; 第二種是===比較,它不會自動轉換數據類型,如果數據類型不一致,返回false,如果一致,再比較。 建議始終堅持使用===比較。 / 3 === (1 - 2 / 3); // false 這不是JavaScript的設計缺陷。浮點數在運算過程中會產生誤差, null表示一個“空”的值,它和0以及空字符串
‘‘不同,0是一個數值,‘‘表示長度為0的字符串,而null表示“空”。 undefined表示值未定義,區分兩者的意義不大。大多數情況下,我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。 undefined貌似是null的一個子類??? 基礎數據類型 變量在JavaScript中就是用一個變量名表示,變量名是大小寫英文、數字、$和_的組合,且不能用數字開頭。 在JavaScript中,使用等號=對變量進行賦值。可以把任意數據類型賦值給變量,同一個變量可以反復賦值,而且可以是不同類型的變量,但是要註意只能用var申明一次 如果一個變量沒有通過var申明就被使用,那麽該變量就自動被申明為全局變量 不用var申明的變量會被視為全局變量,為了避免這一缺陷,所有的JavaScript代碼都應該使用strict模式。 轉義字符\可以轉義很多字符,比如\n表示換行,\t表示制表符,字符\本身也要轉義,所以\\表示的字符就是\。 ASCII字符可以以\x##形式的十六進制表示 還可以用\u####表示一個Unicode字符 最新的ES6標準新增了一種多行字符串的表示方法,用反引號 ` ... ` 表示 要把多個字符串連接起來,可以用+號連接 如果有很多變量需要連接,用+號就比較麻煩。ES6新增了一種模板字符串,表示方法和上面的多行字符串一樣,但是它會自動替換字符串中的變量 var name = ‘小明‘; var age = 20; var message = `你好, ${name}, 你今年${age}歲了!`; alert(message);
基礎語言、基礎數據類型

字符串

JavaScript的字符串就是用‘‘或""括起來的字符表示。
如果字符串內部既包含‘又包含"怎麽辦?可以用轉義字符\來標識,比如:‘I\‘m \"OK\"!‘;

轉義字符\可以轉義很多字符,比如\n表示換行,\t表示制表符,字符\本身也要轉義,所以\\表示的字符就是\。

ASCII字符可以以\x##形式的十六進制表示,例如:‘\x41‘; // 完全等同於 ‘A‘
還可以用\u####表示一個Unicode字符:‘\u4e2d\u6587‘; // 完全等同於 ‘中文‘

由於多行字符串用\n寫起來比較費事,所以最新的ES6標準新增了一種多行字符串的表示方法,用反引號 ` ... ` 表示:

可以用+號連接多個字符串
如果有很多變量需要連接,用+號就比較麻煩。ES6新增了一種模板字符串,表示方法和上面的多行字符串一樣,但是它會自動替換字符串中的變量:

技術分享圖片
var name = ‘小明‘;
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);
模板字符串示例 技術分享圖片
s.length; //獲得字符串的長度

在js中一樣可以對字符串進行索引
substring()返回指定索引區間的子串//切片則使用substring
    需要特別註意的是,字符串是不可變的,如果對字符串的某個索引賦值,不會有任何錯誤,但是,也沒有任何效果

JavaScript為字符串提供了一些常用方法,註意,調用這些方法本身不會改變原有字符串的內容,而是返回一個新字符串
toUpperCase()把一個字符串全部變為大寫
toLowerCase()把一個字符串全部變為小寫
indexOf()會搜索指定字符串出現的位置

在後面編寫的JavaScript代碼將全部采用strict模式。(聲明局部變量時,強制var)
操作字符串

數組

數組是一組按順序排列的集合,集合的每個值稱為元素。JavaScript的數組可以包括任意數據類型。
另一種創建數組的方法是通過Array()函數實現:new Array(1, 2, 3);

JavaScript的Array可以包含任意數據類型,並通過索引來訪問每個元素。
要取得Array的長度,直接訪問length屬性
請註意,直接給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]
View Code

Array可以通過索引把對應的元素修改為新的值,因此,對Array的索引進行賦值會直接修改這個Array
請註意,如果通過索引賦值時,索引超過了範圍,同樣會引起Array大小的變化

技術分享圖片
與String類似,Array也可以通過indexOf()來搜索一個指定的元素的位置

js可以索引,但切片需要使用slice()
slice()就是對應String的substring()版本,它截取Array的部分元素,然後返回一個新的Array

push()向Array的末尾添加若幹元素
pop()則把Array的最後一個元素刪除掉
unshift()向Array的頭部添加若幹元素
shift()則把Array的第一個元素刪除掉

sort()可以對當前Array進行排序,它會直接修改當前Array的元素位置,直接調用時,按照默認順序排序
reverse()把整個Array的元素倒序

concat()方法把當前的Array和另一個Array連接起來,並返回一個新的Array
concat()方法可以接收任意個元素和Array,並且自動把Array拆開,然後全部添加到新的Array裏

join()方法是一個非常實用的方法,它把當前Array的每個元素都用指定的字符串連接起來,然後返回連接後的字符串

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‘]
數組操作

對象

avaScript的對象是一種無序的集合數據類型,它由若幹鍵值對組成。------就是python的字典
JavaScript對象的鍵都是字符串類型,值可以是任意數據類型。

註意,最後一個鍵值對不需要在末尾加,,如果加了,有的瀏覽器(如低版本的IE)將報錯。

訪問屬性是通過.操作符完成的,但這要求屬性名必須是一個有效的變量名。如果屬性名包含特殊字符,就必須用‘‘括起來
xiaohong的屬性名middle-school不是一個有效的變量,就需要用‘‘括起來。訪問這個屬性也無法使用.操作符,必須用[‘xxx‘]來訪問

訪問不存在的屬性不報錯,而是返回undefined

如果我們要檢測xiaoming是否擁有某一屬性,可以用in操作符:如果in判斷一個屬性存在,這個屬性不一定是xiaoming的,它可能是xiaoming繼承得到的

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

條件判斷

if () { ... } else { ... }

如果還要更細致地判斷條件,可以使用多個if...else...的組合

技術分享圖片
var age = 3;
if (age >= 18) {
alert(‘adult‘);
} else if (age >= 6) {
alert(‘teenager‘);
} else {
alert(‘kid‘);
}
示例

請註意,if...else...語句的執行特點是二選一,在多個if...else...語句中,如果某個條件成立,則後續就不再繼續判斷了。

循環

for (i=1; i<=10000; i++) { x = x + i;}
i=1 這是初始條件,將變量i置為1;
i<=10000 這是判斷條件,滿足時就繼續循環,不滿足就退出循環;
i++ 這是每次循環後的遞增條件,由於每次循環後變量i都會加1,因此它終將在若幹次循環後不滿足判斷條件i<=10000而退出循環。

for循環的3個條件都是可以省略的,如果沒有退出循環的判斷條件,就必須使用break語句退出循環,否則就是死循環

技術分享圖片
var x = 0;
for (;;) { // 將無限循環下去
if (x > 100) {
break; // 通過if判斷來退出循環
}
x ++;
}
示例

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

技術分享圖片
var o = {
name: ‘Jack‘,
age: 20,
city: ‘Beijing‘
};
for (var key in o) {
console.log(key); // ‘name‘, ‘age‘, ‘city‘
}
示例

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

技術分享圖片
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
示例

do { ... } while()循環,它和while循環的唯一區別在於,不是在每次循環開始的時候判斷條件,而是在每次循環完成的時候判斷條件

技術分享圖片
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
示例

用do { ... } while()循環要小心,循環體會至少執行1次,而for和while循環則可能一次都不執行。

Map & Set

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

技術分享圖片
JavaScript的默認對象表示方式{}可以視為其他語言中的Map或Dictionary的數據結構,即一組鍵值對。
但是JavaScript的對象有個小問題,就是鍵必須是字符串。但實際上Number或者其他數據類型作為鍵也是非常合理的。
為了解決這個問題,最新的ES6規範引入了新的數據類型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,後面的值會把前面的值沖掉


要創建一個Set,需要提供一個Array作為輸入,或者直接創建一個空Set:

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

重復元素在Set中自動被過濾
通過add(key)方法可以添加元素到Set中,可以重復添加,但不會有效果
通過delete(key)方法可以刪除元素
說明及示例

JavaScript基礎語法+數據類型