JavaScript笔记三-JavaScript常用对象

1、数字对象（Number）

1.1 、属性

属性	描述
Number.MAX_VALUE	JavaScript 中所能表示的最大值
Number.MIN_VALUE	JavaScript 中所能表示的最小值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷，在溢出时返回
Number.POSITIVE_INFINITY	正无穷，在溢出时返回
Number.EPSILON	表示 1 与 Number 所能表示的大于 1 的最小浮点数之间的差
Number.MIN_SAFE_INTEGER	最小安全整数，即 -9007199254740991
Number.MAX_SAFE_INTEGER	最大安全整数，即 9007199254740991

console.log(Number.MAX_VALUE);//1.7976931348623157e+308
console.log(Number.MIN_VALUE);//5e-324
console.log(Number.NaN);//NaN
console.log(Number.NEGATIVE_INFINITY);//-Infinity
console.log(Number.POSITIVE_INFINITY);//Infinity
console.log(Number.EPSILON);//2.220446049250313e-16
console.log(Number.MAX_SAFE_INTEGER);//9007199254740991
console.log(Number.MIN_SAFE_INTEGER);//-9007199254740991

1.2、方法

方法	描述
Number.parseFloat()	将字符串转换成浮点数，和全局方法 parseFloat() 作用相同
Number.parseInt()	将字符串转换成整型数字，和全局方法 parseInt() 作用相同
Number.isFinite()	判断 Number 对象是否为有穷数
Number.isInteger()	判断 Number 对象是否为整数
Number.isNaN()	判断 Number 对象是否为 NaN 类型
Number.isSafeInteger()	判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数
Number.toString()	把 Number 对象转换为字符串，使用指定的基数
Number.toLocaleString()	把 Number 对象转换为字符串，使用本地数字格式顺序
Number.toFixed()	把 Number 对象转换为字符串，结果的小数点后有指定位数的数字
Number.toExponential()	把 Number 对象的值转换为指数计数法
Number.toPrecision()	把 Number 对象格式化为指定的长度
Number.valueOf()	返回一个 Number 对象的基本数字值

var a=new Number(125.246);
console.log(Number.parseFloat(a));// 125.246
console.log(Number.parseInt(a));//520
console.log(Number.isFinite(a));// false
console.log(Number.isInteger(a));//false
console.log(Number.isNaN(a));//false
console.log(Number.isSafeInteger(a));//false
console.log(Number.toString(a));//
console.log(Number.toLocaleString(a));
console.log(Number.valueOf(a));

2、数组对象

2.1、概述

数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。

数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，此处不用纠结，我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。

使用typeof检查一个数组对象时，会返回object。

2.2、创建数组

2.2.1、使用对象创建

//同类型有序数组创建
var array1 = new Array();
array1[0] = 1;
array1[1] = 2;
array1[2] = 3;
array1[3] = 4;
array1[4] = 5;
console.log(array1);
//不同类型有序数组创建
var array2 = new Array();
array2[0] = 1;
array2[1] = "2";
array2[2] = 3;
array2[3] = "4";
array2[4] = 5;
console.log(array2);

2.2.2、使用字面量创建

//同类型有序数组创建
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr1);
//不同类型有序数组创建
var arr2 = [1, "2", 3, "4", 5, "6", 7, "8", 9, "0"];
console.log(arr2);

2.3、遍历数组

for (i = 0; i < arr1.length; i++) {
    console.log(arr1[i]);
}
//使用for of遍历数组
for (var i of arr1) {
    console.log(i+":"+i);
}

2.4、数组属性

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

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

length属性演示：设置或返回数组元素的个数

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

2.5、数组方法

push()方法：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

var arr=[1,2,3,4,5];
var num=arr.push(6,7);
console.log(arr);// [1,2,3,4,5,6,7]
console.log(num);// 7

pop()方法：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

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

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

