Js 常见对象

🍹 JavaScript常见对象包括数组、正则表达式等，用于存储和操作不同类型的数据，构建网页的交互功能和动态效果。

1 作用域

  • 作用域
    • 指一个变量的作用范围，在Js中共有两种作用域，全局作用域、函数作用域。
    • 变量的声明提前
      • 使用var声明的变量，会在所有代码执行前被声明，但不赋值。
      • 如果声明变量时，不使用var关键字，则变量不会被声明提前。
    • 函数的声明提前
      • 函数声明形式创建的函数，会在所有代码执行前被创建，所以可在声明前调用。
      • 使用函数表达式创建的函数，不会被声明提前，因此不可以在声明前调用函数。
    • 全局作用域
      • 直接编写在script标签中的Js代码，都在全局作用域中。
      • 全局作用域在页面打开时就创建，在页面关闭后就销毁。
      • 全局作用域中有全局对象window，代表浏览器窗口，由浏览器创建可直接使用。
        • 创建的变量都会作为window对象的属性保存。
        • 创建的函数都会作为window对象的方法保存。
      • 全局作用域中的变量都是全局变量，在页面的任意部分都可访问到。
    • 函数作用域
      • 调用函数时，创建函数作用域，函数执行完毕后，函数作用域销毁。
      • 每调用一次函数就会创建一个新的函数作用域，它们之间互相独立。
        • 函数作用域中可以访问到全局作用域的变量。
        • 全局作用域中无法访问到函数作用域的变量。
        • 函数中要访问全局变量可以使用window对象。
    • 作用域链
      • 在函数作用域操作一个变量时，会先在自身作用域中寻找。
      • 若有直接使用，若没有则向上级作用域寻找，直到找到全局作用域。
      • 如果全局作用域中依然没有找到变量，那么会报错ReferenceError。
      • 方向是从下向上的(从内到外)，查找变量时就是沿着作用域链来查找的。
      • 一个变量的查找规则
        • 步骤一：在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入步骤二。
        • 步骤二：在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入步骤三。
        • 步骤三：再次执行步骤二，直到全局作用域，如果还是没有找到，就抛出ReferenceError异常。

2 常见对象

  • 常见对象
    • 数组对象：数组的存储性能比普通对象好，使用typeof检查一个数组对象时，会返回object。
    • 函数对象：JavaScript中函数是一等公民，每个函数都是一Function对象，拥有属性和方法。
    • Date对象：表示时间，直接使用构造函数创建一个Date对象，会封装为当前代码执行的时间。
    • Math对象：Math非构造函数，属于工具类不用创建对象，封装了数学运算相关的属性和方法。
    • String对象：String对象可用来表示文本数据，在JavaScript中提供了许多方法来操作字符串。
    • RegExp对象：正则表达式用于定义一些字符串规则，使用typeof检查正则对象，会返回object。

3 数组对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    // 使用对象创建同类型的有序数组
    var arr1 = new Array();
    arr1[0] = "刘一";
    arr1[1] = "陈二";
    arr1[2] = "张三";

    // 使用对象创建不同类型的有序数组
    var arr2 = new Array();
    arr2[0] = 1;
    arr2[1] = "2";
    arr2[2] = 3;

    // 使用字面量创建同类型的有序数组
    var arr3 = [1, 2, 3, 4, 5];

    // 使用字面量创建不同类型的有序数组
    var arr4 = [1, "2", 3, "4", 5];

    // 遍历数组
    for(var i=0; i<arr1.length; i++) {
        console.log(arr1[i]);
    }
</script>

3-1 数组属性

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    // 使用对象创建同类型的有序数组
    var arr = new Array();
    arr[0] = "刘一";
    arr[1] = "陈二";
    arr[2] = "张三";

    // 数组属性：constructor属性，返回创建数组对象的原型函数
    console.log("constructor属性：返回创建数组对象的原型函数！\n", arr.constructor);

    // 数组属性：length属性，设置或返回数组元素的个数
    console.log("length属性：设置或返回数组元素的个数！总共", arr.length, "个元素。");
</script>

