Java教程

JavaScript内置对象

本文主要是介绍JavaScript内置对象,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript内置对象

  • 1 Math对象
  • 2 日期对象
  • 3 数组对象
    • 3.1 数组类型检测
    • 3.2 数组的遍历
    • 3.3 添加或删除数组元素
    • 3.4 数组排序
    • 3.5 数组索引
    • 3.6 数组转换为字符串
    • 3.7 其他方法
  • 4 字符串对象
    • 4.1 字符串对象的使用
    • 4.2 默认属性
    • 4.3 根据字符返回位置
    • 4.4 根据位置返回字符
    • 4.5 字符串操作方法
  • 5 值类型和引用类型

1 Math对象

Math对象用来对数字进行与数学相关的运算,不需要实例化对象,可以直接使用其静态属性和静态方法,Math对象的常用属性和方法如下表。

成员功能
PI获取圆周率,结果为3.141592653589793
abs(x)获取x的绝对值,可传入普通数值或是用字符串表示的数值
max()获取所有参数中的最大值
min()获取所有参数中的最小值
pow(base, exponent)获取基数(base)的指数(exponent)次幂,即 baseexponent
sqrt(x)获取x的平方根
ceil(x)获取大于或等于x的最小整数,即向上取整
floor(x)获取小于或等于x的最大整数,即向下取整
round(x)获取x的四舍五入后的整数值
random()获取大于或等于0.0且小于1.0的随机值

max()和min()实例:

console.log(Math.max(1, 2, 3, 4, 5));//输出最大值
console.log(Math.min(1, 2, 3, 4, 5));//输出最小值

结果是:
5
1

pow(base, exponent)和sqrt()实例:

console.log(Math.pow(2, 3))//求2的3次方,8
console.log(Math.sqrt(4))//给4开根号,2

结果是:8 2

ceil()和floor()实例:

var m = 3.67;
console.log(Math.ceil(m));//获取大于等于m的最小整数,4
console.log(Math.floor(m));//获取小于等于m的最大整数,3

结果为:4 3

round()实例:

console.log(Math.round(3.45));//求四舍五入的整数值

结果为:3

random()实例:求0-10之间的随机整数

var k = Math.round(Math.random() * 10);//求0-10之间的随机整数
console.log(k);

【案例】猜数字游戏,随机输入一个数字,判断该数字是否和自动生成的数字相同,如果输入的数字大于生成的数字,提示“你猜大了”;反之,提示“你猜小了”,如果输入数字与生成数字相同,提示“猜对了”,并结束代码执行。

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
var random = getRandom(1, 10);
while (true) {
    var num = prompt("猜数字,范围在1-10之间");
    if (num > random) {
        alert("你猜大了");
    } else if (num < random) {
        alert("你猜小了");
    } else {
        alert("你猜对了");
        break;
    }
}

2 日期对象

JavaScript中的日期对象需要使用new Date()实例化对象才能使用,Date()是日期对象的构造函数。

Date()构造函数可以传入一些参数,示例代码如下:

// 方式1:没有参数
var date1 = new Date();
// 方式2:传入年、月、日、时、分、秒(月的范围是0~11)
var date2 = new Date(2021, 11, 19, 19, 46, 56);
// 方式3:用字符串表示日期和时间
var date3 = new Date('2019-10-16 10:57:56');

日期对象常用的get方法:

方法作用
getFullYear()获取表示年份的4位数字,如2021
getMonth()获取月份,范围0~11(0表示一月,1表示二月,依次类推)
getDate()获取月份中的某一天,范围1~31
getDay()获取星期,范围0~6(0表示星期日,1表示星期一,依次类推)
getHours()获取小时数,返回0~23
getMinutes()获取分钟数,范围0~59
getSeconds()获取秒数,范围0~59
getMilliseconds()获取毫秒数,范围0~999
getTime()获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数

示例:

