JavaScript常用对象

第二章 JavaScript常用对象

一、数组对象

1. 创建数组

1.1 使用对象创建

  • 同类型有序数组创建：

    var arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[4] = 5;
arr[5] = 6;
arr[6] = 7;
arr[7] = 8;
arr[8] = 9;

  • 不同类型有序数组创建：

    var arr = new Array();
arr[0] = 1;
arr[1] = "2";
arr[2] = 3;
arr[3] = "4";
arr[4] = 5;
arr[5] = "6";
arr[6] = 7;
arr[7] = "8";
arr[8] = 9;

1.2 使用字面量创建

  • 同类型：

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  • 不同类型：

    var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

2. 遍历数组

for (var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

3. 数组属性

  • constructor属性演示：返回创建数组对象的原型函数

    var arr = [1, 2, 3, 4];
console.log(arr.constructor);//Array() {[native code]}

  • length属性演示：返回数组长度

    var arr = [1, 2, 3, 4];
console.log(arr.length);//4

4. 数组方法

  • push()方法：向数组末尾添加一个或多个元素，返回值为新数组的长度。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr);//['孙悟空', '猪八戒', '沙和尚', '唐僧', '蜘蛛精', '白骨精', '玉兔精']
console.log(result);//7

  • pop()方法：删除数组最后一个元素，返回值为被删除的元素。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.pop();
console.log(arr);//["孙悟空", "猪八戒"]
console.log(result);//沙和尚

  • unshift()方法：向数组开头添加一个或多个元素，返回值为新数组的长度。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.unshift("牛魔王", "二郎神");
console.log(arr);//["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙和尚"]
console.log(result);//5

  • shift()方法：删除数组的第一个元素，返回值为删除的元素。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.shift();
console.log(arr);//["猪八戒", "沙和尚"]
console.log(result);//孙悟空

  • forEach()方法：遍历数组

    forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以来定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：

    • 第一个参数：就是当前正在遍历的元素

    • 第二个参数：就是当前正在遍历的元素的索引

    • 第三个参数：就是正在遍历的数组

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
});

    image-20201017220618530

  • slice()方法：可以用来从数组中提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回。

    第一个参数：截取开始的位置的索引，包含开始索引

    第二个参数：截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

    var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
result = arr.slice(1, -2);
console.log(result);

    image-20201018090855439

  • splice()方法：可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回。

    参数：

    • 第一个参数：表示开始位置的索引
    • 第二个参数：表示要删除的元素数量
    • 第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边。
    var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);

image-20201018091447071

  • concat()方法：可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);

    image-20201018122134527

  • join()方法：可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用","作为连接符。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.join("@-@");
console.log(result);

    image-20201018122403396

  • reverse()方法：用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组。

    var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.reverse();
console.log(arr);

    image-20201018122520134

  • sort()方法：可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序。

    var arr = ["b", "c", "a"];
arr.sort();
console.log(arr);

    image-20201018123042465

    注意：即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。

    var arr = [1, 3, 2, 11, 5, 6];
arr.sort();
console.log(arr);

    image-20201018123124230

    我们可以自己来指定排序的规则，我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，浏览器会根据回调函数的返回值来决定元素的顺序，如下：

    • 如果返回一个大于0的值，则元素会交换位置

    • 如果返回一个小于0的值，则元素位置不变

    • 如果返回一个等于0的值，则认为两个元素相等，也不交换位置

    经过上边的规则，我们可以总结下：

    • 如果需要升序排列，则返回 a-b

    • 如果需要降序排列，则返回 b-a

      var arr = [1, 3, 2, 11, 5, 6];
arr.sort(function (a, b) {
    return a - b;
});
console.log(arr);//[ 1, 2, 3, 5, 6, 11 ]

二、函数对象

1. call()和apply()

call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行，在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递。

call()方法：

function fun(a, b){
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this);
}

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

fun(2, 3);
console.log("===========");
fun.call(obj, 2, 3);

image-20201018124051021

注意：默认fun()函数调用，this指向的是window对象，你可以使用call()调用函数，在调用的时候传入一个对象，这个对象就是this所指向的对象，也就是说，可以自己指定this的指向，然后从第二个参数开始，实参将会依次传递。

apply()方法：

function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this);
}

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

fun(2, 3);
console.log("===============");
fun.apply(obj, [2, 3]);