3-2 数组方法

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>
    // 使用对象创建同类型的有序数组
    var arr = new Array();
    arr[0] = "张三";
    arr[1] = "李四";
    arr[2] = "王五";
    arr[3] = "赵六";

    // 数组方法：push()方法，向数组的末尾添加一个或多个元素，并返回数组新长度
    var aaa = arr.push("孙七", "周八");
    console.log("arr：", arr);
    console.log("aaa：", aaa);

    // 数组方法：pop()方法，删除数组的最后一个元素，并返回被删除的元素
    var bbb = arr.pop();
    console.log("arr：", arr);
    console.log("bbb：", bbb);

    // 数组方法：unshift()方法，向数组开头添加一个或多个元素，并返回新的数组长度
    arr.pop();
    var ccc = arr.unshift("刘一", "陈二");
    console.log("arr：", arr);
    console.log("ccc：", ccc);

    // 数组方法：splice()方法，删除数组中的指定元素，会影响原数组
    // 会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
    // 第一个参数表示开始位置的索引，第二个参数表示要删除的元素数量
    var ddd = arr.splice(4, 1);
    console.log("arr：", arr);
    console.log("ddd：", ddd);
    // 第三个参数及以后，可传递一些新元素，这些元素将会自动插入到开始位置索引前边
    var eee = arr.splice(4, 0, "王五");
    console.log("arr：", arr);
    console.log("eee：", eee);

    // 数组方法：forEach()方法，遍历数组，只支持IE8以上的浏览器
    arr.forEach(function(value, index, obj) {
        console.log("fff：", value + " *** " + index + " *** " + obj);
    });

    // 数组方法：shift()方法，删除数组的第一个元素，并返回被删除的元素
    var ggg = arr.shift();
    console.log("arr：", arr);
    console.log("ggg：", ggg);

    // 数组方法：slice()方法，从数组提取指定元素
    // 不改变元素数组，而是将截取到的元素封装到一个新数组中返回
    // 第一个参数：截取开始的位置的索引，包含开始索引
    // 第二个参数：截取结束的位置的索引，不包含结束索引
    var hhh = arr.slice(3, 4);
    console.log("arr：", arr);
    console.log("hhh：", hhh);
    // 索引为负值，-1为倒数第一个，-2倒数第二个，以此类推
    var iii = arr.slice(3, -1);
    console.log("arr：", arr);
    console.log("iii：", iii);

    // 数组方法：concat()方法，连接两个或多个数组，并返回新数组，不会对原数组产生影响
    var jjj = arr.concat("孙七", "周八");
    console.log("jjj：", jjj);

    // 数组方法：join()方法，将数组转换为一个字符串，不会对原数组产生影响
    var kkk = arr.join(" ***@--@*** ");
    console.log("kkk：", kkk);

    // 数组方法：reverse()方法，反转数组，会直接修改原数组
    var lll = arr.reverse();
    console.log("lll：", lll);

    // 数组方法：sort()方法，对数组中的元素排序，会影响原数组，默认按Unicode编码排序
    var mmm = arr.sort();
    console.log("mmm：", mmm);
    // 纯数字按Unicode编码排序，可能会得到错误的结果
    var nnn = [1, 3, 2, 11, 5, 6, 12, 23, 13];
    var ooo = nnn.sort();
    console.log("ooo：", ooo);
    // 在sort()添加一个回调函数，来指定排序规则，回调函数中需定义两个形参
    // 浏览器会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定
    // 但可以肯定在数组中a一定在b前，浏览器会根据回调函数的返回值来决定元素的顺序
    nnn.sort(function (a, b) {
        return a - b;
    });
    console.log("nnn：", nnn);
</script>

4 函数对象

  • 函数对象
    • 以函数的形式调用时，this永远都是window。
    • 以方法的形式调用时，this是调用方法的那个对象。
    • 以构造函数的形式调用时，this是新创建的那个对象。
    • 使用call和apply调用时，this是传入的那个指定对象。