var arr=[1,2,3,4,5];
var num=arr.unshift("a","b",true);
console.log(arr);// [ 'a', 'b', true, 1, 2, 3, 4, 5 ]
console.log(num);// 8

shift()方法：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

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

forEach()方法：该方法可以用来遍历数组

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

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

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

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

var arr = [1, 2, 3, 4, 5];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
})

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

参数：

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

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

注意：索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。

        var arr = [1, 2, 3, 4, 5];
        console.log(arr.slice(0,2));
        console.log(arr.slice(2));
        console.log(arr.slice(-5,4));

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

参数：

第一个参数：表示开始位置的索引

第二个参数：表示要删除的元素数量

第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

        var arr = [1, 2, 3, 4, 5];
        var result1=arr.splice(2,2,"A");
        console.log(arr);
        console.log(result1);

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

        var arr1 = [1, 2, 3, 4, 5];
        var arr2=["A","B","C"];
        var arr3=["一","二"];
        console.log(arr1.concat(arr2,arr3,"壹","贰"));

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

        var arr1 = [1, 2, 3, 4, 5];
        var arr2=["A","B","C"];
        var arr3=["一","二"];
        console.log(arr1.join("##"));

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

        var arr1 = [1, 2, 3, 4, 5];
        arr1.reverse();
        console.log(arr1);

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

        var arr1 = [1, 7, 3, 5, 4];
        arr1.sort();
        console.log(arr1);

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

        var arr1 = [1, 7, 3, 15, 4];
        arr1.sort();
        console.log(arr1);

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

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

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

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

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

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

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

        var arr1 = [1, 7, 3, 15, 4];
        arr1.sort(function(a,b){
            return a-b;
        });
        console.log(arr1);

3、函数对象

3.1、call()和apply()

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

call()方法

var name="外部";
function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this.name);
}
var obj={
    name:"obj",
    sayName:function(){
        console.log(this.name);
    }
}
fun(6,8);
fun.call(obj,7,4);

apply()方法

var name="外部";
function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this.name);
}
var obj={
    name:"obj",
    sayName:function(){
        console.log(this.name);
    }
}
fun(6,8);
fun.apply(obj,[2,3]);

3.2、this指向

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

3.3、arguments参数

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

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

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

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

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

...

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

var fun=function(a,b){
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments.length);
    console.log(arguments.callee);
    console.log(arguments.callee==fun);
}
fun(1,2);

4、Date对象

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

var time1 = new Date();
var time2 = new Date(1517356800000);
var time3 = new Date("2018/12/25 12:13:14");
var time4 = new Date(2020, 9, 12, 15, 16, 17);
document.write(time1 + "<br>");     // 输出：Fri Jul 23 2021 13:41:39 GMT+0800 (中国标准时间)
document.write(time2 + "<br>");     // 输出：Wed Jan 31 2018 08:00:00 GMT+0800 (中国标准时间)
document.write(time3 + "<br>");     // 输出：Tue Dec 25 2018 12:13:14 GMT+0800 (中国标准时间)
document.write(time4 + "<br>");     // 输出：Mon Oct 12 2020 15:16:17 GMT+0800 (中国标准时间)

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

5、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的平方根

6、String对象

6.1、概述

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

String()：可以将基本数据类型字符串转换为String对象

Number()：可以将基本数据类型的数字转换为Number对象

Boolean()：可以将基本数据类型的布尔值转换为Boolean对象

但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果。

6.2、字符串属性

constructor属性：返回创建字符串对象的原型函数

var str = "木已成舟";
console.log(str.constructor);

length属性：可以用来获取字符串的长度

var str = "木已成舟";
console.log(str.length);

3.5.3、字符串方法

charAt()方法：该方法可以根据索引获取指定位置的字符

var str = "青青子衿，悠悠我心";
console.log(str.charAt(2));

charCodeAt()方法：该方法获取指定位置字符的字符编码（Unicode编码）