var date1 = new Date();//实例化对象
console.log("今年是" + date1.getFullYear() + "年");//输出年份
console.log("本月是第" + (date1.getMonth() + 1) + "月");//输出月份
console.log("今天是本月第" + date1.getDate() + "天");//输出本月第几天
console.log("今天是星期" + (date1.getDay()));//输出星期
console.log("现在是"+date1.getHours()+"时");//输出小时数
console.log("现在是"+date1.getMinutes()+"分");//输出分钟数
console.log("现在是"+date1.getSeconds()+"秒");//输出秒数
console.log("现在是"+date1.getMilliseconds()+"毫秒");//输出毫秒数
console.log(date1.getTime());//输出从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数

在这里插入图片描述
日期对象的常用的set方法:

方法作用
setFullYear(value)设置年份
setMonth(value)设置月份
setDate(value)设置月份中的某一天
setHours(value)设置小时数
setMinutes(value)设置分钟数
setSeconds(value)设置秒数
setMilliseconds(value)设置毫秒数
setTime(value)通过从1970-01-01 00:00:00计时的毫秒数来设置时间

其他方法:

方法作用
toJSON()返回一个 JSON 格式字符串
toDateString()将日期转为字符
toLocaleDateString()将日期转换为本地日期格式的字符串

示例:

var d = new Date();
console.log(d.toJSON());
console.log(d.toDateString());
console.log(d.toLocaleDateString());

在这里插入图片描述
【案例】“三天打鱼,两天晒网”
假定2008-08-08是第一天晒网,请问今天是打鱼还是晒网?

var d1 = new Date(2008 - 08 - 08);
var d2 = new Date();
var s = d2.getTime() - d1.getTime();//得到今天距离2008年8月8日的毫秒数
var m = parseInt(s / 1000 / 3600 / 24);//得到今天距离2008年8月8日的天数
switch (m % 5) {
    case 0://第0天是打鱼第一天
    case 1: console.log("今天打鱼"); break;
    case 2:
    case 3:
    case 4: console.log("今天晒网"); break;
}

3 数组对象

3.1 数组类型检测

(1)数组类型检测的方法:
数组类型检测有两种常用的方式,分别是使用instanceof运算符和使用Array.isArray()方法。

var arr = [];
var obj = {};
// 第1种方式
console.log(arr instanceof Array);	// 输出结果:true
console.log(obj instanceof Array);	// 输出结果:false
// 第2种方式
console.log(Array.isArray(arr));	// 输出结果:true
console.log(Array.isArray(obj));	// 输出结果:false

3.2 数组的遍历

假设arr为一个数组:

1、使用for循环遍历

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

2、使用for…in遍历

for (var i in arr) {
    console.log(arr[i]);
}

3、使用for…of遍历

for (var i of arr) {
    console.log(i);
}

4、使用forEach遍历

arr.forEach(function (t) {
    console.log(t);
})

5、使用map遍历

arr.map(function (t) {
    console.log(t);
})

3.3 添加或删除数组元素

JavaScript数组对象提供了添加或删除元素的方法,可以实现在数组的末尾或开头添加新的数组元素,或在数组的末尾或开头移出数组元素。方法如下:

方法名功能描述返回值
push(参数…)数组末尾添加一个或多个元素,会修改原数组返回数组的新长度
unshift(参数1…)数组开头添加一个或多个元素,会修改原数组返回数组的新长度
pop()删除数组的最后一个元素,若是空数组则返回undefined,会修改原数组返回删除的元素的值
shift()删除数组的第一个元素,若是空数组则返回undefined,会修改原数组返回第一个元素的值

示例:

var arr = [2, 5, 7, 9, 3];
console.log(arr.push(1));//在数组末尾添加一个数,返回值为数组长度
console.log(arr);//输出该数组

结果是:
6
[ 2, 5, 7, 9, 3, 1 ]

var arr = [2, 5, 7, 9, 3];
console.log(arr.unshift(1));//在数组开头添加一个数,返回值为数组长度
console.log(arr);//输出该数组

结果是:
6
[ 1, 2, 5, 7, 9, 3 ]