4-1 call()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    function fun(a, b) {
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("f = " + this);
    }

    var obj = {
        name: "obj",
        sayName: function () {
            console.log(this.name);
        }
    };

    // 默认fun()函数调用，this指向的是window对象
    fun(2, 3);
    console.log("*******************");

    // 使用call()调用函数，在调用时传入一个对象，这个对象就是this所指向的对象
    // 也就是说可以自己指定this的指向，然后从第二个参数开始，实参将会依次传递
    fun.call(obj, 2, 3);
</script>

4-2 apply()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    function fun(a, b) {
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("f = " + this);
    }

    var obj = {
        name: "obj",
        sayName: function () {
            console.log(this.name);
        }
    };

    // 默认fun()函数调用，this指向的是window对象
    fun(2, 3);
    console.log("*******************");

    // 使用apply()调用函数，在调用时传入一个对象，这个对象就是this所指向的对象
    // 也就是说可以自己指定this的指向，然后从第二个参数开始，需制定一个实参数组传递参数
    fun.apply(obj, [2, 3]);
</script>

4-3 arguments

  • arguments
    • 调用函数时，浏览器每次都会传递进两个隐含的参数。
      • 函数的上下文对象：this。
      • 封装实参的对象：arguments。
    • arguments是一个类数组对象，可以通过索引来操作数据，也可以获取长度。
    • 调用函数时所传递的实参都会在arguments中保存，例如arguments.length。
    • 可用来获取实参的长度，即使不定义形参，也可通过arguments使用实参，只是比较麻烦。
    • arguments有个属性叫callee，这个属性对应一个函数对象，就是当前正在指向的函数对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    function fun(a, b) {
        // 通过下标获取第一个参数
        console.log(arguments[0]);
        // 通过下标获取第二个参数
        console.log(arguments[1]);
        // 获取实参的个数
        console.log("实参个数：", arguments.length);
        // 查看arguments的函数对象
        console.log(arguments.callee);
        console.log("是否等于fun函数：", arguments.callee == fun);
    }

    fun("Hello", "World");
</script>

5 Date对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    var date = new Date();
    console.log(date);

    // 获取当前日期对象的年份(四位数字年份)
    console.log("年：", date.getFullYear());
    // 获取当前日期对象的月份(0 ~ 11)
    console.log("月：", date.getMonth());
    // 获取当前日期对象的日数(1 ~ 31)
    console.log("日：", date.getDate());
    // 获取当前日期对象的小时(0 ~ 23)
    console.log("时：", date.getHours());
    // 获取当前日期对象的分钟(0 ~ 59)
    console.log("分：", date.getMinutes());
    // 获取当前日期对象的秒钟(0 ~ 59)
    console.log("秒：", date.getSeconds());
    // 获取当前日期对象的毫秒(0 ~ 999)
    console.log("毫秒：", date.getMilliseconds());
</script>

6 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>
    // 正数
    // 可以用来计算一个数的绝对值
    console.log(Math.abs(1));
    // 可以对一个数进行向上取整，小数位只有有值就自动进1
    console.log(Math.ceil(1.1));
    // 可以对一个数进行向下取整，小数部分会被舍掉
    console.log(Math.floor(1.99));
    // 可以对一个数进行四舍五入取整
    console.log(Math.round(1.4));
    console.log("**********************")

    // 随机数
    // Math.random()：可以用来生成一个0-1之间的随机数
    // 生成一个0-x之间的随机数：Math.round(Math.random()*x)
    // 生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
    console.log(Math.round(Math.random() * 10));
    console.log(Math.round(Math.random() * (10 - 1) + 1));
    console.log("**********************")

    // 负数
    // 可以用来计算一个数的绝对值
    console.log(Math.abs(-1));
    // 可以对一个数进行向上取整，小数部分会被舍掉
    console.log(Math.ceil(-1.1));
    // 可以对一个数进行向下取整，小数位只有有值就自动进1
    console.log(Math.floor(-1.99));
    // 可以对一个数进行四舍五入取整
    console.log(Math.round(-1.4));
    console.log("**********************")

    // 数学运算
    // Math.sqrt(x)：返回x的平方根
    console.log(Math.sqrt(100));
    // Math.pow(x,y)：返回x的y次幂
    console.log(Math.pow(12, 3));
    console.log("**********************")

    // 固定值
    console.log("E  = " + Math.E);
    console.log("PI = " + Math.PI);
