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; } }
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; }
(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
假设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); })
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 ]
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 ]
在开发中,若要查找指定的元素在数组中的位置,可以利用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 ]
在开发中,可以利用数组对象的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
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 ]
1、直接创建
var 变量名 = "字符串";
2、通过String对象创建
var 变量名 = new String("字符串");
字符串默认的属性:length,用来记录字符串的长度,使用方式:
字符串变量名.length
示例:
var str = new String("橘猫吃不胖"); console.log(str.length);
结果是5
字符串对象提供了用于检索元素的属性和方法,字符串对象的常用属性和方法如下:
方法 | 功能描述 |
---|---|
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);
字符串对象提供了用于获取字符串中的某一个字符的方法。方法如下:
方法 | 功能描述 |
---|---|
charAt(index) | 获取index位置的字符,位置从0开始计算 |
charCodeAt(index) | 获取index位置的字符的ASCII码 |
str[index] | 获取指定位置处的字符(HTML5新增),格式为:对象名.属性名 或者对象名[属性名] |
常用的ASCII如下:
元素 | ASCII码 |
---|---|
0 | 48 |
a | 97 |
A | 65 |
空格 | 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 }
字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。字符串对象的常用属性和方法如下:
方法 | 作用 |
---|---|
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("用户名合法"); }
在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); // 输出结果:小红
结果是:小红