var arr = [2, 5, 7, 9, 3];
console.log(arr.pop());//输出并删除数组的最后一个元素
console.log(arr);//输出该数组

结果是:
3
[ 2, 5, 7, 9 ]

var arr = [2, 5, 7, 9, 3];
console.log(arr.shift());//输出并删除数组的第一个元素
console.log(arr);//输出该数组

结果是:
2
[ 5, 7, 9, 3 ]

【案例】筛选数组
要求在包含工资的数组中,剔除工资达到2000或以上的数据,把小于2000的数重新放到新的数组里面。

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];//定义一个新数组用来存放2000以下的工资
for (var i = 0; i < arr.length; i++) {//便利该数组
    if (arr[i] < 2000) {//如果遍历到某个数小于2000
        newArr.push(arr[i]);//把这个数添加到新数组中
    }
}
console.log(newArr);//输出新数组

结果是:[ 1500, 1200, 1800 ]

3.4 数组排序

JavaScript数组对象提供了数组排序的方法,可以实现数组元素排序或者颠倒数组元素的顺序等。排序方法如下:

方法功能描述
reverse()颠倒数组中元素的位置,该方法会改变原数组,返回新数组的长度。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列,由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。
sort()对数组的元素进行排序,该方法会改变原数组,返回新数组的长度

实例:

var arr = [4, 6, 8, 32, 2, 7, 9];
console.log(arr.sort());

结果是:[ 2, 32, 4, 6, 7, 8, 9 ]

var arr = [4, 6, 8, 32, 2, 7, 9];
console.log(arr.reverse());

结果是:[ 9, 7, 2, 32, 8, 6, 4 ]

3.5 数组索引

在开发中,若要查找指定的元素在数组中的位置,可以利用Array对象提供的检索方法。检索方法如下:

方法功能描述
indexOf()返回在数组中可以找到给定值的第一个索引,如果不存在,则返回-1
lastIndexOf()返回指定元素在数组中的最后一个的索引,如果不存在则返回-1

注意:默认都是从指定数组索引的位置开始检索,并且检索方式与运算符“===”相同,即只有全等时才会返回比较成功的结果。

示例:

var arr = [45, 67, 8, 23, 67, 9, 67];
console.log(arr.indexOf(67));//返回67所在位置的第一个索引
console.log(arr.lastIndexOf(67));//返回67所在位置的最后一个索引

结果为:1 6

【案例】数组去除重复元素
案例需求:要求在一组数据中,去除重复的元素。

function unique(arr) {
    var newArr = [];//设置一个空数组存放不重复的数字
    for (var i = 0; i < arr.length; i++) {//遍历传入的数组
        if (newArr.indexOf(arr[i]) === -1) {//如果新数组中没有遍历到的数字,即索引为-1
            newArr.push(arr[i]);//将这个数字添加到新数组中
        }
    }
    return newArr;//返回新数组
}
var arr = [45, 67, 8, 23, 67, 9, 67];
console.log(unique(arr));

结果为:[ 45, 67, 8, 23, 9 ]

3.6 数组转换为字符串

在开发中,可以利用数组对象的join()和toString()方法,将数组转换为字符串。方法如下:

方法功能描述
toString()把数组转换为字符串,逗号分隔每一项
join(‘分隔符’)将数组的所有元素连接到一个字符串中

示例:

// 使用toString()
var arr = ['a', 'b', 'c'];
console.log(arr.toString());// 输出结果:a,b,c
// 使用join()
console.log(arr.join());// 输出结果:a,b,c
console.log(arr.join(''));// 输出结果:abc
console.log(arr.join('-'));// 输出结果:a-b-c

结果为:
a,b,c
a,b,c
abc
a-b-c

3.7 其他方法

JavaScript还提供了很多其他常用的数组方法。例如,填充数组、连接数组、截取数组元素等。方法如下:

