JavaScript
JS的變量與保留字
1、變量
- 在js中使用var關鍵字 進行變量的聲明,注意 分號做爲一句代碼的結束符
- 聲明變量時 能夠不用var. 若是不用var那麼它是全局變量
- 命名方式：Pascal標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「 Var iMySalary = 1000000, sMyInfo = "hello";
2、保留字
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile、javascript
3、語言類型
-
靜態類型語言html
一種在編譯期間就肯定數據類型的語言。大多數靜態類型語言是經過要求在使用任一變量以前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。 -
動態類型語言前端
一種在運行期間纔去肯定數據類型的語言，與靜態類型相反。VBScript 和 Python 是動態類型的，由於它們肯定一個變量的類型是在您第一次給它賦值的時候。 -
強類型語言java
一種老是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數，若是不明確地進行轉換 ，不能將把它當成一個字符串去應用。 -
弱類型語言python
一種類型能夠被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，能夠將字符串 '12' 和整數 3 進行鏈接獲得字符串'123'，而後能夠把它當作整數 123 ，全部這些都不須要任何的顯示轉換。 因此說 Python 既是動態類型語言 (由於它不使用顯示數據類型聲明)，又是強類型語言 (由於只要一個變量得到了一個數據類型，它實際上就一直是這個類型了)。
基本數據類型
1、數值:number
- NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據
- NaN參與的全部的運算都是false,除了!=
- var b = 5/0; console.log(b); Infinity 無限大
- ps:在JavaScript中，只要是數，就是數值型(number)的。不管整浮、浮點數（即小數）、不管大小、不管正負，都是number類型的。
- var age = Number(18);
- parseInt("1.2"); parseFloat("1.2");
2、字符串:string
- + 若是加號兩邊都是數值，此時是數字的加號。不然就是連字符（用來鏈接字符串）。
- var name = String("hello");
- 經常使用方法： obj.trim() obj.charAt(index) obj.substring(start,end) obj.indexOf(char) obj.length
3、布爾：boolean
- var status = true;
- var status = false;
- var status = Boolen(1==1)
4、空對象：null
- 若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。
- 值undefined 其實是從值null 派生來的，所以 ECMAScript 把它們定義爲相等的。
- undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象
5、未定義：undefined
- 當聲明的變量未初始化時，該變量的默認值是 undefined。
- 當函數無明確返回值時，返回的也是值 "undefined"
- undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象
運算符
算術運算符： + - * / % ++ -- 比較運算符： > >= < <= != == === !== 邏輯運算符： && || ！ 賦值運算符： = += -= *= /= 字符串運算符： + 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算 // && || if (2>1 && [1,2]){ console.log("...") //... } if (2<1 && [1,2]){ console.log("...") // } // console.log(1 && 3); //3 console.log(0 && 3); //0 console.log(0 || 3); //3 console.log(2 || 3); //2 //字符串比較 var bResult = "Blue" < "alpha"; console.log(bResult); //輸出 true 由於字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。 var bResult = "25" < "3"; console.log(bResult); //輸出 "true" （"2" 的字符代碼是 50，"3" 的字符代碼是 51）。 var bResult = "25" < 3; console.log(bResult); //輸出 "false" 這裏，字符串 "25" 將被轉換成數字 25，而後與數字 3 進行比較 /* 總結： 比較運算符兩側若是一個是數字類型,一個是其餘類型,會將其類型轉換成數字類型. 比較運算符兩側若是都是字符串類型,比較的是最高位的asc碼,若是最高位相等,繼續取第二位比較. */ //等性運算符：執行類型轉換的規則以下： 若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。 若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。 若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。 若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。 在比較時，該運算符還遵照下列規則： 值 null 和 undefined 相等。 在檢查相等性時，不能把 null 和 undefined 轉換成其餘值。 若是某個運算數是 NaN，等號將返回 false，非等號將返回 true。 若是兩個運算數都是對象，那麼比較的是它們的引用值。若是兩個運算數指向同一對象，那麼等號返回 true，不然兩個運算數不等。
數據類型轉換
將number類型轉換成string類型 隱式轉換: var n1 = 123;var n2 = '123';var n3 = n1+n2;console.log(typeof n3); 強制轉換:String()或toString() var str1 = String(n1); 或 console.log(n1.toString())
將string類型轉換成number類型 Number: var stringNum = '789.123wadjhkd'; console.log(Number(stringNum)); //NaN parseInt()或parseFloat console.log(parseInt(stringNum)); //789 console.log(parseFloat(stringNum)); //789.123
任何的數據類型均可以轉換爲boolean類型 console.log(Boolean(0)); console.log(Boolean('')); console.log(Boolean(false)); console.log(Boolean(null)); console.log(Boolean(undefined)); console.log(Boolean(NaN)); console.log(Boolean(Infinity)); //true
流程控制
1、if語句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type=
"text/javascript"
>
var
score=window.prompt(
"您的分數:"
);
if
(score>90){
ret=
"優秀"
;
}
else
if
(score>80){
ret=
"良"
;
}
else
if
(score>60){
ret=
"及格"
;
}
else
{
ret =
"不及格"
;
}
console.log(ret);
</script>
|
2、switch語句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<script type=
"text/javascript"
>
var
x = 1;
switch
(x) {
case
1:
y =
"星期一"
;
console.log(x+y);
break
;
case
2:
y =
"星期二"
;
break
;
case
3:
y =
"星期三"
;
break
;
case
4:
y =
"星期四"
;
break
;
case
5:
y =
"星期五"
;
break
;
case
6:
y =
"星期六"
;
break
;
case
7:
y =
"星期日"
;
break
;
default
:
y =
"未定義"
;
}
console.log(y)
</script>
|
3、while循環
|
1
2
3
4
5
6
7
8
|
<script type=
"text/javascript"
>
// 例子：打印 1~9之間的數
var
i = 1;
// 一、初始化循環變量
while
(i<=9){
// 二、判斷循環條件
console.log(i);
i = i+1;
// 三、更新循環條件
}
</script>
|
4、do-while循環
|
1
2
3
4
5
6
7
8
|
<script type=
"text/javascript"
>
//無論有沒有知足while中的條件do裏面的代碼都會走一次
var
i = 1;
//初始化循環變量
do
{
console.log(i);
i++;
//更新循環條件
}
while
(i<3)
//判斷循環條件
</script>
|
5、for循環
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type=
"text/javascript"
>
//用法1：
//輸出1~10之間的數
for
(
var
i = 1;i<=10;i++){
console.log(i)
}
//用法2：for( 變量 in 數組或對象){....}
li=[1,2,3,4,5,6];
for
(i
in
li){
console.log(i);
}
</script>
|
6、異常處理
try { //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行 } catch (e) { // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。 //e是一個局部變量，用來指向Error對象或者其餘拋出的對象 } finally { //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。 } 注：主動拋出異常 throw Error('xxxx')
對象(複雜數據類型)
在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象。正則表達式
| 類型 | 內置對象 | 介紹 |
|---|---|---|
| 數據對象 | Number | 數字對象 |
| String | 字符串對象 | |
| Boolean | 布爾值對象 | |
| 組合對象 | Array | 數組對象 |
| Math | 數學對象 | |
| Date | 日期對象 | |
| 組合對象 | Object | 自定義對象 |
| Error | 錯誤對象 | |
| Function | 函數對象 | |
| RegExp | 正則表達式對象 | |
| Global | 全局對象 |
|
1
2
3
4
5
6
7
8
9
10
|
<script language=
"javascript"
>
var
aa=Number.MAX_VALUE;
//利用數字對象獲取可表示最大數
var
bb=
new
String(
"hello JavaScript"
);
//建立字符串對象
var
cc=
new
Date();
//建立日期對象
var
dd=
new
Array(
"星期一"
,
"星期二"
,
"星期三"
,
"星期四"
);
//數組對象
</script>
|
1、String
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<script type=
"text/javascript"
>
//建立方式
var
str=
"hello world"
;
var
str=
new
String(
"hello word"
);
//==================================================字符串查詢方法
// chartAt(index) 返回指定索引的位置的字符
var
str =
'hello world'
;
var
charset = str.charAt(1);
console.log(charset);
//e
// indexOf lastIndexOf 查詢字符串位置 找不到則返回-1
var
str =
'hello world'
;
console.log(str.indexOf(
'm'
,0));
//-1
console.log(str.indexOf(
'o'
,0));
//4
console.log(str.indexOf(
'o'
,5));
//7
console.log(str.lastIndexOf(
'o'
));
//7
//match(regexp) match返回匹配字符串的數組，若是沒有匹配則返回null
//search(regexp) search返回匹配字符串的首字符位置索引
var
str1=
"welcome to the world of JS!"
;
var
str2=str1.match(
"world"
);
//str2=["world", index: 15, input: "welcome to the world of JS!", groups: undefined]
var
str3=str1.search(
"world"
);
console.log(str2[0],str2);
// 結果爲"world"
console.log(str3);
// 結果爲15
//==================================================子字符串處理方法
//substr(start, length) start表示開始位置，length表示截取長度
//substring(start, end) end是結束位置
var
str =
'helworld'
;
console.log(
'====='
,str.substr(3));
//world
console.log(str.substr(3,4));
//worl
console.log(str.substr(3,2));
//wo
console.log(str.substring(3));
//world
console.log(str.substring(3,4));
//w
console.log(str.substring(3,2),
'====='
);
//l
//slice(start，end) 左閉右開 切片操做字符串
var
str1=
"abcdefgh"
;
var
str2=str1.slice(2,4);
var
str3=str1.slice(4);
var
str4=str1.slice(2,-1);
var
str5=str1.slice(-3,-1);
console.log(str2);
//結果爲"cd"
console.log(str3);
//結果爲"efgh"
console.log(str4);
//結果爲"cdefg"
console.log(str5);
//結果爲"fg"
//==================================================字符串拼接方法
// concat 返回字符串值，表示兩個或多個字符串的拼接一個新的字符串
var
str1 =
'al'
;
var
str2 =
'ex'
;
console.log(str1.concat(str2,str2));
//alexex
//==================================================字符串替換方法
//replace(a,b) 將字符串a替換成字符串b
var
a =
'1234567755'
;
var
newStr = a.replace(
"4567"
,
"****"
);
console.log(newStr);
//123****755
//==================================================字符串分割方法
//split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度
var
str1=
"一,二,三,四,五,六,日"
;
var
strArray=str1.split(
","
);
console.log(strArray[1]);
//結果爲"二"
//==================================================字符串其餘方法
var
str=
" hello world "
;
//length 獲取字符串的長度
//trim() 去除字符串兩邊的空格
console.log(str.length,str.trim().length);
//18 11
//toLowerCase()轉小寫
var
str =
'HELLO'
;
console.log(str.toLowerCase());
//hello
//toUpperCase()轉大寫
var
str =
'hello'
;
console.log(str.toUpperCase());
//HELLO
//1.將number類型轉換成字符串類型
var
num = 132.32522;
var
numStr = num.toString();
console.log(
typeof
numStr);
//string
//四捨五入
var
newNum = num.toFixed(2);
//132.33
console.log(newNum);
</script>
|
2、Array
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<script type=
"text/javascript"
>
//建立方式
//方式一、字面量方式
var
colo = [
'red'
,
'green'
,
'yellow'
];
//方式二、使用構造函數（後面會講）的方式建立 使用new關鍵詞對構造函數進行建立對象,構造函數與後面的面向對象有關係
var
colors =
new
Array();
//經過下標進行賦值
colors[0] =
'red'
;
colors[1] =
'green'
;
//方式三、
var
test=
new
Array(100,
"a"
,
true
);
//建立二維數組：
var
cnweek=
new
Array(7);
for
(
var
i=0;i<=6;i++){
cnweek[i]=
new
Array(2);
}
cnweek[0][0]=
"星期日"
;
cnweek[0][1]=
"Sunday"
;
cnweek[1][0]=
"星期一"
;
cnweek[1][1]=
"Monday"
;
//...
cnweek[6][0]=
"星期六"
;
cnweek[6][1]=
"Saturday"
;
console.log(cnweek);
// 數組的合併 concat()
var
north = [
'北京'
,
'山東'
,
'天津'
];
var
south = [
'東莞'
,
'深圳'
,
'上海'
];
var
newCity = north.concat(south);
console.log(newCity,
typeof
newCity);
//...object
var
a = [1,2,3];
var
b=a.concat(4,5) ;
console.log(a);
//返回結果爲1,2,3
console.log(b,
typeof
b);
//返回結果爲1,2,3,4,5 object
// join() 將數組中元素使用指定的字符串鏈接起來，它會造成一個新的字符串
var
score = [98,78,76,100,0];
var
str = score.join(
'|'
);
console.log(str,
typeof
str);
//"98|78|76|100|0" string
//數組的切片 slice(start, end) start表示開始位置索引 end是結束位置下一數組元素索引編號
/*
第一個數組元素索引爲0
start、end可爲負數，-1表明最後一個數組元素
end省略則至關於從start位置截取之後全部數組元素
*/
var
arr1=[
'a'
,
'b'
,
'c'
,
'd'
,
'e'
,
'f'
,
'g'
,
'h'
];
var
arr2=arr1.slice(2,4);
var
arr3=arr1.slice(4);
var
arr4=arr1.slice(2,-1);
alert(arr2.toString());
//結果爲"c,d"
alert(arr3.toString());
//結果爲"e,f,g,h"
alert(arr4.toString());
//結果爲"c,d,e,f,g"
//子數組操做 splice(start, deleteCount, value, ...)
/*
splice的主要用途是對數組指定位置進行刪除和插入
start表示開始位置索引
deleteCount刪除數組元素的個數
value表示在刪除位置插入的數組元素
value參數能夠省略
*/
var
a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());
//a變爲 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString());
//a變爲[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString());
//a變爲[1,2,3,5,6,7,8]
//push pop這兩個方法模擬的是一個棧操做，push壓棧 pop彈棧
//pop 移除數組的最後一個元素
var
arr = [
'張三'
,
'李四'
,
'王文'
,
'趙六'
];
var
bb = arr.pop();
//返回值就是刪除的元素
console.log(arr,bb);
//["張三", "李四", "王文"] "趙六"
//push() 向數組最後添加一個元素
var
arr = [
'張三'
,
'李四'
,
'王文'
,
'趙六'
];
var
cc = arr.push(
'小馬哥'
);
//返回最終數組長度
console.log(arr,cc);
//["張三", "李四"，"王文"，"趙六"，"小馬哥"] 5
//shift和unshift：
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除
var
arr1=[1,2,3];
var
cc = arr1.unshift(4,5);
console.log(
'+++'
,arr1,cc);
//結果爲"4,5,1,2,3" 5
var
dd=arr1.shift();
console.log(
'+++'
,arr1,dd);
//結果爲"5,1,2,3" 4
//reverse() 翻轉數組
var
names = [
'alex'
,
'xiaoma'
,
'tanhuang'
,
'angle'
];
names.reverse();
console.log(names);
//["angle", "tanhuang", "xiaoma", "alex"]
//sort對數組排序
var
names = [
'alex'
,
'xiaoma'
,
'tanhuang'
,
'abngel'
];
names.sort();
console.log(names);
// ["alex", "angle", "tanhuang", "xiaoma"]
//數字的正確排序
arr=[1,5,2,100];
arr.sort(intSort);
function
intSort(a,b){
return
a-b;
}
alert(arr);
//1,2,5,100
//判斷是否爲數組：isArray() 布爾類型值 = Array.isArray(被檢測的值)
var
test = [1,
'a'
,3];
console.log(Array.isArray(test));
//true
//清空數組的幾種方式
var
array = [1,2,3,4,5,6];
array.splice(0);
//方式1：刪除數組中全部項目
array.length = 0;
//方式2：length屬性能夠賦值，在其它語言中length是隻讀
array = [];
//方式3：推薦
//js中數組的特性
//特性1: js中的數組能夠裝任意類型,沒有任何限制.
//特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長.
var
arr5 = [
'abc'
,123,1.14,
true
,
null
,undefined,
new
String(
'1213'
),
new
Function(
'a'
,
'b'
,
'alert(a+b)'
)];
alert(arr5.length);
//8
arr5[10] =
"hahaha"
;
alert(arr5.length);
//11
alert(arr5[9]);
// undefined
</script>
|
3、Math
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<script type=
"text/javascript"
>
//該對象中的屬性方法 和數學有關.
/*
abs(x) 返回數的絕對值。
exp(x) 返回 e 的指數。
floor(x)對數進行下舍入。
log(x) 返回數的天然對數（底爲e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入爲最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
*/
console.log(Math.pow(2,4));
// 16 pow 計算參數1 的參數2 次方.
console.log(Math.round(1.5));
// 2 四捨五入
// Math.ceil() 向上取整，'天花板函數'
var
x = 1.234;
//天花板函數 表示大於等於 x，而且與它最接近的整數是2
var
a = Math.ceil(x);
console.log(a,x);
//2 1.234
// Math.floor 向下取整，'地板函數'
var
x = 1.234;
// 小於等於 x，而且與它最接近的整數 1
var
b = Math.floor(x);
console.log(b,x);
//1 1.234
//求兩個數的最大值和最小值
console.log(Math.max(2,5));
//5
console.log(Math.min(2,5));
//2
//隨機數 Math.random() 得到隨機數 0~1不包括1.
var
ran = Math.random();
console.log(ran);
// min - max之間的隨機數： min+Math.random()*(max-min);
</script>
|
4、Date
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<script type=
"text/javascript"
>
//方法1：不指定參數
var
nowd1=
new
Date();
console.log(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var
nowd2=
new
Date(
"2004/3/20 11:12"
);
//2004/3/20 上午11:12:00
console.log(nowd2.toLocaleString( ));
var
nowd3=
new
Date(
"04/03/20 11:12"
);
console.log(nowd3.toLocaleString( ));
//2020/4/3 上午11:12:00
//方法3：參數爲毫秒數
var
nowd3=
new
Date(5000);
console.log(nowd3.toLocaleString( ));
//1970/1/1 上午8:00:05
console.log(nowd3.toUTCString());
//Thu, 01 Jan 1970 00:00:05 GMT
//方法4：參數爲年月日小時分鐘秒毫秒
var
nowd4=
new
Date(2004,3,20,11,12,0,300);
console.log(nowd4.toLocaleString( ));
//毫秒並不直接顯示 2004/4/20 上午11:12:00
//Date對象的方法—獲取日期和時間
/*
getDate() 獲取日
getDay () 獲取星期
getMonth () 獲取月（0-11）
getFullYear () 獲取完全年份
getYear () 獲取年
getHours () 獲取小時
getMinutes () 獲取分鐘
getSeconds () 獲取秒
getMilliseconds () 獲取毫秒
getTime () 返回累計毫秒數(從1970/1/1午夜)
*/
function
getCurrentDate(){
//1. 建立Date對象
var
date =
new
Date();
//沒有填入任何參數那麼就是當前時間
//2. 得到當前年份
var
year = date.getFullYear();
//3. 得到當前月份 js中月份是從0到11.
var
month = date.getMonth()+1;
//4. 得到當前日
var
day = date.getDate();
//5. 得到當前小時
var
hour = date.getHours();
//6. 得到當前分鐘
var
min = date.getMinutes();
//7. 得到當前秒
var
sec = date.getSeconds();
//8. 得到當前星期
var
week = date.getDay();
//沒有getWeek
// 2014年06月18日 15:40:30 星期三
return
year+
"年"
+changeNum(month)+
"月"
+day+
"日 "
+hour+
":"
+min+
":"
+sec+
" "
+parseWeek(week);
}
alert(getCurrentDate());
//解決 自動補齊成兩位數字的方法
function
changeNum(num){
if
(num < 10){
return
"0"
+num;
}
else
{
return
num;
}
}
//將數字 0~6 轉換成 星期日到星期六
function
parseWeek(week){
var
arr = [
"星期日"
,
"星期一"
,
"星期二"
,
"星期三"
,
"星期四"
,
"星期五"
,
"星期六"
];
return
arr[week];
}
//Date對象的方法—設置日期和時間
/*
setDate(day_of_month) 設置日
setMonth (month) 設置月
setFullYear (year) 設置年
setHours (hour) 設置小時
setMinutes (minute) 設置分鐘
setSeconds (second) 設置秒
setMillliseconds (ms) 設置毫秒(0-999)
setTime (allms) 設置累計毫秒(從1970/1/1午夜)
*/
var
x=
new
Date();
x.setFullYear (1997);
//設置年1997
x.setMonth(7);
//設置月7
x.setDate(1);
//設置日1
x.setHours(5);
//設置小時5
x.setMinutes(12);
//設置分鐘12
x.setSeconds(54);
//設置秒54
x.setMilliseconds(230);
//設置毫秒230
document.write(x.toLocaleString( )+
"<br>"
);
//返回1997年8月1日5點12分54秒
x.setTime(870409430000);
//設置累計毫秒數
document.write(x.toLocaleString( )+
"<br>"
);
//返回1997年8月1日12點23分50秒
//Date對象的方法—日期和時間的轉換
getTimezoneOffset();
//8個時區×15度×4分/度=480; 返回本地時間與GMT的時間差以分鐘爲單位
toUTCString();
//返回國際標準時間字符串
toLocalString();
//返回本地格式時間字符串
Date.parse(x);
//返回累計毫秒數(從1970/1/1午夜到本地時間)
Date.UTC(x);
//返回累計毫秒數(從1970/1/1午夜到國際時間)
</script>
|
5、Function
- 可使用變量、常量或表達式做爲函數調用的參數
- 函數名的定義規則與標識符一致，大小寫是敏感的
- 注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<script type=
"text/javascript"
>
//注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：
//聲明方式1：
function
add(x,y){
return
x+y;
}
//js中調用函數
console.log(add(1,2));
//聲明方式2：
var
func2=
new
Function(
"name"
,
"alert(\"hello\"+name);"
);
func2(
"tom"
);
// 一、僞數組 arguments arguments表明的是實參。arguments只在函數中使用。
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function
fn(a,b,c) {
console.log(arguments);
console.log(fn.length);
//獲取形參的個數 一直是3
console.log(arguments.length);
//獲取實參的個數
console.log(
"----------------"
);
}
// 二、arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。
function
fn2(a,b) {
arguments[0] = 99;
//將實參的第一個數改成99
//arguments.push(8); //報錯，由於沒法增長元素 TypeError: arguments.push is not a function
}
//arguments的用處1:
function
nxAdd(){
var
result=0;
for
(
var
num
in
arguments){
result+=arguments[num]
}
alert(result);
}
nxAdd(1,2,3,4,5);
//arguments的用處2:
function
f(a,b,c){
if
(arguments.length!=3){
throw
new
Error(
"function f called with "
+arguments.length+
" arguments,but it just need 3 arguments"
)
}
else
{
alert(
"success!"
)
}
}
f(1,2,3,4,5);
//只要函數名寫對便可,參數怎麼填都不報錯.
function
func1(a,b){
console.log(a+b);
}
func1(1,2);
//3
func1(1,2,3);
//3
func1(1);
//NaN
func1();
//NaN
// 匿名函數
var
func =
function
(arg){
return
"tony"
;
};
// 匿名函數的應用
(
function
(){
alert(
"tony"
);
})()
(
function
(arg){
console.log(arg);
})(
'123'
)
</script>
|
6、Object
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<script type=
"text/javascript"
>
/*
對象Object
1.使用Object或對象字面量建立對象
2.工廠模式建立對象
3.構造函數模式建立對象
4.原型模式建立對象
*/
// 1.使用Object或對象字面量建立對象
//使用Object建立對象
var
student =
new
Object();
student.name =
"easy"
;
student.age =
"20"
;
//使用字面量方式
var
sutdent = {
name :
"easy"
,
age : 20
};
// 要建立同類的student1，student2，…，studentn時，不得不將以上的代碼重複n次....故工廠模式登陸
// 2.工廠模式建立對象
function
createStudent(name, age) {
var
obj =
new
Object();
obj.name = name;
obj.age = age;
return
obj;
}
var
student1 = createStudent(
"easy1"
, 20);
var
student2 = createStudent(
"easy2"
, 20);
function
createFruit(name, color) {
var
obj =
new
Object();
obj.name = name;
obj.color = color;
return
obj;
}
var
v1 = createStudent(
"easy1"
, 20);
var
v2 = createFruit(
"apple"
,
"green"
);
console.log(v1
instanceof
Object);
//true
console.log(v2
instanceof
Object);
//true
console.log(v1
instanceof
createFruit);
//false
console.log(v2
instanceof
createFruit);
//false
/*
對象v一、v2，用instanceof操做符去檢測，他們通通都是Object類型。
咱們但願v1是Student類型的，而v2是Fruit類型的。爲了實現這個目標，能夠用自定義構造函數的方法來建立對象
構造函數和普通函數有什麼區別:
一、對於任意函數，使用new操做符調用，那麼它就是構造函數；不使用new操做符調用，那麼它就是普通函數。
二、按照慣例，約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭，這樣有利於顯性區分兩者。
三、使用new操做符調用構造函數時，會經歷4個階段。
(1)建立一個新對象；
(2)將構造函數做用域賦給新對象（使this指向該新對象）；
(3)執行構造函數代碼；
(4)返回新對象；
*/
// 3.構造函數模式建立對象
function
Student(name, age) {
this
.name = name;
this
.age = age;
this
.alertName =
function
(){
alert(
this
.name)
};
}
function
Fruit(name, color) {
this
.name = name;
this
.color = color;
this
.alertName =
function
(){
alert(
this
.name)
};
}
var
v1 =
new
Student(
"easy"
, 20);
var
v2 =
new
Fruit(
"apple"
,
"green"
);
console.log(
'============================='
);
console.log(v1
instanceof
Student);
//true
console.log(v2
instanceof
Student);
//false
console.log(v1
instanceof
Fruit);
//false
console.log(v2
instanceof
Fruit);
//true
console.log(v1
instanceof
Object);
//true 任何對象均繼承自Object
console.log(v2
instanceof
Object);
//true 任何對象均繼承自Object
//能夠區分對象類型了，可是Student和Fruit對象中有一樣的方法，調用時無疑是對內存的消耗。
// 3.1 過分 將alertName()函數定義爲全局函數，解決了內存浪費的問題,
// 若是這樣定義的全局函數多了，想要將自定義對象封裝的初衷便幾乎沒法實現了。更好的方案是經過原型對象模式來解決。
/*
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = alertName;
}
function alertName() {
alert(this.name);
}
var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);
stu1.alertName(); //在調用stu1.alertName()時，this對象才被綁定到stu1上。
*/
// 4.原型模式建立對象 ******************
function
Student() {
this
.name =
'easy'
;
this
.age = 20;
}
Student.prototype.alertName =
function
(){
alert(
this
.name);
};
var
stu1 =
new
Student();
var
stu2 =
new
Student();
stu1.alertName();
stu2.alertName();
alert(stu1.alertName == stu2.alertName);
//true 兩者共享同一函數
</script>
|
數組(Array): var names = ['alex', 'tony', 'eric'] var names = Array('alex', 'tony', 'eric') 經常使用方法： 添加 obj.push(ele) 追加 obj.unshift(ele) 最前插入 obj.splice(index,0,'content') 指定索引插入 移除 obj.pop() 數組尾部獲取 obj.shift() 數組頭部獲取 obj.splice(index,count) 數組指定位置後count個字符 切片 obj.slice(start,end) 合併 newArray ＝ obj1.concat(obj2) 翻轉 obj.reverse() 字符串化 obj.join('_') 長度 obj.length var names = ["alex", "tony", "rain"]; // 數組：方式一 for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } // 數組：方式二 for(var index in names){ console.log(index); console.log(names[index]); } var names = {"name": "alex", "age": 18}; // 字典：方式一 for(var index in names){ console.log(index); console.log(names[index]); } 函數的聲明 function func(arg){ return true; } 匿名函數 var func = function(arg){ return "tony"; } 自執行函數 (function(arg){ console.log(arg); })('123') 面向對象 function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret); URL和刷新 location.href location.href = "url" window.location.reload() 標籤屬性 var obj = document.getElementById('container'); 固定屬性 obj.id obj.id = "nid" obj.className obj.style.fontSize = "88px"; 自定義屬性 obj.setAttribute(name,value) obj.getAttribute(name) obj.removeAttribute(name) 提交表單 document.geElementById('form').submit() window.onload = function(){} //jQuery：$(document).ready(function(){}) //onload是全部DOM元素建立、圖片加載完畢後才觸發的。而ready則是DOM元素建立完畢後觸發的，不等圖片加載完畢。圖片還麼有渲染，就能夠進行事件的執行。
JSON
1、兩種結構
- JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。
- JSON是 JavaScript 原生格式，這意味着在 JavaScript 中處理 JSON數據不需要任何特殊的 API 或工具包。
-
在JSON中，有兩種結構：對象和數組。json
- 對象
var packJSON= {"name":"alex", "password":"123"};
一個對象以「{」開始，「}」結束，「key/value」之間運用 「,」分隔。 - 數組
var packJSON = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
數組是值的有序集合。一個數組以「[」開始，「]」結束。值之間運用 「,」分隔。
- 對象
2、JSON對象和JSON字符串轉換
在數據傳輸過程當中，JSON是以字符串的形式傳遞的，而JS操做的是JSON對象數組
- JSON字符串
var jsonStr ='{"name":"alex", "password":"123"}' ;
- JSON對象：
var jsonObj = {"name":"alex", "password":"123"};
- JSON字符串轉換JSON對象：
var jsonObject= JSON.parse(jsonstr);
- JSON對象轉化JSON字符串：
var jsonstr =JSON.stringify(jsonObject );
3、遍歷JSON對象和JSON數組
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type=
"text/javascript"
>
//對象
var
packAlex = {
"name"
:
"alex"
,
"password"
:
"123"
} ;
for
(
var
k
in
packAlex ){
//遍歷packAlex 對象的每一個key/value對,k爲key
console.log(k +
" "
+ packAlex[k]);
}
//數組
var
packAlex = [{
"name"
:
"alex"
,
"password"
:
"123"
}, {
"name"
:
"wusir"
,
"password"
:
"456"
}];
for
(
var
i
in
packAlex){
//遍歷packJson 數組時，i爲索引
console.log(packAlex[i].name +
" "
+ packAlex[i].password);
}
</script>
|
js的做用域
- 做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期。
- 在JavaScript中，變量的做用域有全局做用域和局部做用域兩種。
1、全局做用域(Global Scope)
在代碼中任何地方都能訪問到的對象擁有全局做用域瀏覽器
一、最外層函數和在最外層函數外面定義的變量擁有全局做用域
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script>
var
name=
"alex"
;
function
foo(){
var
age=23;
function
inner(){
console.log(age);
}
inner();
}
console.log(name);
// alex
//console.log(age); // Uncaught ReferenceError: age is not defined
foo();
// 23
inner();
// Uncaught ReferenceError: inner is not defined
</script>
|
二、全部末定義直接賦值的變量自動聲明爲擁有全局做用域
|
1
2
3
4
5
6
7
8
9
10
|
<script>
var
name=
"alex"
;
function
foo(){
age=23;
var
sex=
"male"
}
foo();
console.log(age);
// 23
console.log(sex);
// sex is not defined
</script>
|
三、全部window對象的屬性擁有全局做用域
通常狀況下，window對象的內置屬性都都擁有全局做用域，例如window.alert()、window.location、window.top等等。app
2、局部做用域(Local Scope)
- 通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，因此也稱爲函數做用域
- 如示例1中的age與inner都只有局部做用域。（js中if、for沒有本身的做用域）
3、做用域鏈(Scope Chain)
- 在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。
- 函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。
- 其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，
- 這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
一、函數定義階段：
- 當一個函數建立後，它的做用域鏈會被建立此函數的做用域中可訪問的數據對象填充。
- 在函數bar建立時，它的做用域鏈中會填入一個全局對象，該全局對象包含了全部全局變量，以下圖所示：
二、函數調用階段：
- 解析到函數調用時，即bar(5)，會生成一個active object的對象
- 該對象包含了函數的全部局部變量、命名參數、參數集合以及this，而後此對象會被推入做用域鏈的前端，當運行期上下文被銷燬，活動對象也隨之銷燬。
- 新的做用域鏈以下圖所示：
三、實例練習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> /* 域：只要是域就會發生域解析 1：script:全局變量，全局函數，自上而下(因此引入jQuery庫的時候要在script前引入) 2：函數:由裏到外 3：{} "JS解析器"：瀏覽器內部專門用來處理js程序，爲了理解起的名字，至少包含下面2步驟 1：JS的域解析： 找東西：var，function，參數 根據var 找到變量a後，不會讀取變量a的值而是把變量a賦值爲 undefined能夠理解爲偷懶機制，萬一變量a是一大串json或者數組 ***全部的變量，在正式運行代碼以前，都提早賦了一個值undefined *** ***全部的函數，在正式運行代碼以前，都是整個函數塊 *** ***函數的聲明，不改變任何值*** ***遇到重名的：只留下一個，後面的覆蓋前面的，遇到變量和函數重名了，留下函數（與變量在前在後沒有關係）*** a=undefined fn1=function fn1(){alert(2);} 2：逐行讀取代碼：(去域中找) 表達式:= + - * / % ++ -- ! 參數(參數本質就是一個局部變量) 等 表達式能夠修改域解析的值 函數調用： 1：JS的域解析： 找東西：var，function，參數 .... .... 2：逐行讀取代碼： 3：函數自身找不到，纔會去script域中找 */ //===============================script域 console.log(a); //從域解析中找 此時的a是function a(){alert(4);} var a=1; //表達式改變了域解析的值 console.log(a); //此時的a是1 function a(){alert(2);} //函數的申明，不改變任何值 console.log(a); //此時的a是1 var a=3; function a(){alert(4);} console.log(a); //此時的a是3，不能在寫a()這樣的代碼了 //==============================函數域 var b=12; function fb(){ console.log(b); //此時的b是 undefined var b=10; console.log(b); //此時的b是 10 } fb(); //函數調用：開始新的域解析 console.log(b); //此時的b是 12 全局的 //==============================函數域 和上面的區別就是函數中的c沒有var var c=22; function fc(){ console.log(c,'fc中'); //此時的c是22 c=20; console.log(c,'fc中'); //此時的c是20 } console.log(c); //此時的c是22 fc(); //執行函數，改變了全局的c console.log(c); //此時的c是20 //==============================函數域 和上面的區別就是函數多了參數d var d=32; function fd(d){ //參數本質就是局部變量 function fd(var d) console.log(d,'fd中'); //此時的d是undefined d=20; //由內而外找，本身有就用本身的 console.log(d,'fd中'); //此時的d是20 } console.log(d); //此時的d是32 fd(); console.log(d); //此時的d是32 //==============================函數域 和上面的區別就是傳參了 var g=32; function fg(g){ console.log(g,'fg中'); //此時的g是32 g=20; console.log(g,'fg中'); //此時的g是20 } console.log(g); //此時的g是32 fg(g); //把全局的g當參數傳進去了 console.log(g); //此時的g是32 //==============================函數域 和上面的區別就是傳參了 var e=32; function fe(e){ console.log(e,'fe中'); //此時的e是5 e=20; //由於有參數，因此是局部變量，與var e=20同樣 console.log(e,'fe中'); //此時的e是20 } console.log(e); //此時的e是32 fe(5); console.log(e); //此時的e是32 //==============================遇到變量和函數重名了，留下函數（與變量在前在後沒有關係） var s=10; function foo(){ console.log(s); //function s(){console.log("ok")} function s(){console.log("ok")} console.log(s); //function s(){console.log("ok")} var s=5; //遇到表達式改變值 console.log(s); //5 } foo(); //==============================想要獲取函數內的值 方式1： var str=''; function fn(){ var a='1個億'; str=a; } fn(); console.log(str); //==============================想要獲取函數內的值 方式2： function fn2(){ var a='2個億'; fn3(a); } fn2(); function fn3(a){ console.log(a); } //==============================*****不能對下面的函數進行域解析，代碼寫規範 console.log(a99); console.log(fn99); if(true){ var a99=1; function fn99(){ alert(23323); } } //==============================*****隨便點擊那個按鈕，3個按鈕的顏色變黃 window.onload=function(){ var aBtn=document.getElementsByTagName("input"); for(var i=0;i<aBtn.length;i++){ aBtn[i].onclick=function(){ //aBtn[i].style.background="yellow"; //報錯了，此時的i是3，for循環執行速度很快的，是for執行完了之後你才能點的 for(var i=0;i<aBtn.length;i++){ aBtn[i].style.background="yellow"; } } } }; //============================== function bar(age) { console.log(age); var age = 99; var sex= 'male'; console.log(age); function age() { alert(123) }; console.log(age); return 100; } alert(result=bar(5)); //function age() {alert(123)} ,99,99 /* 一、域解析(涉及參數，局部變量聲明，函數聲明表達式)： 1-1 、分析參數，有一個參數，造成一個 AO.age=undefine; 1-2 、接收參數 AO.age=5; 1-3 、分析變量聲明，有一個 var age, 發現 AO 上面有一個 AO.age ，則不作任何處理 1-4 、分析變量聲明，有一個 var sex，造成一個 AO.sex=undefine; 1-5 、分析函數聲明，有一個 function age(){} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){}; 二、逐行解讀： 2-1 、執行第一個 console.log(age) 時，當前的 AO.age 是一個函數，因此輸出的一個函數 2-2 、這句 var age=99; 表達式改變了AO.age的屬性值， AO.age=99 ，因此在第二個輸出的age是 99; 2-3 、同理第三個輸出的是 99, 由於中間沒有改變 age 值的語句了。 */ </script> <input type="button" value="按鈕1"> <input type="button" value="按鈕2"> <input type="button" value="按鈕3"> </body> </html>
相關文章
- 1. Javascript---Javascript簡介
- 2. Javascript- Javascript學習
- 3. javascript --- javascript與DOM
- 4. [Javascript] Decorators in JavaScript
- 5. JavaScript（一）：JavaScript簡介
- 6. javascript[1] — 初識 javascript
- 7. 【JavaScript】——淺談js（JavaScript）
- 8. Web 開發技術- JavaScript- JavaScript - JavaScript -String
- 9. Javascript Objects - Javascript語法基礎 - Javascript核心
- 10. JavaScript基礎:javaScript基本語法,javaScript DOM,javaScript事件,javaScript綜合案例
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • ASP 子程序 - ASP 教程
- • YAML 入門教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Javascript---Javascript簡介
- 2. Javascript- Javascript學習
- 3. javascript --- javascript與DOM
- 4. [Javascript] Decorators in JavaScript
- 5. JavaScript（一）：JavaScript簡介
- 6. javascript[1] — 初識 javascript
- 7. 【JavaScript】——淺談js（JavaScript）
- 8. Web 開發技術- JavaScript- JavaScript - JavaScript -String
- 9. Javascript Objects - Javascript語法基礎 - Javascript核心
- 10. JavaScript基礎:javaScript基本語法,javaScript DOM,javaScript事件,javaScript綜合案例