注意：默认fun()函数调用，this指向的是window对象，你可以使用apply()调用函数，在调用的时候传入一个对象，这个对象就是this所指向的对象，也就是说，可以自己指定this的指向，然后从第二个参数开始，需要制定一个实参数组进行参数传递

2. this指向

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

3. arguments参数

在调用函数时，浏览器每次都会传递进两个隐含的参数：

  1. 函数的上下文对象：this
  2. 封装实参的对象：arguments

arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度，在调用函数时，我们所传递的实参都会在arguments中保存，比如：arguments.length 可以用来获取实参的长度，我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦，例如：

  • arguments[0]：表示第一个实参

  • arguments[1]：表示第二个实参

  • …

它里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象。

function fun(a, b){
    //通过下标获取第一个参数
    console.log(arguments[0]);//Hello
    //通过下标获取第二个参数
    console.log(arguments[1]);//World
    //获取实参的个数
    console.log(arguments.length);//2
    //看看他的函数对象
    console.log(arguments.callee);//[Function fun]
    console.log(arguments.callee == fun);//true
}

fun("Hello", "World");

三、Date对象

在JavaScript中使用Date对象来表示一个时间，如果直接用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

var date = new Date();
console.log(date);

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

四、Math对象

Math和其它的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法。

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
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("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
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));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

五、String对象

1. 字符串属性

1.1 constructor属性：

返回创建字符串对象的原型函数。

var str = "Hello World!";
console.log(str.constructor);//String() {[native code]}

1.2 length属性：

可以用来获取字符串的长度。

var str = "Hello World!";
consloe.log(str.length);//12

2. 字符串方法

2.1 charAt()

根据索引获得指定位置的字符。

var str = "Hello,World!";
console.log(str.charAt(1));//e

2.2 charCodeAt()

获取指定位置字符的字符编码（Unicode编码）。

var str = "Hello,World!";
console.log(str.charCodeAt(1));//101

2.3 concat()

可以用来连接两个或多个字符串。

var str = "Hello,World!";
console.log(str.concat("你好，", "世界！"));

2.4 indexOf()

可以检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1，可以指定一个第二个参数，指定开始查找的位置。

var str = "Hello,World!";
console.log(str.indexOf("o"));
console.log(str.indexOf("o", 5));

2.5 lastIndexOf()

该方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找，也可以指定开始查找的位置。

var str = "Hello,World!";
console.log(str.lastIndexOf("o"));
console.log(str.lastIndexOf("o", 5));

2.6 slice()

可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回

参数：

  • 第一个参数：开始位置的索引（包括开始位置）
  • 第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的
var str = "Hello,World!";
var result = str.slice(1, 4);
console.log(result);
result = str.slice(1);
console.log(result);
result = str.slice(1, -1);
console.log(result);

2.7 substring()

可以用来截取一个字符串，它和slice()类似

参数：

  • 第一个参数：开始截取位置的索引（包括开始位置）
  • 第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的。

注意：不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0，而且它还自动调整参数的位置，如果第二个参数小于第一个，则自动交换。

var str = "Hello,World!";
var result = str.substring(1, 4);
console.log(result);
result = str.substring(1);
console.log(result);
result = str.substring(1, -1);
console.log(result);

2.8 substr()

用来截取字符串

参数：

  • 第一个参数：截取开始位置的索引
  • 第二个参数：截取的长度
var str = "Hello,World!";
var result = str.substr(6, 6);
console.log(result);

2.9 split()

可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组。

var str = "Hello,World!";
var result = str.split(",");
console.log(result);

2.10 toUpperCase()

将一个字符串转换为大写并返回。

var str = "Hello,World!";
var result = str.toUpperCase();
console.log(result);

2.11 toLowerCase()

将一个字符串转换为小写并返回。

var str = "Hello,World!";
var result = str.toLowerCase();
console.log(result);

六、RegExp对象（正则对象）

1. 概述

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来。

使用typeof检查正则对象，会返回object。

2. 创建正则对象

2.1 适用对象创建

语法格式：var 变量名 = new RegExp("正则表达式","匹配模式");

匹配模式：

  • i：忽略大小写
  • g：全局匹配模式
  • ig：忽略大小写且全局匹配模式

案例：

//这个正则表达式可以来检查一个字符串中是否含有a
var reg = new RegExp("ab" ,"1");
var str = "Abc";
var result = reg.test(str);
console.log(result);//true

2.2 使用字面量创建

