编程学习,C++,Python,Java,C#,Unity3d,Unreal4,UE4,技术日志

# 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

注意Javascript和类c语言不太一样的地方有：

  1. 方法定义是，形参的类型不用写，返回值类型也不写。
  2. 方法是一个对象，如果定义名称相同的方法，会覆盖。
  3. 在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

下列情况会跟我们设想的不一样，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

此时就需要使用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

此外还可以使用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

# 匿名函数

匿名函数就是没有函数名的函数，它可以：

  1. 赋值到一个变量里，变量相当于函数名。
  2. 利用事件去调用。
  3. 作为对象的方法调用。
  4. 作为其他函数的参数调用。

这里介绍一种好玩的匿名函数，自执行匿名函数，下面是几个常见的：

<!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

下面是几个不常见的自执行匿名函数：

<!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

# 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

注意：

  1. javascript中，数组元素的类型是可变的。
  2. 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

# 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

# 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

# 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

# RegExp

RegExp表示正则表达式对象，用来定义字符串的组成规则。

  1. 单个字符:[]，如： [a] [ab] [a-zA-Z0-9_]
    • 特殊符号代表特殊含义的单个字符:
      • \d:单个数字字符 [0-9]
      • \w:单个单词字符[a-zA-Z0-9_]
  2. 量词符号：
    • ?：表示出现0次或1次
    • *：表示出现0次或多次
    • +：出现1次或多次
    • {m,n}:表示 m<= 数量 <= n
      • m如果缺省： {,n}:最多n次
      • n如果缺省：{m,} 最少m次
  3. 开始结束符号
    • ^:开始
    • $:结束

实例如下：

<!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

# 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

← Javascript基础5-BOM相关 →