方法功能描述
fill(value,start,end)用一个固定值填充数组中指定下标范围内的全部元素
splice()数组删除,参数为splice(第几个开始, 要删除个数),返回被删除项目的新数组
slice()数组截取,参数为slice(begin, end),返回被截取项目的新数组
concat()连接两个或多个数组,不影响原数组,返回一个新数组

注意:slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后皆会对原数组产生影响。

示例:

var arr = [1, 2, 3, 4];
console.log(arr.fill(0, 2, 4));//从2到4填充为0

结果为:[ 1, 2, 0, 0 ]

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.splice(2, 4));//删除从第2个开始(不包括2)后的4个数
console.log(arr);//输出删除数字后的数组

结果为:
[ 3, 4, 5, 6 ]
[ 1, 2, 7, 8 ]

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.slice(2, 5));//截取从2(不包括2)到5开始的数组

结果为:[ 3, 4, 5 ]

var arr1 = [1, 2, 3, 4];
var arr2 = [9, 8, 7, 6];
console.log(arr1.concat(arr2));

结果为:[ 1, 2, 3, 4, 9, 8, 7, 6 ]

4 字符串对象

4.1 字符串对象的使用

1、直接创建

var 变量名 = "字符串";

2、通过String对象创建

var 变量名 = new String("字符串");

4.2 默认属性

字符串默认的属性:length,用来记录字符串的长度,使用方式:

字符串变量名.length

示例:

var str = new String("橘猫吃不胖");
console.log(str.length);

结果是5

4.3 根据字符返回位置

字符串对象提供了用于检索元素的属性和方法,字符串对象的常用属性和方法如下:

方法功能描述
indexOf(searchValue)获取searchValue在字符串中首次出现的位置若返回-1,表示未找到value
lastIndexOf(searchValue)获取searchValue在字符串中最后出现的位置

示例:

var str = new String("橘猫吃不胖");
console.log(str.indexOf("不"));

结果是3

var str = new String("橘猫吃不胖");
console.log(str.indexOf("不1"));

结果是-1

如果结果是-1,表明未找到value

var str = new String("橘猫吃不胖橘猫吃不胖");
console.log(str.lastIndexOf("吃"));

结果是7

【案例】要求在一组字符串中,找到所有指定元素出现的位置以及次数。字符串为 ’ Hello World, Hello JavaScript '。

var str = "Hello World!Hello JavaScript!";
var index = str.indexOf("o");//找到o第一次出现的位置
var num = 0;//定义一个计数器num为0
while (index != -1) {
    console.log(index);//
    index = str.indexOf("o", index + 1);//继续找下一个o
    num++;
}
console.log("出现的次数", num);

在这里插入图片描述

4.4 根据位置返回字符

字符串对象提供了用于获取字符串中的某一个字符的方法。方法如下:

方法功能描述
charAt(index)获取index位置的字符,位置从0开始计算
charCodeAt(index)获取index位置的字符的ASCII码
str[index]获取指定位置处的字符(HTML5新增),格式为:对象名.属性名或者对象名[属性名]

常用的ASCII如下:

元素ASCII码
048
a97
A65
空格32

示例:

var str = "Hello World!Hello JavaScript!";
console.log(str.charAt("9"));

结果是:l

var str = "Hello World!Hello JavaScript!";
console.log(str.charCodeAt(9))

108
【案例】统计出现最多的字符和次数

var str = "Apple";
var o = {};//定义一个空对象
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i);//获取i位置的字符,并赋值给chars
    if (o[chars]) {//表示对象o中存在chars
        o[chars]++;
    } else {
        o[chars] = 1;
    }
}
console.log(o);

结果为:{ A: 1, p: 2, l: 1, e: 1 }

4.5 字符串操作方法

字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。字符串对象的常用属性和方法如下:

