JS的变量与保留字
一、变量
- 在js中使用var关键字 进行变量的声明,注意 分号作为一句代码的结束符
- 声明变量时 可以不用var. 如果不用var那么它是全局变量
- 命名方式：Pascal标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“ Var iMySalary = 1000000, sMyInfo = "hello";
二、保留字
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、
三、语言类型
-
静态类型语言
一种在编译期间就确定数据类型的语言。大多数静态类型语言是通过要求在使用任一变量之前声明其数据类型来保证这一点的。Java 和 C 是静态类型语言。 -
动态类型语言
一种在运行期间才去确定数据类型的语言，与静态类型相反。VBScript 和 Python 是动态类型的，因为它们确定一个变量的类型是在您第一次给它赋值的时候。 -
强类型语言
一种总是强制类型定义的语言。Java 和 Python 是强制类型定义的。您有一个整数，如果不明确地进行转换 ，不能将把它当成一个字符串去应用。 -
弱类型语言
一种类型可以被忽略的语言，与强类型相反。JS 是弱类型的。在JS中，可以将字符串 '12' 和整数 3 进行连接得到字符串'123'，然后可以把它看成整数 123 ，所有这些都不需要任何的显示转换。 所以说 Python 既是动态类型语言 (因为它不使用显示数据类型声明)，又是强类型语言 (因为只要一个变量获得了一个数据类型，它实际上就一直是这个类型了)。
基本数据类型
一、数值: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");
二、字符串:string
- + 如果加号两边都是数值，此时是数字的加号。否则就是连字符（用来连接字符串）。
- var name = String("hello");
- 常用方法： obj.trim() obj.charAt(index) obj.substring(start,end) obj.indexOf(char) obj.length
三、布尔：boolean
- var status = true;
- var status = false;
- var status = Boolen(1==1)
四、空对象：null
- 如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
- 值undefined 实际上是从值null 派生来的，因此 ECMAScript 把它们定义为相等的。
- undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象
五、未定义：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
流程控制
一、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>
|
二、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>
|
三、while循环
|
1
2
3
4
5
6
7
8
|
<script type=
"text/javascript"
>
// 例子：打印 1~9之间的数
var
i = 1;
// 1、初始化循环变量
while
(i<=9){
// 2、判断循环条件
console.log(i);
i = i+1;
// 3、更新循环条件
}
</script>
|
四、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>
|
五、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>
|
六、异常处理
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>
|
一、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>
|
二、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"
>
//创建方式
//方式1、字面量方式
var
colo = [
'red'
,
'green'
,
'yellow'
];
//方式2、使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象,构造函数与后面的面向对象有关系
var
colors =
new
Array();
//通过下标进行赋值
colors[0] =
'red'
;
colors[1] =
'green'
;
//方式3、
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>
|
三、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>
|
四、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>
|
五、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"
);
// 1、伪数组 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(
"----------------"
);
}
// 2、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>
|
六、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
/*
对象v1、v2，用instanceof操作符去检测，他们统统都是Object类型。
我们希望v1是Student类型的，而v2是Fruit类型的。为了实现这个目标，可以用自定义构造函数的方法来创建对象
构造函数和普通函数有什么区别:
1、对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
2、按照惯例，约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。
3、使用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
一、两种结构
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。
- JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
-
在JSON中，有两种结构：对象和数组。
- 对象
var packJSON= {"name":"alex", "password":"123"};
一个对象以“{”开始，“}”结束，“key/value”之间运用 “,”分隔。 - 数组
var packJSON = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
数组是值的有序集合。一个数组以“[”开始，“]”结束。值之间运用 “,”分隔。
- 对象
二、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 );
三、遍历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中，变量的作用域有全局作用域和局部作用域两种。
一、全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域
1、最外层函数和在最外层函数外面定义的变量拥有全局作用域
|
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>
|
2、所有末定义直接赋值的变量自动声明为拥有全局作用域
|
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>
|
3、所有window对象的属性拥有全局作用域
一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。
二、局部作用域(Local Scope)
- 一般只在固定的代码片段内可访问到，最常见的例如函数内部，所以也称为函数作用域
- 如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）
三、作用域链(Scope Chain)
- 在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。
- 函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。
- 其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，
- 这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
1、函数定义阶段：
- 当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。
- 在函数bar创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示：
2、函数调用阶段：
- 解析到函数调用时，即bar(5)，会生成一个active object的对象
- 该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。
- 新的作用域链如下图所示：
3、实例练习
<!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.οnlοad=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-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、逐行解读： 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>
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