</script>

7 String对象

  • String对象
    • JavaScript提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象。
      • String()：可以将基本数据类型字符串转换为String对象。
      • Number()：可以将基本数据类型的数字转换为Number对象。
      • Boolean()：可以将基本数据类型的布尔值转为Boolean对象。
    • 实际应用中不会使用基本数据类型的对象，若使用，在做比较时可能带来不可预期的结果。

7-1 字符串属性

1
2
3
4
5
6
7
8
9
<script>
    // constructor属性：返回创建字符串对象的原型函数
    var str = "Hello, World!";
    console.log("constructor属性：返回创建字符串对象的原型函数！\n", str.constructor);

    // length属性：用来获取字符串的长度
    var str = "Hello, World!";
    console.log("length属性：用来获取字符串的长度！长度为", str.length, "个字符。");
</script>

7-2 字符串方法

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
<script>
    // charAt()方法：根据索引获取指定位置的字符
    var str = "Hello, World!";
    console.log(str.charAt(1));

    // charCodeAt()方法：获取指定位置字符的Unicode字符编码
    console.log(str.charCodeAt(1));

    // concat()方法：连接两个或多个字符串
    console.log(str.concat(" My name is ", "Stitch."));

    // indexof()方法：检索一个字符串中是否含有指定内容
    // 如果字符串中含有指定内容，则返回第一次出现的索引
    // 如果没有找到指定内容，则返回-1，可指定第二个参数，表示开始查找的位置
    console.log(str.indexOf("o"));
    console.log(str.indexOf("o", 5));

    // lastIndexOf()方法：用法和indexOf()一样，indexOf()是从前往后找
    // 而lastIndexOf()是从后往前找，也可以指定开始查找的位置
    console.log(str.lastIndexOf("o"));
    console.log(str.lastIndexOf("o", 5));

    // slice()方法：从字符串中截取指定内容，不影响原字符串，返回截取到的内容
    // 第一个参数：开始位置的索引，包括开始位置
    // 第二个参数：结束位置的索引，不包括结束位置，省略会截取后边所有的
    aaa = str.slice(1, 4);
    console.log("aaa：", aaa);
    bbb = str.slice(1, -1);
    console.log("bbb：", bbb);
    ccc = str.slice(1);
    console.log("ccc：", ccc);

    // substring()方法：和slice()类似，用来截取一个字符串
    ddd = str.substring(1, -1);
    console.log("ddd：", ddd);
    eee = str.substring(1, 4);
    console.log("eee：", eee);
    fff = str.substring(1);
    console.log("fff：", fff);

    // substr()方法：用来截取字符串，参数一截取开始位置在索引，参数二截取长度
    console.log("ggg：", str.substr(7, 6));

    // toLowerCase()方法：将一个字符串转换为小写并返回
    console.log("hhh：", str.toLowerCase());

    // toUpperCase()方法：将一个字符串转换为大写并返回
    console.log("iii：", str.toUpperCase());

    // split()方法：将一个字符串拆分为一个数组
    console.log("jjj：", str.split(","));
</script>

8 RegExp对象

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
<script>
    // 使用对象创建正则对象
    var reg = new RegExp("ab", "i");
    var str = "Abc";
    var result = reg.test(str);
    console.log(result);

    // 使用字面量创建正则对象
    var reg = /a/i;
    var str = "Abc";
    var result = reg.test(str);
    console.log(result);

    // 检查一个字符串中是否含有a
    var reg = /a|b|c/;
    var str = "Abc";
    var result = reg.test(str);
    console.log(result);

    // 检查一个字符串中是否含有a
    // [a-z]任意小写字母，[A-z]任意字母
    // [A-Z]任意大写字母，[0-9]任意数字
    var reg = /[A-z]/;
    var str = "Abc";
    var result = reg.test(str);
    console.log(result);

    // 检查一个字符串中是否含有abc或adc或aec
    var reg = /a[bde]c/;
    var str = "abc123";
    var result = reg.test(str);
    console.log(result);

    // 检查一个字符串中是否除了数字还有其它字母
    // [^a-z]除任意小写字母，[^A-z]除任意字母
    // [^A-Z]除任意大写字母，[^0-9]除任意数字
    var reg = /[^0-9]/;
    var str = "0123456789";
    var result = reg.test(str);
    console.log(result);