var str = "青青子衿，悠悠我心";
console.log(str.charCodeAt(3));

concat()方法：该方法可以用来连接两个或多个字符串

var str = "青青子衿，悠悠我心";
console.log(str.concat("  譬如朝露，去日苦多"));

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

var str = "青青子衿，悠悠我心";
console.log(str.indexOf("子"));
console.log(str.indexOf("火"));

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

var str = "青青子衿，悠悠我心";
console.log(str.lastIndexOf("子"));
console.log(str.lastIndexOf("火"));
console.log(str.lastIndexOf("子",1));

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

参数：

第一个参数：开始位置的索引（包括开始位置）

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

注意：也可以传递一个负数作为参数，负数的话将会从后边计算

var str = "青青子衿，悠悠我心";
console.log(str.slice(0,2));

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

参数：

第一个参数：开始截取位置的索引（包括开始位置）

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

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

var str = "青青子衿，悠悠我心";
console.log(str.substring(0,2));

substr()方法：该方法用来截取字符串

参数：

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

第二个参数：截取的长度

var str = "青青子衿，悠悠我心";
console.log(str.substr(0,2));

split()方法：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

var str = "青青子衿，悠悠我心";
console.log(str.split("，"));

toUpperCase()方法：将一个字符串转换为大写并返回

var str = "GoodLuck";
console.log(str.toUpperCase());

toLowerCase()方法：将一个字符串转换为小写并返回

var str = "GoodLuck";
console.log(str.toLowerCase());

7、RegExp对象

7.1、概述

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

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

7.2、创建正则对象

7.2.1、使用对象创建

匹配模式：

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

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

7.2.2、使用字面量创建

匹配模式：

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

注意：可以为一个正则表达式设置多个匹配模式，且顺序无所谓

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

7.3、正则进阶

//创建一个正则表达式，检查一个字符串中是否a或z或v
var reg = /a|z|v/i;
var str="Abced";
var result=reg.test(str);
console.log(result);
//创建一个正则表达式，检查一个字符串中是否有字母
//[a-z]：任意小写字母
//[A-Z]：任意大写字母
//[A-z]：任意字母
//[0-9]：任意数字
var reg = /[A-z]/i;
var str="Abced1123";
var result=reg.test(str);
console.log(result);
//创建一个正则表达式，检查一个字符串中是否含有 abc 或 adc 或 acc
var reg = /a[bdc]c/i;
var str="Abced1123";
var result=reg.test(str);
console.log(result);
//[^a-z]：除了任意小写字母
//[^A-Z]：除了任意大写字母
//[^A-z]：除了任意字母
//[^0-9]：除了任意数字
//创建一个正则表达式，检查一个字符串中是否除了数字还有其它字母
var reg = /[^0-9]/i;
var str="Abced1123";
var result=reg.test(str);
console.log(result);

7.4、正则方法

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

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

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

var str="11A2b4c2e3d1123";
var result=str.search(/[A-z]/);
console.log(result);

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

var str="11A2b4c2e3d1123";
var result=str.match(/[A-z]/ig);
console.log(result);

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

参数：

第一个参数：被替换的内容，可以接受一个正则表达式作为参数

第二个参数：新的内容

var str="11A2b4c2e3d1123";
var result=str.replace(/[A-z]/ig,"@");
console.log(result);

7.5、正则量词

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

{n} ：正好出现n次

{m,} ：出现m次及以上

{m,n} ：出现m-n次

+：至少一个，相当于{1,}

*：0个或多个，相当于{0,}

?：0个或1个，相当于{0,1}

var str = "abbc";

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

7.6、正则高阶

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

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

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

检查一个字符串中是否含有.和\就会使用转义字符

• \. ：表示.
• \\ ：表示\

注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替

var str = "a.bbca"+"\\";
var reg=/\\/;
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 ：除了单词边界

7.7、正则案例

7.7.1、检查手机号

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

7.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));