方法作用
concat(str1, str2, str3…)连接多个字符串
slice(start,[ end])截取从start位置到end位置之间的子字符串,若没有参数end,则截取start到串末尾的字符串,可以接受复数
substring(start[, end])截取从start位置到end位置之间的一个子字符串,基本和slice相同,但是不接收负值
substr(start[, length])截取从start位置开始到length长度的子字符串
toLowerCase()获取字符串的小写形式
toUpperCase()获取字符串的大写形式
split([separator[, limit])使用separator分隔符将字符串分隔成数组,limit用于限制数量
replace(str1, str2)使用str2替换字符串中的str1,返回替换结果,只会替换第一个字符

concat示例:

var s1 = "abc";
var s2 = "def";
var s3 = "123";
console.log(s1.concat(s2, s3));

结果为:abcdef123

slice示例:

var str="javascript程序设计";
console.log(str.slice(4));//截取从索引为4到串末尾的字符
console.log(str.slice(4, 9));//截取4至9之间的字符
console.log(str.slice(-5,-3));

script程序设计
scrip
t程

substr示例:

var str = "javascript程序设计";
console.log(str.substr(0,10));

javascript

toLowerCase()示例:

var str = "Javascript程序设计";
console.log(str.toLowerCase());

javascript程序设计

toUpperCase()示例:

var str = "javascript程序设计";
console.log(str.toUpperCase());

JAVASCRIPT程序设计

split()示例:

var phone = "135-1234-5678";
var arr = phone.split("-");
arr.forEach(elem => {
    console.log(elem);
})

在这里插入图片描述
replace示例:

var str = "javascript程序设计";
console.log(str.replace("java", "Action"));

Actionscript程序设计

【案例】判断用户名是否合法。用户名长度在3~10范围内,不能出现敏感词admin的任何大小写形式。

var username = prompt("请输入用户名");
if (username.length < 3 || username.length > 10) {
    alert("用户名的长度在3~10之间");
} else if (username.toLowerCase().indexOf("admin") !== -1) {
    alert("用户名中不能包含敏感词:admin");
} else {
    alert("用户名合法");
}

5 值类型和引用类型

在JavaScript中,简单数据类型(如字符串型、数字型、布尔型、undefined、null)又称为值类型,复杂数据类型(对象)又称为引用类型。

引用类型的特点是,变量中保存的仅仅是一个引用的地址,当对变量进行赋值时,并不是将对象复制了一份,而是将两个变量指向了同一个对象的引用。

示例:

// 创建一个对象,并通过变量obj1保存对象的引用
var obj1 = { name: '小明', age: 18 };
// 此时并没有复制对象,而是obj2和obj1两个变量引用了同一个对象
var obj2 = obj1;
// 比较两个变量是否引用同一个对象
console.log(obj2 === obj1);  // 输出结果:true
// 通过obj2修改对象的属性
obj2.name = '小红';
// 通过obj1访问对象的name属性
console.log(obj1.name);	    // 输出结果:小红

结果为:
true
小红

上述代码运行后,obj1和obj2两个变量引用了同一个对象,此时,无论是使用obj1操作对象还是使用obj2操作对象,实际操作的都是同一个对象。如下图:
在这里插入图片描述
当obj1和obj2两个变量指向了同一个对象后,如果给其中一个变量(如obj1)重新赋值为其他对象,或者重新赋值为其他值,则obj1将不再引用原来的对象,但obj2仍然在引用原来的对象。

var obj1 = { name: '小明', age: 18 };
var obj2 = obj1;
// obj1指向了一个新创建的对象
obj1 = { name: '小红', age: 17 };
// obj2仍然指向原来的对象
console.log(obj2.name);	 // 输出结果:小明

结果为:小明

注意:
当一个对象只被一个变量引用的时候,如果这个变量又被重新赋值,则该对象就会变成没有任何变量引用的情况,这时候就会由JavaScript的垃圾回收机制自动释放。

如果在函数的参数中修改对象的属性或方法,则在函数外面通过引用这个对象的变量访问时的结果也是修改后的。

function change(obj) {
    obj.name = '小红';	// 在函数内修改了对象的属性
}
var stu = { name: '小明', age: 18 };
change(stu);
console.log(stu.name);	// 输出结果:小红

结果是:小红

这篇关于JavaScript内置对象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!