</script>

8-1 正则方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    // search()方法：搜索字符串中是否含有指定内容，只会查找第一个
    var str = "hello abc hello aec afc";
    var result = str.search(/a[bef]c/);
    console.log(result);
    
    // split()方法：将一个字符串拆分为一个数组
    var str = "1a2b3c4d5e6f7";
    var result = str.split(/[A-z]/);
    console.log(result);

    // match()方法：从字符串中将符合条件的内容提取出来
    // 默认情况下只会找到第一个符合要求的内容，找到即停止
    // 可设置全局匹配模式，match()会将匹配到的内容封装到数组中返回
    var str = "1a2a3a45e6f7A89C";
    var result = str.match(/[a-z]/ig);
    console.log(result);

    // replace()方法：将指定内容替换为新内容，默认只替换第一个，但可设置全局匹配替换所有
    var str = "1a123a3a124a5e126f127A128B129C";
    var result = str.replace(/[a-z]/gi, "@_@");
    console.log(result);
</script>

8-2 正则量词

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
<script>
    // {n}正好出现n次，{m,}出现m次及以上，{m, n}出现m-n次
    // + >>> 至少一个，相当于{1,}
    // * >>> 零个或多个，相当于{0,}
    // ? >>> 零个或一个，相当于{0,1}

    var str = "abbbc";

    reg = /(ab){1}/;
    console.log(reg.test(str));

    reg = /b{2}/;
    console.log(reg.test(str));

    reg = /ab+c/;
    console.log(reg.test(str));

    reg = /ab*c/;
    console.log(reg.test(str));

    reg = /ab{2, 1}c/;
    console.log(reg.test(str));

    reg = /ab{5,}c/;
    console.log(reg.test(str));

    reg = /ab?c/;
    console.log(reg.test(str));
</script>

8-3 正则高阶

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
<script>
    // ^ >>> 表示开头，注意在[^字符序列]表达的含义不同
    // $ >>> 表示结尾

    // 检查一个字符串中是否以a开头
    var str = "abcabca";
    var reg = /^a/;
    console.log(reg.test(str));

    // 检查一个字符串中是否以a结尾
    var str = "abcabca";
    var reg = /a$/;
    console.log(reg.test(str));

    // 转义
    var reg1 = /\./;
    var reg2 = /\\/;
    var reg3 = new RegExp("\\.");
    var reg4 = new RegExp("\\\\");

    // \w >>> 任意字母、数字、_，相当于[A-z0-9_]
    // \W >>> 除了字母、数字、_，相当于[^A-z0-9_]
    // \d >>> 任意的数字，相当于[0-9]
    // \D >>> 除任意数字，相当于[^0-9]
    // \s >>> 空格
    // \S >>> 除了空格
    // \b >>> 单词边界
    // \B >>> 除了单词边界

    // 去除字符串中的前后空格
    var str = "  hello world!  "
    var reg = /^\s*|\s*$/g;
    str = str.replace(reg, "");
    console.log(str);

    // 检查一个字符串中是否含有单词world
    var reg = /\bworld\b/;
    console.log("包含否：", reg.test(str));

    // 检查手机号
    var phoneStr = "15131494600";
    var phoneReg = /^1[3-9][0-9]{9}$/;
    console.log("手机号：", phoneReg.test(phoneStr));

    // 检查邮箱号
    var emailStr = "abc.def@163.com";
    var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
    console.log("邮箱号：", emailReg.test(emailStr));
</script>
Web
#Web #数组对象 #函数对象 #Date对象 #RegExp对象
Js 常见对象
https://stitch-top.github.io/2024/08/08/web/web01-javascript/javascript02-js-chang-jian-dui-xiang/
作者
Dr.626
发布于
2024年8月8日 21:50:50
许可协议