语法格式：var 变量名 = /正则表达式/匹配模式;

匹配模式：

  • i：忽略大小写
  • g：全局匹配模式
  • m：执行多行匹配

案例：

var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);

3. 正则进阶

需求信息：创建一个正则表达式，检查一个字符串中是否有a或者b

语法格式：使用|表示或者的意思

var reg = /a|b|c/i;
var str = "sadgaiwudoada  fgr";
var result = reg.test(str);
console.log(result);//true

试想一下，如果我们现在要是想要检查一个字符串是否含有小写字母，那我们是不是可以reg = /a|b|c|d|e|f|g ... /;这么写，但是你会发现，好啰嗦啊，怎么这么麻烦呢，有没有一种更简单的方式，答案是肯定的。

需求信息：创建一个正则表达式，检查一个字符串中是否有字母

语法格式：[]里的内容也是或的关系

var reg = /[A-z]/;
var str = "枫红染秋123";
var result = reg.test(str);
console.log(result);//false

需求信息：创建一个正则表达式，检查一个字符串中是否含有 abc 或 adc 或 aec。

var reg = /a[bde]c/;
var str = "dasFFwasadc";
var result = reg.test(str);
console.log(result);//true

那现在我们已经学会了判断是否包含，那要是判断除了某些字符序列该咋整，只需要这么写[^字符序列]

常见组合：

  • [^a-z]：除了任意小写字母
  • [^A-Z]：除了任意大写字母
  • [^A-z]：除了任意字母
  • [^0-9]：除了任意数字

需求信息：创建一个正则表达式，检查一个字符串中是否除了数字还有其它字母。

var reg = /[^0-9]/;
var str = "654981689816";
var result = reg.test(str);
console.log(result);//false

4. 正则方法

这些正则方法其实都是字符串的方法，但是它的参数需要传递正则表达式，在这里，我就先称为正则方法。

4.1 split()方法

该方法可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串，这个方法即使不指定全局匹配，也会全都插分。

var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);

4.2 search()方法

该方法可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用。

var str = "hello abc hello aec afc";
var result = str.search(/a[bef]c/);
console.log(result);

4.3 match()方法

该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result);

4.4 replace()方法

该方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部。

参数：

  • 第一个参数：被替换的内容，可以接受一个正则表达式作为参数
  • 第二个参数：新的内容
var str = "1a2a3a4a5e6f7A8B9C";
var result = str.replace(/[a-z]/ig, "@_@");
console.log(result);

5. 正则量词

通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用，如果有多个内容可以使用( )括起来，常见量词如下：

  • {n}：正好出现n次
  • {m,}：出现m次及以上
  • {m, n}：出现m-n次
  • +：至少一个，相当于
  • *：0个或多个，相当于
  • ？：0个或1个，相当于
var str = "abbc";

reg = /(ab){3}/;
console.log(reg.test(str));//false
console.log("===============");
reg = /b{3}/;
console.log(reg.test(str));//false
console.log("===============");
reg = /ab{1,3}c/;
console.log(reg.test(str));//true
console.log("===============");
reg = /ab{3,}c/;
console.log(reg.test(str));//false
console.log("===============");
reg = /ab+c/;
console.log(reg.test(str));//true
console.log("===============");
reg = /ab*c/;
console.log(reg.test(str));//true
console.log("===============");
reg = /ab?c/;
console.log(reg.test(str));//false
console.log("===============");

6. 正则高阶

如果我们要检查或者说判断是否以某个字符或者字符序列开头或者结尾就会使用^和$。

  • ^ ：表示开头，注意它在[^字符序列]表达的意思不一样
  • $ ：表示结尾

需求描述：检查一个字符串中是否以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 child  ";
var reg = /^\s*|\s*$/g;//提取字符串中开头空格或结尾空格的部分
console.log(str);
str = str.replace(reg, "");//将reg所代表的内容删除
console.log(str);

需求描述：创建一个正则表达式，检查一个字符串中是否含有单词child

var str = "hello child";
var reg = /\bchild\b/;
console.log(reg.test(str));//true

7. 正则案例

7.1 检查手机号

var phoneStr = "18949511261";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));

7.2 检查邮箱

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));
posted @   枫红染秋  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript基础语法
· 前端 - JS常用对象与方法
· Js内建对象
· JavaScript 个人学习笔记
· 前端基础之JavaScript对象
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示