# Javascript对象
# 函数
# 定义函数
函数可作为封装模块被重复使用,在javascript中定义函数有三种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//创建函数方式1:
var fun1 = new Function("a", "b", "a++;return a+b;");
console.log(fun1(1, 2));
//创建函数方式2:
function fun2(a, b) {
return a - b;
}
console.log(fun2(1, 2))
//创建函数方式3:
var fun3 = function (a, b) {
return a * b;
}
console.log(fun3(2, 3));
console.log(fun3.length);
</script>
</head>
<body>
</body>
</html>
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
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
注意Javascript和类c语言不太一样的地方有:
- 方法定义是,形参的类型不用写,返回值类型也不写。
- 方法是一个对象,如果定义名称相同的方法,会覆盖。
- 在JS中,方法的调用只与方法的名称有关,和参数列表无关。
# 获取调参信息
Javascript获取函数参数,被调用者对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//获取所有参数
function add() {
var sum = 0;
console.log(arguments.callee);
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(1, 2, 3, 4, 5));
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
下列情况会跟我们设想的不一样,javascript中的函数名是对象,常常会变化,如果函数内部依赖于函数名就会出现错误:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fac(num) {
if (num <= 1) { //0的阶乘也是1
return 1;
}
else {
return num * fac(num - 1);
}
}
var trueFac = fac;
fac = function (num) {
console.log("call fac!");
return 0;
};
console.log(trueFac(10));
</script>
</head>
<body>
</body>
</html>
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
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
此时就需要使用callee:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fac(num) {
if (num <= 1) { //0的阶乘也是1
return 1;
}
else {
return num*arguments.callee(num-1);
}
}
var trueFac = fac;
fac = function (num) {
console.log("call fac!");
return 0;
};
console.log(trueFac(10));
</script>
</head>
<body>
</body>
</html>
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
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
此外还可以使用caller来查看函数的调用者:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function outer() {
inner();
}
function inner() {
console.log(inner.caller);
}
outer();
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 匿名函数
匿名函数就是没有函数名的函数,它可以:
- 赋值到一个变量里,变量相当于函数名。
- 利用事件去调用。
- 作为对象的方法调用。
- 作为其他函数的参数调用。
这里介绍一种好玩的匿名函数,自执行匿名函数,下面是几个常见的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
(function () {
console.log("1");
})();
(function (a) {
console.log(a);
})("hi");
(function (a) {
console.log(a);
return arguments.callee;
})("hello")("world");
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
下面是几个不常见的自执行匿名函数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
+function () { console.log("1"); }();
-function () { console.log("2"); }();
~function () { console.log("3"); }();
!function () { console.log("4"); }();
new function () { console.log("5"); }();
new function () { console.log("6"); };
void function () { console.log("7"); }();
(function () { console.log("8");}());
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Array
数组是使用单独的变量名来存储一系列值。
# 创建数组
基本有三种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr1 = new Array(1, 2, 3, 4);
console.log(arr1)
var arr2 = new Array(5);
console.log(arr2)
var arr3 = ["a", "b", "c", "d"];
console.log(arr3)
var arr4 = [1,"a",2,"hello",{name:"xie"}];
console.log(arr4)
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
注意:
- javascript中,数组元素的类型是可变的。
- javascript中,数组长度是可变的。
# 常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr = [1, "a", 2, "hello", { name: "xie" }];
console.log(arr.length)
console.log(arr.join("-"))
arr.push(456)
console.log(arr)
console.log(arr.pop())
console.log(arr)
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var b1 = new Boolean(1);
console.log(b1);
console.log(typeof(b1));//类型为对象
console.log(Boolean(0));
console.log(typeof(Boolean(0)));//为boolean基本类型
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Date
Date表示日期对象,它常用的操作如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"> </script>
<script>
var date = new Date();
document.write(date + "<br>");
//返回当前date对象对应的时间本地字符串格式
document.write(date.toLocaleString() + "<br>");
//返回当前时间到1970年1月1日零点的毫秒值差
document.write(date.getTime() + "<br>");
//返回ISO8601格式时间
document.write(moment().format("YYYY-MM-DDTHH:mm:ss.SSSZ"));
</script>
</head>
<body>
</body>
</html>
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
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
# Math
Math表示数学对象,它不用创建直接使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.write(Math.PI + "<br>");
//random():返回 0 ~ 1 之间的随机数。 含0不含1
document.write(Math.random() + "<br>");
//round(x):把数四舍五入为最接近的整数。
document.write(Math.round(3.14) + "<br>");
//ceil(x):对数进行向上舍入。
document.write(Math.ceil(3.14) + "<br>");
//floor(x):对数进行向下舍入。
document.write(Math.floor(3.14) + "<br>");
document.write(Math.PI + "<br>");
/**
* 取 1~100之间的随机整数
* 1. Math.random()产生随机数:范围 [0,1)小数
* 2. 乘以 100 --> [0,99.9999] 小数
* 3. 舍弃小数部分 :floor --> [0,99] 整数
* 4. +1 -->[0,99] 整数 [1,100]
*/
var number = Math.floor((Math.random() * 100)) + 1;
document.write(number + "<br>");
</script>
</head>
<body>
</body>
</html>
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
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
# RegExp
RegExp表示正则表达式对象,用来定义字符串的组成规则。
- 单个字符:[],如: [a] [ab] [a-zA-Z0-9_]
- 特殊符号代表特殊含义的单个字符:
- \d:单个数字字符 [0-9]
- \w:单个单词字符[a-zA-Z0-9_]
- 特殊符号代表特殊含义的单个字符:
- 量词符号:
- ?:表示出现0次或1次
- *:表示出现0次或多次
- +:出现1次或多次
- {m,n}:表示 m<= 数量 <= n
- m如果缺省: {,n}:最多n次
- n如果缺省:{m,} 最少m次
- 开始结束符号
- ^:开始
- $:结束
实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var reg = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
console.log(reg)
console.log(reg2)
var username = "zhangsan";
var flag = reg.test(username);
console.log(flag);
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Global
Global表示全局对象,这个Global中封装的方法不需要对象就可以直接调用。常用的操作有:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var str = "http://www.baidu.com?wd=木叶清风";
var encode = encodeURI(str);
document.write(encode + "<br>");
var s = decodeURI(encode);
document.write(s + "<br>");
var str1 = "http://www.baidu.com?wd=木叶清风";
var encode1 = encodeURIComponent(str1);
document.write(encode1 + "<br>");
var s1 = decodeURIComponent(encode1);
document.write(s1 + "<br>");
var str = "a234abc";
var number = parseInt(str);
var a = NaN;
//NaN参与的所有==判断都为false。
document.write((a == NaN) + "<br>");
document.write(isNaN(a));
var jscode = "alert('hello')";
eval(jscode);
</script>
</head>
<body>
</body>
</html>
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
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